Flow to TypeScript conversion

[saulipurhonen]

Description

Project wide conversion from Flow to TypeScript.

Related issues

Closes #448

Type of change

• New feature (non-breaking change which adds functionality)

Changes Made

• TS configurations (in eslintrc.json and tsconfig.json)
• ESLint configurations with TS
• Converted files to .ts and .tsx extensions
• Installed necessary types
• Use redux useSelector and useDispatch as custom typed methods (useAppSelector, useAppDispatch)
• Module augmentations for MUI Theme and Palette to enable custom properties
• Improved types throughout project tree
• Removed Flow related configurations, including workflow for static types check. This is handled via eslint
• Cypress TS configuration
• Introduced types for custom Cypress commands
• Updated README.md
• Introduced TSC check in Husky pre-commit hook and GitHub Actions workflow

Testing

• Tests do not apply

[blankdots]

a comment while i review this, is it possible or useful to use the tsc (https://www.typescriptlang.org/docs/handbook/compiler-options.html) to do typechecks e.g. https://github.com/typescript-eslint/typescript-eslint/blob/main/package.json#L48 so that we can implement that as part of a github action ?

[saulipurhonen]

a comment while i review this, is it possible or useful to use the tsc (https://www.typescriptlang.org/docs/handbook/compiler-options.html) to do typechecks e.g. https://github.com/typescript-eslint/typescript-eslint/blob/main/package.json#L48 so that we can implement that as part of a github action ?

I think this a great idea and in addition should be added to Husky pre-commit hooks. I'll try to suggest both workflow pre-commit hook and GH action workflow into this PR.

[saulipurhonen]

a comment while i review this, is it possible or useful to use the tsc (https://www.typescriptlang.org/docs/handbook/compiler-options.html) to do typechecks e.g. https://github.com/typescript-eslint/typescript-eslint/blob/main/package.json#L48 so that we can implement that as part of a github action ?

I think this a great idea and in addition should be added to Husky pre-commit hooks. I'll try to suggest both workflow pre-commit hook and GH action workflow into this PR.

Husky pre-commit hook and GH Actions workflow now introduced.

[hannyle]

Looks very good to me!

I still have a question: Why do we need to put dispatch as [dispatch] in useEffect, for e.g. in App.tsx, instead of [ ] as usual ? Any documents regarding to this ?

[saulipurhonen]

I still have a question: Why do we need to put dispatch as [dispatch] in useEffect, for e.g. in App.tsx, instead of [ ] as usual ? Any documents regarding to this ?

Good call.

Empty second arguments on useEffect Hook is against react-hooks/exhaustive-deps eslint rule. In recommended eslint configuration we'd have this rule to warn on improperly used hooks. See Hooks rules.

I had this rule configured at the beginning of conversion (and eslint suggested fix on adding dispatch as second argument for useEffect hook in this case) but I decided to leave it off at the moment to help finish the conversion faster.

Edit: Added link to hooks rules

[blankdots]

there are a lot of types as any, but I assume we can revisit that.

[saulipurhonen]

there are a lot of types as any, but I assume we can revisit that.

This was on purpose to save time. I think we could introduce eslint rule no-explicit-any and type all instances of any. This however can be time consuming and I suggest this to be done on different PR.

[blankdots]

This was on purpose to save time. I think we could introduce eslint rule no-explicit-any and type all instances of any. This however can be time consuming and I suggest this to be done on different PR.

that what is what i implied as well.

also sry did not realised me merging the dependencies cause package lock to get conflicts

[saulipurhonen]

also sry did not realised me merging the dependencies cause package lock to get conflicts

No prob.

[blankdots]

I continued on this PR as established with @saulipurhonen in RC

[blankdots]

seems pressing the Submit Study button does not work for some reason 🤷‍♂️

FormSelectField seem to be broken

[hannyle]

seems pressing the Submit Study button does not work for some reason 🤷‍♂️

FormSelectField seem to be broken

--> Fixed for FormSelectField, the function responsible for changing fieldValue was broken in this branch

The PR is in quite a good shape now and can be merged. There are still some issues left as mentioned: types as any, and enable eslint rule react-hooks/exhaustive-deps again, but I think this could be done separately in another PR.

[blankdots]

then I will click merge and we can see what happens.