Merge pull request #1729 from BLSQ/IA-3482-instance-popup

IA-3482:  popups + remove Redux

docs/pages/dev/reference/guidelines/front-end/front-end.en.md

@@ -21,9 +21,8 @@ Don't be afraid to split your code into smaller parts, using understandable nami
 
 ## Legacy
 
-Class component, redux, provider are still old way to create features in IASO.  
+Class component, proptypes are still old way to create features in IASO.  
 Please use `hooks`, `typescript` and `arrow component`.  
-Redux can still be used with state that needs to be available everywhere in the application (current user, UI constants and states, ...).  
 We already have a lot of typing done in each domain of the application (forms, submissions, org units, ... )
 
 ## Bluesquare-components
@@ -37,7 +36,7 @@ To make it available too everybody you have to build new files with `npm run cle
 ## Architecture
 
 Main index file is located here: `hat/assets/js/apps/Iaso/index`  
-This is the entrypoint of the app, setting up providers, theme, react-query query client, custom plugins, redux,...  
+This is the entrypoint of the app, setting up providers, theme, react-query query client, custom plugins,...  
 
 **`components`**  
 Used to store generic components that can be used everywhere, like `inputComponent`, `buttons`, ...

hat/assets/js/apps/Iaso/components/forms/Checkboxes.spec.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import { Box } from '@mui/material';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
-import { Box } from '@mui/material';
+import React from 'react';
+import { renderWithIntl } from '../../../../test/utils/intl';
+import { renderWithMuiTheme } from '../../../../test/utils/muiTheme';
 import { Checkboxes } from './Checkboxes';
-import { renderWithStore } from '../../../../test/utils/redux';
 import InputComponent from './InputComponent';
 
 let component;
@@ -40,8 +41,13 @@ const checkboxesProp = () => {
 };
 const renderComponent = props => {
     component = mount(
-        renderWithStore(
-            <Checkboxes inline={props.inline} checkboxes={props.checkboxes} />,
+        renderWithMuiTheme(
+            renderWithIntl(
+                <Checkboxes
+                    inline={props.inline}
+                    checkboxes={props.checkboxes}
+                />,
+            ),
         ),
     );
 };

hat/assets/js/apps/Iaso/components/forms/EditableTextFields.spec.js

@@ -1,9 +1,8 @@
 import React from 'react';
+import { renderWithIntl } from '../../../../test/utils/intl';
 import { renderWithMuiTheme } from '../../../../test/utils/muiTheme';
 import { EditableTextFields } from './EditableTextFields';
-import { renderWithIntl } from '../../../../test/utils/intl';
 import InputComponent from './InputComponent.tsx';
-import { renderWithStore } from '../../../../test/utils/redux';
 
 const onChange1 = sinon.spy();
 const onChange2 = sinon.spy();
@@ -34,9 +33,7 @@ let inputs;
 const renderComponent = props => {
     return mount(
         renderWithIntl(
-            renderWithMuiTheme(
-                renderWithStore(<EditableTextFields fields={props} />),
-            ),
+            renderWithMuiTheme(<EditableTextFields fields={props} />),
         ),
     );
 };

hat/assets/js/apps/Iaso/components/maps/markers/CircleMarkerComponent.js

@@ -31,7 +31,10 @@ const CircleMarkerComponent = props => {
             draggable={draggable}
             center={[item.latitude, item.longitude, item.altitude]}
             eventHandlers={{
-                click: () => onClick(item),
+                click: e => {
+                    e.originalEvent.stopPropagation();
+                    onClick(item);
+                },
                 dragend: e => onDragend(e.target),
                 dblclick: e => onDblclick(e, item),
             }}

hat/assets/js/apps/Iaso/components/maps/markers/MarkerComponent.js

@@ -31,7 +31,10 @@ const MarkerComponent = props => {
             icon={marker || customMarker}
             position={[item.latitude, item.longitude, item.altitude]}
             eventHandlers={{
-                click: () => onClick(item),
+                click: e => {
+                    e.originalEvent.stopPropagation();
+                    onClick(item);
+                },
                 dragend: e => onDragend(e.target),
                 dblclick: e => onDblclick(e, item),
             }}

hat/assets/js/apps/Iaso/domains/app/index.spec.js

@@ -1,16 +1,15 @@
 import React from 'react';
 
+import { renderWithIntl } from '../../../../test/utils/intl';
+import { renderWithMuiTheme } from '../../../../test/utils/muiTheme';
 import App from './index.tsx';
-import { renderWithStore } from '../../../../test/utils/redux';
 
 describe('App', () => {
     it('render properly', () => {
         const wrapper = shallow(
-            renderWithStore(<App plugins={[]} history={{}} />, {
-                subscribe: () => null,
-                dispatch: () => null,
-                getState: () => null,
-            }),
+            renderWithMuiTheme(
+                renderWithIntl(<App plugins={[]} history={{}} />),
+            ),
         );
         expect(wrapper.exists()).to.be.true;
     });

hat/assets/js/apps/Iaso/domains/completenessStats/index.tsx

@@ -14,7 +14,6 @@ import React, {
     useMemo,
     useState,
 } from 'react';
-import { useDispatch } from 'react-redux';
 import { CsvButton } from '../../components/Buttons/CsvButton';
 import TopBar from '../../components/nav/TopBarComponent';
 import { openSnackBar } from '../../components/snackBars/EventDispatcher';
@@ -59,7 +58,6 @@ export const CompletenessStats: FunctionComponent = () => {
     ) as CompletenessRouterParams;
 
     const [tab, setTab] = useState<'list' | 'map'>(params.tab ?? 'list');
-    const dispatch = useDispatch();
     const redirectTo = useRedirectTo();
     const { formatMessage } = useSafeIntl();
     const { data: completenessStats, isFetching } =
@@ -90,7 +88,7 @@ export const CompletenessStats: FunctionComponent = () => {
                 closeSnackbar(snackbarKey);
             }
         };
-    }, [dispatch, displayWarning]);
+    }, [displayWarning]);
     const csvUrl = useMemo(
         () =>
             `/api/v2/completeness_stats.csv?${buildQueryString(params, true)}`,

hat/assets/js/apps/Iaso/domains/entities/hooks/useGetBeneficiaryFields.ts

@@ -1,14 +1,14 @@
-import { useMemo } from 'react';
 import { useSafeIntl } from 'bluesquare-components';
+import { useMemo } from 'react';
 
 import { useGetPossibleFields } from '../../forms/hooks/useGetPossibleFields';
+import MESSAGES from '../messages';
 import { Beneficiary } from '../types/beneficiary';
 import { Field } from '../types/fields';
-import MESSAGES from '../messages';
-import { useGetFields } from './useGetFields';
 import { useGetBeneficiaryTypesDropdown } from './requests';
+import { useGetFields } from './useGetFields';
 
-export const useGetBeneficiaryFields = (beneficiary: Beneficiary) => {
+export const useGetBeneficiaryFields = (beneficiary?: Beneficiary) => {
     const { formatMessage } = useSafeIntl();
 
     const { data: beneficiaryTypes } = useGetBeneficiaryTypesDropdown();

hat/assets/js/apps/Iaso/domains/forms/components/FormActions.tsx

@@ -1,18 +1,17 @@
-import React, { FunctionComponent, useState } from 'react';
-import { IconButton } from 'bluesquare-components';
+import { Download } from '@mui/icons-material';
+import FormatListBulleted from '@mui/icons-material/FormatListBulleted';
 import { Menu, MenuItem } from '@mui/material';
+import { IconButton } from 'bluesquare-components';
+import React, { FunctionComponent, useState } from 'react';
 import { Link } from 'react-router-dom';
-import FormatListBulleted from '@mui/icons-material/FormatListBulleted';
-import { useDispatch } from 'react-redux';
-import { Download } from '@mui/icons-material';
+import DeleteDialog from '../../../components/dialogs/DeleteDialogComponent';
 import { DisplayIfUserHasPerm } from '../../../components/DisplayIfUserHasPerm';
-import { CreateSubmissionModal } from './CreateSubmissionModal/CreateSubmissionModal';
 import * as Permission from '../../../utils/permissions';
-import DeleteDialog from '../../../components/dialogs/DeleteDialogComponent';
-import MESSAGES from '../messages';
-import { useRestoreForm } from '../hooks/useRestoreForm';
 import { createInstance } from '../../instances/actions';
 import { useDeleteForm } from '../hooks/useDeleteForm';
+import { useRestoreForm } from '../hooks/useRestoreForm';
+import MESSAGES from '../messages';
+import { CreateSubmissionModal } from './CreateSubmissionModal/CreateSubmissionModal';
 
 type Props = {
     settings: any;
@@ -27,7 +26,6 @@ export const FormActions: FunctionComponent<Props> = ({
     baseUrls,
     showDeleted,
 }) => {
-    const dispatch = useDispatch();
     // XLS and XML download states and functions
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
@@ -91,14 +89,7 @@ export const FormActions: FunctionComponent<Props> = ({
                                     onCreateOrReAssign={(
                                         currentForm,
                                         payload,
-                                    ) =>
-                                        dispatch(
-                                            createInstance(
-                                                currentForm,
-                                                payload,
-                                            ),
-                                        )
-                                    }
+                                    ) => createInstance(currentForm, payload)}
                                     orgUnitTypes={
                                         settings.row.original.org_unit_type_ids
                                     }

hat/assets/js/apps/Iaso/domains/forms/components/FormVersionsDialogComponent.js

@@ -1,17 +1,17 @@
 import { Box, Grid, Typography } from '@mui/material';
+import { LoadingSpinner, useSafeIntl } from 'bluesquare-components';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo, useState } from 'react';
-import { LoadingSpinner, useSafeIntl } from 'bluesquare-components';
 import { useQueryClient } from 'react-query';
 import ConfirmCancelDialogComponent from '../../../components/dialogs/ConfirmCancelDialogComponent';
 import FileInputComponent from '../../../components/forms/FileInputComponent';
-import PeriodPicker from '../../periods/components/PeriodPicker.tsx';
+import { openSnackBar } from '../../../components/snackBars/EventDispatcher.ts';
+import { succesfullSnackBar } from '../../../constants/snackBars';
 import { useFormState } from '../../../hooks/form';
 import { createFormVersion, updateFormVersion } from '../../../utils/requests';
+import PeriodPicker from '../../periods/components/PeriodPicker.tsx';
 import { errorTypes, getPeriodsErrors } from '../../periods/utils';
 import MESSAGES from '../messages';
-import { openSnackBar } from '../../../components/snackBars/EventDispatcher.ts';
-import { succesfullSnackBar } from '../../../constants/snackBars';
 
 const emptyVersion = (id = null) => ({
     id,

hat/assets/js/apps/Iaso/domains/forms/components/FormVersionsDialogComponent.spec.js

@@ -1,18 +1,17 @@
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { IconButton as IconButtonComponent } from 'bluesquare-components';
 import { expect } from 'chai';
 import { withQueryClientProvider } from '../../../../../test/utils';
-import { renderWithStore } from '../../../../../test/utils/redux';
+import { renderWithIntl } from '../../../../../test/utils/intl';
+import { renderWithMuiTheme } from '../../../../../test/utils/muiTheme';
 import ConfirmCancelDialogComponent from '../../../components/dialogs/ConfirmCancelDialogComponent';
 import PeriodPicker from '../../periods/components/PeriodPicker.tsx';
 import { PERIOD_TYPE_DAY } from '../../periods/constants';
 import formVersionFixture from '../fixtures/formVersions.json';
 import MESSAGES from '../messages';
-import FormVersionsDialog from './FormVersionsDialogComponent';
+import FormVersionsDialogComponent from './FormVersionsDialogComponent';
 
 let connectedWrapper;
 
@@ -34,15 +33,12 @@ const awaitUseEffect = async wrapper => {
     return Promise.resolve();
 };
 
-const getConnectedWrapper = () =>
+const renderComponent = () =>
     mount(
-        withQueryClientProvider(
-            renderWithStore(
-                <LocalizationProvider
-                    dateAdapter={AdapterMoment}
-                    adapterLocale="en"
-                >
-                    <FormVersionsDialog
+        renderWithIntl(
+            renderWithMuiTheme(
+                withQueryClientProvider(
+                    <FormVersionsDialogComponent
                         formId={formId}
                         formVersion={fakeFormVersion}
                         titleMessage={MESSAGES.createFormVersion}
@@ -56,13 +52,8 @@ const getConnectedWrapper = () =>
                         )}
                         onConfirmed={() => null}
                         periodType={PERIOD_TYPE_DAY}
-                    />
-                </LocalizationProvider>,
-                {
-                    forms: {
-                        current: undefined,
-                    },
-                },
+                    />,
+                ),
             ),
         ),
     );
@@ -71,27 +62,26 @@ describe('FormVersionsDialog connected component', () => {
     describe('with a new form version', () => {
         before(() => {
             connectedWrapper = mount(
-                withQueryClientProvider(
-                    renderWithStore(
-                        <FormVersionsDialog
-                            formId={formId}
-                            titleMessage={MESSAGES.createFormVersion}
-                            onConfirmed={() => null}
-                            periodType={PERIOD_TYPE_DAY}
-                            renderTrigger={({ openDialog }) => (
-                                <IconButtonComponent
-                                    id="open-dialog"
-                                    onClick={openDialog}
-                                    icon="edit"
-                                    tooltipMessage={MESSAGES.createFormVersion}
-                                />
-                            )}
-                        />,
-                        {
-                            forms: {
-                                current: undefined,
-                            },
-                        },
+                renderWithIntl(
+                    renderWithMuiTheme(
+                        withQueryClientProvider(
+                            <FormVersionsDialogComponent
+                                formId={formId}
+                                titleMessage={MESSAGES.createFormVersion}
+                                onConfirmed={() => null}
+                                periodType={PERIOD_TYPE_DAY}
+                                renderTrigger={({ openDialog }) => (
+                                    <IconButtonComponent
+                                        id="open-dialog"
+                                        onClick={openDialog}
+                                        icon="edit"
+                                        tooltipMessage={
+                                            MESSAGES.createFormVersion
+                                        }
+                                    />
+                                )}
+                            />,
+                        ),
                     ),
                 ),
             );
@@ -124,7 +114,7 @@ describe('FormVersionsDialog connected component', () => {
 
     describe('with a full form version', () => {
         before(() => {
-            connectedWrapper = getConnectedWrapper();
+            connectedWrapper = renderComponent();
             inputComponent = connectedWrapper.find('#open-dialog').at(0);
             inputComponent.props().onClick();
             connectedWrapper.update();
@@ -191,7 +181,7 @@ describe('FormVersionsDialog connected component', () => {
 
         describe('onConfirm', () => {
             before(() => {
-                connectedWrapper = getConnectedWrapper();
+                connectedWrapper = renderComponent();
                 inputComponent = connectedWrapper.find('#open-dialog').at(0);
                 inputComponent.props().onClick();
                 connectedWrapper.update();