Replace CRA with Vite; COUNTRY=cambodia

frontend/.eslintrc.cjs

@@ -87,6 +87,7 @@ module.exports = {
     'no-shadow': 'off',
     '@typescript-eslint/no-shadow': 'warn',
     'react/prop-types': 'off',
+    'default-param-last': 'off',
   },
   settings: {
     'import/resolver': {

frontend/package.json

@@ -84,7 +84,7 @@
     "react": "^18",
     "react-chartjs-2": "^2.9.0",
     "react-datepicker": "^2.14.1",
-    "react-dom": "^17",
+    "react-dom": "^18",
     "react-draggable": "^4.4.3",
     "react-i18next": "^14.1.2",
     "react-map-gl": "^7.1.0",

frontend/src/components/Common/BoundaryDropdown/goto.tsx

@@ -31,7 +31,7 @@ function GoToBoundaryDropdown() {
       </Button>
       {/* </Hidden> */}
       {/* <Hidden mdUp> */}
-      {0 && (
+      {false && (
         <IconButton style={{ color: 'white' }} onClick={handleClick}>
           <RoomOutlinedIcon />
         </IconButton>

frontend/src/components/MapView/DateSelector/TimelineItems/index.tsx

@@ -92,27 +92,30 @@ const TimelineItems = memo(
       .flat();
 
     // Hard coded styling for date items (first, second, and third layers)
-    const DATE_ITEM_STYLING: DateItemStyle[] = [
-      {
-        class: classes.layerOneDate,
-        color: LIGHT_BLUE_HEX,
-        layerDirectionClass: classes.layerOneDirection,
-        emphasis: classes.layerOneEmphasis,
-      },
-      {
-        class: classes.layerTwoDate,
-        color: LIGHT_GREEN_HEX,
-        layerDirectionClass: classes.layerTwoDirection,
-        emphasis: classes.layerTwoEmphasis,
-      },
-      {
-        class: classes.layerThreeDate,
-        color: LIGHT_ORANGE_HEX,
-        layerDirectionClass: classes.layerThreeDirection,
-        emphasis: classes.layerThreeEmphasis,
-      },
-      { class: classes.availabilityDate, color: LIGHT_ORANGE_HEX },
-    ];
+    const DATE_ITEM_STYLING: DateItemStyle[] = React.useMemo(
+      () => [
+        {
+          class: classes.layerOneDate,
+          color: LIGHT_BLUE_HEX,
+          layerDirectionClass: classes.layerOneDirection,
+          emphasis: classes.layerOneEmphasis,
+        },
+        {
+          class: classes.layerTwoDate,
+          color: LIGHT_GREEN_HEX,
+          layerDirectionClass: classes.layerTwoDirection,
+          emphasis: classes.layerTwoEmphasis,
+        },
+        {
+          class: classes.layerThreeDate,
+          color: LIGHT_ORANGE_HEX,
+          layerDirectionClass: classes.layerThreeDirection,
+          emphasis: classes.layerThreeEmphasis,
+        },
+        { class: classes.availabilityDate, color: LIGHT_ORANGE_HEX },
+      ],
+      [classes],
+    );
 
     const getTooltipTitle = useCallback(
       (date: DateRangeType): React.JSX.Element[] => {

frontend/src/components/MapView/DateSelector/index.tsx

@@ -400,7 +400,7 @@ const DateSelector = memo(({ classes }: DateSelectorProps) => {
         <Grid item xs={12} sm={1} className={classes.datePickerGrid}>
           {/* TODO: useMediaQuery */}
           {/* <Hidden smUp> */}
-          {0 && (
+          {false && (
             <Button onClick={decrementDate}>
               <ChevronLeft style={{ color: '#101010' }} />
             </Button>
@@ -426,7 +426,7 @@ const DateSelector = memo(({ classes }: DateSelectorProps) => {
           />
 
           {/* <Hidden smUp> */}
-          {0 && (
+          {false && (
             <Button onClick={incrementDate}>
               <ChevronRight style={{ color: '#101010' }} />
             </Button>

frontend/src/components/MapView/LeftPanel/AnalysisPanel/AnalysisTable/ExposureAnalysisTable/index.tsx

@@ -126,7 +126,7 @@ const ExposureAnalysisTable = memo(
     );
 
     const handleClickTableBodyRow = useCallback(
-      row => async () => {
+      (row: any) => async () => {
         if (!row.coordinates || !map) {
           return;
         }

frontend/src/components/MapView/LeftPanel/AnalysisPanel/AnalysisTable/index.tsx

@@ -98,7 +98,7 @@ const AnalysisTable = memo(
     );
 
     const handleClickTableBodyRow = useCallback(
-      row => async () => {
+      (row: any) => async () => {
         if (!row.coordinates || !map) {
           return;
         }

frontend/src/components/MapView/LeftPanel/AnalysisPanel/ExposureAnalysisActions/index.tsx

@@ -20,7 +20,7 @@ import {
   getCurrentDefinition,
   TableRow as AnalysisTableRow,
 } from 'context/analysisResultStateSlice';
-import ReportDialog from 'components/Common/ReportDialog';
+// import ReportDialog from 'components/Common/ReportDialog';
 import { Column } from 'utils/analysis-utils';
 import { ReportsDefinitions } from 'config/utils';
 import { getExposureAnalysisCsvData } from 'utils/csv-utils';
@@ -39,7 +39,7 @@ function ExposureAnalysisActions({
   const analysisDefinition = useSelector(getCurrentDefinition);
   const exposureLayerId = useSelector(exposureLayerIdSelector);
 
-  const [openReport, setOpenReport] = useState(false);
+  const [_openReport, setOpenReport] = useState(false);
   const [downloadReportIsLoading, setDownloadReportIsLoading] = useState(false);
 
   const API_URL = 'https://prism-api.ovio.org/report';
@@ -160,13 +160,14 @@ function ExposureAnalysisActions({
         <Typography variant="body2">{t('Download Report')}</Typography>
         {downloadReportIsLoading && <LoadingBlinkingDots dotColor="white" />}
       </Button>
-      <ReportDialog
+      {/* TODO: */}
+      {/* <ReportDialog
         open={openReport}
         handleClose={handleToggleReport(false)}
         reportConfig={reportConfig}
         tableData={tableData}
         columns={columns}
-      />
+      /> */}
     </>
   );
 }

frontend/src/components/MapView/LeftPanel/ChartsPanel/index.tsx

@@ -720,9 +720,9 @@ const ChartsPanel = memo(() => {
   }, [compareLocations, comparePeriods, selectedLayerTitles]);
 
   const chartsSelectRenderValue = useCallback(
-    selected =>
+    (selected: any) =>
       selected
-        .map((selectedValue: string | TFunctionKeys) => t(selectedValue))
+        .map((selectedValue: string | any) => t(selectedValue))
         .join(', '),
     [t],
   );

frontend/src/components/MapView/LeftPanel/layersPanel/AnalysisLayerMenuItem/index.tsx

@@ -78,7 +78,7 @@ const AnalysisLayerMenuItem = memo(
             <AnalysisLayerSwitchItem
               initialOpacity={initialOpacity}
               analysisData={analysisData}
-              title={analysisData?.getTitle(t) ?? ''}
+              title={(analysisData as any)?.getTitle(t) ?? ''}
               analysisResultSortByKey={analysisResultSortByKey}
               analysisResultSortOrder={analysisResultSortOrder}
             />

frontend/src/components/MapView/LeftPanel/layersPanel/AnalysisLayerSwitchItem/AnalysisLayerSwitchItemDownloadOptions/index.tsx

@@ -110,7 +110,7 @@ const AnalysisLayerSwitchItemDownloadOptions = memo(
         !analysisData ||
         analysisData instanceof ExposedPopulationResult
       ) {
-        return analysisData?.getTitle(t);
+        return (analysisData as any)?.getTitle(t);
       }
       return generateAnalysisFilename(analysisData, analysisDate ?? null);
     }, [analysisData, analysisDate, t]);

frontend/src/components/MapView/LeftPanel/layersPanel/MenuItem/MenuSwitch/SwitchItem/ExposureAnalysisOption.tsx

@@ -74,7 +74,7 @@ function ExposureAnalysisOption({
     dispatch(
       setCurrentDataDefinition({
         id: generateUniqueTableKey('exposure_analysis') as TableKey,
-        title: analysisResult?.getTitle(t) || '',
+        title: (analysisResult as any)?.getTitle(t) || '',
         table: '',
         legendText: t(analysisResult?.legendText || ''),
       }),

frontend/src/components/MapView/LeftPanel/layersPanel/MenuItem/MenuSwitch/index.tsx

@@ -70,7 +70,7 @@ const MenuSwitch = memo(({ title, layers, extent }: MenuSwitchProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const handleAccordionExpand = useCallback(
-    (event: ChangeEvent<{}>, expanded: boolean) => {
+    (_event: ChangeEvent<{}>, expanded: boolean) => {
       setIsExpanded(expanded);
     },
     [],

frontend/src/components/MapView/LeftPanel/layersPanel/MenuItem/index.tsx

@@ -49,7 +49,6 @@ export const useLayerMenuItemStyles = makeStyles(() =>
 
 interface MenuItemProps {
   title: string;
-  icon: string;
   layersCategories: LayersCategoryType[];
   extent?: Extent;
 }

frontend/src/components/MapView/Legends/AnalysisDownloadButton.tsx

@@ -90,7 +90,7 @@ function AnalysisDownloadButton() {
       !analysisResult ||
       analysisResult instanceof ExposedPopulationResult
     ) {
-      return analysisResult?.getTitle(t);
+      return (analysisResult as any)?.getTitle(t);
     }
     return generateAnalysisFilename(analysisResult, analysisDate ?? null);
   }, [analysisDate, analysisResult, t]);

frontend/src/components/MapView/Legends/LegendItem/index.tsx

@@ -199,7 +199,7 @@ const LegendItem = memo(
       if (legendUrl) {
         return <img src={legendUrl} alt={title} />;
       }
-      return <>{renderedLegendDefinitionItems}</>;
+      return renderedLegendDefinitionItems;
     }, [legendUrl, renderedLegendDefinitionItems, title]);
 
     const renderedLegend = useMemo(() => {

frontend/src/components/MapView/Legends/LegendItemsList.tsx

@@ -112,7 +112,7 @@ function LegendItemsList({
             ? invertLegendColors(analysisResult?.legend || [])
             : analysisResult?.legend
         }
-        title={analysisResult?.getTitle(t)}
+        title={(analysisResult as any)?.getTitle(t)}
         opacity={analysisLayerOpacity}
         forPrinting={forPrinting}
         showDescription={showDescription}

frontend/src/components/MapView/Legends/LegendMarkdown.tsx

@@ -4,23 +4,30 @@ import {
   createStyles,
   withStyles,
 } from '@material-ui/core';
+import { ClassNameMap } from '@material-ui/styles';
 import React from 'react';
 import Markdown from 'react-markdown';
 
 interface LegendMarkdownProps extends WithStyles<typeof styles> {
   children: string;
 }
 
+// TODO: ?
+const p = (classes: ClassNameMap<'legendTextMarkdown'>) =>
+  function _p({ children: pChildren }: { children: React.ReactNode }) {
+    return (
+      <Typography variant="h5" className={classes.legendTextMarkdown}>
+        {pChildren}
+      </Typography>
+    );
+  };
+
 function LegendMarkdown({ children, classes }: LegendMarkdownProps) {
   return (
     <Markdown
       linkTarget="_blank"
       components={{
-        p: ({ children: pChildren }: { children: React.ReactNode }) => (
-          <Typography variant="h5" className={classes.legendTextMarkdown}>
-            {pChildren}
-          </Typography>
-        ),
+        p: p(classes),
       }}
       allowedElements={['p', 'h5', 'strong', 'em', 'a']}
     >

frontend/src/components/MapView/Legends/index.tsx

@@ -49,7 +49,7 @@ const Legends = memo(({ classes }: LegendsProps) => {
       {/* </Hidden> */}
 
       {/* <Hidden mdUp> */}
-      {0 && (
+      {false && (
         <IconButton
           style={{ backgroundColor: open ? cyanBlue : undefined }}
           onClick={toggleLegendVisibility}

frontend/src/components/MapView/Map/index.tsx

@@ -196,9 +196,10 @@ const MapComponent = memo(({ setIsAlertFormOpen }: MapComponentProps) => {
 
   const firstBoundaryId = boundaryId && getLayerMapId(boundaryId);
 
-  const mapOnClick = useCallback(
-    () => useMapOnClick(setIsAlertFormOpen, boundaryLayerId, mapRef.current),
-    [boundaryLayerId, setIsAlertFormOpen],
+  const mapOnClick = useMapOnClick(
+    setIsAlertFormOpen,
+    boundaryLayerId,
+    mapRef.current,
   );
 
   const getBeforeId = useCallback(
@@ -232,7 +233,7 @@ const MapComponent = memo(({ setIsAlertFormOpen }: MapComponentProps) => {
       }}
       mapStyle={mapStyle.toString()}
       onLoad={onMapLoad}
-      onClick={mapOnClick()}
+      onClick={mapOnClick}
       maxBounds={maxBounds}
     >
       {selectedLayers.map((layer, index) => {

frontend/src/components/NavBar/About/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState, MouseEvent, memo, useMemo } from 'react';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-import { Button, Hidden, Typography } from '@material-ui/core';
+import { Button, Typography } from '@material-ui/core';
 import { useDispatch } from 'react-redux';
 import { appConfig } from 'config';
 import ContentDialog from 'components/NavBar/ContentDialog';
@@ -48,11 +48,11 @@ const About = memo(() => {
       onClick={handler}
       startIcon={<InfoOutlinedIcon style={{ fontSize: '1.5rem' }} />}
     >
-      <Hidden smDown>
-        <Typography color="secondary" style={{ textTransform: 'none' }}>
-          {t('About')}
-        </Typography>
-      </Hidden>
+      {/* <Hidden smDown> */}
+      <Typography color="secondary" style={{ textTransform: 'none' }}>
+        {t('About')}
+      </Typography>
+      {/* </Hidden> */}
       {renderedContentDialog}
     </Button>
   );

frontend/src/components/NavBar/PrintImage/image.tsx

@@ -174,6 +174,7 @@ function DownloadImage({ classes, open, handleClose }: DownloadImageProps) {
     handleDownloadMenuClose();
   };
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const printContext = {
     printConfig: {
       open,