Migrate Frontend codebase to Typescript and Vite by royallsilwallz · Pull Request #6715 · hotosm/tasking-manager

royallsilwallz · 2025-01-25T19:36:58Z

What type of PR is this?

Related Issue

Describe this PR

This PR includes the following changes -

Javascript --> Typescript
Craco --> Vite
Jest --> Vitest

Led by - @JoltCode 🚀 ✨

for more information, see https://pre-commit.ci

… components!!!!

…though with errors

…ut errors now!

JoltCode · 2025-01-25T20:32:31Z

Awesome! 👍

spwoodcock · 2025-01-25T21:41:31Z

This is fantabulous - seriously great work! 🎆

- Create `useTypedSelector` & `useTypedDispatch` hooks for typescript support - Replace all files with the created hooks

for more information, see https://pre-commit.ci

spwoodcock · 2025-01-26T20:08:06Z

The complaints from SonarCloud are likely not new, but simply showing because we touch a lot of files here right?

My thinking is its nothing to worry about, but would love to hear if @royallsilwallz has any insight?

At the end of the day, I think code quality concerns are bottom of the list - functioning code with adequate tests is more important to me 😄

JoltCode · 2025-01-26T22:17:02Z

The complaints from SonarCloud are likely not new, but simply showing because we touch a lot of files here right?

My thinking is its nothing to worry about, but would love to hear if @royallsilwallz has any insight?

At the end of the day, I think code quality concerns are bottom of the list - functioning code with adequate tests is more important to me 😄

Yep, I think most of them were already there, but perhaps dismissed? Since the files have been changed from .js -> .ts, and perhaps because we've touched the problem areas, it's reactivated the warnings?

Yep, for now, I think we should ignore them, and address them shortly in a future PR!

spwoodcock · 2025-01-26T22:22:06Z

The complaints from SonarCloud are likely not new, but simply showing because we touch a lot of files here right?

My thinking is its nothing to worry about, but would love to hear if @royallsilwallz has any insight?

At the end of the day, I think code quality concerns are bottom of the list - functioning code with adequate tests is more important to me 😄

Yep, I think most of them were already there, but perhaps dismissed? Since the files have been changed from .js -> .ts, and perhaps because we've touched the problem areas, it's reactivated the warnings?

Yep, for now, I think we should ignore them, and address them shortly in a future PR!

Agree!

I think its because the files have been edited, the checking is triggered, as you say.

So its nothing new introduced, just old issues reflagged (my hunch at least)

royallsilwallz · 2025-01-27T07:23:41Z

Yes @spwoodcock and @JoltCode , you guys are correct!
We have been ignoring SonarCloud issues in TM, for the frontend at least. 🥹

With this PR, we will add strict eslint & prettier lint configs so that we have consistent development setup for all.
Also, we will be fixing lint errors leaving the errors count close to zero. That might help a lot.

Let's see how it goes! 🎯 😃

- Upgrade eslint to v9 - Upgrade prettier to v3 - Setup config files with latest standards

- Address `no-unused-vars` lint errors

typescript-vite: fix(frontend/tests): remove readdition of server-handlers.js, rename ohsome url constant var

Resolve merge conflicts with develop

sonarqubecloud · 2025-02-23T17:34:55Z

Quality Gate failed

Failed conditions
21 Security Hotspots
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

JoltCode and others added 30 commits December 17, 2024 13:04

chore: fix merge conflicts

9fcc5b9

chore: fix merge conflicts 2

b06c8d4

chore: fix more merge conflicts, switch from yarn to pnpm

81e562b

chore(frontend/redux): migrate rest of reducers to TypeScript

356c4fc

chore(frontend/utils): migrate safe_storage to TypeScript

5930c59

chore(frontend): fix merge conflicts, more migrations

aa7491d

fix,chore(frontend/redux): fix reducers combined return type

ed76f93

chore(frontend): migrate footer to TS

08ba00b

chore(frontend): more ts migrations

e89e01d

chore(frontned): more TS migrations :D

ca18b73

chore(frontend): more TS Migrations!

a8993c4

chore(frontend): hooks and utils migrations to TS

c0587f3

chore(frontend): mostly comments and contributions TS migrations

6027ac6

chore(frontend): migrate components and utils to TS

ba2315c

[pre-commit.ci] auto fixes from pre-commit.com hooks

dddd6df

for more information, see https://pre-commit.ci

chore(frontend): more migrations to TS

633bc02

chore(frontend): TS Migrations, allow JS in tsconfig

e3c1bea

chore(frontend): migrate loads of svg icons to TS, fix vite config

f86e575

chore(frontend): migrate more svg icons to TS

913e5d3

chore(frontend): migrate more svgIcons to TS

7930831

chore(frontend/svgIcons): migrate final svgIcons to TS and functional…

e78eab2

… components!!!!

chore(frontend): lots of TS Migrations - base site now rendering - al…

bfd5753

…though with errors

fix(vite): replace all REACT_APP env vars with vite

9c68ff4

feat(frontend/svgIcons): convert remaining icons to tsx

edaa595

feat,chore(frontend): move lots of components to jsx - building witho…

5c2e511

…ut errors now!

fix(package): react type versions

8071b53

chore(frontend): add todo

8abd578

fix(frontend): make most of remaining files work

6bd7b55

chore(frontend): move to vitest

93ff019

chore(frontend/testing): more test file renames, test fixes

147a399

github-actions Bot added scope: frontend scope: infrastructure labels Jan 25, 2025

royallsilwallz requested review from JoltCode and spwoodcock January 25, 2025 19:37

royallsilwallz and others added 5 commits January 26, 2025 18:18

feat: configure import path aliases for folders

3d6da3d

refactor: setup typescript support for useSelector & useDispatch

65c845e

- Create `useTypedSelector` & `useTypedDispatch` hooks for typescript support - Replace all files with the created hooks

fix: resolve test cases failure due to import path aliases

6deb561

chore: use vite-tsconfig-paths for reducing code duplication

b452cdf

[pre-commit.ci] auto fixes from pre-commit.com hooks

a54c29f

for more information, see https://pre-commit.ci

royallsilwallz added the type: enhancement Improving an existing functionality label Jan 26, 2025

royallsilwallz added 5 commits January 27, 2025 14:26

chore(frontend): upgrade and setup eslint & prettier configs

fd68e19

- Upgrade eslint to v9 - Upgrade prettier to v3 - Setup config files with latest standards

chore(frontend): run yarn lint --fix

620a379

fix(frontend): resolve eslint lint errors

8a3c725

- Address `no-unused-vars` lint errors

docs: create TODOS.md for keeping todo tasks

56195e0

fix(frontend): fix props destructure issue

a076ed6

royallsilwallz force-pushed the typescript-vite branch from a076ed6 to 255a641 Compare January 28, 2025 08:37

royallsilwallz and others added 3 commits January 28, 2025 14:38

fix(frontend): resolve merge conflicts with develop

f082d5d

fix(frontend/tests): remove js version of server handlers file

8b2b707

Merge pull request #6721 from JoltCode/typescript-vite

3976379

typescript-vite: fix(frontend/tests): remove readdition of server-handlers.js, rename ohsome url constant var

spwoodcock mentioned this pull request Feb 3, 2025

Replace yarn package manager with pnpm hotosm/drone-tm#462

Closed

royallsilwallz mentioned this pull request Feb 9, 2025

chore(frontend): migrate to TypeScript and Vite #6534

Merged

3 tasks

royallsilwallz and others added 2 commits February 23, 2025 22:18

chore: merge develop branch

206984c

Merge pull request #6760 from hotosm/typescript-vite-changes

77094f9

Resolve merge conflicts with develop

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Migrate Frontend codebase to Typescript and Vite#6715

Migrate Frontend codebase to Typescript and Vite#6715
royallsilwallz wants to merge 132 commits into
developfrom
typescript-vite

royallsilwallz commented Jan 25, 2025 •

edited

Loading

Uh oh!

JoltCode commented Jan 25, 2025

Uh oh!

spwoodcock commented Jan 25, 2025

Uh oh!

spwoodcock commented Jan 26, 2025

Uh oh!

JoltCode commented Jan 26, 2025

Uh oh!

spwoodcock commented Jan 26, 2025

Uh oh!

royallsilwallz commented Jan 27, 2025 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Feb 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

royallsilwallz commented Jan 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What type of PR is this?

Related Issue

Describe this PR

Uh oh!

JoltCode commented Jan 25, 2025

Uh oh!

spwoodcock commented Jan 25, 2025

Uh oh!

spwoodcock commented Jan 26, 2025

Uh oh!

JoltCode commented Jan 26, 2025

Uh oh!

spwoodcock commented Jan 26, 2025

Uh oh!

royallsilwallz commented Jan 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud Bot commented Feb 23, 2025

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

royallsilwallz commented Jan 25, 2025 •

edited

Loading

royallsilwallz commented Jan 27, 2025 •

edited

Loading