Merge pull request #4369 from unicef/uselocationbug

src/frontend/.eslintignore

@@ -1,2 +1,3 @@
 # .eslintignore
 .eslintrc.cjs
+node_modules/

src/frontend/.eslintrc.cjs

@@ -40,6 +40,7 @@ module.exports = {
     '**/*.test.ts',
     '**/__generated__/*',
     'src/restgenerated/',
+    'node_modules/',
   ],
   settings: {
     react: {
@@ -66,10 +67,12 @@ module.exports = {
     '@typescript-eslint/no-unsafe-member-access': 'off',
     '@typescript-eslint/no-unsafe-return': 'off',
     '@typescript-eslint/no-misused-promises': 'off',
-    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/no-unused-vars': 'error',
+    "no-unused-vars": "error",
+    "no-undef": "error",
     'import/no-unresolved': 'off',
     'import/named': 'off',
-    'import/default': 'off',
+    'import/default':  'off',
     'import/namespace': 'off',
     'import/no-extraneous-dependencies': 'off',
     'import/prefer-default-export': 'off',
@@ -87,5 +90,9 @@ module.exports = {
     'import/extensions': 'off',
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "never", "prev": "import", "next": "import" }
+    ]
   },
 };

src/frontend/config/jest/fileTransform.cjs

@@ -18,7 +18,7 @@ module.exports = {
         module.exports = {
           __esModule: true,
           default: ${assetFilename},
-          ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          ReactComponent: forwardRef(function ${componentName}(props, ref) {
             return {
               $$typeof: Symbol.for('react.element'),
               type: 'svg',

src/frontend/src/App.tsx

@@ -10,8 +10,7 @@ import { AllProgramsRoutesSwitch } from '@containers/routers/AllProgramsRoutesSw
 import { BaseHomeRouter } from '@containers/routers/BaseHomeRouter';
 import { SelectedProgramRoutesSwitch } from '@containers/routers/SelectedProgramRoutesSwitch';
 import { AutoLogout } from '@core/AutoLogout';
-
-import React from 'react';
+import React, { FC, useEffect } from 'react';
 import {
   createBrowserRouter,
   Route,
@@ -23,18 +22,18 @@ import {
 import { Providers } from './providers';
 import * as Sentry from '@sentry/react';
 
-const RedirectToPrograms: React.FC = () => {
+const RedirectToPrograms: FC = () => {
   const navigate = useNavigate();
   const { businessArea } = useParams();
 
-  React.useEffect(() => {
+  useEffect(() => {
     navigate(`/${businessArea}/programs/all/list`);
   }, [navigate, businessArea]);
 
   return null;
 };
 
-const Root: React.FC = () => (
+const Root: FC = () => (
   <Routes>
     <Route path="/login/*" element={<LoginPage />} />
     <Route path="/maintenance/*" element={<MaintenancePage />} />
@@ -75,7 +74,7 @@ const sentryCreateBrowserRouter =
   Sentry.wrapCreateBrowserRouter(createBrowserRouter);
 const router = sentryCreateBrowserRouter([{ path: '*', Component: Root }]);
 
-export const App: React.FC = () => (
+export const App: FC = () => (
   <Providers>
     <AutoLogout />
     <RouterProvider router={router} />

src/frontend/src/components/accountability/Communication/CommunicationDetails.tsx

@@ -1,5 +1,4 @@
 import { Grid, Typography } from '@mui/material';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AccountabilityCommunicationMessageQuery } from '@generated/graphql';
 import { useBaseUrl } from '@hooks/useBaseUrl';
@@ -10,14 +9,15 @@ import { LabelizedField } from '@core/LabelizedField';
 import { OverviewContainer } from '@core/OverviewContainer';
 import { Title } from '@core/Title';
 import { UniversalMoment } from '@core/UniversalMoment';
+import { ReactElement } from 'react';
 
 interface CommunicationDetailsProps {
   message: AccountabilityCommunicationMessageQuery['accountabilityCommunicationMessage'];
 }
 
 export function CommunicationDetails({
   message,
-}: CommunicationDetailsProps): React.ReactElement {
+}: CommunicationDetailsProps): ReactElement {
   const { t } = useTranslation();
   const { baseUrl } = useBaseUrl();
   return (

src/frontend/src/components/accountability/Communication/CommunicationMessageDetails.tsx

@@ -1,12 +1,12 @@
 import { Box, Grid, Paper, Typography } from '@mui/material';
-import * as React from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { renderUserName } from '@utils/utils';
 import { AccountabilityCommunicationMessageQuery } from '@generated/graphql';
 import { OverviewContainer } from '@core/OverviewContainer';
 import { Title } from '@core/Title';
 import { UniversalMoment } from '@core/UniversalMoment';
+import { ReactElement } from 'react';
 
 const StyledBox = styled(Paper)`
   display: flex;
@@ -21,7 +21,7 @@ interface CommunicationMessageDetailsProps {
 
 export const CommunicationMessageDetails = ({
   message,
-}: CommunicationMessageDetailsProps): React.ReactElement => {
+}: CommunicationMessageDetailsProps): ReactElement => {
   const { t } = useTranslation();
   return (
     <Grid item xs={8} data-cy="communication-message-details">

src/frontend/src/components/accountability/Communication/CommunicationTable/CommunicationFilters.tsx

@@ -1,12 +1,12 @@
 import { Grid } from '@mui/material';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { CreatedByAutocomplete } from '@shared/autocompletes/CreatedByAutocomplete';
 import { TargetPopulationAutocomplete } from '@shared/autocompletes/TargetPopulationAutocomplete';
 import { DatePickerFilter } from '@components/core/DatePickerFilter';
 import { FiltersSection } from '@components/core/FiltersSection';
 import { createHandleApplyFilterChange } from '@utils/utils';
+import { ReactElement } from 'react';
 
 interface CommunicationFiltersProps {
   filter;
@@ -21,7 +21,7 @@ export function CommunicationFilters({
   initialFilter,
   appliedFilter,
   setAppliedFilter,
-}: CommunicationFiltersProps): React.ReactElement {
+}: CommunicationFiltersProps): ReactElement {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();

src/frontend/src/components/accountability/Communication/LookUpsCommunication/LookUpHouseholdFiltersCommunication.tsx

@@ -1,7 +1,6 @@
 import AssignmentIndRoundedIcon from '@mui/icons-material/AssignmentIndRounded';
 import GroupIcon from '@mui/icons-material/Group';
 import { Grid, MenuItem } from '@mui/material';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { HouseholdChoiceDataQuery } from '@generated/graphql';
@@ -12,6 +11,7 @@ import { FiltersSection } from '@core/FiltersSection';
 import { NumberTextField } from '@core/NumberTextField';
 import { SearchTextField } from '@core/SearchTextField';
 import { SelectFilter } from '@core/SelectFilter';
+import { ReactElement } from 'react';
 
 interface LookUpHouseholdFiltersCommunicationProps {
   filter;
@@ -29,7 +29,7 @@ export function LookUpHouseholdFiltersCommunication({
   initialFilter,
   appliedFilter,
   setAppliedFilter,
-}: LookUpHouseholdFiltersCommunicationProps): React.ReactElement {
+}: LookUpHouseholdFiltersCommunicationProps): ReactElement {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();

src/frontend/src/components/accountability/Communication/LookUpsCommunication/LookUpRegistrationFiltersCommunication.tsx

@@ -1,6 +1,5 @@
 import GroupIcon from '@mui/icons-material/Group';
 import { Grid } from '@mui/material';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRegistrationChoicesQuery } from '@generated/graphql';
@@ -10,6 +9,7 @@ import { DatePickerFilter } from '@core/DatePickerFilter';
 import { FiltersSection } from '@core/FiltersSection';
 import { NumberTextField } from '@core/NumberTextField';
 import { SearchTextField } from '@core/SearchTextField';
+import { ReactElement } from 'react';
 
 interface LookUpRegistrationFiltersCommunicationProps {
   filter;
@@ -25,7 +25,7 @@ export function LookUpRegistrationFiltersCommunication({
   initialFilter,
   appliedFilter,
   setAppliedFilter,
-}: LookUpRegistrationFiltersCommunicationProps): React.ReactElement {
+}: LookUpRegistrationFiltersCommunicationProps): ReactElement {
   const navigate = useNavigate();
   const location = useLocation();
 

src/frontend/src/components/accountability/Communication/LookUpsCommunication/LookUpSelectionCommunication.tsx

@@ -1,6 +1,5 @@
 import { Box, FormControlLabel, Radio, RadioGroup } from '@mui/material';
-import * as React from 'react';
-import { useState } from 'react';
+import { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
@@ -36,7 +35,7 @@ export function LookUpSelectionCommunication({
   values;
   selectedTab;
   setSelectedTab;
-}): React.ReactElement {
+}): ReactElement {
   const location = useLocation();
 
   const initialFilterRDI = {

src/frontend/src/components/accountability/Communication/LookUpsCommunication/LookUpSelectionTablesCommunication.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
 import { HouseholdChoiceDataQuery } from '@generated/graphql';
 import { hasPermissions, PERMISSIONS } from '../../../../config/permissions';
 import { LookUpHouseholdTableCommunication } from '@containers/tables/Communication/LookUpHouseholdTableCommunication/LookUpHouseholdTableCommunication';
 import { LookUpRegistrationDataImportTableCommunication } from '@containers/tables/Communication/LookUpRegistrationDataImportTableCommunication';
 import { LookUpTargetPopulationTableCommunication } from '@containers/tables/Communication/LookUpTargetPopulationTableCommunication';
 import { usePermissions } from '@hooks/usePermissions';
 import { CommunicationTabsValues } from '@utils/constants';
+import { ReactElement } from 'react';
 
 interface LookUpSelectionTablesCommunicationProps {
   selectedTab: number;
@@ -28,7 +28,7 @@ export function LookUpSelectionTablesCommunication({
   businessArea,
   onValueChange,
   handleChange,
-}: LookUpSelectionTablesCommunicationProps): React.ReactElement {
+}: LookUpSelectionTablesCommunicationProps): ReactElement {
   const permissions = usePermissions();
 
   return (

src/frontend/src/components/accountability/Communication/LookUpsCommunication/LookUpTargetPopulationFiltersCommunication.tsx

@@ -1,6 +1,5 @@
 import { Grid, MenuItem } from '@mui/material';
 import { Group, Person } from '@mui/icons-material';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { TargetPopulationStatus } from '@generated/graphql';
@@ -13,6 +12,7 @@ import { FiltersSection } from '@core/FiltersSection';
 import { NumberTextField } from '@core/NumberTextField';
 import { SearchTextField } from '@core/SearchTextField';
 import { SelectFilter } from '@core/SelectFilter';
+import { ReactElement } from 'react';
 
 interface LookUpTargetPopulationFiltersCommunicationProps {
   filter;
@@ -27,7 +27,7 @@ export function LookUpTargetPopulationFiltersCommunication({
   initialFilter,
   appliedFilter,
   setAppliedFilter,
-}: LookUpTargetPopulationFiltersCommunicationProps): React.ReactElement {
+}: LookUpTargetPopulationFiltersCommunicationProps): ReactElement {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();

src/frontend/src/components/accountability/Feedback/FeedbackDetails/FeedbackDetails.tsx

@@ -1,5 +1,4 @@
 import { Grid, GridSize, Typography } from '@mui/material';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { renderUserName } from '@utils/utils';
 import { FeedbackIssueType, FeedbackQuery } from '@generated/graphql';
@@ -10,6 +9,7 @@ import { OverviewContainer } from '@core/OverviewContainer';
 import { Title } from '@core/Title';
 import { UniversalMoment } from '@core/UniversalMoment';
 import { useBaseUrl } from '@hooks/useBaseUrl';
+import { ReactElement } from 'react';
 
 interface FeedbackDetailsProps {
   feedback: FeedbackQuery['feedback'];
@@ -21,7 +21,7 @@ export function FeedbackDetails({
   feedback,
   canViewHouseholdDetails,
   canViewIndividualDetails,
-}: FeedbackDetailsProps): React.ReactElement {
+}: FeedbackDetailsProps): ReactElement {
   const { t } = useTranslation();
   const { baseUrl, isAllPrograms } = useBaseUrl();
 
@@ -62,13 +62,13 @@ export function FeedbackDetails({
                       >
                         {feedback.householdLookup?.unicefId}
                       </BlackLink>
-                      ) : (
+                    ) : (
                       <div>
                         {feedback.householdLookup?.id
                           ? feedback.householdLookup?.unicefId
                           : '-'}
                       </div>
-                      )}
+                    )}
                   </span>
                 ),
                 size: 3,
@@ -85,13 +85,13 @@ export function FeedbackDetails({
                       >
                         {feedback.individualLookup?.unicefId}
                       </BlackLink>
-                      ) : (
+                    ) : (
                       <div>
                         {feedback.individualLookup?.id
                           ? feedback.individualLookup?.unicefId
                           : '-'}
                       </div>
-                      )}
+                    )}
                   </span>
                 ),
                 size: 3,

src/frontend/src/components/accountability/Feedback/FeedbackDetailsToolbar.tsx

@@ -1,6 +1,5 @@
 import { Box } from '@mui/material';
 import EditIcon from '@mui/icons-material/EditRounded';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { FeedbackQuery } from '@generated/graphql';
@@ -10,6 +9,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 import { ButtonTooltip } from '@core/ButtonTooltip';
 import { useProgramContext } from '../../../programContext';
 import { AdminButton } from '@core/AdminButton';
+import { ReactElement } from 'react';
 
 interface FeedbackDetailsToolbarProps {
   feedback: FeedbackQuery['feedback'];
@@ -19,7 +19,7 @@ interface FeedbackDetailsToolbarProps {
 export function FeedbackDetailsToolbar({
   feedback,
   canEdit,
-}: FeedbackDetailsToolbarProps): React.ReactElement {
+}: FeedbackDetailsToolbarProps): ReactElement {
   const { t } = useTranslation();
   const { id } = useParams();
   const { baseUrl } = useBaseUrl();

src/frontend/src/components/accountability/Feedback/FeedbackTable/FeedbackFilters.tsx

@@ -1,5 +1,4 @@
 import { Grid, MenuItem } from '@mui/material';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useFeedbackIssueTypeChoicesQuery } from '@generated/graphql';
@@ -12,6 +11,7 @@ import { LoadingComponent } from '@core/LoadingComponent';
 import { SearchTextField } from '@core/SearchTextField';
 import { SelectFilter } from '@core/SelectFilter';
 import { ProgramAutocomplete } from '@shared/autocompletes/ProgramAutocomplete';
+import { ReactElement } from 'react';
 
 interface FeedbackFiltersProps {
   setFilter: (filter) => void;
@@ -26,7 +26,7 @@ export const FeedbackFilters = ({
   appliedFilter,
   setAppliedFilter,
   filter,
-}: FeedbackFiltersProps): React.ReactElement => {
+}: FeedbackFiltersProps): ReactElement => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();

src/frontend/src/components/accountability/Feedback/HouseholdQuestionnaire/HouseholdQuestionnaire.tsx

@@ -1,18 +1,18 @@
 import { Grid } from '@mui/material';
 import { Field } from 'formik';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FormikCheckboxField } from '@shared/Formik/FormikCheckboxField';
 import { ContentLink } from '@core/ContentLink';
 import { useBaseUrl } from '@hooks/useBaseUrl';
+import { ReactElement } from 'react';
 
 interface HouseholdQuestionnaireProps {
   values;
 }
 
 export function HouseholdQuestionnaire({
   values,
-}: HouseholdQuestionnaireProps): React.ReactElement {
+}: HouseholdQuestionnaireProps): ReactElement {
   const { baseUrl } = useBaseUrl();
   const { t } = useTranslation();
   const selectedHouseholdData = values.selectedHousehold;