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

…though with errors

frontend/package.json

@@ -15,7 +15,6 @@
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/react": "^7.102.0",
     "@tanstack/react-query": "^5.52.0",
-    "@tanstack/react-query-devtools": "^4.29.7",
     "@tanstack/react-table": "^8.20.1",
     "@tmcw/togeojson": "^5.8.1",
     "@turf/area": "^6.5.0",

frontend/src/App.tsx

@@ -38,7 +38,7 @@ const queryClient = new QueryClient({
 });
 
 const App = () => {
-  useMeta({ property: 'og:url', content: process.env.REACT_APP_BASE_URL });
+  useMeta({ property: 'og:url', content: import.meta.env.REACT_APP_BASE_URL });
   useMeta({ name: 'author', content: ORG_NAME });
   const isLoading = useSelector((state) => state.loader.isLoading);
   const locale = useSelector((state) => state.preferences.locale);

frontend/src/api/stats.ts

@@ -88,7 +88,7 @@ export const useUserOsmStatsQuery = (id: string) => {
     queryKey: ['user-osm-stats'],
     queryFn: fetchUserOsmStats,
     // userDetail.test.js fails on CI when throwOnError=true
-    throwOnError: process.env.NODE_ENV !== 'test',
+    throwOnError: import.meta.env.NODE_ENV !== 'test',
     select: (data) => data?.data.result,
     enabled: !!id,
   });

frontend/src/components/formInputs.js → frontend/src/components/formInputs.tsx

@@ -8,8 +8,19 @@ import messages from './messages';
 import { formatCountryList } from '../utils/countries';
 import { fetchLocalJSONAPI } from '../network/genericJSONRequest';
 import { CheckIcon, SearchIcon, CloseIcon } from './svgIcons';
+import { RootStore } from '../store';
 
-export const RadioField = ({ name, value, className, required = false }: Object) => (
+export const RadioField = ({
+  name,
+  value,
+  className,
+  required = false,
+}: {
+  name: string;
+  value: string;
+  className?: string;
+  required?: boolean;
+}) => (
   <Field
     name={name}
     component="input"
@@ -29,7 +40,14 @@ export const SwitchToggle = ({
   labelPosition,
   small = false,
   isDisabled = false,
-}: Object) => (
+}: {
+  label: string;
+  isChecked: boolean;
+  onChange: () => void;
+  labelPosition: string;
+  small?: boolean;
+  isDisabled?: boolean;
+}) => (
   <div className="v-mid justify-center">
     {label && labelPosition !== 'right' && <span className="di mr2 nowrap f6 dn-m">{label}</span>}
     <div className="relative dib">
@@ -52,9 +70,17 @@ export const SwitchToggle = ({
   </div>
 );
 
-export const OrganisationSelect = ({ className, orgId, onChange }) => {
-  const userDetails = useSelector((state) => state.auth.userDetails);
-  const token = useSelector((state) => state.auth.token);
+export const OrganisationSelect = ({
+  className,
+  orgId,
+  onChange,
+}: {
+  className?: string;
+  orgId: number | string;
+  onChange: (value: number | string) => void;
+}) => {
+  const userDetails = useSelector((state: RootStore) => state.auth.userDetails);
+  const token = useSelector((state: RootStore) => state.auth.token);
   const [organisations, setOrganisations] = useState([]);
 
   useEffect(() => {
@@ -66,7 +92,7 @@ export const OrganisationSelect = ({ className, orgId, onChange }) => {
     }
   }, [userDetails, token]);
 
-  const getOrgPlaceholder = (id) => {
+  const getOrgPlaceholder = (id: string | number) => {
     const orgs = organisations.filter((org) => org.organisationId === id);
     return orgs.length ? orgs[0].name : <FormattedMessage {...messages.selectOrganisation} />;
   };
@@ -85,22 +111,29 @@ export const OrganisationSelect = ({ className, orgId, onChange }) => {
   );
 };
 
-export function OrganisationSelectInput({ className }) {
+export function OrganisationSelectInput(props: {
+  className?: string;
+  input: { value: string; onChange: (value: string) => void };
+}) {
   return (
-    <Field name="organisation_id" className={className} required>
-      {(props) => (
-        <OrganisationSelect
-          orgId={props.input.value}
-          onChange={(value) => props.input.onChange(value.organisationId || '')}
-          className="z-5"
-        />
-      )}
+    <Field name="organisation_id" className={props.className} required>
+      <OrganisationSelect
+        orgId={props.input.value}
+        onChange={(value) => props.input.onChange(value.toString())}
+        className="z-5"
+      />
     </Field>
   );
 }
 
-export function UserCountrySelect({ className, isDisabled = false }: Object) {
-  const locale = useSelector((state) => state.preferences.locale);
+export function UserCountrySelect({
+  className,
+  isDisabled = false,
+}: {
+  className?: string;
+  isDisabled?: boolean;
+}) {
+  const locale = useSelector((state: RootStore) => state.preferences.locale);
   const [options, setOptions] = useState([]);
 
   useEffect(() => {
@@ -109,7 +142,7 @@ export function UserCountrySelect({ className, isDisabled = false }: Object) {
     }
   }, [locale]);
 
-  const getPlaceholder = (value) => {
+  const getPlaceholder = (value: string) => {
     const placeholder = options.filter((option) => option.value === value);
     if (placeholder.length) {
       return placeholder[0].label;
@@ -136,14 +169,24 @@ export function UserCountrySelect({ className, isDisabled = false }: Object) {
   );
 }
 
-export const CheckBoxInput = ({ isActive, changeState, className = '', disabled }) => (
+export const CheckBoxInput = ({
+  isActive,
+  changeState,
+  className = '',
+  disabled,
+}: {
+  isActive: boolean;
+  changeState: () => void;
+  className?: string;
+  disabled?: boolean;
+}) => (
   <div
     role="checkbox"
     disabled={disabled}
     aria-checked={isActive}
     onClick={disabled ? () => {} : changeState}
     onKeyPress={disabled ? () => {} : changeState}
-    tabIndex="0"
+    tabIndex={0}
     className={`bg-white w1 h1 ma1 ba bw1 ${
       disabled ? 'b--grey-light' : 'b--red'
     } br1 relative pointer ${className}`}
@@ -158,7 +201,15 @@ export const CheckBoxInput = ({ isActive, changeState, className = '', disabled
   </div>
 );
 
-export const CheckBox = ({ activeItems, toggleFn, itemId }) => {
+export const CheckBox = ({
+  activeItems,
+  toggleFn,
+  itemId,
+}: {
+  activeItems: any[];
+  toggleFn: (value: any[]) => void;
+  itemId: any;
+}) => {
   const isActive = activeItems.includes(itemId);
   const changeState = (e) => {
     e.persist();
@@ -191,7 +242,15 @@ export const SelectAll = ({ selected, setSelected, allItems, className }) => {
   return <CheckBoxInput changeState={changeState} isActive={isActive} className={className} />;
 };
 
-export const InterestsList = ({ interests, field, changeSelect }) => (
+export const InterestsList = ({
+  interests,
+  field,
+  changeSelect,
+}: {
+  interests: any[];
+  field: string;
+  changeSelect: (value: any) => void;
+}) => (
   <div className="w-100 pa0 interest-cards-ctr">
     {interests.map((interest) => (
       <article
@@ -211,7 +270,17 @@ export const InterestsList = ({ interests, field, changeSelect }) => (
 );
 
 // Used as a generic search box for input fields in the management section
-export const TextField = ({ value, placeholderMsg, onChange, onCloseIconClick }) => {
+export const TextField = ({
+  value,
+  placeholderMsg,
+  onChange,
+  onCloseIconClick,
+}: {
+  value: string;
+  placeholderMsg: any;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onCloseIconClick: () => void;
+}) => {
   const inputRef = useRef(null);
 
   return (

frontend/src/components/header/burgerMenu.js → frontend/src/components/header/burgerMenu.tsx

@@ -2,7 +2,9 @@ import { forwardRef } from 'react';
 
 import { MenuIcon, CloseIcon } from '../svgIcons';
 
-export const BurgerMenu = forwardRef((props, ref) => (
+export const BurgerMenu = forwardRef<HTMLButtonElement, {
+  open: boolean;
+}>((props, ref) => (
   <button
     className="blue-dark bg-white br1 f5 bn pointer ml3"
     ref={ref}

frontend/src/components/header/updateDialog.js → frontend/src/components/header/updateDialog.jsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 
 const updateServiceWorker = (registration) => {
   if (registration && registration.waiting) {

frontend/src/components/header/updateEmail.js → frontend/src/components/header/updateEmail.tsx

@@ -8,12 +8,15 @@ 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.jsx';
+import { RootStore } from '../../store/index.js';
 
-export const UpdateEmail = ({ closeModal }) => {
+export const UpdateEmail = ({ closeModal }: {
+  closeModal: () => void;
+}) => {
   const dispatch = useDispatch();
 
-  const userDetails = useSelector((state) => state.auth.userDetails);
-  const token = useSelector((state) => state.auth.token);
+  const userDetails = useSelector((state: RootStore) => state.auth.userDetails);
+  const token = useSelector((state: RootStore) => state.auth.token);
   const [userState, setUserState] = useState({ email: '', success: false, details: '' });
 
   const onChange = (e) => {

frontend/src/components/homepage/jumbotron.js → frontend/src/components/homepage/jumbotron.jsx

@@ -5,7 +5,7 @@ import Popup from 'reactjs-popup';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { SignUp } from '../header/signUp';
 import bannerHR from '../../assets/img/banner_2500.jpg';
 import bannerLR from '../../assets/img/banner_824.jpg';

frontend/src/components/homepage/mappingFlow.js → frontend/src/components/homepage/mappingFlow.jsx

@@ -4,7 +4,7 @@ import messages from './messages';
 import { MappingIcon, ValidationIcon, DataUseIcon } from '../svgIcons';
 import './styles.scss';
 
-function MappingCard({ image, title, description }: Object) {
+function MappingCard({ image, title, description }) {
   return (
     <div className="w-100 w-third-l pv3 card bg-white">
       <div className="pa4 ph3-m">

frontend/src/components/homepage/stats.js → frontend/src/components/homepage/stats.jsx

@@ -18,7 +18,7 @@ export const StatsNumber = (props) => {
   );
 };
 
-export const StatsColumn = ({ label, value }: Object) => {
+export const StatsColumn = ({ label, value }) => {
   return (
     <div className={`tc`}>
       <div className="fw5 red barlow-condensed stat-number">

frontend/src/components/homepage/whoIsMapping.js → frontend/src/components/homepage/whoIsMapping.jsx

@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 
 const organizations = [
   { url: 'https://www.redcross.org/', code: 'redcross', name: 'American Red Cross' },

frontend/src/components/horizontalScroll/index.js → frontend/src/components/horizontalScroll/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, RefObject } from 'react';
 import { ChevronRightIcon } from '../svgIcons';
 import { useWindowSize } from '../../hooks/UseWindowSize';
 
@@ -10,6 +10,12 @@ export function HorizontalScroll({
   containerClass,
   style = {},
   children,
+}: {
+  className?: string;
+  menuItemsContainerRef: RefObject<HTMLDivElement>;
+  containerClass: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
 }) {
   const [scrollLeft, setScrollLeft] = useState(0);
   // This triggers rerender when the screen size changes, so had to keep it
@@ -26,11 +32,12 @@ export function HorizontalScroll({
     };
   }, [containerClass]);
 
-  const updateScrollLeft = (e) => {
+  const updateScrollLeft = (e: Event) => {
+    // @ts-expect-error TS Migrations
     setScrollLeft(e.target.scrollLeft);
   };
 
-  const handleScroll = (direction) => {
+  const handleScroll = (direction: "left" | "right") => {
     let currentScroll = scrollLeft;
     if (direction === 'right') {
       currentScroll += 200;
@@ -46,24 +53,22 @@ export function HorizontalScroll({
   return (
     <div className={`relative overflow-hidden ${className || ''}`} style={style}>
       <div
-        className={`bg-white left-icon absolute h-100 left-0 top-0 rotate-180 z-1 h-100 pointer pa2 translate-icon-btm ${
-          scrollLeft > 0 ? 'flex items-center' : 'dn'
-        }`}
+        className={`bg-white left-icon absolute h-100 left-0 top-0 rotate-180 z-1 h-100 pointer pa2 translate-icon-btm ${scrollLeft > 0 ? 'flex items-center' : 'dn'
+          }`}
         role="button"
         onClick={() => handleScroll('left')}
       >
         <ChevronRightIcon />
       </div>
       <div
         role="button"
-        className={`translate-icon bg-white absolute h-100 right-0 top-0 z-1 pointer pa2 translate-icon ${
-          scrollLeft <
+        className={`translate-icon bg-white absolute h-100 right-0 top-0 z-1 pointer pa2 translate-icon ${scrollLeft <
           menuItemsContainerRef.current?.scrollWidth -
-            menuItemsContainerRef.current?.clientWidth -
-            1
-            ? 'flex items-center'
-            : 'dn'
-        }`}
+          menuItemsContainerRef.current?.clientWidth -
+          1
+          ? 'flex items-center'
+          : 'dn'
+          }`}
         onClick={() => handleScroll('right')}
       >
         <ChevronRightIcon />