fix(frontend): make most of remaining files work

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "license": "BSD-2-Clause",
   "private": false,
+  "type": "module",
   "dependencies": {
     "@hotosm/id": "^2.30.2",
     "@hotosm/iso-countries-languages": "^1.1.2",

frontend/src/components/banner/topBanner.tsx

@@ -20,7 +20,7 @@ export function TopBanner() {
   return (
     <>
       {/* @ts-expect-error TS Migrations */}
-      {location.pathname === '/' && data.visible && !error && (
+      {location.pathname === '/' && data?.visible && !error && (
         <div className="ph3 b--grey-light bb bg-tan top-banner-container">
           <div
             className="fw6 flex justify-center"

frontend/src/components/button.tsx

@@ -17,7 +17,7 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   loading?: boolean;
 };
 
-export function Button(props: ButtonProps) {
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { children, icon, className, loading = false, disabled, ...rest } = props;
 
   return (
@@ -27,13 +27,14 @@ export function Button(props: ButtonProps) {
       className={`${className || ''} br1 f5 bn ${disabled || loading ? 'o-50' : 'pointer'}`}
       style={{ padding: '.75rem 1.5rem' }}
       disabled={disabled || loading}
+      ref={ref}
       {...rest}
     >
       {loading ? <AnimatedLoadingIcon /> : icon && <IconSpace>{icon}</IconSpace>}
       {children}
     </button>
   );
-}
+})
 
 export function FormSubmitButton(
   props: React.ButtonHTMLAttributes<HTMLButtonElement> & {

frontend/src/components/deleteModal/index.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import { AlertIcon } from '../svgIcons';
 
 const DeleteTrigger = forwardRef((props, ref) => <DeleteButton {...props} />);

frontend/src/components/header/index.tsx

@@ -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, ButtonProps } from '../button.jsx';
+import { Button, ButtonProps } from '../button';
 import { UpdateDialog } from './updateDialog';
 import { BurgerMenu } from './burgerMenu';
 import { TopNavLink } from './NavLink';
@@ -82,8 +82,10 @@ export const Header = () => {
     }
   };
 
+  console.log("USERDETAILS", userDetails);
+
   const checkUserEmail = () =>
-    userDetails.hasOwnProperty('emailAddress') && !userDetails.emailAddress ? (
+    userDetails?.hasOwnProperty('emailAddress') && !userDetails.emailAddress ? (
       <Popup modal open closeOnEscape={false} closeOnDocumentClick={false}>
         {(close) => <UpdateEmail closeModal={close} />}
       </Popup>
@@ -186,7 +188,7 @@ export function getMenuItemsForUser(userDetails: any, organisations?: any) {
   }
 
   let filteredMenuItems;
-  if (userDetails.username) {
+  if (userDetails?.username) {
     filteredMenuItems = menuItems.filter((item) => item.authenticated === true || item.showAlways);
     if (
       userDetails.role !== 'ADMIN' &&
@@ -273,7 +275,7 @@ export const ActionItems = ({
   location: any;
   getUserLinks: (role: string) => any;
 }) =>
-  userDetails.username ? (
+  userDetails?.username ? (
     <>
       <NotificationBell />
       <Dropdown

frontend/src/components/header/updateEmail.tsx

@@ -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.jsx';
+import { Button } from '../button';
 import { RootStore } from '../../store/index.js';
 
 export const UpdateEmail = ({ closeModal }: {

frontend/src/components/interests/index.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import { nCardPlaceholders } from '../teamsAndOrgs/campaignsPlaceholder';
 import { TextField } from '../formInputs';
 

frontend/src/components/licenses/index.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import { nCardPlaceholders } from './licensesPlaceholder';
 import { TextField } from '../formInputs';
 

frontend/src/components/partners/currentProjects.jsx

@@ -6,7 +6,7 @@ import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import { TasksMap } from '../taskSelection/map';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { API_URL } from '../../config';
 import messages from './messages';
 import ProjectProgressBar from '../projectCard/projectProgressBar';

frontend/src/components/projectCreate/navButtons.tsx

@@ -2,7 +2,7 @@ import { featureCollection } from '@turf/helpers';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { useAsync } from '../../hooks/UseAsync';
 
 const clearParamsStep = (props: {

frontend/src/components/projectDetail/footer.jsx

@@ -3,7 +3,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import messages from './messages';
 import { ShareButton } from './shareButton';
 import { AddToFavorites } from './favorites';

frontend/src/components/projectDetail/index.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import messages from './messages';
 import viewsMessages from '../../views/messages';
 import { UserAvatar, UserAvatarList } from '../user/avatar';
-import { TasksMap } from '../taskSelection/map.js';
+import { TasksMap } from '../taskSelection/map';
 import { ProjectHeader } from './header';
 import { DownloadAOIButton, DownloadTaskGridButton } from './downloadButtons';
 import { TeamsBoxList } from '../teamsAndOrgs/teams';
@@ -29,8 +29,8 @@ import { Alert } from '../alert';
 
 import './styles.scss';
 import { useWindowSize } from '../../hooks/UseWindowSize';
-import { DownloadOsmData } from './downloadOsmData.js';
-import { ENABLE_EXPORT_TOOL } from '../../config/index.js';
+import { DownloadOsmData } from './downloadOsmData';
+import { ENABLE_EXPORT_TOOL } from '../../config/index';
 
 /* lazy imports must be last import */
 const ProjectTimeline = lazy(() => import('./timeline' /* webpackChunkName: "timeline" */));

frontend/src/components/projectDetail/privateProjectError.jsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 import { LockIcon } from '../svgIcons';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 
 const PrivateProjectError = () => {
   const navigate = useNavigate();

frontend/src/components/projectDetail/questionsAndComments.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import { Alert } from '../alert';
 import { MessageStatus } from '../comments/status';
 import { UserAvatar } from '../user/avatar';

frontend/src/components/projectEdit/actionsForm.jsx

@@ -6,7 +6,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';
 import { Alert } from '../alert';
 import { DeleteModal } from '../deleteModal';
 import { styleClasses, StateContext } from '../../views/projectEdit';

frontend/src/components/projectEdit/partnersForm.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import { styleClasses } from '../../views/projectEdit';
 import { pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import { useAllPartnersQuery } from '../../api/projects';

frontend/src/components/projectEdit/partnersListing.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import { styleClasses } from '../../views/projectEdit';
 import { fetchLocalJSONAPI, pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import { DateCustomInput } from './partnersForm';

frontend/src/components/projectEdit/permissionsBlock.jsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
-import messages from './messages.js';
+import messages from './messages';
 import { StateContext, styleClasses } from '../../views/projectEdit';
 
 export const PermissionsBlock = ({ permissions, type }) => {

frontend/src/components/projectEdit/teamSelect.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from './messages';
 import commonMessages from '../messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { StateContext } from '../../views/projectEdit';
 import { PencilIcon, WasteIcon, ExternalLinkIcon } from '../svgIcons';
 import { useFetchWithAbort } from '../../hooks/UseFetch';

frontend/src/components/projects/moreFiltersForm.jsx

@@ -4,7 +4,7 @@ import { useQueryParam, BooleanParam } from 'use-query-params';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { SwitchToggle } from '../formInputs';
 import { useTagAPI } from '../../hooks/UseTagAPI';
 import { useExploreProjectsQueryParams } from '../../hooks/UseProjectsQueryAPI';

frontend/src/components/projects/partnersFilterSelect.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { DateCustomInput } from '../projectEdit/partnersForm';
 import { useAllPartnersQuery } from '../../api/projects';
 import messagesFromProjectEdit from '../projectEdit/messages';
-import messages from './messages.js';
+import messages from './messages';
 
 export const PartnersFilterSelect = ({
   fieldsetName,

frontend/src/components/taskSelection/action.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import Portal from '../portal';
 import { SidebarIcon } from '../svgIcons';
 import { openEditor, getTaskGpxUrl, formatImageryUrl, formatJosmUrl } from '../../utils/openEditor';

frontend/src/components/taskSelection/contributions.jsx

@@ -4,7 +4,7 @@ import Select from 'react-select';
 import ReactPlaceholder from 'react-placeholder';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import messages from './messages.js';
+import messages from './messages';
 import { UserAvatar } from '../user/avatar';
 import { CheckCircle } from '../checkCircle';
 import { CustomButton } from '../button';

frontend/src/components/taskSelection/extendSession.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Popup from 'reactjs-popup';
 
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { Alert } from '../alert';
 import { pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import messages from './messages';

frontend/src/components/taskSelection/footer.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import { Imagery } from './imagery';
 import { MappingTypes } from '../mappingTypes';
 import { LockedTaskModalContent } from './lockedTasks';

frontend/src/components/taskSelection/lockedTasks.jsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { useGetLockedTasks } from '../../hooks/UseLockedTasks';
 
 export function AnotherProjectLock({ projectId, lockedTasksLength, action }) {

frontend/src/components/taskSelection/permissionErrorModal.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 import { getPermissionErrorMessage } from '../../utils/projectPermissions';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { CloseIcon } from '../svgIcons';
 import { TeamBox } from '../teamsAndOrgs/teams';
 

frontend/src/components/teamsAndOrgs/campaigns.jsx

@@ -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.jsx';
+import { Button } from '../button';
 import { HashtagIcon } from '../svgIcons';
 import { TextField } from '../formInputs';
 

frontend/src/components/teamsAndOrgs/leaveTeamConfirmationAlert.jsx

@@ -2,7 +2,7 @@ import { FormattedMessage } from 'react-intl';
 
 import commonMessages from '../../views/messages';
 import messages from './messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { styleClasses } from '../../views/projectEdit';
 
 export const LeaveTeamConfirmationAlert = ({ teamName, close, leaveTeam }) => {

frontend/src/components/teamsAndOrgs/members.jsx

@@ -7,7 +7,7 @@ import AsyncSelect from 'react-select/async';
 import messages from './messages';
 import { UserAvatar } from '../user/avatar';
 import { EditModeControl } from './editMode';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { SwitchToggle } from '../formInputs';
 import { fetchLocalJSONAPI, pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import { Alert } from '../alert';

frontend/src/components/teamsAndOrgs/messageMembers.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import toast from 'react-hot-toast';
 
 import messages from './messages';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { MessageStatus } from '../comments/status';
 import { pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import ReactPlaceholder from 'react-placeholder';

frontend/src/components/teamsAndOrgs/organisations.jsx

@@ -13,7 +13,7 @@ import { useUploadImage } from '../../hooks/UseUploadImage';
 import { levels } from '../../hooks/UseOrganisationLevel';
 import { Management } from './management';
 import { InternalLinkIcon, ClipboardIcon } from '../svgIcons';
-import { Button } from '../button.jsx';
+import { Button } from '../button';
 import { UserAvatarList } from '../user/avatar';
 import { nCardPlaceholders } from './organisationsPlaceholder';
 import { Alert } from '../alert';

frontend/src/index.tsx

@@ -8,7 +8,7 @@ import 'react-tooltip/dist/react-tooltip.css'; // Needed by for { Tooltip } from
 
 import App from './App.jsx';
 import { store, persistor } from './store';
-import { ConnectedIntl } from './utils/internationalization.jsx';
+import { ConnectedIntl } from './utils/internationalization';
 import { register, unregister, onServiceWorkerUpdate } from './serviceWorkerRegistration';
 import { ENABLE_SERVICEWORKER, SENTRY_FRONTEND_DSN, ENVIRONMENT } from './config';
 

frontend/src/utils/geoFileFunctions.js

@@ -5,7 +5,7 @@ import { kml } from '@tmcw/togeojson';
 import { MAX_FILESIZE } from '../config';
 import shpjs from 'shpjs';
 
-var osmToGeojson = require('osmtogeojson');
+import osmToGeojson from "osmtogeojson";
 
 export const verifyFileSize = (file) => {
   if (file.size >= MAX_FILESIZE) {

frontend/src/views/tests/notFound.test.js

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { IntlProviders } from '../../utils/testWithIntl';
 import messages from '../messages';
-import { NotFound } from '../notFound.jsx';
+import { NotFound } from '../notFound';
 
 describe('Not Found', () => {
   it('should display project not found error', () => {

frontend/tsconfig.json

@@ -19,6 +19,7 @@
     "jsx": "react-jsx",
     /* Linting */
     "strict": false,
+    "strictNullChecks": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,