Rewriting to use redux-toolkit (#329)

Co-authored-by: Ole Martin Handeland <git@olemartin.org>

src/altinn-app-frontend/__mocks__/formDataStateMock.ts

@@ -1,4 +1,4 @@
-import type { IFormDataState } from '../src/features/form/data/formDataReducer';
+import type { IFormDataState } from '../src/features/form/data';
 
 export function getFormDataStateMock(customState?: Partial<IFormDataState>) {
   const formData: IFormDataState = {

src/altinn-app-frontend/__mocks__/instanceDataStateMock.ts

@@ -1,4 +1,4 @@
-import type { IInstanceDataState } from '../src/shared/resources/instanceData/instanceDataReducers';
+import type { IInstanceDataState } from 'src/shared/resources/instanceData';
 
 export function getInstanceDataStateMock(
   customStates?: Partial<IInstanceDataState>,

src/altinn-app-frontend/__mocks__/profileStateMock.ts

@@ -1,4 +1,4 @@
-import type { IProfileState } from '../src/shared/resources/profile/profileReducers';
+import type { IProfileState } from '../src/shared/resources/profile';
 import { mockParty } from './initialStateMock';
 
 export function getProfileStateMock(

src/altinn-app-frontend/package.json

@@ -30,7 +30,6 @@
     "ajv-formats": "^2.1.1",
     "axios": "^0.27.2",
     "dot-object": "^2.1.4",
-    "immutability-helper": "2.7.0",
     "jsonpointer": "5.0.0",
     "moment": "^2.29.3",
     "react": "^17.0.2",

src/altinn-app-frontend/src/components/GenericComponent.tsx

@@ -15,8 +15,8 @@ import type {
   ITextResourceBindings,
 } from '../features/form/layout';
 import { getTextResourceByKey } from 'altinn-shared/utils';
-import FormDataActions from '../features/form/data/formDataActions';
-import { setCurrentSingleFieldValidation } from '../features/form/validation/validationSlice';
+import { FormDataActions } from '../features/form/data/formDataSlice';
+import { ValidationActions } from '../features/form/validation/validationSlice';
 import { makeGetFocus, makeGetHidden } from '../selectors/getLayoutData';
 import Label from '../features/form/components/Label';
 import Legend from '../features/form/components/Legend';
@@ -179,7 +179,7 @@ export function GenericComponent(props: IGenericComponentProps) {
     const dataModelBinding = props.dataModelBindings[key];
     if (props.triggers && props.triggers.includes(Triggers.Validation)) {
       dispatch(
-        setCurrentSingleFieldValidation({
+        ValidationActions.setCurrentSingleFieldValidation({
           dataModelBinding,
           componentId: props.id,
           layoutId: currentView,
@@ -188,7 +188,7 @@ export function GenericComponent(props: IGenericComponentProps) {
     }
 
     dispatch(
-      FormDataActions.updateFormData({
+      FormDataActions.update({
         field: dataModelBinding,
         data: value,
         componentId: props.id,

src/altinn-app-frontend/src/components/base/AttachmentListComponent.test.tsx

@@ -9,7 +9,7 @@ import {
   applicationMetadataMock,
 } from '../../../__mocks__/mocks';
 import type { IApplicationMetadata } from '../../shared/resources/applicationMetadata';
-import type { IInstanceDataState } from '../../shared/resources/instanceData/instanceDataReducers';
+import type { IInstanceDataState } from 'src/shared/resources/instanceData';
 import type { IData } from '../../../../shared/src';
 import type { IAttachmentListProps } from './AttachmentListComponent';
 

src/altinn-app-frontend/src/components/base/ButtonComponent.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { getLanguageFromKey } from 'altinn-shared/utils/language';
 import { AltinnLoader } from 'altinn-shared/components';
 import type { IAltinnWindow } from '../../types';
-import FormDataActions from '../../features/form/data/formDataActions';
+import { FormDataActions } from '../../features/form/data/formDataSlice';
 import { useAppDispatch, useAppSelector } from 'src/common/hooks';
 import type { IComponentProps } from '..';
 
@@ -84,7 +84,7 @@ export function ButtonComponent(props: IButtonProvidedProps) {
   };
 
   const saveFormData = () => {
-    dispatch(FormDataActions.submitFormData({}));
+    dispatch(FormDataActions.submit({}));
   };
 
   const renderLoader = () => {
@@ -99,7 +99,7 @@ export function ButtonComponent(props: IButtonProvidedProps) {
   const submitForm = () => {
     const { org, app, instanceId } = window as Window as IAltinnWindow;
     dispatch(
-      FormDataActions.submitFormData({
+      FormDataActions.submit({
         url: `${window.location.origin}/${org}/${app}/api/${instanceId}`,
         apiMode: 'Complete',
         stopWithWarnings: !ignoreWarnings,

src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.test.tsx

@@ -11,7 +11,7 @@ import { getInitialStateMock } from '../../../__mocks__/initialStateMock';
 import { CheckboxContainerComponent } from './CheckboxesContainerComponent';
 import { LayoutStyle } from 'src/types';
 import type { RootState } from 'src/store';
-import type { IOptionsState } from 'src/shared/resources/options/optionsReducer';
+import type { IOptionsState } from 'src/shared/resources/options';
 
 const threeOptions = [
   {

src/altinn-app-frontend/src/components/base/FileUpload/FileUploadComponent.tsx

@@ -6,12 +6,12 @@ import { AltinnLoader } from 'altinn-shared/components';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { isMobile } from 'react-device-detect';
 import type { IAttachment } from 'src/shared/resources/attachments';
-import AttachmentDispatcher from '../../../shared/resources/attachments/attachmentActions';
+import { AttachmentActions } from 'src/shared/resources/attachments/attachmentSlice';
 import './FileUploadComponent.css';
 import type { IComponentValidations } from 'src/types';
 import { renderValidationMessagesForComponent } from 'src/utils/render';
 import { v4 as uuidv4 } from 'uuid';
-import { useAppSelector } from 'src/common/hooks';
+import { useAppSelector, useAppDispatch } from 'src/common/hooks';
 import { AttachmentsCounter, FileName } from './shared/render';
 import { DropzoneComponent } from './shared/DropzoneComponent';
 import type { IFileUploadGenericProps } from './shared/props';
@@ -38,6 +38,7 @@ export function FileUploadComponent({
   textResourceBindings,
   dataModelBindings,
 }: IFileUploadProps) {
+  const dispatch = useAppDispatch();
   const [validations, setValidations] = React.useState([]);
   const [showFileUpload, setShowFileUpload] = React.useState(false);
   const mobileView = useMediaQuery('(max-width:992px)'); // breakpoint on altinn-modal
@@ -97,13 +98,15 @@ export function FileUploadComponent({
             deleting: false,
             updating: false,
           });
-          AttachmentDispatcher.uploadAttachment(
-            file,
-            fileType,
-            tmpId,
-            id,
-            dataModelBindings,
-            attachments.length + index,
+          dispatch(
+            AttachmentActions.uploadAttachment({
+              file,
+              attachmentType: fileType,
+              tmpAttachmentId: tmpId,
+              componentId: id,
+              dataModelBindings,
+              index: attachments.length + index,
+            }),
           );
         }
       });
@@ -150,12 +153,13 @@ export function FileUploadComponent({
 
   const handleDeleteFile = (index: number) => {
     const attachmentToDelete = attachments[index];
-    const fileType = baseComponentId || id;
-    AttachmentDispatcher.deleteAttachment(
-      attachmentToDelete,
-      fileType,
-      id,
-      dataModelBindings,
+    dispatch(
+      AttachmentActions.deleteAttachment({
+        attachment: attachmentToDelete,
+        attachmentType: baseComponentId || id,
+        componentId: id,
+        dataModelBindings,
+      }),
     );
   };
 

src/altinn-app-frontend/src/components/base/FileUpload/FileUploadWithTag/EditWindowComponent.tsx

@@ -5,11 +5,12 @@ import { AltinnButton, AltinnLoader } from 'altinn-shared/components';
 import type { IAttachment } from '../../../../shared/resources/attachments';
 import type { IOption } from 'src/types';
 import { getLanguageFromKey } from 'altinn-shared/utils';
-import AttachmentDispatcher from 'src/shared/resources/attachments/attachmentActions';
+import { AttachmentActions } from 'src/shared/resources/attachments/attachmentSlice';
 import { renderValidationMessages } from 'src/utils/render';
 import { FileName } from '../shared/render';
 import classNames from 'classnames';
 import type { IComponentProps } from 'src/components';
+import { useAppDispatch } from 'src/common/hooks';
 
 const useStyles = makeStyles({
   textContainer: {
@@ -56,14 +57,17 @@ export interface EditWindowProps extends IComponentProps {
 }
 
 export function EditWindowComponent(props: EditWindowProps): JSX.Element {
+  const dispatch = useAppDispatch();
   const classes = useStyles();
 
   const handleDeleteFile = () => {
-    AttachmentDispatcher.deleteAttachment(
-      props.attachment,
-      props.id,
-      props.id,
-      props.dataModelBindings,
+    dispatch(
+      AttachmentActions.deleteAttachment({
+        attachment: props.attachment,
+        componentId: props.id,
+        attachmentType: props.baseComponentId || props.id,
+        dataModelBindings: props.dataModelBindings,
+      }),
     );
     props.setEditIndex(-1);
   };

src/altinn-app-frontend/src/components/base/FileUpload/FileUploadWithTag/FileUploadWithTagComponent.tsx

@@ -5,7 +5,7 @@ import { getLanguageFromKey } from 'altinn-shared/utils';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { isMobile } from 'react-device-detect';
 import type { IAttachment } from '../../../../shared/resources/attachments';
-import AttachmentDispatcher from '../../../../shared/resources/attachments/attachmentActions';
+import { AttachmentActions } from 'src/shared/resources/attachments/attachmentSlice';
 import type { IMapping, IRuntimeState } from '../../../../types';
 import { renderValidationMessagesForComponent } from '../../../../utils/render';
 import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
@@ -153,11 +153,13 @@ export function FileUploadWithTagComponent({
   const setAttachmentTag = (attachment: IAttachment, optionValue: string) => {
     const option = options?.find((o) => o.value === optionValue);
     if (option !== undefined) {
-      AttachmentDispatcher.updateAttachment(
-        attachment,
-        id,
-        baseComponentId,
-        option.value,
+      dataDispatch(
+        AttachmentActions.updateAttachment({
+          attachment,
+          componentId: id,
+          baseComponentId,
+          tag: option.value,
+        }),
       );
     } else {
       console.error(`Could not find option for ${optionValue}`);
@@ -203,13 +205,15 @@ export function FileUploadWithTagComponent({
             deleting: false,
             updating: false,
           });
-          AttachmentDispatcher.uploadAttachment(
-            file,
-            fileType,
-            tmpId,
-            id,
-            dataModelBindings,
-            attachments.length + index,
+          dataDispatch(
+            AttachmentActions.uploadAttachment({
+              file,
+              attachmentType: fileType,
+              tmpAttachmentId: tmpId,
+              componentId: id,
+              dataModelBindings,
+              index: attachments.length + index,
+            }),
           );
         }
       });

src/altinn-app-frontend/src/components/base/InstantiationButtonComponent.tsx

@@ -1,14 +1,14 @@
 import { AltinnLoader } from 'altinn-shared/components';
 import * as React from 'react';
-import { useAppSelector } from 'src/common/hooks';
-import InstantiationActions from 'src/features/instantiate/instantiation/actions';
+import { useAppSelector, useAppDispatch } from 'src/common/hooks';
+import { InstantiationActions } from 'src/features/instantiate/instantiation/instantiationSlice';
 import { useInstantiateWithPrefillMutation } from 'src/services/InstancesApi';
-import InstanceDataActions from 'src/shared/resources/instanceData/instanceDataActions';
-import AttachmentActions from 'src/shared/resources/attachments/attachmentActions';
 import { mapFormData } from 'src/utils/databindings';
 import { Redirect } from 'react-router';
 import type { IMapping } from 'src/types';
 import type { IComponentProps } from '..';
+import { AttachmentActions } from 'src/shared/resources/attachments/attachmentSlice';
+import { InstanceDataActions } from 'src/shared/resources/instanceData/instanceDataSlice';
 
 const buttonStyle = {
   marginBottom: '0',
@@ -35,6 +35,7 @@ export interface IInstantiationButtonProps extends IComponentProps {
 }
 
 export function InstantiationButtonComponent(props: IInstantiationButtonProps) {
+  const dispatch = useAppDispatch();
   const [instantiateWithPrefill, { isSuccess, data, isLoading, isError }] =
     useInstantiateWithPrefillMutation();
   const formData = useAppSelector((state) => state.formData.formData);
@@ -52,11 +53,13 @@ export function InstantiationButtonComponent(props: IInstantiationButtonProps) {
 
   React.useEffect(() => {
     if (isSuccess) {
-      InstanceDataActions.getInstanceDataFulfilled(data);
-      AttachmentActions.mapAttachments();
-      InstantiationActions.instantiateFulfilled(data.id);
+      dispatch(InstanceDataActions.getFulfilled({ instanceData: data }));
+      dispatch(AttachmentActions.mapAttachments());
+      dispatch(
+        InstantiationActions.instantiateFulfilled({ instanceId: data.id }),
+      );
     }
-  }, [isSuccess, data]);
+  }, [isSuccess, data, dispatch]);
 
   React.useEffect(() => {
     if (isError) {

src/altinn-app-frontend/src/components/base/NavigationBar.test.tsx

@@ -5,6 +5,7 @@ import { mockMediaQuery, renderWithProviders } from '../../../testUtils';
 import { NavigationBar } from './NavigationBar';
 import type { INavigationBar } from './NavigationBar';
 import { setupStore } from 'src/store';
+import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
 
 const { setScreenWidth } = mockMediaQuery(600);
 
@@ -140,7 +141,7 @@ describe('NavigationBar', () => {
           newView: 'page3',
           runValidations: null,
         },
-        type: 'formLayout/updateCurrentView',
+        type: FormLayoutActions.updateCurrentView.type,
       });
     });
 
@@ -231,7 +232,7 @@ describe('NavigationBar', () => {
           newView: 'page3',
           runValidations: null,
         },
-        type: 'formLayout/updateCurrentView',
+        type: FormLayoutActions.updateCurrentView.type,
       });
     });
 

src/altinn-app-frontend/src/components/base/RadioButtons/RadioButtonsContainerComponent.test.tsx

@@ -11,7 +11,7 @@ import type { IRadioButtonsContainerProps } from './RadioButtonsContainerCompone
 import { LayoutStyle } from 'src/types';
 import { getInitialStateMock } from '../../../../__mocks__/initialStateMock';
 import type { RootState } from 'src/store';
-import type { IOptionsState } from 'src/shared/resources/options/optionsReducer';
+import type { IOptionsState } from 'src/shared/resources/options';
 
 const threeOptions = [
   {

src/altinn-app-frontend/src/components/hooks/useDisplayData.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { IFormDataState } from 'src/features/form/data/formDataReducer';
+import type { IFormDataState } from 'src/features/form/data';
 
 export const useDisplayData = ({
   formData,