From 5c2e51131db6a549e83fb63c9e59c9f66fa860a9 Mon Sep 17 00:00:00 2001
From: JoltCode <joe@joecc.dev>
Date: Wed, 18 Dec 2024 22:25:17 +0000
Subject: [PATCH] feat,chore(frontend): move lots of components to jsx -
 building without errors now!

---
 frontend/package.json                         |  2 +
 frontend/pnpm-lock.yaml                       | 45 +++++++++++++++++++
 .../{basemapMenu.js => basemapMenu.jsx}       |  0
 frontend/src/components/button.tsx            | 16 ++-----
 .../{checkCircle.js => checkCircle.jsx}       |  2 +-
 frontend/src/components/{code.js => code.jsx} |  0
 .../src/components/{editor.js => editor.jsx}  |  0
 frontend/src/components/header/index.tsx      | 28 ++++++------
 .../{contactForm.js => contactForm.jsx}       |  0
 ...aturedProjects.js => featuredProjects.jsx} |  2 +-
 .../interests/{index.js => index.jsx}         |  0
 .../licenses/{index.js => index.jsx}          |  0
 ...Placeholder.js => licensesPlaceholder.jsx} |  0
 .../{mappingLevel.js => mappingLevel.jsx}     |  0
 .../{mappingTypes.js => mappingTypes.jsx}     |  2 +-
 frontend/src/components/{menu.js => menu.jsx} |  2 +-
 ...ributionsGrid.js => contributionsGrid.jsx} |  0
 ...onsHeatmap.js => contributionsHeatmap.jsx} |  0
 .../{groupMembers.js => groupMembers.jsx}     |  0
 .../{messages.js => messages.ts}              |  0
 .../{overview.js => overview.jsx}             |  0
 ...eAreaStats.js => projectTypeAreaStats.jsx} |  0
 ...ganization.js => swipesByOrganization.jsx} |  0
 ...ProjectType.js => swipesByProjectType.jsx} |  0
 ...tributing.js => timeSpentContributing.jsx} |  0
 ...yDay.js => timeSpentContributingByDay.jsx} |  0
 ...currentProjects.js => currentProjects.jsx} |  0
 .../{customDropdown.js => customDropdown.jsx} |  0
 .../{leaderboard.js => leaderboard.jsx}       |  0
 .../partners/{messages.js => messages.ts}     |  0
 .../partners/{partners.js => partners.jsx}    |  0
 ...rtnersActivity.js => partnersActivity.jsx} |  0
 ...rsProgresBar.js => partnersProgresBar.jsx} |  0
 ...nersResources.js => partnersResources.jsx} |  0
 .../{partnersStats.js => partnersStats.jsx}   |  2 +-
 .../src/components/{portal.js => portal.jsx}  |  0
 .../{progressBar.js => progressBar.jsx}       |  0
 .../{dueDateBox.js => dueDateBox.jsx}         |  2 +-
 .../projectCard/{messages.js => messages.ts}  |  0
 ...ardPlaceholder.js => nCardPlaceholder.jsx} |  0
 .../{priorityBox.js => priorityBox.jsx}       |  2 +-
 .../{projectCard.js => projectCard.jsx}       |  4 +-
 ...tProgressBar.js => projectProgressBar.jsx} |  2 +-
 ...leUploadErrors.js => fileUploadErrors.jsx} |  0
 .../projectCreate/{index.js => index.jsx}     |  0
 ...tCreationMap.js => projectCreationMap.jsx} |  0
 ...eckBox.js => projectsAOILayerCheckBox.jsx} |  0
 .../projectCreate/{review.js => review.jsx}   |  0
 .../projectCreate/{setAOI.js => setAOI.jsx}   |  0
 .../{setTaskSizes.js => setTaskSizes.jsx}     |  0
 ...t.js => projectsAOILayerCheckBox.test.jsx} |  0
 ...askSizes.test.js => setTaskSizes.test.jsx} |  0
 .../{trimProject.js => trimProject.jsx}       |  0
 ...gProjectTeaser.js => bigProjectTeaser.jsx} |  2 +-
 ...downloadButtons.js => downloadButtons.jsx} |  4 +-
 ...downloadOsmData.js => downloadOsmData.jsx} |  0
 .../{favorites.js => favorites.jsx}           |  0
 .../{fileFormatCard.js => fileFormatCard.jsx} |  0
 .../projectDetail/{footer.js => footer.jsx}   |  0
 .../projectDetail/{header.js => header.jsx}   |  6 +--
 .../projectDetail/{index.js => index.jsx}     |  0
 .../{infoPanel.js => infoPanel.jsx}           |  2 +-
 .../{liveViewButton.js => liveViewButton.jsx} |  0
 .../{osmchaButton.js => osmchaButton.jsx}     |  2 +-
 .../{permissionBox.js => permissionBox.jsx}   |  2 +-
 ...rojectError.js => privateProjectError.jsx} |  0
 ...holder.js => projectDetailPlaceholder.jsx} |  0
 ...ndComments.js => questionsAndComments.jsx} |  2 +-
 .../{shareButton.js => shareButton.jsx}       |  2 +-
 ...similarProjects.js => similarProjects.jsx} |  0
 ...aser.test.js => bigProjectTeaser.test.jsx} |  0
 ...ttons.test.js => downloadButtons.test.jsx} |  0
 .../{favorites.test.js => favorites.test.jsx} |  0
 .../tests/{footer.test.js => footer.test.jsx} |  0
 .../tests/{header.test.js => header.test.jsx} |  0
 .../{infoPanel.test.js => infoPanel.test.jsx} |  0
 ...haButton.test.js => osmchaButton.test.jsx} |  0
 ...sionBox.test.js => permissionBox.test.jsx} |  0
 ...r.test.js => privateProjectError.test.jsx} |  0
 ....test.js => questionsAndComments.test.jsx} |  0
 ...areButton.test.js => shareButton.test.jsx} |  0
 ...jects.test.js => similarProjects.test.jsx} |  0
 .../{statusBox.test.js => statusBox.test.jsx} |  0
 ...lityBox.test.js => visibilityBox.test.jsx} |  0
 .../{visibilityBox.js => visibilityBox.jsx}   |  2 +-
 .../{actionsForm.js => actionsForm.jsx}       | 16 +++----
 ...stomEditorForm.js => customEditorForm.jsx} |  0
 ...descriptionForm.js => descriptionForm.jsx} |  0
 .../{extraIdParams.js => extraIdParams.jsx}   |  0
 .../{imageryForm.js => imageryForm.jsx}       |  0
 .../{inputLocale.js => inputLocale.jsx}       |  0
 ...structionsForm.js => instructionsForm.jsx} |  0
 .../{localeOption.js => localeOption.jsx}     |  0
 .../projectEdit/{messages.js => messages.jsx} |  0
 .../{metadataForm.js => metadataForm.jsx}     |  0
 .../{partnersForm.js => partnersForm.jsx}     |  0
 ...partnersListing.js => partnersListing.jsx} |  0
 ...rmissionsBlock.js => permissionsBlock.jsx} |  2 +-
 ...permissionsForm.js => permissionsForm.jsx} |  0
 ...rityAreasForm.js => priorityAreasForm.jsx} |  0
 ...ojectInterests.js => projectInterests.jsx} |  0
 .../{settingsForm.js => settingsForm.jsx}     |  0
 .../{teamSelect.js => teamSelect.jsx}         |  0
 .../{completion.js => completion.jsx}         |  2 +-
 ...ributorsStats.js => contributorsStats.jsx} |  0
 .../projectStats/{edits.js => edits.jsx}      |  0
 .../projectStats/{messages.js => messages.ts} |  0
 .../{taskStatus.js => taskStatus.jsx}         |  0
 .../{timeStats.js => timeStats.jsx}           |  0
 .../{downloadAsCSV.js => downloadAsCSV.jsx}   |  0
 ...jectsTable.js => exploreProjectsTable.jsx} |  0
 frontend/src/components/projects/list.jsx     |  2 +-
 .../src/components/projects/myProjectNav.jsx  | 10 +----
 ...lterSelect.js => partnersFilterSelect.jsx} |  0
 .../{projectsMap.js => projectsMap.jsx}       |  0
 .../{rapidEditor.js => rapidEditor.jsx}       |  0
 .../components/{redirect.js => redirect.jsx}  |  0
 .../{statsCard.js => statsCard.jsx}           |  2 +-
 .../src/components/svgIcons/fullscreen.js     | 14 ------
 .../src/components/svgIcons/fullscreen.tsx    | 10 +++++
 frontend/src/components/svgIcons/grid.tsx     | 45 ++++++++++++++++++-
 .../taskSelection/{action.js => action.jsx}   |  0
 .../{actionSidebars.js => actionSidebars.jsx} | 16 +++----
 .../{actionTabsNav.js => actionTabsNav.jsx}   |  0
 ...angesetComment.js => changesetComment.jsx} |  2 +-
 .../{contributions.js => contributions.jsx}   |  2 +-
 .../{extendSession.js => extendSession.jsx}   |  0
 .../taskSelection/{footer.js => footer.jsx}   |  0
 .../taskSelection/{imagery.js => imagery.jsx} |  2 +-
 .../{instructions.js => instructions.jsx}     |  2 +-
 .../taskSelection/{legend.js => legend.jsx}   |  0
 .../{lockedTasks.js => lockedTasks.jsx}       | 18 ++++----
 .../taskSelection/{map.js => map.jsx}         |  0
 ...Histories.js => multipleTaskHistories.jsx} |  0
 ...ErrorModal.js => permissionErrorModal.jsx} |  2 +-
 .../{resourcesTab.js => resourcesTab.jsx}     |  0
 .../{campaigns.js => campaigns.jsx}           |  4 +-
 ...laceholder.js => campaignsPlaceholder.jsx} |  0
 .../{editMode.js => editMode.jsx}             |  2 +-
 .../{featureStats.js => featureStats.jsx}     |  0
 ...lert.js => leaveTeamConfirmationAlert.jsx} |  0
 .../teamsAndOrgs/{members.js => members.jsx}  |  4 +-
 .../teamsAndOrgs/{menu.js => menu.jsx}        |  2 +-
 .../{messageMembers.js => messageMembers.jsx} |  2 +-
 .../teamsAndOrgs/{messages.js => messages.ts} |  0
 .../{newUsersStats.js => newUsersStats.jsx}   |  0
 .../{orgUsageLevel.js => orgUsageLevel.jsx}   |  0
 ...tStats.js => organisationProjectStats.jsx} |  0
 .../{organisations.js => organisations.jsx}   |  4 +-
 ...holder.js => organisationsPlaceholder.jsx} |  0
 .../{projects.js => projects.jsx}             |  2 +-
 ...gTasksStats.js => remainingTasksStats.jsx} |  0
 .../{tasksStats.js => tasksStats.jsx}         |  0
 ...tasksStatsChart.js => tasksStatsChart.jsx} |  0
 ...sStatsSummary.js => tasksStatsSummary.jsx} |  0
 .../teamsAndOrgs/{teams.js => teams.jsx}      | 10 ++---
 ...amsPlaceholder.js => teamsPlaceholder.jsx} |  0
 .../{completeness.js => completeness.jsx}     |  4 +-
 .../user/{content.js => content.jsx}          |  2 +-
 .../forms/{customField.js => customField.jsx} |  0
 .../forms/{interests.js => interests.jsx}     |  0
 .../{notifications.js => notifications.jsx}   |  0
 .../user/forms/{settings.js => settings.jsx}  |  0
 ...chToggleField.js => switchToggleField.jsx} |  0
 .../src/components/user/{list.js => list.jsx} |  2 +-
 .../user/{messages.js => messages.ts}         |  0
 .../components/user/{topBar.js => topBar.jsx} |  2 +-
 ...ersPlaceholder.js => usersPlaceholder.jsx} |  0
 .../{barListChart.js => barListChart.jsx}     |  2 +-
 ...onTimeline.js => contributionTimeline.jsx} |  0
 ...countriesMapped.js => countriesMapped.jsx} |  0
 .../{elementsMapped.js => elementsMapped.jsx} |  0
 .../{headerProfile.js => headerProfile.jsx}   |  0
 .../userDetail/{messages.js => messages.ts}   |  0
 ...istChart.test.js => barListChart.test.jsx} |  0
 ...Mapped.test.js => elementsMapped.test.jsx} |  0
 ...Profile.test.js => headerProfile.test.jsx} |  0
 .../{topCauses.test.js => topCauses.test.jsx} |  0
 ...pProjects.test.js => topProjects.test.jsx} |  0
 .../{topCauses.js => topCauses.jsx}           |  0
 .../{topProjects.js => topProjects.jsx}       |  0
 .../{userTeamsOrgs.js => userTeamsOrgs.jsx}   |  0
 ...bglUnsupported.js => webglUnsupported.jsx} |  0
 frontend/src/hooks/UseCloseOnDocumentClick.js |  4 +-
 .../utils/{management.js => management.jsx}   |  0
 frontend/src/views/{about.js => about.jsx}    |  0
 .../src/views/{campaigns.js => campaigns.jsx} |  0
 .../src/views/{contact.js => contact.jsx}     |  0
 .../{contributions.js => contributions.jsx}   |  0
 .../src/views/{interests.js => interests.jsx} |  0
 frontend/src/views/{learn.js => learn.jsx}    |  0
 .../src/views/{licenses.js => licenses.jsx}   |  0
 frontend/src/views/{login.js => login.jsx}    |  2 +-
 ...sationDetail.js => organisationDetail.jsx} |  0
 ...nagement.js => organisationManagement.jsx} |  0
 ...nisationStats.js => organisationStats.jsx} |  0
 ...rsManagement.js => partnersManagement.jsx} |  0
 ...wipeStats.js => partnersMapswipeStats.jsx} |  0
 .../{partnersStats.js => partnersStats.jsx}   |  0
 .../src/views/{project.js => project.jsx}     |  0
 .../views/{projectEdit.js => projectEdit.jsx} |  0
 ...onitoring.js => projectLiveMonitoring.jsx} |  0
 .../{projectStats.js => projectStats.jsx}     |  0
 .../views/{quickstart.js => quickstart.jsx}   |  0
 .../src/views/{settings.js => settings.jsx}   |  0
 frontend/src/views/{stats.js => stats.jsx}    |  0
 .../src/views/{swagger.js => swagger.jsx}     |  0
 .../views/{taskAction.js => taskAction.jsx}   |  2 +-
 .../{taskSelection.js => taskSelection.jsx}   |  9 ++--
 frontend/src/views/{teams.js => teams.jsx}    |  2 +-
 .../views/{userDetail.js => userDetail.jsx}   |  0
 frontend/src/views/{users.js => users.jsx}    |  0
 .../views/{verifyEmail.js => verifyEmail.jsx} |  0
 frontend/vite.config.ts                       |  8 ++--
 214 files changed, 213 insertions(+), 138 deletions(-)
 rename frontend/src/components/{basemapMenu.js => basemapMenu.jsx} (100%)
 rename frontend/src/components/{checkCircle.js => checkCircle.jsx} (73%)
 rename frontend/src/components/{code.js => code.jsx} (100%)
 rename frontend/src/components/{editor.js => editor.jsx} (100%)
 rename frontend/src/components/homepage/{contactForm.js => contactForm.jsx} (100%)
 rename frontend/src/components/homepage/{featuredProjects.js => featuredProjects.jsx} (99%)
 rename frontend/src/components/interests/{index.js => index.jsx} (100%)
 rename frontend/src/components/licenses/{index.js => index.jsx} (100%)
 rename frontend/src/components/licenses/{licensesPlaceholder.js => licensesPlaceholder.jsx} (100%)
 rename frontend/src/components/{mappingLevel.js => mappingLevel.jsx} (100%)
 rename frontend/src/components/{mappingTypes.js => mappingTypes.jsx} (92%)
 rename frontend/src/components/{menu.js => menu.jsx} (92%)
 rename frontend/src/components/partnerMapswipeStats/{contributionsGrid.js => contributionsGrid.jsx} (100%)
 rename frontend/src/components/partnerMapswipeStats/{contributionsHeatmap.js => contributionsHeatmap.jsx} (100%)
 rename frontend/src/components/partnerMapswipeStats/{groupMembers.js => groupMembers.jsx} (100%)
 rename frontend/src/components/partnerMapswipeStats/{messages.js => messages.ts} (100%)
 rename frontend/src/components/partnerMapswipeStats/{overview.js => overview.jsx} (100%)
 rename frontend/src/components/partnerMapswipeStats/{projectTypeAreaStats.js => projectTypeAreaStats.jsx} (100%)
 rename frontend/src/components/partnerMapswipeStats/{swipesByOrganization.js => swipesByOrganization.jsx} (100%)
 rename frontend/src/components/partnerMapswipeStats/{swipesByProjectType.js => swipesByProjectType.jsx} (100%)
 rename frontend/src/components/partnerMapswipeStats/{timeSpentContributing.js => timeSpentContributing.jsx} (100%)
 rename frontend/src/components/partnerMapswipeStats/{timeSpentContributingByDay.js => timeSpentContributingByDay.jsx} (100%)
 rename frontend/src/components/partners/{currentProjects.js => currentProjects.jsx} (100%)
 rename frontend/src/components/partners/{customDropdown.js => customDropdown.jsx} (100%)
 rename frontend/src/components/partners/{leaderboard.js => leaderboard.jsx} (100%)
 rename frontend/src/components/partners/{messages.js => messages.ts} (100%)
 rename frontend/src/components/partners/{partners.js => partners.jsx} (100%)
 rename frontend/src/components/partners/{partnersActivity.js => partnersActivity.jsx} (100%)
 rename frontend/src/components/partners/{partnersProgresBar.js => partnersProgresBar.jsx} (100%)
 rename frontend/src/components/partners/{partnersResources.js => partnersResources.jsx} (100%)
 rename frontend/src/components/partners/{partnersStats.js => partnersStats.jsx} (97%)
 rename frontend/src/components/{portal.js => portal.jsx} (100%)
 rename frontend/src/components/{progressBar.js => progressBar.jsx} (100%)
 rename frontend/src/components/projectCard/{dueDateBox.js => dueDateBox.jsx} (99%)
 rename frontend/src/components/projectCard/{messages.js => messages.ts} (100%)
 rename frontend/src/components/projectCard/{nCardPlaceholder.js => nCardPlaceholder.jsx} (100%)
 rename frontend/src/components/projectCard/{priorityBox.js => priorityBox.jsx} (98%)
 rename frontend/src/components/projectCard/{projectCard.js => projectCard.jsx} (99%)
 rename frontend/src/components/projectCard/{projectProgressBar.js => projectProgressBar.jsx} (98%)
 rename frontend/src/components/projectCreate/{fileUploadErrors.js => fileUploadErrors.jsx} (100%)
 rename frontend/src/components/projectCreate/{index.js => index.jsx} (100%)
 rename frontend/src/components/projectCreate/{projectCreationMap.js => projectCreationMap.jsx} (100%)
 rename frontend/src/components/projectCreate/{projectsAOILayerCheckBox.js => projectsAOILayerCheckBox.jsx} (100%)
 rename frontend/src/components/projectCreate/{review.js => review.jsx} (100%)
 rename frontend/src/components/projectCreate/{setAOI.js => setAOI.jsx} (100%)
 rename frontend/src/components/projectCreate/{setTaskSizes.js => setTaskSizes.jsx} (100%)
 rename frontend/src/components/projectCreate/tests/{projectsAOILayerCheckBox.test.js => projectsAOILayerCheckBox.test.jsx} (100%)
 rename frontend/src/components/projectCreate/tests/{setTaskSizes.test.js => setTaskSizes.test.jsx} (100%)
 rename frontend/src/components/projectCreate/{trimProject.js => trimProject.jsx} (100%)
 rename frontend/src/components/projectDetail/{bigProjectTeaser.js => bigProjectTeaser.jsx} (97%)
 rename frontend/src/components/projectDetail/{downloadButtons.js => downloadButtons.jsx} (84%)
 rename frontend/src/components/projectDetail/{downloadOsmData.js => downloadOsmData.jsx} (100%)
 rename frontend/src/components/projectDetail/{favorites.js => favorites.jsx} (100%)
 rename frontend/src/components/projectDetail/{fileFormatCard.js => fileFormatCard.jsx} (100%)
 rename frontend/src/components/projectDetail/{footer.js => footer.jsx} (100%)
 rename frontend/src/components/projectDetail/{header.js => header.jsx} (96%)
 rename frontend/src/components/projectDetail/{index.js => index.jsx} (100%)
 rename frontend/src/components/projectDetail/{infoPanel.js => infoPanel.jsx} (99%)
 rename frontend/src/components/projectDetail/{liveViewButton.js => liveViewButton.jsx} (100%)
 rename frontend/src/components/projectDetail/{osmchaButton.js => osmchaButton.jsx} (96%)
 rename frontend/src/components/projectDetail/{permissionBox.js => permissionBox.jsx} (97%)
 rename frontend/src/components/projectDetail/{privateProjectError.js => privateProjectError.jsx} (100%)
 rename frontend/src/components/projectDetail/{projectDetailPlaceholder.js => projectDetailPlaceholder.jsx} (100%)
 rename frontend/src/components/projectDetail/{questionsAndComments.js => questionsAndComments.jsx} (99%)
 rename frontend/src/components/projectDetail/{shareButton.js => shareButton.jsx} (97%)
 rename frontend/src/components/projectDetail/{similarProjects.js => similarProjects.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{bigProjectTeaser.test.js => bigProjectTeaser.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{downloadButtons.test.js => downloadButtons.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{favorites.test.js => favorites.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{footer.test.js => footer.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{header.test.js => header.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{infoPanel.test.js => infoPanel.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{osmchaButton.test.js => osmchaButton.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{permissionBox.test.js => permissionBox.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{privateProjectError.test.js => privateProjectError.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{questionsAndComments.test.js => questionsAndComments.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{shareButton.test.js => shareButton.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{similarProjects.test.js => similarProjects.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{statusBox.test.js => statusBox.test.jsx} (100%)
 rename frontend/src/components/projectDetail/tests/{visibilityBox.test.js => visibilityBox.test.jsx} (100%)
 rename frontend/src/components/projectDetail/{visibilityBox.js => visibilityBox.jsx} (84%)
 rename frontend/src/components/projectEdit/{actionsForm.js => actionsForm.jsx} (97%)
 rename frontend/src/components/projectEdit/{customEditorForm.js => customEditorForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{descriptionForm.js => descriptionForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{extraIdParams.js => extraIdParams.jsx} (100%)
 rename frontend/src/components/projectEdit/{imageryForm.js => imageryForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{inputLocale.js => inputLocale.jsx} (100%)
 rename frontend/src/components/projectEdit/{instructionsForm.js => instructionsForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{localeOption.js => localeOption.jsx} (100%)
 rename frontend/src/components/projectEdit/{messages.js => messages.jsx} (100%)
 rename frontend/src/components/projectEdit/{metadataForm.js => metadataForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{partnersForm.js => partnersForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{partnersListing.js => partnersListing.jsx} (100%)
 rename frontend/src/components/projectEdit/{permissionsBlock.js => permissionsBlock.jsx} (95%)
 rename frontend/src/components/projectEdit/{permissionsForm.js => permissionsForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{priorityAreasForm.js => priorityAreasForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{projectInterests.js => projectInterests.jsx} (100%)
 rename frontend/src/components/projectEdit/{settingsForm.js => settingsForm.jsx} (100%)
 rename frontend/src/components/projectEdit/{teamSelect.js => teamSelect.jsx} (100%)
 rename frontend/src/components/projectStats/{completion.js => completion.jsx} (94%)
 rename frontend/src/components/projectStats/{contributorsStats.js => contributorsStats.jsx} (100%)
 rename frontend/src/components/projectStats/{edits.js => edits.jsx} (100%)
 rename frontend/src/components/projectStats/{messages.js => messages.ts} (100%)
 rename frontend/src/components/projectStats/{taskStatus.js => taskStatus.jsx} (100%)
 rename frontend/src/components/projectStats/{timeStats.js => timeStats.jsx} (100%)
 rename frontend/src/components/projects/{downloadAsCSV.js => downloadAsCSV.jsx} (100%)
 rename frontend/src/components/projects/{exploreProjectsTable.js => exploreProjectsTable.jsx} (100%)
 rename frontend/src/components/projects/{partnersFilterSelect.js => partnersFilterSelect.jsx} (100%)
 rename frontend/src/components/projects/{projectsMap.js => projectsMap.jsx} (100%)
 rename frontend/src/components/{rapidEditor.js => rapidEditor.jsx} (100%)
 rename frontend/src/components/{redirect.js => redirect.jsx} (100%)
 rename frontend/src/components/{statsCard.js => statsCard.jsx} (99%)
 delete mode 100644 frontend/src/components/svgIcons/fullscreen.js
 create mode 100644 frontend/src/components/svgIcons/fullscreen.tsx
 rename frontend/src/components/taskSelection/{action.js => action.jsx} (100%)
 rename frontend/src/components/taskSelection/{actionSidebars.js => actionSidebars.jsx} (98%)
 rename frontend/src/components/taskSelection/{actionTabsNav.js => actionTabsNav.jsx} (100%)
 rename frontend/src/components/taskSelection/{changesetComment.js => changesetComment.jsx} (83%)
 rename frontend/src/components/taskSelection/{contributions.js => contributions.jsx} (99%)
 rename frontend/src/components/taskSelection/{extendSession.js => extendSession.jsx} (100%)
 rename frontend/src/components/taskSelection/{footer.js => footer.jsx} (100%)
 rename frontend/src/components/taskSelection/{imagery.js => imagery.jsx} (97%)
 rename frontend/src/components/taskSelection/{instructions.js => instructions.jsx} (97%)
 rename frontend/src/components/taskSelection/{legend.js => legend.jsx} (100%)
 rename frontend/src/components/taskSelection/{lockedTasks.js => lockedTasks.jsx} (95%)
 rename frontend/src/components/taskSelection/{map.js => map.jsx} (100%)
 rename frontend/src/components/taskSelection/{multipleTaskHistories.js => multipleTaskHistories.jsx} (100%)
 rename frontend/src/components/taskSelection/{permissionErrorModal.js => permissionErrorModal.jsx} (99%)
 rename frontend/src/components/taskSelection/{resourcesTab.js => resourcesTab.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{campaigns.js => campaigns.jsx} (98%)
 rename frontend/src/components/teamsAndOrgs/{campaignsPlaceholder.js => campaignsPlaceholder.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{editMode.js => editMode.jsx} (85%)
 rename frontend/src/components/teamsAndOrgs/{featureStats.js => featureStats.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{leaveTeamConfirmationAlert.js => leaveTeamConfirmationAlert.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{members.js => members.jsx} (99%)
 rename frontend/src/components/teamsAndOrgs/{menu.js => menu.jsx} (93%)
 rename frontend/src/components/teamsAndOrgs/{messageMembers.js => messageMembers.jsx} (98%)
 rename frontend/src/components/teamsAndOrgs/{messages.js => messages.ts} (100%)
 rename frontend/src/components/teamsAndOrgs/{newUsersStats.js => newUsersStats.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{orgUsageLevel.js => orgUsageLevel.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{organisationProjectStats.js => organisationProjectStats.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{organisations.js => organisations.jsx} (99%)
 rename frontend/src/components/teamsAndOrgs/{organisationsPlaceholder.js => organisationsPlaceholder.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{projects.js => projects.jsx} (99%)
 rename frontend/src/components/teamsAndOrgs/{remainingTasksStats.js => remainingTasksStats.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{tasksStats.js => tasksStats.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{tasksStatsChart.js => tasksStatsChart.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{tasksStatsSummary.js => tasksStatsSummary.jsx} (100%)
 rename frontend/src/components/teamsAndOrgs/{teams.js => teams.jsx} (98%)
 rename frontend/src/components/teamsAndOrgs/{teamsPlaceholder.js => teamsPlaceholder.jsx} (100%)
 rename frontend/src/components/user/{completeness.js => completeness.jsx} (93%)
 rename frontend/src/components/user/{content.js => content.jsx} (99%)
 rename frontend/src/components/user/forms/{customField.js => customField.jsx} (100%)
 rename frontend/src/components/user/forms/{interests.js => interests.jsx} (100%)
 rename frontend/src/components/user/forms/{notifications.js => notifications.jsx} (100%)
 rename frontend/src/components/user/forms/{settings.js => settings.jsx} (100%)
 rename frontend/src/components/user/forms/{switchToggleField.js => switchToggleField.jsx} (100%)
 rename frontend/src/components/user/{list.js => list.jsx} (99%)
 rename frontend/src/components/user/{messages.js => messages.ts} (100%)
 rename frontend/src/components/user/{topBar.js => topBar.jsx} (97%)
 rename frontend/src/components/user/{usersPlaceholder.js => usersPlaceholder.jsx} (100%)
 rename frontend/src/components/userDetail/{barListChart.js => barListChart.jsx} (98%)
 rename frontend/src/components/userDetail/{contributionTimeline.js => contributionTimeline.jsx} (100%)
 rename frontend/src/components/userDetail/{countriesMapped.js => countriesMapped.jsx} (100%)
 rename frontend/src/components/userDetail/{elementsMapped.js => elementsMapped.jsx} (100%)
 rename frontend/src/components/userDetail/{headerProfile.js => headerProfile.jsx} (100%)
 rename frontend/src/components/userDetail/{messages.js => messages.ts} (100%)
 rename frontend/src/components/userDetail/tests/{barListChart.test.js => barListChart.test.jsx} (100%)
 rename frontend/src/components/userDetail/tests/{elementsMapped.test.js => elementsMapped.test.jsx} (100%)
 rename frontend/src/components/userDetail/tests/{headerProfile.test.js => headerProfile.test.jsx} (100%)
 rename frontend/src/components/userDetail/tests/{topCauses.test.js => topCauses.test.jsx} (100%)
 rename frontend/src/components/userDetail/tests/{topProjects.test.js => topProjects.test.jsx} (100%)
 rename frontend/src/components/userDetail/{topCauses.js => topCauses.jsx} (100%)
 rename frontend/src/components/userDetail/{topProjects.js => topProjects.jsx} (100%)
 rename frontend/src/components/userDetail/{userTeamsOrgs.js => userTeamsOrgs.jsx} (100%)
 rename frontend/src/components/{webglUnsupported.js => webglUnsupported.jsx} (100%)
 rename frontend/src/utils/{management.js => management.jsx} (100%)
 rename frontend/src/views/{about.js => about.jsx} (100%)
 rename frontend/src/views/{campaigns.js => campaigns.jsx} (100%)
 rename frontend/src/views/{contact.js => contact.jsx} (100%)
 rename frontend/src/views/{contributions.js => contributions.jsx} (100%)
 rename frontend/src/views/{interests.js => interests.jsx} (100%)
 rename frontend/src/views/{learn.js => learn.jsx} (100%)
 rename frontend/src/views/{licenses.js => licenses.jsx} (100%)
 rename frontend/src/views/{login.js => login.jsx} (97%)
 rename frontend/src/views/{organisationDetail.js => organisationDetail.jsx} (100%)
 rename frontend/src/views/{organisationManagement.js => organisationManagement.jsx} (100%)
 rename frontend/src/views/{organisationStats.js => organisationStats.jsx} (100%)
 rename frontend/src/views/{partnersManagement.js => partnersManagement.jsx} (100%)
 rename frontend/src/views/{partnersMapswipeStats.js => partnersMapswipeStats.jsx} (100%)
 rename frontend/src/views/{partnersStats.js => partnersStats.jsx} (100%)
 rename frontend/src/views/{project.js => project.jsx} (100%)
 rename frontend/src/views/{projectEdit.js => projectEdit.jsx} (100%)
 rename frontend/src/views/{projectLiveMonitoring.js => projectLiveMonitoring.jsx} (100%)
 rename frontend/src/views/{projectStats.js => projectStats.jsx} (100%)
 rename frontend/src/views/{quickstart.js => quickstart.jsx} (100%)
 rename frontend/src/views/{settings.js => settings.jsx} (100%)
 rename frontend/src/views/{stats.js => stats.jsx} (100%)
 rename frontend/src/views/{swagger.js => swagger.jsx} (100%)
 rename frontend/src/views/{taskAction.js => taskAction.jsx} (98%)
 rename frontend/src/views/{taskSelection.js => taskSelection.jsx} (92%)
 rename frontend/src/views/{teams.js => teams.jsx} (99%)
 rename frontend/src/views/{userDetail.js => userDetail.jsx} (100%)
 rename frontend/src/views/{users.js => users.jsx} (100%)
 rename frontend/src/views/{verifyEmail.js => verifyEmail.jsx} (100%)

diff --git a/frontend/package.json b/frontend/package.json
index 91360df347..e7f76fd762 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/react": "^7.102.0",
     "@tanstack/react-query": "^5.52.0",
+    "@tanstack/react-query-devtools": "^5.62.8",
     "@tanstack/react-table": "^8.20.1",
     "@tmcw/togeojson": "^5.8.1",
     "@turf/area": "^6.5.0",
@@ -125,6 +126,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^18.3.0",
     "@types/slug": "^5.0.9",
     "@vitejs/plugin-react-swc": "^3.7.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 087f8ab75a..727662d0e8 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.52.0
         version: 5.62.8(react@18.3.1)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.62.8
+        version: 5.62.8(@tanstack/react-query@5.62.8(react@18.3.1))(react@18.3.1)
       '@tanstack/react-table':
         specifier: ^8.20.1
         version: 8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -270,6 +273,9 @@ importers:
       '@types/react-dom':
         specifier: ^19.0.2
         version: 19.0.2(@types/react@19.0.2)
+      '@types/react-router-dom':
+        specifier: ^5.3.3
+        version: 5.3.3
       '@types/react-test-renderer':
         specifier: ^18.3.0
         version: 18.3.1
@@ -2569,6 +2575,15 @@ packages:
   '@tanstack/query-core@5.62.8':
     resolution: {integrity: sha512-4fV31vDsUyvNGrKIOUNPrZztoyL187bThnoQOvAXEVlZbSiuPONpfx53634MKKdvsDir5NyOGm80ShFaoHS/mw==}
 
+  '@tanstack/query-devtools@5.61.4':
+    resolution: {integrity: sha512-21Tw+u8E3IJJj4A/Bct4H0uBaDTEu7zBrR79FeSyY+mS2gx5/m316oDtJiKkILc819VSTYt+sFzODoJNcpPqZQ==}
+
+  '@tanstack/react-query-devtools@5.62.8':
+    resolution: {integrity: sha512-SwjXjQTRONd9WPeKVQQ9framG7YNqPV8PS+EGNVNXAyz2XThulMRCvZnh2+3DggnjcYM7YcpnuoZ4RH7q13p0g==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.62.8
+      react: ^18 || ^19
+
   '@tanstack/react-query@5.62.8':
     resolution: {integrity: sha512-8TUstKxF/fysHonZsWg/hnlDVgasTdHx6Q+f1/s/oPKJBJbKUWPZEHwLTMOZgrZuroLMiqYKJ9w69Abm8mWP0Q==}
     peerDependencies:
@@ -2786,6 +2801,9 @@ packages:
   '@types/hast@2.3.10':
     resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
 
+  '@types/history@4.7.11':
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
+
   '@types/hoist-non-react-statics@3.3.6':
     resolution: {integrity: sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==}
 
@@ -2904,6 +2922,12 @@ packages:
     peerDependencies:
       '@types/react': ^19.0.0
 
+  '@types/react-router-dom@5.3.3':
+    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
+
+  '@types/react-router@5.1.20':
+    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
+
   '@types/react-test-renderer@18.3.1':
     resolution: {integrity: sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA==}
 
@@ -11862,6 +11886,14 @@ snapshots:
 
   '@tanstack/query-core@5.62.8': {}
 
+  '@tanstack/query-devtools@5.61.4': {}
+
+  '@tanstack/react-query-devtools@5.62.8(@tanstack/react-query@5.62.8(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@tanstack/query-devtools': 5.61.4
+      '@tanstack/react-query': 5.62.8(react@18.3.1)
+      react: 18.3.1
+
   '@tanstack/react-query@5.62.8(react@18.3.1)':
     dependencies:
       '@tanstack/query-core': 5.62.8
@@ -12173,6 +12205,8 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.11
 
+  '@types/history@4.7.11': {}
+
   '@types/hoist-non-react-statics@3.3.6':
     dependencies:
       '@types/react': 19.0.2
@@ -12279,6 +12313,17 @@ snapshots:
     dependencies:
       '@types/react': 19.0.2
 
+  '@types/react-router-dom@5.3.3':
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 19.0.2
+      '@types/react-router': 5.1.20
+
+  '@types/react-router@5.1.20':
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 19.0.2
+
   '@types/react-test-renderer@18.3.1':
     dependencies:
       '@types/react': 18.3.17
diff --git a/frontend/src/components/basemapMenu.js b/frontend/src/components/basemapMenu.jsx
similarity index 100%
rename from frontend/src/components/basemapMenu.js
rename to frontend/src/components/basemapMenu.jsx
diff --git a/frontend/src/components/button.tsx b/frontend/src/components/button.tsx
index 4cea6d869c..c57724ab46 100644
--- a/frontend/src/components/button.tsx
+++ b/frontend/src/components/button.tsx
@@ -12,23 +12,13 @@ export const AnimatedLoadingIcon = () => (
   </IconSpace>
 );
 
-<<<<<<< HEAD
-export function Button(
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    icon?: React.ReactNode;
-    loading?: boolean;
-  },
-) {
-  const { children, icon, className, loading = false, disabled, ...rest } = props;
-=======
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  icon?: React.ReactNode,
-  loading?: boolean,
+  icon?: React.ReactNode;
+  loading?: boolean;
 };
 
 export function Button(props: ButtonProps) {
-  const { children, icon, className, loading = false, disabled, ...rest } = props
->>>>>>> 454d43caf (chore(frontend): more ts migrations)
+  const { children, icon, className, loading = false, disabled, ...rest } = props;
 
   return (
     <button
diff --git a/frontend/src/components/checkCircle.js b/frontend/src/components/checkCircle.jsx
similarity index 73%
rename from frontend/src/components/checkCircle.js
rename to frontend/src/components/checkCircle.jsx
index 16a097decd..a4ab446eec 100644
--- a/frontend/src/components/checkCircle.js
+++ b/frontend/src/components/checkCircle.jsx
@@ -1,6 +1,6 @@
 import { CheckIcon } from './svgIcons';
 
-export const CheckCircle = ({ className }: Object) => (
+export const CheckCircle = ({ className }) => (
   <span className={`br-100 h1 w1 ph1 mr2 ${className}`}>
     <CheckIcon height="10px" width="10px" />
   </span>
diff --git a/frontend/src/components/code.js b/frontend/src/components/code.jsx
similarity index 100%
rename from frontend/src/components/code.js
rename to frontend/src/components/code.jsx
diff --git a/frontend/src/components/editor.js b/frontend/src/components/editor.jsx
similarity index 100%
rename from frontend/src/components/editor.js
rename to frontend/src/components/editor.jsx
diff --git a/frontend/src/components/header/index.tsx b/frontend/src/components/header/index.tsx
index 2415290246..bb269d6914 100644
--- a/frontend/src/components/header/index.tsx
+++ b/frontend/src/components/header/index.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useRef, forwardRef } from 'react';
+import { Fragment, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import Popup from 'reactjs-popup';
@@ -38,9 +38,7 @@ export const Header = () => {
 
   const linkCombo = 'link mh3 barlow-condensed blue-dark f4 ttu lh-solid nowrap pv2';
 
-  const isActive = ({ isPartiallyCurrent }: {
-    isPartiallyCurrent: boolean;
-  }) => {
+  const isActive = ({ isPartiallyCurrent }: { isPartiallyCurrent: boolean }) => {
     return isPartiallyCurrent
       ? { className: `${linkCombo} bb b--blue-dark bw1` }
       : { className: linkCombo };
@@ -202,9 +200,7 @@ export function getMenuItemsForUser(userDetails: any, organisations?: any) {
   return filteredMenuItems;
 }
 
-const UserDisplay = ({ username }: {
-  username: string
-}) => {
+const UserDisplay = ({ username }: { username: string }) => {
   return (
     <span>
       <CurrentUserAvatar className="br-100 v-mid red h2 w2 dib" />
@@ -213,10 +209,12 @@ const UserDisplay = ({ username }: {
   );
 };
 
-const SignupTrigger = (props: ButtonProps & {
-  signUpStyle: string;
-  alternativeSignUpText?: boolean;
-}) => {
+const SignupTrigger = (
+  props: ButtonProps & {
+    signUpStyle: string;
+    alternativeSignUpText?: boolean;
+  },
+) => {
   const { signUpStyle, alternativeSignUpText, ...remainingProps } = props;
   return (
     <Button className={signUpStyle} {...remainingProps}>
@@ -264,7 +262,12 @@ export const AuthButtons = ({
   );
 };
 
-export const ActionItems = ({ userDetails, onUserMenuSelect, location, getUserLinks }: {
+export const ActionItems = ({
+  userDetails,
+  onUserMenuSelect,
+  location,
+  getUserLinks,
+}: {
   userDetails: any;
   onUserMenuSelect: (e: any) => void;
   location: any;
@@ -292,7 +295,6 @@ export const ActionItems = ({ userDetails, onUserMenuSelect, location, getUserLi
     </>
   );
 
-
 export const PopupItems = (props) => {
   const dispatch = useDispatch();
 
diff --git a/frontend/src/components/homepage/contactForm.js b/frontend/src/components/homepage/contactForm.jsx
similarity index 100%
rename from frontend/src/components/homepage/contactForm.js
rename to frontend/src/components/homepage/contactForm.jsx
diff --git a/frontend/src/components/homepage/featuredProjects.js b/frontend/src/components/homepage/featuredProjects.jsx
similarity index 99%
rename from frontend/src/components/homepage/featuredProjects.js
rename to frontend/src/components/homepage/featuredProjects.jsx
index 9791d51a74..ae51367257 100644
--- a/frontend/src/components/homepage/featuredProjects.js
+++ b/frontend/src/components/homepage/featuredProjects.jsx
@@ -10,7 +10,7 @@ import messages from './messages';
 
 import { useFeaturedProjectAPI } from '../../hooks/UseFeaturedProjectAPI';
 
-function FeaturedProjectPaginateArrows({ pages, activeProjectCardPage, mobile, dispatch }: Object) {
+function FeaturedProjectPaginateArrows({ pages, activeProjectCardPage, mobile, dispatch }) {
   let enableLeft = false;
   let enableRight = false;
   if (activeProjectCardPage !== 0) {
diff --git a/frontend/src/components/interests/index.js b/frontend/src/components/interests/index.jsx
similarity index 100%
rename from frontend/src/components/interests/index.js
rename to frontend/src/components/interests/index.jsx
diff --git a/frontend/src/components/licenses/index.js b/frontend/src/components/licenses/index.jsx
similarity index 100%
rename from frontend/src/components/licenses/index.js
rename to frontend/src/components/licenses/index.jsx
diff --git a/frontend/src/components/licenses/licensesPlaceholder.js b/frontend/src/components/licenses/licensesPlaceholder.jsx
similarity index 100%
rename from frontend/src/components/licenses/licensesPlaceholder.js
rename to frontend/src/components/licenses/licensesPlaceholder.jsx
diff --git a/frontend/src/components/mappingLevel.js b/frontend/src/components/mappingLevel.jsx
similarity index 100%
rename from frontend/src/components/mappingLevel.js
rename to frontend/src/components/mappingLevel.jsx
diff --git a/frontend/src/components/mappingTypes.js b/frontend/src/components/mappingTypes.jsx
similarity index 92%
rename from frontend/src/components/mappingTypes.js
rename to frontend/src/components/mappingTypes.jsx
index 63b4cb5dad..e7e9d8ab53 100644
--- a/frontend/src/components/mappingTypes.js
+++ b/frontend/src/components/mappingTypes.jsx
@@ -11,7 +11,7 @@ export const TITLED_ICONS = [
   { Icon: AsteriskIcon, title: 'other', value: 'OTHER' },
 ];
 
-export function MappingTypes({ types = [], colorClass }: Object) {
+export function MappingTypes({ types = [], colorClass }) {
   const intl = useIntl();
   return (
     <>
diff --git a/frontend/src/components/menu.js b/frontend/src/components/menu.jsx
similarity index 92%
rename from frontend/src/components/menu.js
rename to frontend/src/components/menu.jsx
index 7b259b050a..147d68eec3 100644
--- a/frontend/src/components/menu.js
+++ b/frontend/src/components/menu.jsx
@@ -1,6 +1,6 @@
 import { useLocation, Link } from 'react-router-dom';
 
-export function SectionMenu({ items }: Object) {
+export function SectionMenu({ items }) {
   const location = useLocation();
   const linkCombo = 'link mh2 blue-dark ttc';
 
diff --git a/frontend/src/components/partnerMapswipeStats/contributionsGrid.js b/frontend/src/components/partnerMapswipeStats/contributionsGrid.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/contributionsGrid.js
rename to frontend/src/components/partnerMapswipeStats/contributionsGrid.jsx
diff --git a/frontend/src/components/partnerMapswipeStats/contributionsHeatmap.js b/frontend/src/components/partnerMapswipeStats/contributionsHeatmap.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/contributionsHeatmap.js
rename to frontend/src/components/partnerMapswipeStats/contributionsHeatmap.jsx
diff --git a/frontend/src/components/partnerMapswipeStats/groupMembers.js b/frontend/src/components/partnerMapswipeStats/groupMembers.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/groupMembers.js
rename to frontend/src/components/partnerMapswipeStats/groupMembers.jsx
diff --git a/frontend/src/components/partnerMapswipeStats/messages.js b/frontend/src/components/partnerMapswipeStats/messages.ts
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/messages.js
rename to frontend/src/components/partnerMapswipeStats/messages.ts
diff --git a/frontend/src/components/partnerMapswipeStats/overview.js b/frontend/src/components/partnerMapswipeStats/overview.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/overview.js
rename to frontend/src/components/partnerMapswipeStats/overview.jsx
diff --git a/frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js b/frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js
rename to frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.jsx
diff --git a/frontend/src/components/partnerMapswipeStats/swipesByOrganization.js b/frontend/src/components/partnerMapswipeStats/swipesByOrganization.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/swipesByOrganization.js
rename to frontend/src/components/partnerMapswipeStats/swipesByOrganization.jsx
diff --git a/frontend/src/components/partnerMapswipeStats/swipesByProjectType.js b/frontend/src/components/partnerMapswipeStats/swipesByProjectType.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/swipesByProjectType.js
rename to frontend/src/components/partnerMapswipeStats/swipesByProjectType.jsx
diff --git a/frontend/src/components/partnerMapswipeStats/timeSpentContributing.js b/frontend/src/components/partnerMapswipeStats/timeSpentContributing.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/timeSpentContributing.js
rename to frontend/src/components/partnerMapswipeStats/timeSpentContributing.jsx
diff --git a/frontend/src/components/partnerMapswipeStats/timeSpentContributingByDay.js b/frontend/src/components/partnerMapswipeStats/timeSpentContributingByDay.jsx
similarity index 100%
rename from frontend/src/components/partnerMapswipeStats/timeSpentContributingByDay.js
rename to frontend/src/components/partnerMapswipeStats/timeSpentContributingByDay.jsx
diff --git a/frontend/src/components/partners/currentProjects.js b/frontend/src/components/partners/currentProjects.jsx
similarity index 100%
rename from frontend/src/components/partners/currentProjects.js
rename to frontend/src/components/partners/currentProjects.jsx
diff --git a/frontend/src/components/partners/customDropdown.js b/frontend/src/components/partners/customDropdown.jsx
similarity index 100%
rename from frontend/src/components/partners/customDropdown.js
rename to frontend/src/components/partners/customDropdown.jsx
diff --git a/frontend/src/components/partners/leaderboard.js b/frontend/src/components/partners/leaderboard.jsx
similarity index 100%
rename from frontend/src/components/partners/leaderboard.js
rename to frontend/src/components/partners/leaderboard.jsx
diff --git a/frontend/src/components/partners/messages.js b/frontend/src/components/partners/messages.ts
similarity index 100%
rename from frontend/src/components/partners/messages.js
rename to frontend/src/components/partners/messages.ts
diff --git a/frontend/src/components/partners/partners.js b/frontend/src/components/partners/partners.jsx
similarity index 100%
rename from frontend/src/components/partners/partners.js
rename to frontend/src/components/partners/partners.jsx
diff --git a/frontend/src/components/partners/partnersActivity.js b/frontend/src/components/partners/partnersActivity.jsx
similarity index 100%
rename from frontend/src/components/partners/partnersActivity.js
rename to frontend/src/components/partners/partnersActivity.jsx
diff --git a/frontend/src/components/partners/partnersProgresBar.js b/frontend/src/components/partners/partnersProgresBar.jsx
similarity index 100%
rename from frontend/src/components/partners/partnersProgresBar.js
rename to frontend/src/components/partners/partnersProgresBar.jsx
diff --git a/frontend/src/components/partners/partnersResources.js b/frontend/src/components/partners/partnersResources.jsx
similarity index 100%
rename from frontend/src/components/partners/partnersResources.js
rename to frontend/src/components/partners/partnersResources.jsx
diff --git a/frontend/src/components/partners/partnersStats.js b/frontend/src/components/partners/partnersStats.jsx
similarity index 97%
rename from frontend/src/components/partners/partnersStats.js
rename to frontend/src/components/partners/partnersStats.jsx
index 8724511215..687a31776b 100644
--- a/frontend/src/components/partners/partnersStats.js
+++ b/frontend/src/components/partners/partnersStats.jsx
@@ -25,7 +25,7 @@ export const StatsNumber = (props) => {
   );
 };
 
-export const StatsColumn = ({ label, value, icon }: Object) => {
+export const StatsColumn = ({ label, value, icon }) => {
   return (
     <div className={`tc mv2`}>
       <div style={{ color: '#D73F3F', minHeight: 35 }}>{icon}</div>
diff --git a/frontend/src/components/portal.js b/frontend/src/components/portal.jsx
similarity index 100%
rename from frontend/src/components/portal.js
rename to frontend/src/components/portal.jsx
diff --git a/frontend/src/components/progressBar.js b/frontend/src/components/progressBar.jsx
similarity index 100%
rename from frontend/src/components/progressBar.js
rename to frontend/src/components/progressBar.jsx
diff --git a/frontend/src/components/projectCard/dueDateBox.js b/frontend/src/components/projectCard/dueDateBox.jsx
similarity index 99%
rename from frontend/src/components/projectCard/dueDateBox.js
rename to frontend/src/components/projectCard/dueDateBox.jsx
index 5370ab996d..48ca00a8e8 100644
--- a/frontend/src/components/projectCard/dueDateBox.js
+++ b/frontend/src/components/projectCard/dueDateBox.jsx
@@ -13,7 +13,7 @@ export function DueDateBox({
   tooltipMsg,
   isTaskStatusPage = false,
   isProjectDetailPage = false,
-}: Object) {
+}) {
   const intl = useIntl();
   const [timer, setTimer] = useState(Date.now());
   useEffect(() => {
diff --git a/frontend/src/components/projectCard/messages.js b/frontend/src/components/projectCard/messages.ts
similarity index 100%
rename from frontend/src/components/projectCard/messages.js
rename to frontend/src/components/projectCard/messages.ts
diff --git a/frontend/src/components/projectCard/nCardPlaceholder.js b/frontend/src/components/projectCard/nCardPlaceholder.jsx
similarity index 100%
rename from frontend/src/components/projectCard/nCardPlaceholder.js
rename to frontend/src/components/projectCard/nCardPlaceholder.jsx
diff --git a/frontend/src/components/projectCard/priorityBox.js b/frontend/src/components/projectCard/priorityBox.jsx
similarity index 98%
rename from frontend/src/components/projectCard/priorityBox.js
rename to frontend/src/components/projectCard/priorityBox.jsx
index 6a28b7f4f2..5734c39029 100644
--- a/frontend/src/components/projectCard/priorityBox.js
+++ b/frontend/src/components/projectCard/priorityBox.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import { ClockIcon } from '../svgIcons';
 
-export function PriorityBox({ priority, extraClasses, showIcon }: Object) {
+export function PriorityBox({ priority, extraClasses, showIcon }) {
   let color = 'blue-grey b--blue-grey';
   if (priority === 'URGENT') color = 'red b--red';
   if (priority === 'HIGH') color = 'orange b--orange';
diff --git a/frontend/src/components/projectCard/projectCard.js b/frontend/src/components/projectCard/projectCard.jsx
similarity index 99%
rename from frontend/src/components/projectCard/projectCard.js
rename to frontend/src/components/projectCard/projectCard.jsx
index e87de365b3..601fadf442 100644
--- a/frontend/src/components/projectCard/projectCard.js
+++ b/frontend/src/components/projectCard/projectCard.jsx
@@ -18,7 +18,7 @@ export function ProjectTeaser({
   className,
   littleFont = 'f7',
   bigFont = 'f6',
-}: Object) {
+}) {
   /* outerDivStyles must have f6 even if sub-divs have f7 to fix grid issues*/
   const outerDivStyles = 'f6 tl blue-grey truncate mb2';
 
@@ -63,7 +63,7 @@ export function ProjectCard({
   percentValidated,
   totalContributors,
   showBottomButtons = false,
-}: Object) {
+}) {
   const [isHovered, setHovered] = useState(false);
   const linkCombo = 'link pa2 f6 ba b--grey-light di w-50 truncate tc';
 
diff --git a/frontend/src/components/projectCard/projectProgressBar.js b/frontend/src/components/projectCard/projectProgressBar.jsx
similarity index 98%
rename from frontend/src/components/projectCard/projectProgressBar.js
rename to frontend/src/components/projectCard/projectProgressBar.jsx
index d16d69e000..1d22573996 100644
--- a/frontend/src/components/projectCard/projectProgressBar.js
+++ b/frontend/src/components/projectCard/projectProgressBar.jsx
@@ -9,7 +9,7 @@ export default function ProjectProgressBar({
   percentBadImagery,
   className,
   small = true,
-}: Object) {
+}) {
   return (
     <>
       <ProgressBar
diff --git a/frontend/src/components/projectCreate/fileUploadErrors.js b/frontend/src/components/projectCreate/fileUploadErrors.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/fileUploadErrors.js
rename to frontend/src/components/projectCreate/fileUploadErrors.jsx
diff --git a/frontend/src/components/projectCreate/index.js b/frontend/src/components/projectCreate/index.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/index.js
rename to frontend/src/components/projectCreate/index.jsx
diff --git a/frontend/src/components/projectCreate/projectCreationMap.js b/frontend/src/components/projectCreate/projectCreationMap.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/projectCreationMap.js
rename to frontend/src/components/projectCreate/projectCreationMap.jsx
diff --git a/frontend/src/components/projectCreate/projectsAOILayerCheckBox.js b/frontend/src/components/projectCreate/projectsAOILayerCheckBox.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/projectsAOILayerCheckBox.js
rename to frontend/src/components/projectCreate/projectsAOILayerCheckBox.jsx
diff --git a/frontend/src/components/projectCreate/review.js b/frontend/src/components/projectCreate/review.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/review.js
rename to frontend/src/components/projectCreate/review.jsx
diff --git a/frontend/src/components/projectCreate/setAOI.js b/frontend/src/components/projectCreate/setAOI.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/setAOI.js
rename to frontend/src/components/projectCreate/setAOI.jsx
diff --git a/frontend/src/components/projectCreate/setTaskSizes.js b/frontend/src/components/projectCreate/setTaskSizes.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/setTaskSizes.js
rename to frontend/src/components/projectCreate/setTaskSizes.jsx
diff --git a/frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.js b/frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.js
rename to frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.jsx
diff --git a/frontend/src/components/projectCreate/tests/setTaskSizes.test.js b/frontend/src/components/projectCreate/tests/setTaskSizes.test.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/tests/setTaskSizes.test.js
rename to frontend/src/components/projectCreate/tests/setTaskSizes.test.jsx
diff --git a/frontend/src/components/projectCreate/trimProject.js b/frontend/src/components/projectCreate/trimProject.jsx
similarity index 100%
rename from frontend/src/components/projectCreate/trimProject.js
rename to frontend/src/components/projectCreate/trimProject.jsx
diff --git a/frontend/src/components/projectDetail/bigProjectTeaser.js b/frontend/src/components/projectDetail/bigProjectTeaser.jsx
similarity index 97%
rename from frontend/src/components/projectDetail/bigProjectTeaser.js
rename to frontend/src/components/projectDetail/bigProjectTeaser.jsx
index 9d9a98af92..8b466a4000 100644
--- a/frontend/src/components/projectDetail/bigProjectTeaser.js
+++ b/frontend/src/components/projectDetail/bigProjectTeaser.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import { RelativeTimeWithUnit } from '../../utils/formattedRelativeTime';
 
-export function BigProjectTeaser({ lastUpdated, totalContributors, style = {} }: Object) {
+export function BigProjectTeaser({ lastUpdated, totalContributors, style = {} }) {
   return (
     <div className="flex justify-between mt4 mb3 blue-grey items-center" style={style}>
       <span>
diff --git a/frontend/src/components/projectDetail/downloadButtons.js b/frontend/src/components/projectDetail/downloadButtons.jsx
similarity index 84%
rename from frontend/src/components/projectDetail/downloadButtons.js
rename to frontend/src/components/projectDetail/downloadButtons.jsx
index 2bf57c69bf..0adf7c93be 100644
--- a/frontend/src/components/projectDetail/downloadButtons.js
+++ b/frontend/src/components/projectDetail/downloadButtons.jsx
@@ -5,7 +5,7 @@ import { API_URL } from '../../config';
 import { CustomButton } from '../button';
 import { NineCellsGridIcon, MappedIcon } from '../svgIcons';
 
-export const DownloadAOIButton = ({ projectId, className }: Object) => (
+export const DownloadAOIButton = ({ projectId, className }) => (
   <a
     href={`${API_URL}projects/${projectId}/queries/aoi/?as_file=true`}
     download={`project-${projectId}-aoi.geojson`}
@@ -16,7 +16,7 @@ export const DownloadAOIButton = ({ projectId, className }: Object) => (
   </a>
 );
 
-export const DownloadTaskGridButton = ({ projectId, className }: Object) => (
+export const DownloadTaskGridButton = ({ projectId, className }) => (
   <a
     href={`${API_URL}projects/${projectId}/tasks/?as_file=true`}
     download={`project-${projectId}-tasks.geojson`}
diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/downloadOsmData.js
rename to frontend/src/components/projectDetail/downloadOsmData.jsx
diff --git a/frontend/src/components/projectDetail/favorites.js b/frontend/src/components/projectDetail/favorites.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/favorites.js
rename to frontend/src/components/projectDetail/favorites.jsx
diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/fileFormatCard.js
rename to frontend/src/components/projectDetail/fileFormatCard.jsx
diff --git a/frontend/src/components/projectDetail/footer.js b/frontend/src/components/projectDetail/footer.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/footer.js
rename to frontend/src/components/projectDetail/footer.jsx
diff --git a/frontend/src/components/projectDetail/header.js b/frontend/src/components/projectDetail/header.jsx
similarity index 96%
rename from frontend/src/components/projectDetail/header.js
rename to frontend/src/components/projectDetail/header.jsx
index a0b0fb29fd..d342d6bebc 100644
--- a/frontend/src/components/projectDetail/header.js
+++ b/frontend/src/components/projectDetail/header.jsx
@@ -10,7 +10,7 @@ import { ProjectStatusBox } from './statusBox';
 import { EditButton } from '../button';
 import { useEditProjectAllowed } from '../../hooks/UsePermissions';
 
-export function HeaderLine({ author, projectId, priority, showEditLink, organisation }: Object) {
+export function HeaderLine({ author, projectId, priority, showEditLink, organisation }) {
   const projectIdLink = (
     <Link to={`/projects/${projectId}`} className="no-underline pointer">
       <span className="blue-light">#{projectId}</span>
@@ -38,7 +38,7 @@ export function HeaderLine({ author, projectId, priority, showEditLink, organisa
   );
 }
 
-export const ProjectHeader = ({ project, showEditLink }: Object) => {
+export const ProjectHeader = ({ project, showEditLink }) => {
   const locale = useSelector((state) => state.preferences.locale);
   const [userCanEditProject] = useEditProjectAllowed(project);
 
@@ -74,7 +74,7 @@ export const ProjectHeader = ({ project, showEditLink }: Object) => {
   );
 };
 
-export function TagLine({ campaigns = [], countries = [], interests = [] }: Object) {
+export function TagLine({ campaigns = [], countries = [], interests = [] }) {
   const locale = useSelector((state) => state.preferences.locale);
   const formattedCampaigns = campaigns.map((campaign) => campaign.name).join(', ');
   const formattedCountries = locale.includes('en') ? countries.join(', ') : countries;
diff --git a/frontend/src/components/projectDetail/index.js b/frontend/src/components/projectDetail/index.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/index.js
rename to frontend/src/components/projectDetail/index.jsx
diff --git a/frontend/src/components/projectDetail/infoPanel.js b/frontend/src/components/projectDetail/infoPanel.jsx
similarity index 99%
rename from frontend/src/components/projectDetail/infoPanel.js
rename to frontend/src/components/projectDetail/infoPanel.jsx
index 8f4e2ac41e..f887076108 100644
--- a/frontend/src/components/projectDetail/infoPanel.js
+++ b/frontend/src/components/projectDetail/infoPanel.jsx
@@ -32,7 +32,7 @@ const ProjectDetailTypeBar = (props) => {
   );
 };
 
-export function ProjectInfoPanel({ project, tasks, contributors, type }: Object) {
+export function ProjectInfoPanel({ project, tasks, contributors, type }) {
   const intl = useIntl();
   const { percentMapped, percentValidated, percentBadImagery } = useComputeCompleteness(tasks);
   return (
diff --git a/frontend/src/components/projectDetail/liveViewButton.js b/frontend/src/components/projectDetail/liveViewButton.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/liveViewButton.js
rename to frontend/src/components/projectDetail/liveViewButton.jsx
diff --git a/frontend/src/components/projectDetail/osmchaButton.js b/frontend/src/components/projectDetail/osmchaButton.jsx
similarity index 96%
rename from frontend/src/components/projectDetail/osmchaButton.js
rename to frontend/src/components/projectDetail/osmchaButton.jsx
index 3734ab88cb..8a69814d74 100644
--- a/frontend/src/components/projectDetail/osmchaButton.js
+++ b/frontend/src/components/projectDetail/osmchaButton.jsx
@@ -5,7 +5,7 @@ import { CustomButton } from '../button';
 import { ExternalLinkIcon } from '../svgIcons';
 import { formatOSMChaLink } from '../../utils/osmchaLink';
 
-export const OSMChaButton = ({ project, className, compact = false, children }: Object) => (
+export const OSMChaButton = ({ project, className, compact = false, children }) => (
   <a href={formatOSMChaLink(project)} target="_blank" rel="noopener noreferrer">
     {children || (
       <CustomButton className={className}>
diff --git a/frontend/src/components/projectDetail/permissionBox.js b/frontend/src/components/projectDetail/permissionBox.jsx
similarity index 97%
rename from frontend/src/components/projectDetail/permissionBox.js
rename to frontend/src/components/projectDetail/permissionBox.jsx
index 5cfe1d2517..8a6a83db9b 100644
--- a/frontend/src/components/projectDetail/permissionBox.js
+++ b/frontend/src/components/projectDetail/permissionBox.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 
-export const PermissionBox = ({ permission, validation = false, className }: Object) => {
+export const PermissionBox = ({ permission, validation = false, className }) => {
   const teamString = (
     <span className={`${permission === 'TEAMS_LEVEL' ? 'ttl' : ''}`}>
       {validation ? (
diff --git a/frontend/src/components/projectDetail/privateProjectError.js b/frontend/src/components/projectDetail/privateProjectError.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/privateProjectError.js
rename to frontend/src/components/projectDetail/privateProjectError.jsx
diff --git a/frontend/src/components/projectDetail/projectDetailPlaceholder.js b/frontend/src/components/projectDetail/projectDetailPlaceholder.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/projectDetailPlaceholder.js
rename to frontend/src/components/projectDetail/projectDetailPlaceholder.jsx
diff --git a/frontend/src/components/projectDetail/questionsAndComments.js b/frontend/src/components/projectDetail/questionsAndComments.jsx
similarity index 99%
rename from frontend/src/components/projectDetail/questionsAndComments.js
rename to frontend/src/components/projectDetail/questionsAndComments.jsx
index d69ac509d3..07e19a4cb6 100644
--- a/frontend/src/components/projectDetail/questionsAndComments.js
+++ b/frontend/src/components/projectDetail/questionsAndComments.jsx
@@ -142,7 +142,7 @@ export const QuestionsAndComments = ({ project, contributors, titleClass }) => {
   );
 };
 
-export function CommentList({ userCanEditProject, projectId, comments, retryFn }: Object) {
+export function CommentList({ userCanEditProject, projectId, comments, retryFn }) {
   const username = useSelector((state) => state.auth.userDetails.username);
 
   return (
diff --git a/frontend/src/components/projectDetail/shareButton.js b/frontend/src/components/projectDetail/shareButton.jsx
similarity index 97%
rename from frontend/src/components/projectDetail/shareButton.js
rename to frontend/src/components/projectDetail/shareButton.jsx
index acdce7cf4b..65e3a8a57a 100644
--- a/frontend/src/components/projectDetail/shareButton.js
+++ b/frontend/src/components/projectDetail/shareButton.jsx
@@ -7,7 +7,7 @@ import { createPopup } from '../../utils/login';
 import { getTwitterLink, getLinkedInLink, getFacebookLink } from '../../utils/shareFunctions';
 import { TwitterIcon, FacebookIcon, LinkedinIcon, ShareIcon } from '../svgIcons';
 
-export function ShareButton({ projectId }: Object) {
+export function ShareButton({ projectId }) {
   const iconStyle = { width: '1.4em', height: '1.4em' };
 
   const twitterPopup = (message) =>
diff --git a/frontend/src/components/projectDetail/similarProjects.js b/frontend/src/components/projectDetail/similarProjects.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/similarProjects.js
rename to frontend/src/components/projectDetail/similarProjects.jsx
diff --git a/frontend/src/components/projectDetail/tests/bigProjectTeaser.test.js b/frontend/src/components/projectDetail/tests/bigProjectTeaser.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/bigProjectTeaser.test.js
rename to frontend/src/components/projectDetail/tests/bigProjectTeaser.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/downloadButtons.test.js b/frontend/src/components/projectDetail/tests/downloadButtons.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/downloadButtons.test.js
rename to frontend/src/components/projectDetail/tests/downloadButtons.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/favorites.test.js b/frontend/src/components/projectDetail/tests/favorites.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/favorites.test.js
rename to frontend/src/components/projectDetail/tests/favorites.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/footer.test.js b/frontend/src/components/projectDetail/tests/footer.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/footer.test.js
rename to frontend/src/components/projectDetail/tests/footer.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/header.test.js b/frontend/src/components/projectDetail/tests/header.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/header.test.js
rename to frontend/src/components/projectDetail/tests/header.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/infoPanel.test.js b/frontend/src/components/projectDetail/tests/infoPanel.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/infoPanel.test.js
rename to frontend/src/components/projectDetail/tests/infoPanel.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/osmchaButton.test.js b/frontend/src/components/projectDetail/tests/osmchaButton.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/osmchaButton.test.js
rename to frontend/src/components/projectDetail/tests/osmchaButton.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/permissionBox.test.js b/frontend/src/components/projectDetail/tests/permissionBox.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/permissionBox.test.js
rename to frontend/src/components/projectDetail/tests/permissionBox.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/privateProjectError.test.js b/frontend/src/components/projectDetail/tests/privateProjectError.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/privateProjectError.test.js
rename to frontend/src/components/projectDetail/tests/privateProjectError.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/questionsAndComments.test.js b/frontend/src/components/projectDetail/tests/questionsAndComments.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/questionsAndComments.test.js
rename to frontend/src/components/projectDetail/tests/questionsAndComments.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/shareButton.test.js b/frontend/src/components/projectDetail/tests/shareButton.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/shareButton.test.js
rename to frontend/src/components/projectDetail/tests/shareButton.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/similarProjects.test.js b/frontend/src/components/projectDetail/tests/similarProjects.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/similarProjects.test.js
rename to frontend/src/components/projectDetail/tests/similarProjects.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/statusBox.test.js b/frontend/src/components/projectDetail/tests/statusBox.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/statusBox.test.js
rename to frontend/src/components/projectDetail/tests/statusBox.test.jsx
diff --git a/frontend/src/components/projectDetail/tests/visibilityBox.test.js b/frontend/src/components/projectDetail/tests/visibilityBox.test.jsx
similarity index 100%
rename from frontend/src/components/projectDetail/tests/visibilityBox.test.js
rename to frontend/src/components/projectDetail/tests/visibilityBox.test.jsx
diff --git a/frontend/src/components/projectDetail/visibilityBox.js b/frontend/src/components/projectDetail/visibilityBox.jsx
similarity index 84%
rename from frontend/src/components/projectDetail/visibilityBox.js
rename to frontend/src/components/projectDetail/visibilityBox.jsx
index c0bf422fe9..0e8e42b11d 100644
--- a/frontend/src/components/projectDetail/visibilityBox.js
+++ b/frontend/src/components/projectDetail/visibilityBox.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { LockIcon } from '../svgIcons';
 import messages from './messages';
 
-export const ProjectVisibilityBox = ({ className }: Object) => {
+export const ProjectVisibilityBox = ({ className }) => {
   return (
     <div className={`tc br1 f7 ttu ba b--red red ${className}`}>
       <LockIcon title="lock" className="red v-mid mr1" style={{ height: '13px', width: '13px' }} />
diff --git a/frontend/src/components/projectEdit/actionsForm.js b/frontend/src/components/projectEdit/actionsForm.jsx
similarity index 97%
rename from frontend/src/components/projectEdit/actionsForm.js
rename to frontend/src/components/projectEdit/actionsForm.jsx
index f1a25b2393..bd5726b3ce 100644
--- a/frontend/src/components/projectEdit/actionsForm.js
+++ b/frontend/src/components/projectEdit/actionsForm.jsx
@@ -81,7 +81,7 @@ const ActionStatus = ({ status, action }) => {
   );
 };
 
-const ResetTasksModal = ({ projectId, close }: Object) => {
+const ResetTasksModal = ({ projectId, close }) => {
   const token = useSelector((state) => state.auth.token);
 
   const resetTasks = () => {
@@ -117,7 +117,7 @@ const ResetTasksModal = ({ projectId, close }: Object) => {
   );
 };
 
-const ResetBadImageryModal = ({ projectId, close }: Object) => {
+const ResetBadImageryModal = ({ projectId, close }) => {
   const token = useSelector((state) => state.auth.token);
 
   const resetBadImagery = () => {
@@ -161,7 +161,7 @@ const ResetBadImageryModal = ({ projectId, close }: Object) => {
   );
 };
 
-const ValidateAllTasksModal = ({ projectId, close }: Object) => {
+const ValidateAllTasksModal = ({ projectId, close }) => {
   const token = useSelector((state) => state.auth.token);
 
   const validateAllTasks = () => {
@@ -201,7 +201,7 @@ const ValidateAllTasksModal = ({ projectId, close }: Object) => {
   );
 };
 
-const InvalidateAllTasksModal = ({ projectId, close }: Object) => {
+const InvalidateAllTasksModal = ({ projectId, close }) => {
   const token = useSelector((state) => state.auth.token);
 
   const invalidateAllTasks = () => {
@@ -241,7 +241,7 @@ const InvalidateAllTasksModal = ({ projectId, close }: Object) => {
   );
 };
 
-const MapAllTasksModal = ({ projectId, close }: Object) => {
+const MapAllTasksModal = ({ projectId, close }) => {
   const token = useSelector((state) => state.auth.token);
 
   const mapAllTasks = () => {
@@ -278,7 +278,7 @@ const MapAllTasksModal = ({ projectId, close }: Object) => {
   );
 };
 
-const MessageContributorsModal = ({ projectId, close }: Object) => {
+const MessageContributorsModal = ({ projectId, close }) => {
   const [subject, setSubject] = useState('');
   const [message, setMessage] = useState('');
   const token = useSelector((state) => state.auth.token);
@@ -421,7 +421,7 @@ const RevertTasks = ({ projectId, action }) => {
   );
 };
 
-const TransferProject = ({ projectId, orgId }: Object) => {
+const TransferProject = ({ projectId, orgId }) => {
   const token = useSelector((state) => state.auth.token);
   const { projectInfo } = useContext(StateContext);
   const [username, setUsername] = useState('');
@@ -512,7 +512,7 @@ const FormattedButtonTrigger = forwardRef((props, ref) => (
   <Button {...props}>{props.children}</Button>
 ));
 
-export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
+export const ActionsForm = ({ projectId, projectName, orgId }) => {
   const navigate = useNavigate();
 
   return (
diff --git a/frontend/src/components/projectEdit/customEditorForm.js b/frontend/src/components/projectEdit/customEditorForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/customEditorForm.js
rename to frontend/src/components/projectEdit/customEditorForm.jsx
diff --git a/frontend/src/components/projectEdit/descriptionForm.js b/frontend/src/components/projectEdit/descriptionForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/descriptionForm.js
rename to frontend/src/components/projectEdit/descriptionForm.jsx
diff --git a/frontend/src/components/projectEdit/extraIdParams.js b/frontend/src/components/projectEdit/extraIdParams.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/extraIdParams.js
rename to frontend/src/components/projectEdit/extraIdParams.jsx
diff --git a/frontend/src/components/projectEdit/imageryForm.js b/frontend/src/components/projectEdit/imageryForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/imageryForm.js
rename to frontend/src/components/projectEdit/imageryForm.jsx
diff --git a/frontend/src/components/projectEdit/inputLocale.js b/frontend/src/components/projectEdit/inputLocale.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/inputLocale.js
rename to frontend/src/components/projectEdit/inputLocale.jsx
diff --git a/frontend/src/components/projectEdit/instructionsForm.js b/frontend/src/components/projectEdit/instructionsForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/instructionsForm.js
rename to frontend/src/components/projectEdit/instructionsForm.jsx
diff --git a/frontend/src/components/projectEdit/localeOption.js b/frontend/src/components/projectEdit/localeOption.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/localeOption.js
rename to frontend/src/components/projectEdit/localeOption.jsx
diff --git a/frontend/src/components/projectEdit/messages.js b/frontend/src/components/projectEdit/messages.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/messages.js
rename to frontend/src/components/projectEdit/messages.jsx
diff --git a/frontend/src/components/projectEdit/metadataForm.js b/frontend/src/components/projectEdit/metadataForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/metadataForm.js
rename to frontend/src/components/projectEdit/metadataForm.jsx
diff --git a/frontend/src/components/projectEdit/partnersForm.js b/frontend/src/components/projectEdit/partnersForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/partnersForm.js
rename to frontend/src/components/projectEdit/partnersForm.jsx
diff --git a/frontend/src/components/projectEdit/partnersListing.js b/frontend/src/components/projectEdit/partnersListing.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/partnersListing.js
rename to frontend/src/components/projectEdit/partnersListing.jsx
diff --git a/frontend/src/components/projectEdit/permissionsBlock.js b/frontend/src/components/projectEdit/permissionsBlock.jsx
similarity index 95%
rename from frontend/src/components/projectEdit/permissionsBlock.js
rename to frontend/src/components/projectEdit/permissionsBlock.jsx
index dc9aa7fcd3..1ceffa080d 100644
--- a/frontend/src/components/projectEdit/permissionsBlock.js
+++ b/frontend/src/components/projectEdit/permissionsBlock.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages.js';
 import { StateContext, styleClasses } from '../../views/projectEdit';
 
-export const PermissionsBlock = ({ permissions, type }: Object) => {
+export const PermissionsBlock = ({ permissions, type }) => {
   const { projectInfo, setProjectInfo } = useContext(StateContext);
 
   return (
diff --git a/frontend/src/components/projectEdit/permissionsForm.js b/frontend/src/components/projectEdit/permissionsForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/permissionsForm.js
rename to frontend/src/components/projectEdit/permissionsForm.jsx
diff --git a/frontend/src/components/projectEdit/priorityAreasForm.js b/frontend/src/components/projectEdit/priorityAreasForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/priorityAreasForm.js
rename to frontend/src/components/projectEdit/priorityAreasForm.jsx
diff --git a/frontend/src/components/projectEdit/projectInterests.js b/frontend/src/components/projectEdit/projectInterests.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/projectInterests.js
rename to frontend/src/components/projectEdit/projectInterests.jsx
diff --git a/frontend/src/components/projectEdit/settingsForm.js b/frontend/src/components/projectEdit/settingsForm.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/settingsForm.js
rename to frontend/src/components/projectEdit/settingsForm.jsx
diff --git a/frontend/src/components/projectEdit/teamSelect.js b/frontend/src/components/projectEdit/teamSelect.jsx
similarity index 100%
rename from frontend/src/components/projectEdit/teamSelect.js
rename to frontend/src/components/projectEdit/teamSelect.jsx
diff --git a/frontend/src/components/projectStats/completion.js b/frontend/src/components/projectStats/completion.jsx
similarity index 94%
rename from frontend/src/components/projectStats/completion.js
rename to frontend/src/components/projectStats/completion.jsx
index ab96b71a77..61c9c1edb2 100644
--- a/frontend/src/components/projectStats/completion.js
+++ b/frontend/src/components/projectStats/completion.jsx
@@ -2,7 +2,7 @@ import { FormattedMessage, FormattedNumber } from 'react-intl';
 
 import messages from './messages';
 
-export const CompletionStats = ({ tasksByStatus }: Object) => {
+export const CompletionStats = ({ tasksByStatus }) => {
   const tasksToMap = tasksByStatus.invalidated + tasksByStatus.ready;
   const tasksToValidate =
     tasksByStatus.totalTasks -
diff --git a/frontend/src/components/projectStats/contributorsStats.js b/frontend/src/components/projectStats/contributorsStats.jsx
similarity index 100%
rename from frontend/src/components/projectStats/contributorsStats.js
rename to frontend/src/components/projectStats/contributorsStats.jsx
diff --git a/frontend/src/components/projectStats/edits.js b/frontend/src/components/projectStats/edits.jsx
similarity index 100%
rename from frontend/src/components/projectStats/edits.js
rename to frontend/src/components/projectStats/edits.jsx
diff --git a/frontend/src/components/projectStats/messages.js b/frontend/src/components/projectStats/messages.ts
similarity index 100%
rename from frontend/src/components/projectStats/messages.js
rename to frontend/src/components/projectStats/messages.ts
diff --git a/frontend/src/components/projectStats/taskStatus.js b/frontend/src/components/projectStats/taskStatus.jsx
similarity index 100%
rename from frontend/src/components/projectStats/taskStatus.js
rename to frontend/src/components/projectStats/taskStatus.jsx
diff --git a/frontend/src/components/projectStats/timeStats.js b/frontend/src/components/projectStats/timeStats.jsx
similarity index 100%
rename from frontend/src/components/projectStats/timeStats.js
rename to frontend/src/components/projectStats/timeStats.jsx
diff --git a/frontend/src/components/projects/downloadAsCSV.js b/frontend/src/components/projects/downloadAsCSV.jsx
similarity index 100%
rename from frontend/src/components/projects/downloadAsCSV.js
rename to frontend/src/components/projects/downloadAsCSV.jsx
diff --git a/frontend/src/components/projects/exploreProjectsTable.js b/frontend/src/components/projects/exploreProjectsTable.jsx
similarity index 100%
rename from frontend/src/components/projects/exploreProjectsTable.js
rename to frontend/src/components/projects/exploreProjectsTable.jsx
diff --git a/frontend/src/components/projects/list.jsx b/frontend/src/components/projects/list.jsx
index b9afb86a5a..510a0bdc95 100644
--- a/frontend/src/components/projects/list.jsx
+++ b/frontend/src/components/projects/list.jsx
@@ -7,7 +7,7 @@ import { MapIcon, MappedIcon, ValidatedIcon, GearIcon, UserIcon } from '../svgIc
 import { ProjectStatusBox } from '../projectDetail/statusBox';
 import { PriorityBox } from '../projectCard/priorityBox';
 
-export function ProjectListItem({ project }: Object) {
+export function ProjectListItem({ project }) {
   return (
     <div className="bg-white bluedark base-font w-100 mb1 db h3">
       <div className="pv3 ph3-l ph2 br1 cf">
diff --git a/frontend/src/components/projects/myProjectNav.jsx b/frontend/src/components/projects/myProjectNav.jsx
index a7ddee0a47..663bac0329 100644
--- a/frontend/src/components/projects/myProjectNav.jsx
+++ b/frontend/src/components/projects/myProjectNav.jsx
@@ -223,13 +223,7 @@ export const MyProjectNav = (props) => {
   );
 };
 
-export function FilterButton({
-  currentQuery,
-  newQueryParams,
-  setQuery,
-  isActive,
-  children,
-}: Object) {
+export function FilterButton({ currentQuery, newQueryParams, setQuery, isActive, children }) {
   const linkCombo = 'di mh1 link ph3 f6 pv2 mv1 ba b--grey-light';
   return (
     <CustomButton
@@ -241,7 +235,7 @@ export function FilterButton({
   );
 }
 
-function ManagerFilters({ query, setQuery }: Object) {
+function ManagerFilters({ query, setQuery }) {
   const userDetails = useSelector((state) => state.auth.userDetails);
   const [campaignsError, campaignsLoading, campaigns] = useFetch('campaigns/');
   const [orgsError, orgsLoading, organisations] = useFetch(
diff --git a/frontend/src/components/projects/partnersFilterSelect.js b/frontend/src/components/projects/partnersFilterSelect.jsx
similarity index 100%
rename from frontend/src/components/projects/partnersFilterSelect.js
rename to frontend/src/components/projects/partnersFilterSelect.jsx
diff --git a/frontend/src/components/projects/projectsMap.js b/frontend/src/components/projects/projectsMap.jsx
similarity index 100%
rename from frontend/src/components/projects/projectsMap.js
rename to frontend/src/components/projects/projectsMap.jsx
diff --git a/frontend/src/components/rapidEditor.js b/frontend/src/components/rapidEditor.jsx
similarity index 100%
rename from frontend/src/components/rapidEditor.js
rename to frontend/src/components/rapidEditor.jsx
diff --git a/frontend/src/components/redirect.js b/frontend/src/components/redirect.jsx
similarity index 100%
rename from frontend/src/components/redirect.js
rename to frontend/src/components/redirect.jsx
diff --git a/frontend/src/components/statsCard.js b/frontend/src/components/statsCard.jsx
similarity index 99%
rename from frontend/src/components/statsCard.js
rename to frontend/src/components/statsCard.jsx
index cba58debd9..582617c3ae 100644
--- a/frontend/src/components/statsCard.js
+++ b/frontend/src/components/statsCard.jsx
@@ -70,7 +70,7 @@ StatsCardWithFooter.propTypes = {
   style: PropTypes.object,
 };
 
-export const StatsCardContent = ({ value, label, className, invertColors = false }: Object) => (
+export const StatsCardContent = ({ value, label, className, invertColors = false }) => (
   <div className={className}>
     <h3 className={`ma0 mb1 barlow-condensed f2 fw5 ${invertColors ? 'white' : 'red'}`}>{value}</h3>
     <span className={`ma0 h2 f7 fw5 ${invertColors ? 'white' : 'blue-grey'}`}>{label}</span>
diff --git a/frontend/src/components/svgIcons/fullscreen.js b/frontend/src/components/svgIcons/fullscreen.js
deleted file mode 100644
index 7119bdf953..0000000000
--- a/frontend/src/components/svgIcons/fullscreen.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { PureComponent } from 'react';
-
-export class FullscreenIcon extends PureComponent {
-  render() {
-    return (
-      <svg width="16" height="16" {...this.props} viewBox="0 0 16 16">
-        <path
-          fill="currentColor"
-          d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"
-        />
-      </svg>
-    );
-  }
-}
diff --git a/frontend/src/components/svgIcons/fullscreen.tsx b/frontend/src/components/svgIcons/fullscreen.tsx
new file mode 100644
index 0000000000..7f1d6f423d
--- /dev/null
+++ b/frontend/src/components/svgIcons/fullscreen.tsx
@@ -0,0 +1,10 @@
+import { HTMLProps } from 'react';
+
+export const FullscreenIcon = (props: HTMLProps<SVGSVGElement>) => (
+  <svg width="16" height="16" {...props} viewBox="0 0 16 16">
+    <path
+      fill="currentColor"
+      d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"
+    />
+  </svg>
+);
diff --git a/frontend/src/components/svgIcons/grid.tsx b/frontend/src/components/svgIcons/grid.tsx
index 693f81ebd5..54730b4df7 100644
--- a/frontend/src/components/svgIcons/grid.tsx
+++ b/frontend/src/components/svgIcons/grid.tsx
@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import { HTMLProps } from 'react';
 
 // Icons produced by FontAwesome project: https://github.com/FortAwesome/Font-Awesome/
 // License: CC-By 4.0
@@ -20,3 +20,46 @@ export const NineCellsGridIcon = (props: HTMLProps<SVGSVGElement>) => (
     />
   </svg>
 );
+
+export const FilledNineCellsGridIcon = (props: HTMLProps<SVGSVGElement>) => (
+  <svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" {...props}>
+    <g id="grid-2">
+      <path
+        d="M10.246,4.228c0-0.547-0.443-0.991-0.99-0.991H3.914c-0.548,0-0.991,0.443-0.991,0.991V9.57   c0,0.546,0.443,0.99,0.991,0.99h5.342c0.547,0,0.99-0.444,0.99-0.99V4.228z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.453,4.228c0-0.547-0.443-0.991-0.991-0.991h-5.343c-0.546,0-0.99,0.443-0.99,0.991V9.57   c0,0.546,0.444,0.99,0.99,0.99h5.343c0.548,0,0.991-0.444,0.991-0.99V4.228z"
+        fill="currentColor"
+      />
+      <path
+        d="M28.868,4.228c0-0.547-0.443-0.991-0.99-0.991h-5.342c-0.548,0-0.991,0.443-0.991,0.991V9.57   c0,0.546,0.443,0.99,0.991,0.99h5.342c0.547,0,0.99-0.444,0.99-0.99V4.228z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.246,13.224c0-0.547-0.443-0.99-0.99-0.99H3.914c-0.548,0-0.991,0.443-0.991,0.99v5.342   c0,0.549,0.443,0.99,0.991,0.99h5.342c0.547,0,0.99-0.441,0.99-0.99V13.224z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.453,13.224c0-0.547-0.443-0.99-0.991-0.99h-5.343c-0.546,0-0.99,0.443-0.99,0.99v5.342   c0,0.549,0.444,0.99,0.99,0.99h5.343c0.548,0,0.991-0.441,0.991-0.99V13.224z"
+        fill="currentColor"
+      />
+      <path
+        d="M28.868,13.224c0-0.547-0.443-0.99-0.99-0.99h-5.342c-0.548,0-0.991,0.443-0.991,0.99v5.342   c0,0.549,0.443,0.99,0.991,0.99h5.342c0.547,0,0.99-0.441,0.99-0.99V13.224z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.246,22.43c0-0.545-0.443-0.99-0.99-0.99H3.914c-0.548,0-0.991,0.445-0.991,0.99v5.344   c0,0.547,0.443,0.99,0.991,0.99h5.342c0.547,0,0.99-0.443,0.99-0.99V22.43z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.453,22.43c0-0.545-0.443-0.99-0.991-0.99h-5.343c-0.546,0-0.99,0.445-0.99,0.99v5.344   c0,0.547,0.444,0.99,0.99,0.99h5.343c0.548,0,0.991-0.443,0.991-0.99V22.43z"
+        fill="currentColor"
+      />
+      <path
+        d="M28.868,22.43c0-0.545-0.443-0.99-0.99-0.99h-5.342c-0.548,0-0.991,0.445-0.991,0.99v5.344   c0,0.547,0.443,0.99,0.991,0.99h5.342c0.547,0,0.99-0.443,0.99-0.99V22.43z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
diff --git a/frontend/src/components/taskSelection/action.js b/frontend/src/components/taskSelection/action.jsx
similarity index 100%
rename from frontend/src/components/taskSelection/action.js
rename to frontend/src/components/taskSelection/action.jsx
diff --git a/frontend/src/components/taskSelection/actionSidebars.js b/frontend/src/components/taskSelection/actionSidebars.jsx
similarity index 98%
rename from frontend/src/components/taskSelection/actionSidebars.js
rename to frontend/src/components/taskSelection/actionSidebars.jsx
index 8b54258569..085d7bf472 100644
--- a/frontend/src/components/taskSelection/actionSidebars.js
+++ b/frontend/src/components/taskSelection/actionSidebars.jsx
@@ -55,7 +55,7 @@ export function CompletionTabForMapping({
   setTaskComment,
   selectedStatus,
   setSelectedStatus,
-}: Object) {
+}) {
   const navigate = useNavigate();
   const token = useSelector((state) => state.auth.token);
   const locale = useSelector((state) => state.preferences['locale']);
@@ -345,7 +345,7 @@ export function CompletionTabForValidation({
   setValidationStatus,
   validationComments,
   setValidationComments,
-}: Object) {
+}) {
   const navigate = useNavigate();
   const token = useSelector((state) => state.auth.token);
   const locale = useSelector((state) => state.preferences.locale);
@@ -706,7 +706,7 @@ const TaskValidationSelector = ({
   );
 };
 
-function CompletionInstructions({ setVisibility }: Object) {
+function CompletionInstructions({ setVisibility }) {
   return (
     <div className="dib ph4-l w-100 cf">
       <h4 className="fw8 f5 blue-dark di">
@@ -737,7 +737,7 @@ function CompletionInstructions({ setVisibility }: Object) {
   );
 }
 
-export function ReopenEditor({ project, action, editor, callEditor }: Object) {
+export function ReopenEditor({ project, action, editor, callEditor }) {
   const editorOptions = getEditors(
     action === 'MAPPING' ? project.mappingEditors : project.validationEditors,
     project.customEditor,
@@ -764,7 +764,7 @@ export function ReopenEditor({ project, action, editor, callEditor }: Object) {
   );
 }
 
-export function SidebarToggle({ setShowSidebar, activeEditor }: Object) {
+export function SidebarToggle({ setShowSidebar, activeEditor }) {
   const iDContext = useSelector((state) => state.editor.context);
 
   return (
@@ -787,7 +787,7 @@ export function SidebarToggle({ setShowSidebar, activeEditor }: Object) {
   );
 }
 
-export function UnsavedMapChangesModalContent({ close, action }: Object) {
+export function UnsavedMapChangesModalContent({ close, action }) {
   return (
     <div className="blue-dark bg-white pv2 pv4-ns ph2 ph4-ns tc">
       <div className="cf tc red pb3">
@@ -810,7 +810,7 @@ export function UnsavedMapChangesModalContent({ close, action }: Object) {
   );
 }
 
-function TaskSplitErrorModalContent({ close }: Object) {
+function TaskSplitErrorModalContent({ close }) {
   return (
     <div className="blue-dark bg-white pv2 pv4-ns ph2 ph4-ns tc">
       <div className="cf tc orange pb3">
@@ -829,7 +829,7 @@ function TaskSplitErrorModalContent({ close }: Object) {
   );
 }
 
-function TaskSpecificInstructions({ instructions, open = true }: Object) {
+function TaskSpecificInstructions({ instructions, open = true }) {
   const [isOpen, setIsOpen] = useState(open);
   return (
     <>
diff --git a/frontend/src/components/taskSelection/actionTabsNav.js b/frontend/src/components/taskSelection/actionTabsNav.jsx
similarity index 100%
rename from frontend/src/components/taskSelection/actionTabsNav.js
rename to frontend/src/components/taskSelection/actionTabsNav.jsx
diff --git a/frontend/src/components/taskSelection/changesetComment.js b/frontend/src/components/taskSelection/changesetComment.jsx
similarity index 83%
rename from frontend/src/components/taskSelection/changesetComment.js
rename to frontend/src/components/taskSelection/changesetComment.jsx
index 30aef6dda0..97b9ce6459 100644
--- a/frontend/src/components/taskSelection/changesetComment.js
+++ b/frontend/src/components/taskSelection/changesetComment.jsx
@@ -2,7 +2,7 @@ import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 
-export function ChangesetCommentTags({ tags }: Object) {
+export function ChangesetCommentTags({ tags }) {
   return (
     <div className="cf pb3 blue-dark">
       <span className="fw6">
diff --git a/frontend/src/components/taskSelection/contributions.js b/frontend/src/components/taskSelection/contributions.jsx
similarity index 99%
rename from frontend/src/components/taskSelection/contributions.js
rename to frontend/src/components/taskSelection/contributions.jsx
index 0d6e7321c7..348e15015d 100644
--- a/frontend/src/components/taskSelection/contributions.js
+++ b/frontend/src/components/taskSelection/contributions.jsx
@@ -42,7 +42,7 @@ export const MappingLevelIcon = ({ mappingLevel }) => {
   return null;
 };
 
-function Contributor({ user, activeUser, activeStatus, displayTasks }: Object) {
+function Contributor({ user, activeUser, activeStatus, displayTasks }) {
   const intl = useIntl();
   const checkActiveUserAndStatus = (status, username) =>
     activeStatus === status && activeUser === username ? 'bg-blue-dark' : 'bg-grey-light';
diff --git a/frontend/src/components/taskSelection/extendSession.js b/frontend/src/components/taskSelection/extendSession.jsx
similarity index 100%
rename from frontend/src/components/taskSelection/extendSession.js
rename to frontend/src/components/taskSelection/extendSession.jsx
diff --git a/frontend/src/components/taskSelection/footer.js b/frontend/src/components/taskSelection/footer.jsx
similarity index 100%
rename from frontend/src/components/taskSelection/footer.js
rename to frontend/src/components/taskSelection/footer.jsx
diff --git a/frontend/src/components/taskSelection/imagery.js b/frontend/src/components/taskSelection/imagery.jsx
similarity index 97%
rename from frontend/src/components/taskSelection/imagery.js
rename to frontend/src/components/taskSelection/imagery.jsx
index 5901c49d8f..af11d58ed2 100644
--- a/frontend/src/components/taskSelection/imagery.js
+++ b/frontend/src/components/taskSelection/imagery.jsx
@@ -21,7 +21,7 @@ function getCustomMessageId(imagery) {
   }
 }
 
-export function Imagery({ value = '' }: Object) {
+export function Imagery({ value = '' }) {
   const intl = useIntl();
   //eslint-disable-next-line
   const imageryOption = useImageryOption(value);
diff --git a/frontend/src/components/taskSelection/instructions.js b/frontend/src/components/taskSelection/instructions.jsx
similarity index 97%
rename from frontend/src/components/taskSelection/instructions.js
rename to frontend/src/components/taskSelection/instructions.jsx
index a5ab4b9619..2432815dc5 100644
--- a/frontend/src/components/taskSelection/instructions.js
+++ b/frontend/src/components/taskSelection/instructions.jsx
@@ -4,7 +4,7 @@ import { htmlFromMarkdown } from '../../utils/htmlFromMarkdown';
 import { Alert } from '../alert';
 import messages from './messages';
 
-export function ProjectInstructions({ instructions, isProjectArchived }: Object) {
+export function ProjectInstructions({ instructions, isProjectArchived }) {
   const htmlInstructions = instructions ? htmlFromMarkdown(instructions) : { __html: '' };
 
   return (
diff --git a/frontend/src/components/taskSelection/legend.js b/frontend/src/components/taskSelection/legend.jsx
similarity index 100%
rename from frontend/src/components/taskSelection/legend.js
rename to frontend/src/components/taskSelection/legend.jsx
diff --git a/frontend/src/components/taskSelection/lockedTasks.js b/frontend/src/components/taskSelection/lockedTasks.jsx
similarity index 95%
rename from frontend/src/components/taskSelection/lockedTasks.js
rename to frontend/src/components/taskSelection/lockedTasks.jsx
index 0c65467353..562e28611a 100644
--- a/frontend/src/components/taskSelection/lockedTasks.js
+++ b/frontend/src/components/taskSelection/lockedTasks.jsx
@@ -8,7 +8,7 @@ import messages from './messages';
 import { Button } from '../button.jsx';
 import { useGetLockedTasks } from '../../hooks/UseLockedTasks';
 
-export function AnotherProjectLock({ projectId, lockedTasksLength, action }: Object) {
+export function AnotherProjectLock({ projectId, lockedTasksLength, action }) {
   const location = useLocation();
 
   return (
@@ -19,9 +19,9 @@ export function AnotherProjectLock({ projectId, lockedTasksLength, action }: Obj
       <div className="mv4 lh-title">
         <FormattedMessage
           {...messages[
-          lockedTasksLength > 1
-            ? 'anotherProjectLockTextPlural'
-            : 'anotherProjectLockTextSingular'
+            lockedTasksLength > 1
+              ? 'anotherProjectLockTextPlural'
+              : 'anotherProjectLockTextSingular'
           ]}
           values={{
             project: <span className="fw6">{projectId}</span>,
@@ -43,7 +43,7 @@ export function AnotherProjectLock({ projectId, lockedTasksLength, action }: Obj
   );
 }
 
-export function SameProjectLock({ lockedTasks, action }: Object) {
+export function SameProjectLock({ lockedTasks, action }) {
   const navigate = useNavigate();
   return (
     <>
@@ -53,9 +53,9 @@ export function SameProjectLock({ lockedTasks, action }: Object) {
       <div className="mv4 lh-title">
         <FormattedMessage
           {...messages[
-          lockedTasks.tasks.length > 1
-            ? 'currentProjectLockTextPlural'
-            : 'currentProjectLockTextSingular'
+            lockedTasks.tasks.length > 1
+              ? 'currentProjectLockTextPlural'
+              : 'currentProjectLockTextSingular'
           ]}
           values={{ taskId: <span className="fw6">{lockedTasks.tasks}</span> }}
         />
@@ -207,7 +207,7 @@ export function LockedTaskModalContent({
   tasks,
   selectedTasks,
   setSelectedTasks,
-}: Object) {
+}) {
   const lockedTasks = useGetLockedTasks();
   const action = lockedTasks.status === 'LOCKED_FOR_VALIDATION' ? 'validate' : 'map';
   const licenseError = error === 'UserLicenseError' && !lockedTasks.project;
diff --git a/frontend/src/components/taskSelection/map.js b/frontend/src/components/taskSelection/map.jsx
similarity index 100%
rename from frontend/src/components/taskSelection/map.js
rename to frontend/src/components/taskSelection/map.jsx
diff --git a/frontend/src/components/taskSelection/multipleTaskHistories.js b/frontend/src/components/taskSelection/multipleTaskHistories.jsx
similarity index 100%
rename from frontend/src/components/taskSelection/multipleTaskHistories.js
rename to frontend/src/components/taskSelection/multipleTaskHistories.jsx
diff --git a/frontend/src/components/taskSelection/permissionErrorModal.js b/frontend/src/components/taskSelection/permissionErrorModal.jsx
similarity index 99%
rename from frontend/src/components/taskSelection/permissionErrorModal.js
rename to frontend/src/components/taskSelection/permissionErrorModal.jsx
index b94a193b22..bd222dca4c 100644
--- a/frontend/src/components/taskSelection/permissionErrorModal.js
+++ b/frontend/src/components/taskSelection/permissionErrorModal.jsx
@@ -8,7 +8,7 @@ import { Button } from '../button.jsx';
 import { CloseIcon } from '../svgIcons';
 import { TeamBox } from '../teamsAndOrgs/teams';
 
-export function UserPermissionErrorContent({ project, userLevel, close }: Object) {
+export function UserPermissionErrorContent({ project, userLevel, close }) {
   const navigate = useNavigate();
   const [userPermissionError, setUserPermissionEror] = useState(null);
   useEffect(() => {
diff --git a/frontend/src/components/taskSelection/resourcesTab.js b/frontend/src/components/taskSelection/resourcesTab.jsx
similarity index 100%
rename from frontend/src/components/taskSelection/resourcesTab.js
rename to frontend/src/components/taskSelection/resourcesTab.jsx
diff --git a/frontend/src/components/teamsAndOrgs/campaigns.js b/frontend/src/components/teamsAndOrgs/campaigns.jsx
similarity index 98%
rename from frontend/src/components/teamsAndOrgs/campaigns.js
rename to frontend/src/components/teamsAndOrgs/campaigns.jsx
index ed5a1bcb4a..40448cc051 100644
--- a/frontend/src/components/teamsAndOrgs/campaigns.js
+++ b/frontend/src/components/teamsAndOrgs/campaigns.jsx
@@ -11,7 +11,7 @@ import { Button } from '../button.jsx';
 import { HashtagIcon } from '../svgIcons';
 import { TextField } from '../formInputs';
 
-export function CampaignsManagement({ campaigns, userDetails, isCampaignsFetched }: Object) {
+export function CampaignsManagement({ campaigns, userDetails, isCampaignsFetched }) {
   const [query, setQuery] = useState('');
 
   const onSearchInputChange = (e) => setQuery(e.target.value);
@@ -57,7 +57,7 @@ export function CampaignsManagement({ campaigns, userDetails, isCampaignsFetched
   );
 }
 
-export function CampaignCard({ campaign }: Object) {
+export function CampaignCard({ campaign }) {
   return (
     <Link to={`${campaign.id}/`} className="w-50-ns w-100 fl pr3">
       <div className="cf bg-white blue-dark br1 mv2 pv4 ph3 ba br1 b--grey-light shadow-hover">
diff --git a/frontend/src/components/teamsAndOrgs/campaignsPlaceholder.js b/frontend/src/components/teamsAndOrgs/campaignsPlaceholder.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/campaignsPlaceholder.js
rename to frontend/src/components/teamsAndOrgs/campaignsPlaceholder.jsx
diff --git a/frontend/src/components/teamsAndOrgs/editMode.js b/frontend/src/components/teamsAndOrgs/editMode.jsx
similarity index 85%
rename from frontend/src/components/teamsAndOrgs/editMode.js
rename to frontend/src/components/teamsAndOrgs/editMode.jsx
index 23454d778e..73de8f208c 100644
--- a/frontend/src/components/teamsAndOrgs/editMode.js
+++ b/frontend/src/components/teamsAndOrgs/editMode.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import { CustomButton } from '../button';
 
-export function EditModeControl({ editMode, switchModeFn }: Object) {
+export function EditModeControl({ editMode, switchModeFn }) {
   if (!editMode) {
     return (
       <CustomButton
diff --git a/frontend/src/components/teamsAndOrgs/featureStats.js b/frontend/src/components/teamsAndOrgs/featureStats.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/featureStats.js
rename to frontend/src/components/teamsAndOrgs/featureStats.jsx
diff --git a/frontend/src/components/teamsAndOrgs/leaveTeamConfirmationAlert.js b/frontend/src/components/teamsAndOrgs/leaveTeamConfirmationAlert.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/leaveTeamConfirmationAlert.js
rename to frontend/src/components/teamsAndOrgs/leaveTeamConfirmationAlert.jsx
diff --git a/frontend/src/components/teamsAndOrgs/members.js b/frontend/src/components/teamsAndOrgs/members.jsx
similarity index 99%
rename from frontend/src/components/teamsAndOrgs/members.js
rename to frontend/src/components/teamsAndOrgs/members.jsx
index ea210cd4af..6c5cb90e7c 100644
--- a/frontend/src/components/teamsAndOrgs/members.js
+++ b/frontend/src/components/teamsAndOrgs/members.jsx
@@ -24,7 +24,7 @@ export function Members({
   setMemberJoinTeamError,
   managerJoinTeamError,
   setManagerJoinTeamError,
-}: Object) {
+}) {
   const token = useSelector((state) => state.auth.token);
   const [editMode, setEditMode] = useState(false);
   const [membersBackup, setMembersBackup] = useState(null);
@@ -167,7 +167,7 @@ export function JoinRequests({
   updateTeam,
   joinMethod,
   members,
-}: Object) {
+}) {
   const token = useSelector((state) => state.auth.token);
   const { username: loggedInUsername } = useSelector((state) => state.auth.userDetails);
   const showJoinRequestSwitch =
diff --git a/frontend/src/components/teamsAndOrgs/menu.js b/frontend/src/components/teamsAndOrgs/menu.jsx
similarity index 93%
rename from frontend/src/components/teamsAndOrgs/menu.js
rename to frontend/src/components/teamsAndOrgs/menu.jsx
index 81a6b1fad1..f5e937f054 100644
--- a/frontend/src/components/teamsAndOrgs/menu.js
+++ b/frontend/src/components/teamsAndOrgs/menu.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import { SectionMenu } from '../menu';
 
-export function ManagementMenu({ isAdmin }: Object) {
+export function ManagementMenu({ isAdmin }) {
   let links = [
     'projects',
     'organisations',
diff --git a/frontend/src/components/teamsAndOrgs/messageMembers.js b/frontend/src/components/teamsAndOrgs/messageMembers.jsx
similarity index 98%
rename from frontend/src/components/teamsAndOrgs/messageMembers.js
rename to frontend/src/components/teamsAndOrgs/messageMembers.jsx
index 2656ff8154..5e3684b2ef 100644
--- a/frontend/src/components/teamsAndOrgs/messageMembers.js
+++ b/frontend/src/components/teamsAndOrgs/messageMembers.jsx
@@ -13,7 +13,7 @@ const CommentInputField = lazy(() =>
   import('../comments/commentInput' /* webpackChunkName: "commentInput" */),
 );
 
-export function MessageMembers({ teamId, members }: Object) {
+export function MessageMembers({ teamId, members }) {
   const token = useSelector((state) => state.auth.token);
   const [message, setMessage] = useState('');
   const [subject, setSubject] = useState('');
diff --git a/frontend/src/components/teamsAndOrgs/messages.js b/frontend/src/components/teamsAndOrgs/messages.ts
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/messages.js
rename to frontend/src/components/teamsAndOrgs/messages.ts
diff --git a/frontend/src/components/teamsAndOrgs/newUsersStats.js b/frontend/src/components/teamsAndOrgs/newUsersStats.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/newUsersStats.js
rename to frontend/src/components/teamsAndOrgs/newUsersStats.jsx
diff --git a/frontend/src/components/teamsAndOrgs/orgUsageLevel.js b/frontend/src/components/teamsAndOrgs/orgUsageLevel.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/orgUsageLevel.js
rename to frontend/src/components/teamsAndOrgs/orgUsageLevel.jsx
diff --git a/frontend/src/components/teamsAndOrgs/organisationProjectStats.js b/frontend/src/components/teamsAndOrgs/organisationProjectStats.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/organisationProjectStats.js
rename to frontend/src/components/teamsAndOrgs/organisationProjectStats.jsx
diff --git a/frontend/src/components/teamsAndOrgs/organisations.js b/frontend/src/components/teamsAndOrgs/organisations.jsx
similarity index 99%
rename from frontend/src/components/teamsAndOrgs/organisations.js
rename to frontend/src/components/teamsAndOrgs/organisations.jsx
index b5f93b887f..eecaa2f650 100644
--- a/frontend/src/components/teamsAndOrgs/organisations.js
+++ b/frontend/src/components/teamsAndOrgs/organisations.jsx
@@ -26,7 +26,7 @@ export function OrgsManagement({
   userOrgsOnly,
   setUserOrgsOnly,
   isOrganisationsFetched,
-}: Object) {
+}) {
   const [searchQuery, setSearchQuery] = useState('');
 
   const onSearchInputChange = (e) => setSearchQuery(e.target.value);
@@ -82,7 +82,7 @@ export function OrgsManagement({
   );
 }
 
-export function OrganisationCard({ details }: Object) {
+export function OrganisationCard({ details }) {
   return (
     <Link to={`${details.organisationId}/`} className="w-50-l w-100 fl pr3">
       <div className="bg-white blue-dark mv2 pb4 dib w-100 ba br1 b--grey-light shadow-hover">
diff --git a/frontend/src/components/teamsAndOrgs/organisationsPlaceholder.js b/frontend/src/components/teamsAndOrgs/organisationsPlaceholder.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/organisationsPlaceholder.js
rename to frontend/src/components/teamsAndOrgs/organisationsPlaceholder.jsx
diff --git a/frontend/src/components/teamsAndOrgs/projects.js b/frontend/src/components/teamsAndOrgs/projects.jsx
similarity index 99%
rename from frontend/src/components/teamsAndOrgs/projects.js
rename to frontend/src/components/teamsAndOrgs/projects.jsx
index 70a5f083d6..ebdbecf80a 100644
--- a/frontend/src/components/teamsAndOrgs/projects.js
+++ b/frontend/src/components/teamsAndOrgs/projects.jsx
@@ -14,7 +14,7 @@ export function Projects({
   showAddButton = false,
   showManageButtons = true,
   border = true,
-}: Object) {
+}) {
   return (
     <div className={`bg-white mb3 ${border ? 'b--grey-light ba pa4' : ''}`}>
       <h3 className="f3 barlow-condensed ttu blue-dark mv0 fw6 dib v-mid">
diff --git a/frontend/src/components/teamsAndOrgs/remainingTasksStats.js b/frontend/src/components/teamsAndOrgs/remainingTasksStats.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/remainingTasksStats.js
rename to frontend/src/components/teamsAndOrgs/remainingTasksStats.jsx
diff --git a/frontend/src/components/teamsAndOrgs/tasksStats.js b/frontend/src/components/teamsAndOrgs/tasksStats.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/tasksStats.js
rename to frontend/src/components/teamsAndOrgs/tasksStats.jsx
diff --git a/frontend/src/components/teamsAndOrgs/tasksStatsChart.js b/frontend/src/components/teamsAndOrgs/tasksStatsChart.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/tasksStatsChart.js
rename to frontend/src/components/teamsAndOrgs/tasksStatsChart.jsx
diff --git a/frontend/src/components/teamsAndOrgs/tasksStatsSummary.js b/frontend/src/components/teamsAndOrgs/tasksStatsSummary.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/tasksStatsSummary.js
rename to frontend/src/components/teamsAndOrgs/tasksStatsSummary.jsx
diff --git a/frontend/src/components/teamsAndOrgs/teams.js b/frontend/src/components/teamsAndOrgs/teams.jsx
similarity index 98%
rename from frontend/src/components/teamsAndOrgs/teams.js
rename to frontend/src/components/teamsAndOrgs/teams.jsx
index 11222882d6..244fdee0d9 100644
--- a/frontend/src/components/teamsAndOrgs/teams.js
+++ b/frontend/src/components/teamsAndOrgs/teams.jsx
@@ -25,7 +25,7 @@ export function TeamsManagement({
   teamsStatus,
   query,
   setQuery,
-}: Object) {
+}) {
   const isOrgManager = useSelector(
     (state) => state.auth.organisations && state.auth.organisations.length > 0,
   );
@@ -122,7 +122,7 @@ export function Teams({ teams, viewAllQuery, showAddButton = false, isReady, bor
   );
 }
 
-export function TeamCard({ team }: Object) {
+export function TeamCard({ team }) {
   return (
     <Link to={`/teams/${team.teamId}/membership/`} className="no-underline">
       <article className="base-font blue-dark h-100 bg-white ph3 pb3 ba br1 shadow-hover h-100 flex flex-column justify-between b--card">
@@ -316,7 +316,7 @@ export function TeamForm(props) {
   );
 }
 
-export function TeamSideBar({ team, members, managers, requestedToJoin }: Object) {
+export function TeamSideBar({ team, members, managers, requestedToJoin }) {
   const [isUserTeamManager] = useEditTeamAllowed(team);
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -432,7 +432,7 @@ export function TeamSideBar({ team, members, managers, requestedToJoin }: Object
   );
 }
 
-export function TeamsBoxList({ teams }: Object) {
+export function TeamsBoxList({ teams }) {
   const mappingTeams = teams.filter((team) => team.role === 'MAPPER');
   const validationTeams = teams.filter((team) => team.role === 'VALIDATOR');
   return (
@@ -463,7 +463,7 @@ export function TeamsBoxList({ teams }: Object) {
   );
 }
 
-export const TeamBox = ({ team, className }: Object) => (
+export const TeamBox = ({ team, className }) => (
   <Link className="link blue-grey mr2" to={`/teams/${team.teamId}/membership/`}>
     <div className={`br1 ${className}`}>
       {team.logo && (
diff --git a/frontend/src/components/teamsAndOrgs/teamsPlaceholder.js b/frontend/src/components/teamsAndOrgs/teamsPlaceholder.jsx
similarity index 100%
rename from frontend/src/components/teamsAndOrgs/teamsPlaceholder.js
rename to frontend/src/components/teamsAndOrgs/teamsPlaceholder.jsx
diff --git a/frontend/src/components/user/completeness.js b/frontend/src/components/user/completeness.jsx
similarity index 93%
rename from frontend/src/components/user/completeness.js
rename to frontend/src/components/user/completeness.jsx
index 30366e5917..d63e6aeca6 100644
--- a/frontend/src/components/user/completeness.js
+++ b/frontend/src/components/user/completeness.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage, FormattedNumber } from 'react-intl';
 import messages from './messages';
 import { PROFILE_RELEVANT_FIELDS } from './forms/personalInformation';
 
-function CompletenessProgressBar({ completeness }: Object) {
+function CompletenessProgressBar({ completeness }) {
   return (
     <>
       <div className="cf db pt1 flex items-center">
@@ -32,7 +32,7 @@ export function calculateCompleteness(userDetails) {
   );
 }
 
-export function ProfileCompleteness({ userDetails }: Object) {
+export function ProfileCompleteness({ userDetails }) {
   const completeness = calculateCompleteness(userDetails);
   return (
     <div className="bg-white ph3 pv3 mr4">
diff --git a/frontend/src/components/user/content.js b/frontend/src/components/user/content.jsx
similarity index 99%
rename from frontend/src/components/user/content.js
rename to frontend/src/components/user/content.jsx
index 9f7d425130..888c35e740 100644
--- a/frontend/src/components/user/content.js
+++ b/frontend/src/components/user/content.jsx
@@ -36,7 +36,7 @@ export function APIKeyCard({ token }) {
   );
 }
 
-export function OSMCard({ username }: Object) {
+export function OSMCard({ username }) {
   const osmUserInfo = useSelector((state) => state.auth.osm);
   const { value, unit } = selectUnit(
     osmUserInfo ? new Date(osmUserInfo.accountCreated) : new Date(),
diff --git a/frontend/src/components/user/forms/customField.js b/frontend/src/components/user/forms/customField.jsx
similarity index 100%
rename from frontend/src/components/user/forms/customField.js
rename to frontend/src/components/user/forms/customField.jsx
diff --git a/frontend/src/components/user/forms/interests.js b/frontend/src/components/user/forms/interests.jsx
similarity index 100%
rename from frontend/src/components/user/forms/interests.js
rename to frontend/src/components/user/forms/interests.jsx
diff --git a/frontend/src/components/user/forms/notifications.js b/frontend/src/components/user/forms/notifications.jsx
similarity index 100%
rename from frontend/src/components/user/forms/notifications.js
rename to frontend/src/components/user/forms/notifications.jsx
diff --git a/frontend/src/components/user/forms/settings.js b/frontend/src/components/user/forms/settings.jsx
similarity index 100%
rename from frontend/src/components/user/forms/settings.js
rename to frontend/src/components/user/forms/settings.jsx
diff --git a/frontend/src/components/user/forms/switchToggleField.js b/frontend/src/components/user/forms/switchToggleField.jsx
similarity index 100%
rename from frontend/src/components/user/forms/switchToggleField.js
rename to frontend/src/components/user/forms/switchToggleField.jsx
diff --git a/frontend/src/components/user/list.js b/frontend/src/components/user/list.jsx
similarity index 99%
rename from frontend/src/components/user/list.js
rename to frontend/src/components/user/list.jsx
index 1ddc5651db..2d253c0908 100644
--- a/frontend/src/components/user/list.js
+++ b/frontend/src/components/user/list.jsx
@@ -313,7 +313,7 @@ export const UserEditMenu = ({ user, token, close, setStatus }) => {
   );
 };
 
-export function UserListCard({ user, token, username, setStatus }: Object) {
+export function UserListCard({ user, token, username, setStatus }) {
   const [isHovered, setHovered] = useState(false);
 
   return (
diff --git a/frontend/src/components/user/messages.js b/frontend/src/components/user/messages.ts
similarity index 100%
rename from frontend/src/components/user/messages.js
rename to frontend/src/components/user/messages.ts
diff --git a/frontend/src/components/user/topBar.js b/frontend/src/components/user/topBar.jsx
similarity index 97%
rename from frontend/src/components/user/topBar.js
rename to frontend/src/components/user/topBar.jsx
index 8be3b6c10b..f8b39f6b18 100644
--- a/frontend/src/components/user/topBar.js
+++ b/frontend/src/components/user/topBar.jsx
@@ -9,7 +9,7 @@ import { ProfileCompleteness } from './completeness';
 import { MappingLevelMessage } from '../mappingLevel';
 import { INTERMEDIATE_LEVEL_COUNT, ADVANCED_LEVEL_COUNT } from '../../config';
 
-export function NextMappingLevel({ changesetsCount }: Object) {
+export function NextMappingLevel({ changesetsCount }) {
   changesetsCount = Number(changesetsCount);
   let nextLevelThreshold, nextLevel;
   if (changesetsCount < INTERMEDIATE_LEVEL_COUNT) {
diff --git a/frontend/src/components/user/usersPlaceholder.js b/frontend/src/components/user/usersPlaceholder.jsx
similarity index 100%
rename from frontend/src/components/user/usersPlaceholder.js
rename to frontend/src/components/user/usersPlaceholder.jsx
diff --git a/frontend/src/components/userDetail/barListChart.js b/frontend/src/components/userDetail/barListChart.jsx
similarity index 98%
rename from frontend/src/components/userDetail/barListChart.js
rename to frontend/src/components/userDetail/barListChart.jsx
index 2e1b3f42bf..954d774158 100644
--- a/frontend/src/components/userDetail/barListChart.js
+++ b/frontend/src/components/userDetail/barListChart.jsx
@@ -12,7 +12,7 @@ const ProgressBar = ({ percent }) => (
   </div>
 );
 
-export const BarChartItem = ({ name, link, percentValue, number, numberUnit }: Object) => (
+export const BarChartItem = ({ name, link, percentValue, number, numberUnit }) => (
   <li className="w-100 cf list pv3">
     <div className="w-100 cf mr4">
       <div className="di ma0 f7 b fl">
diff --git a/frontend/src/components/userDetail/contributionTimeline.js b/frontend/src/components/userDetail/contributionTimeline.jsx
similarity index 100%
rename from frontend/src/components/userDetail/contributionTimeline.js
rename to frontend/src/components/userDetail/contributionTimeline.jsx
diff --git a/frontend/src/components/userDetail/countriesMapped.js b/frontend/src/components/userDetail/countriesMapped.jsx
similarity index 100%
rename from frontend/src/components/userDetail/countriesMapped.js
rename to frontend/src/components/userDetail/countriesMapped.jsx
diff --git a/frontend/src/components/userDetail/elementsMapped.js b/frontend/src/components/userDetail/elementsMapped.jsx
similarity index 100%
rename from frontend/src/components/userDetail/elementsMapped.js
rename to frontend/src/components/userDetail/elementsMapped.jsx
diff --git a/frontend/src/components/userDetail/headerProfile.js b/frontend/src/components/userDetail/headerProfile.jsx
similarity index 100%
rename from frontend/src/components/userDetail/headerProfile.js
rename to frontend/src/components/userDetail/headerProfile.jsx
diff --git a/frontend/src/components/userDetail/messages.js b/frontend/src/components/userDetail/messages.ts
similarity index 100%
rename from frontend/src/components/userDetail/messages.js
rename to frontend/src/components/userDetail/messages.ts
diff --git a/frontend/src/components/userDetail/tests/barListChart.test.js b/frontend/src/components/userDetail/tests/barListChart.test.jsx
similarity index 100%
rename from frontend/src/components/userDetail/tests/barListChart.test.js
rename to frontend/src/components/userDetail/tests/barListChart.test.jsx
diff --git a/frontend/src/components/userDetail/tests/elementsMapped.test.js b/frontend/src/components/userDetail/tests/elementsMapped.test.jsx
similarity index 100%
rename from frontend/src/components/userDetail/tests/elementsMapped.test.js
rename to frontend/src/components/userDetail/tests/elementsMapped.test.jsx
diff --git a/frontend/src/components/userDetail/tests/headerProfile.test.js b/frontend/src/components/userDetail/tests/headerProfile.test.jsx
similarity index 100%
rename from frontend/src/components/userDetail/tests/headerProfile.test.js
rename to frontend/src/components/userDetail/tests/headerProfile.test.jsx
diff --git a/frontend/src/components/userDetail/tests/topCauses.test.js b/frontend/src/components/userDetail/tests/topCauses.test.jsx
similarity index 100%
rename from frontend/src/components/userDetail/tests/topCauses.test.js
rename to frontend/src/components/userDetail/tests/topCauses.test.jsx
diff --git a/frontend/src/components/userDetail/tests/topProjects.test.js b/frontend/src/components/userDetail/tests/topProjects.test.jsx
similarity index 100%
rename from frontend/src/components/userDetail/tests/topProjects.test.js
rename to frontend/src/components/userDetail/tests/topProjects.test.jsx
diff --git a/frontend/src/components/userDetail/topCauses.js b/frontend/src/components/userDetail/topCauses.jsx
similarity index 100%
rename from frontend/src/components/userDetail/topCauses.js
rename to frontend/src/components/userDetail/topCauses.jsx
diff --git a/frontend/src/components/userDetail/topProjects.js b/frontend/src/components/userDetail/topProjects.jsx
similarity index 100%
rename from frontend/src/components/userDetail/topProjects.js
rename to frontend/src/components/userDetail/topProjects.jsx
diff --git a/frontend/src/components/userDetail/userTeamsOrgs.js b/frontend/src/components/userDetail/userTeamsOrgs.jsx
similarity index 100%
rename from frontend/src/components/userDetail/userTeamsOrgs.js
rename to frontend/src/components/userDetail/userTeamsOrgs.jsx
diff --git a/frontend/src/components/webglUnsupported.js b/frontend/src/components/webglUnsupported.jsx
similarity index 100%
rename from frontend/src/components/webglUnsupported.js
rename to frontend/src/components/webglUnsupported.jsx
diff --git a/frontend/src/hooks/UseCloseOnDocumentClick.js b/frontend/src/hooks/UseCloseOnDocumentClick.js
index 3b891ff6d2..738ba5bba0 100644
--- a/frontend/src/hooks/UseCloseOnDocumentClick.js
+++ b/frontend/src/hooks/UseCloseOnDocumentClick.js
@@ -23,11 +23,11 @@ export default function useCloseOnDocumentClick() {
   const [closeOnDocumentClick, setCloseOnDocumentClick] = useState(true);
 
   useEffect(() => {
-    function insidePopupContents(target: any): boolean {
+    function insidePopupContents(target) {
       return target.querySelector('.popup-content') == null;
     }
 
-    function handleMouseDown(event: MouseEvent) {
+    function handleMouseDown(event) {
       if (insidePopupContents(event.target)) {
         setCloseOnDocumentClick(false);
       }
diff --git a/frontend/src/utils/management.js b/frontend/src/utils/management.jsx
similarity index 100%
rename from frontend/src/utils/management.js
rename to frontend/src/utils/management.jsx
diff --git a/frontend/src/views/about.js b/frontend/src/views/about.jsx
similarity index 100%
rename from frontend/src/views/about.js
rename to frontend/src/views/about.jsx
diff --git a/frontend/src/views/campaigns.js b/frontend/src/views/campaigns.jsx
similarity index 100%
rename from frontend/src/views/campaigns.js
rename to frontend/src/views/campaigns.jsx
diff --git a/frontend/src/views/contact.js b/frontend/src/views/contact.jsx
similarity index 100%
rename from frontend/src/views/contact.js
rename to frontend/src/views/contact.jsx
diff --git a/frontend/src/views/contributions.js b/frontend/src/views/contributions.jsx
similarity index 100%
rename from frontend/src/views/contributions.js
rename to frontend/src/views/contributions.jsx
diff --git a/frontend/src/views/interests.js b/frontend/src/views/interests.jsx
similarity index 100%
rename from frontend/src/views/interests.js
rename to frontend/src/views/interests.jsx
diff --git a/frontend/src/views/learn.js b/frontend/src/views/learn.jsx
similarity index 100%
rename from frontend/src/views/learn.js
rename to frontend/src/views/learn.jsx
diff --git a/frontend/src/views/licenses.js b/frontend/src/views/licenses.jsx
similarity index 100%
rename from frontend/src/views/licenses.js
rename to frontend/src/views/licenses.jsx
diff --git a/frontend/src/views/login.js b/frontend/src/views/login.jsx
similarity index 97%
rename from frontend/src/views/login.js
rename to frontend/src/views/login.jsx
index 041fdcb5f7..56fc73ef54 100644
--- a/frontend/src/views/login.js
+++ b/frontend/src/views/login.jsx
@@ -9,7 +9,7 @@ import { useSetTitleTag } from '../hooks/UseMetaTags';
 import { ORG_LOGO, ORG_NAME, ORG_CODE } from '../config';
 import logo from '../assets/img/main-logo.svg';
 
-export function Login({ redirectTo }: Object) {
+export function Login({ redirectTo }) {
   useSetTitleTag('Login');
   const navigate = useNavigate();
   const location = useLocation();
diff --git a/frontend/src/views/organisationDetail.js b/frontend/src/views/organisationDetail.jsx
similarity index 100%
rename from frontend/src/views/organisationDetail.js
rename to frontend/src/views/organisationDetail.jsx
diff --git a/frontend/src/views/organisationManagement.js b/frontend/src/views/organisationManagement.jsx
similarity index 100%
rename from frontend/src/views/organisationManagement.js
rename to frontend/src/views/organisationManagement.jsx
diff --git a/frontend/src/views/organisationStats.js b/frontend/src/views/organisationStats.jsx
similarity index 100%
rename from frontend/src/views/organisationStats.js
rename to frontend/src/views/organisationStats.jsx
diff --git a/frontend/src/views/partnersManagement.js b/frontend/src/views/partnersManagement.jsx
similarity index 100%
rename from frontend/src/views/partnersManagement.js
rename to frontend/src/views/partnersManagement.jsx
diff --git a/frontend/src/views/partnersMapswipeStats.js b/frontend/src/views/partnersMapswipeStats.jsx
similarity index 100%
rename from frontend/src/views/partnersMapswipeStats.js
rename to frontend/src/views/partnersMapswipeStats.jsx
diff --git a/frontend/src/views/partnersStats.js b/frontend/src/views/partnersStats.jsx
similarity index 100%
rename from frontend/src/views/partnersStats.js
rename to frontend/src/views/partnersStats.jsx
diff --git a/frontend/src/views/project.js b/frontend/src/views/project.jsx
similarity index 100%
rename from frontend/src/views/project.js
rename to frontend/src/views/project.jsx
diff --git a/frontend/src/views/projectEdit.js b/frontend/src/views/projectEdit.jsx
similarity index 100%
rename from frontend/src/views/projectEdit.js
rename to frontend/src/views/projectEdit.jsx
diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.jsx
similarity index 100%
rename from frontend/src/views/projectLiveMonitoring.js
rename to frontend/src/views/projectLiveMonitoring.jsx
diff --git a/frontend/src/views/projectStats.js b/frontend/src/views/projectStats.jsx
similarity index 100%
rename from frontend/src/views/projectStats.js
rename to frontend/src/views/projectStats.jsx
diff --git a/frontend/src/views/quickstart.js b/frontend/src/views/quickstart.jsx
similarity index 100%
rename from frontend/src/views/quickstart.js
rename to frontend/src/views/quickstart.jsx
diff --git a/frontend/src/views/settings.js b/frontend/src/views/settings.jsx
similarity index 100%
rename from frontend/src/views/settings.js
rename to frontend/src/views/settings.jsx
diff --git a/frontend/src/views/stats.js b/frontend/src/views/stats.jsx
similarity index 100%
rename from frontend/src/views/stats.js
rename to frontend/src/views/stats.jsx
diff --git a/frontend/src/views/swagger.js b/frontend/src/views/swagger.jsx
similarity index 100%
rename from frontend/src/views/swagger.js
rename to frontend/src/views/swagger.jsx
diff --git a/frontend/src/views/taskAction.js b/frontend/src/views/taskAction.jsx
similarity index 98%
rename from frontend/src/views/taskAction.js
rename to frontend/src/views/taskAction.jsx
index c4aa5f4e7b..4107f9d895 100644
--- a/frontend/src/views/taskAction.js
+++ b/frontend/src/views/taskAction.jsx
@@ -22,7 +22,7 @@ export function ValidateTask() {
   return <TaskAction projectId={id} action="VALIDATION" />;
 }
 
-export function TaskAction({ projectId, action }: Object) {
+export function TaskAction({ projectId, action }) {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const token = useSelector((state) => state.auth.token);
diff --git a/frontend/src/views/taskSelection.js b/frontend/src/views/taskSelection.jsx
similarity index 92%
rename from frontend/src/views/taskSelection.js
rename to frontend/src/views/taskSelection.jsx
index 3195794059..7946bfde65 100644
--- a/frontend/src/views/taskSelection.js
+++ b/frontend/src/views/taskSelection.jsx
@@ -15,7 +15,6 @@ export function SelectTask() {
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const token = useSelector((state) => state.auth.token);
-<<<<<<< HEAD
   const {
     data: projectSummaryData,
     error: projectSummaryError,
@@ -24,8 +23,12 @@ export function SelectTask() {
     useErrorBoundary: (error) => error.response.status !== 404,
     enabled: !!token,
   });
-  const { data, status, error } = useProjectSummaryQuery(id, {
-    throwOnError: (error) => error.response.status !== 404,
+  const {
+    data: projectData,
+    error: projectError,
+    status: projectStatus,
+  } = useProjectQuery(id, {
+    enabled: !token,
   });
 
   useEffect(() => {
diff --git a/frontend/src/views/teams.js b/frontend/src/views/teams.jsx
similarity index 99%
rename from frontend/src/views/teams.js
rename to frontend/src/views/teams.jsx
index 32a1b56b4e..2660ed8c66 100644
--- a/frontend/src/views/teams.js
+++ b/frontend/src/views/teams.jsx
@@ -59,7 +59,7 @@ export function MyTeams() {
   );
 }
 
-export function ListTeams({ managementView = false }: Object) {
+export function ListTeams({ managementView = false }) {
   const userDetails = useSelector((state) => state.auth.userDetails);
   const [query, setQuery] = useQueryParams({
     page: withDefault(NumberParam, 1),
diff --git a/frontend/src/views/userDetail.js b/frontend/src/views/userDetail.jsx
similarity index 100%
rename from frontend/src/views/userDetail.js
rename to frontend/src/views/userDetail.jsx
diff --git a/frontend/src/views/users.js b/frontend/src/views/users.jsx
similarity index 100%
rename from frontend/src/views/users.js
rename to frontend/src/views/users.jsx
diff --git a/frontend/src/views/verifyEmail.js b/frontend/src/views/verifyEmail.jsx
similarity index 100%
rename from frontend/src/views/verifyEmail.js
rename to frontend/src/views/verifyEmail.jsx
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index e9687eca3e..ba550133bb 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,14 +1,14 @@
 // vite.config.js
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
 
 export default defineConfig({
   plugins: [react()],
   esbuild: {
-    loader: "jsx",
+    loader: 'jsx',
     include: /src\/.*\.jsx?$/,
     // loader: "tsx",
     // include: /src\/.*\.[tj]sx?$/,
     exclude: [],
   },
-})
+});