chore(frontend): begin migration to vite

hotosm · Aug 20, 2024 · 4a8ba73 · 4a8ba73
1 parent db6527a
commit 4a8ba73
Show file tree

Hide file tree

Showing 45 changed files with 502 additions and 87 deletions.
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- for Google -->
@@ -27,7 +27,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -36,12 +36,15 @@
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
+
+      %PUBLIC_URL% is now no longer used, it is automatically refactored to the correct path during the build process.
     -->
     <title>%REACT_APP_ORG_CODE% Tasking Manager</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
     <div
       id="action-root"
       class="w-100 h-100 vh-minus-122-ns"
@@ -59,7 +62,8 @@
       var site_id = '%REACT_APP_MATOMO_ID%';
       if (site_id && '%REACT_APP_MATOMO_ENDPOINT%') {
         (function () {
-          var u = '%REACT_APP_MATOMO_ENDPOINT%';
+          // var u = '%REACT_APP_MATOMO_ENDPOINT%';
+          var u = 'https://matomo.hotosm.org/'
           _paq.push(['setTrackerUrl', u + 'piwik.php']);
           _paq.push(['setSiteId', site_id]);
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@placemarkio/geo-viewport": "^1.0.2",
     "@rapideditor/rapid": "^2.3.1",
+    "@redux-devtools/extension": "^3.3.0",
     "@sentry/react": "^7.102.0",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
@@ -85,7 +86,8 @@
     "patch-id": "bash -c \"cp patch/imagery.min.json public/static/id/data\"",
     "patch-rapid": "bash -c \"cp patch/rapid-imagery.min.json public/static/rapid/data/imagery.min.json\"",
     "preparation": "bash -c \"if (test -a ../tasking-manager.env); then grep -hs ^ ../tasking-manager.env .env.expand > .env; else cp .env.expand .env; fi\"",
-    "start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && craco start",
+    "dev": "vite",
+    "start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && vite start",
     "build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && craco build && npm run sentry:sourcemaps",
     "prettier": "prettier --write 'src/**/*.js'",
     "lint": "eslint src",
@@ -117,14 +119,16 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.4.3",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "combine-react-intl-messages": "^4.0.0",
     "jest-canvas-mock": "^2.5.2",
     "msw": "^1.3.2",
     "prettier": "^2.8.8",
     "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",
     "react-test-renderer": "^18.2.0",
-    "source-map-explorer": "^2.5.3"
+    "source-map-explorer": "^2.5.3",
+    "vite": "^5.4.2"
   },
   "resolutions": {
     "dom-accessibility-api": "0.5.14"

diff --git a/frontend/src/App.js → frontend/src/App.tsx b/frontend/src/App.js → frontend/src/App.tsx
@@ -15,7 +15,7 @@ import { store } from './store';
 import { ORG_NAME, MATOMO_ID } from './config';
 import { Preloader } from './components/preloader';
 import { FallbackComponent } from './views/fallback';
-import { Banner, ArchivalNotificationBanner } from './components/banner/index';
+import { Banner, ArchivalNotificationBanner } from './components/banner/index.jsx';
 import { router } from './routes';
 
 const queryClient = new QueryClient({

diff --git a/frontend/src/components/banner/index.js → frontend/src/components/banner/index.jsx b/frontend/src/components/banner/index.js → frontend/src/components/banner/index.jsx
diff --git a/frontend/src/components/button.js → frontend/src/components/button.jsx b/frontend/src/components/button.js → frontend/src/components/button.jsx
diff --git a/frontend/src/components/deleteModal/index.js b/frontend/src/components/deleteModal/index.js
@@ -7,7 +7,7 @@ import Popup from 'reactjs-popup';
 import messages from './messages';
 import { fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import { DeleteButton } from '../teamsAndOrgs/management';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { AlertIcon } from '../svgIcons';
 
 const DeleteTrigger = forwardRef((props, ref) => <DeleteButton {...props} />);

diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
@@ -10,7 +10,7 @@ import logo from '../../assets/img/main-logo.svg';
 import { ExternalLinkIcon } from '../svgIcons';
 import { Dropdown } from '../dropdown';
 import { LocaleSelector } from '../localeSelect';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { UpdateDialog } from './updateDialog';
 import { BurgerMenu } from './burgerMenu';
 import { TopNavLink } from './NavLink';

diff --git a/frontend/src/components/header/signUp.js b/frontend/src/components/header/signUp.js
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { CloseIcon } from '../svgIcons';
 import { registerUser } from '../../store/actions/user';
 import { store } from '../../store';

diff --git a/frontend/src/components/header/updateDialog.js b/frontend/src/components/header/updateDialog.js
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 
 const updateServiceWorker = (registration) => {
   if (registration && registration.waiting) {

diff --git a/frontend/src/components/header/updateEmail.js b/frontend/src/components/header/updateEmail.js
@@ -7,7 +7,7 @@ import messages from './messages';
 import { updateUserEmail } from '../../store/actions/auth';
 import { PROFILE_RELEVANT_FIELDS } from '../user/forms/personalInformation';
 import { ORG_PRIVACY_POLICY_URL } from '../../config';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 
 export const UpdateEmail = ({ closeModal }) => {
   const dispatch = useDispatch();

diff --git a/frontend/src/components/homepage/jumbotron.js b/frontend/src/components/homepage/jumbotron.js
@@ -5,7 +5,7 @@ import Popup from 'reactjs-popup';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { SignUp } from '../header/signUp';
 import bannerHR from '../../assets/img/banner_2500.jpg';
 import bannerLR from '../../assets/img/banner_824.jpg';

diff --git a/frontend/src/components/homepage/whoIsMapping.js b/frontend/src/components/homepage/whoIsMapping.js
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 
 const organizations = [
   { url: 'https://www.redcross.org/', code: 'redcross', name: 'American Red Cross' },

diff --git a/frontend/src/components/interests/index.js b/frontend/src/components/interests/index.js
@@ -7,7 +7,7 @@ import ReactPlaceholder from 'react-placeholder';
 import messages from '../teamsAndOrgs/messages';
 import { Management } from '../teamsAndOrgs/management';
 import { HashtagIcon } from '../svgIcons';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { nCardPlaceholders } from '../teamsAndOrgs/campaignsPlaceholder';
 import { TextField } from '../formInputs';
 

diff --git a/frontend/src/components/licenses/index.js b/frontend/src/components/licenses/index.js
@@ -7,7 +7,7 @@ import ReactPlaceholder from 'react-placeholder';
 import messages from '../teamsAndOrgs/messages';
 import { Management } from '../teamsAndOrgs/management';
 import { CopyrightIcon } from '../svgIcons';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { nCardPlaceholders } from './licensesPlaceholder';
 import { TextField } from '../formInputs';
 

diff --git a/frontend/src/components/notifications/actionButtons.js b/frontend/src/components/notifications/actionButtons.js
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import deletionMessages from '../deleteModal/messages';
 import messages from './messages';
 import { EyeIcon, WasteIcon } from '../svgIcons';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { fetchLocalJSONAPI, pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 
 export const ActionButtons = ({
@@ -84,9 +84,9 @@ export const ActionButtons = ({
     isAllSelected
       ? updateUnreadCount()
       : // The decrement count is readily available; deducting count from selected
-        Array.from({ length: unreadCountInSelected }, () =>
-          dispatch({ type: 'DECREMENT_UNREAD_COUNT' }),
-        );
+      Array.from({ length: unreadCountInSelected }, () =>
+        dispatch({ type: 'DECREMENT_UNREAD_COUNT' }),
+      );
   }
 
   if (selected.length) {

diff --git a/frontend/src/components/partners/currentProjects.js b/frontend/src/components/partners/currentProjects.js
@@ -6,7 +6,7 @@ import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import { TasksMap } from '../taskSelection/map';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { API_URL } from '../../config';
 import messages from './messages';
 import ProjectProgressBar from '../projectCard/projectProgressBar';
@@ -113,7 +113,7 @@ export function CurrentProjects({ currentProjects }) {
                 <div>
                   <h3
                     className="f2 fw5 mt3 mt2-ns mb3 ttu barlow-condensed blue-dark dib mr3"
-                    // lang={project.info.locale}
+                  // lang={project.info.locale}
                   >
                     {project.info && project.info.name}
                   </h3>

diff --git a/frontend/src/components/preloader.js → frontend/src/components/preloader.jsx b/frontend/src/components/preloader.js → frontend/src/components/preloader.jsx
diff --git a/frontend/src/components/projectCreate/navButtons.js b/frontend/src/components/projectCreate/navButtons.js
@@ -2,7 +2,7 @@ import { featureCollection } from '@turf/helpers';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { useAsync } from '../../hooks/UseAsync';
 
 const clearParamsStep = (props) => {

diff --git a/frontend/src/components/projectDetail/footer.js b/frontend/src/components/projectDetail/footer.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import messages from './messages';
 import { ShareButton } from './shareButton';
 import { AddToFavorites } from './favorites';
@@ -61,9 +61,8 @@ export const ProjectDetailFooter = ({ className, projectId }) => {
 
   return (
     <div
-      className={`${
-        className || ''
-      } pl4 w-100 z-4 bg-white fixed bottom-0 left-0 flex items-center justify-between`}
+      className={`${className || ''
+        } pl4 w-100 z-4 bg-white fixed bottom-0 left-0 flex items-center justify-between`}
       style={{ boxShadow: '0px -1px 0px #F0EFEF, 0px 1px 0px #F0EFEF' }}
     >
       {/* TODO ADD ANCHORS */}

diff --git a/frontend/src/components/projectDetail/privateProjectError.js b/frontend/src/components/projectDetail/privateProjectError.js
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 import { LockIcon } from '../svgIcons';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 
 const PrivateProjectError = () => {
   const navigate = useNavigate();

diff --git a/frontend/src/components/projectDetail/questionsAndComments.js b/frontend/src/components/projectDetail/questionsAndComments.js
@@ -7,7 +7,7 @@ import ReactPlaceholder from 'react-placeholder';
 import messages from './messages';
 import { RelativeTimeWithUnit } from '../../utils/formattedRelativeTime';
 import { PaginatorLine } from '../paginator';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { Alert } from '../alert';
 import { MessageStatus } from '../comments/status';
 import { UserAvatar } from '../user/avatar';

diff --git a/frontend/src/components/projectEdit/actionsForm.js b/frontend/src/components/projectEdit/actionsForm.js
@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { Alert } from '../alert';
 import { DeleteModal } from '../deleteModal';
 import { styleClasses, StateContext } from '../../views/projectEdit';

diff --git a/frontend/src/components/projectEdit/partnersForm.js b/frontend/src/components/projectEdit/partnersForm.js
@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import messages from './messages';
 import { Alert } from '../alert';
 import { ChevronDownIcon, CloseIcon } from '../svgIcons';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { styleClasses } from '../../views/projectEdit';
 import { pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import { useAllPartnersQuery } from '../../api/projects';

diff --git a/frontend/src/components/projectEdit/partnersListing.js b/frontend/src/components/projectEdit/partnersListing.js
@@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
 import messages from './messages';
 import { Alert } from '../alert';
 import { BanIcon, CircleMinusIcon, CircleExclamationIcon } from '../svgIcons';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { styleClasses } from '../../views/projectEdit';
 import { fetchLocalJSONAPI, pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import { DateCustomInput } from './partnersForm';

diff --git a/frontend/src/components/projectEdit/teamSelect.js b/frontend/src/components/projectEdit/teamSelect.js
@@ -4,7 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from './messages';
 import commonMessages from '../messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { StateContext } from '../../views/projectEdit';
 import { PencilIcon, WasteIcon, ExternalLinkIcon } from '../svgIcons';
 import { useFetchWithAbort } from '../../hooks/UseFetch';

diff --git a/frontend/src/components/projects/moreFiltersForm.js b/frontend/src/components/projects/moreFiltersForm.js
@@ -4,7 +4,7 @@ import { useQueryParam, BooleanParam } from 'use-query-params';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { SwitchToggle } from '../formInputs';
 import { useTagAPI } from '../../hooks/UseTagAPI';
 import { useExploreProjectsQueryParams } from '../../hooks/UseProjectsQueryAPI';

diff --git a/frontend/src/components/taskSelection/action.js b/frontend/src/components/taskSelection/action.js
@@ -10,7 +10,7 @@ import messages from './messages';
 import { ProjectInstructions } from './instructions';
 import { TasksMap } from './map';
 import { HeaderLine } from '../projectDetail/header';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import Portal from '../portal';
 import { SidebarIcon } from '../svgIcons';
 import { openEditor, getTaskGpxUrl, formatImageryUrl, formatJosmUrl } from '../../utils/openEditor';
@@ -58,11 +58,11 @@ export function TaskMapAction({ project, tasks, activeTasks, getTasks, action, e
     () =>
       activeTasks
         ? activeTasks
-            .map((task) => task.taskId)
-            .sort((n1, n2) => {
-              // in ascending order
-              return n1 - n2;
-            })
+          .map((task) => task.taskId)
+          .sort((n1, n2) => {
+            // in ascending order
+            return n1 - n2;
+          })
         : [],
     [activeTasks],
   );

diff --git a/frontend/src/components/taskSelection/extendSession.js b/frontend/src/components/taskSelection/extendSession.js
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Popup from 'reactjs-popup';
 
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { Alert } from '../alert';
 import { pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import messages from './messages';

diff --git a/frontend/src/components/taskSelection/footer.js b/frontend/src/components/taskSelection/footer.js
@@ -10,7 +10,7 @@ import { openEditor, formatJosmUrl } from '../../utils/openEditor';
 import { useFetchLockedTasks } from '../../hooks/UseLockedTasks';
 import { pushToLocalJSONAPI, fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import { Dropdown } from '../dropdown';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { Imagery } from './imagery';
 import { MappingTypes } from '../mappingTypes';
 import { LockedTaskModalContent } from './lockedTasks';

diff --git a/frontend/src/components/taskSelection/lockedTasks.js b/frontend/src/components/taskSelection/lockedTasks.js
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { useGetLockedTasks } from '../../hooks/UseLockedTasks';
 
 export function AnotherProjectLock({ projectId, lockedTasksLength, action }: Object) {
@@ -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>,
@@ -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> }}
         />

diff --git a/frontend/src/components/taskSelection/permissionErrorModal.js b/frontend/src/components/taskSelection/permissionErrorModal.js
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 import { getPermissionErrorMessage } from '../../utils/projectPermissions';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { CloseIcon } from '../svgIcons';
 import { TeamBox } from '../teamsAndOrgs/teams';
 

diff --git a/frontend/src/components/teamsAndOrgs/campaigns.js b/frontend/src/components/teamsAndOrgs/campaigns.js
@@ -7,7 +7,7 @@ import ReactPlaceholder from 'react-placeholder';
 import { nCardPlaceholders } from './campaignsPlaceholder';
 import messages from './messages';
 import { Management } from './management';
-import { Button } from '../button';
+import { Button } from '../button.jsx';
 import { HashtagIcon } from '../svgIcons';
 import { TextField } from '../formInputs';