Refactor: remove redux state (#471)

* refactor to remove redux state * cleanup * simplify * remove dead code * simplification
Altinn · Jan 13, 2025 · 9a9b394 · 9a9b394
1 parent 2575921
commit 9a9b394
Show file tree

Hide file tree

Showing 19 changed files with 52 additions and 180 deletions.
diff --git a/frontend/src/features/changeRequestPage/ChangeRequestPageContent.tsx b/frontend/src/features/changeRequestPage/ChangeRequestPageContent.tsx
@@ -10,8 +10,6 @@ import {
   useRejectChangeRequestMutation,
 } from '@/rtk/features/systemUserApi';
 import { AuthenticationRoute } from '@/routes/paths';
-import { setCreatedId } from '@/rtk/features/createSystemUserSlice';
-import { useAppDispatch } from '@/rtk/app/hooks';
 import { i18nLanguageToShortLanguageCode } from '@/utils/languageUtils';
 import { getApiBaseUrl, getLogoutUrl } from '@/utils/urlUtils';
 import { ButtonRow } from '@/components/ButtonRow';
@@ -32,7 +30,6 @@ export const ChangeRequestPageContent = ({
   const [isReceiptVisible, setIsReceiptVisible] = useState<boolean>(false);
 
   const navigate = useNavigate();
-  const dispatch = useAppDispatch();
 
   const [
     postAcceptChangeRequest,
@@ -79,8 +76,7 @@ export const ChangeRequestPageContent = ({
   };
 
   const redirectToOverview = (): void => {
-    dispatch(setCreatedId(changeRequest.id));
-    navigate(AuthenticationRoute.Overview);
+    navigate(AuthenticationRoute.Overview, { state: { createdId: changeRequest.id } });
   };
 
   const logoutAndRedirectToVendor = (): void => {

diff --git a/frontend/src/features/creationpage/CreationPageContent.module.css b/frontend/src/features/creationpage/CreationPageContent.module.css
@@ -8,3 +8,7 @@
 .inputContainer {
   max-width: 27rem;
 }
+
+.successButton {
+  background-color: var(--ds-color-success-base-default);
+}
diff --git a/frontend/src/features/creationpage/CreationPageContent.tsx b/frontend/src/features/creationpage/CreationPageContent.tsx
@@ -1,23 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Button, Combobox, Alert } from '@digdir/designsystemet-react';
 import { AuthenticationRoute } from '@/routes/paths';
 import classes from './CreationPageContent.module.css';
 import { useGetVendorsQuery } from '@/rtk/features/systemUserApi';
-import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks';
-import { setSelectedSystemId } from '@/rtk/features/createSystemUserSlice';
 import { i18nLanguageToShortLanguageCode } from '@/utils/languageUtils';
 import { ButtonRow } from '@/components/ButtonRow';
 import { PageDescription } from '@/components/PageDescription';
+import { RightsIncludedPageContent } from './RightsIncludedPageContent';
+
+const isStringMatch = (inputString: string, matchString = ''): boolean => {
+  return matchString.toLowerCase().indexOf(inputString.toLowerCase()) >= 0;
+};
 
 export const CreationPageContent = () => {
   const { i18n, t } = useTranslation();
   const currentLanguage = i18nLanguageToShortLanguageCode(i18n.language);
 
-  const dispatch = useAppDispatch();
-
-  const { integrationTitle, selectedSystemId } = useAppSelector((state) => state.createSystemUser);
+  const [selectedSystemId, setSelectedSystemId] = useState<string>('');
+  const [isConfirmStep, setIsConfirmStep] = useState<boolean>(false);
 
   const {
     data: vendors,
@@ -32,49 +34,38 @@ export const CreationPageContent = () => {
   };
 
   const handleConfirm = () => {
-    navigate(AuthenticationRoute.RightsIncluded);
+    setIsConfirmStep(true);
   };
 
-  const isStringMatch = (inputString: string, matchString: string): boolean => {
-    return matchString.toLowerCase().indexOf(inputString.toLowerCase()) >= 0;
-  };
+  if (isConfirmStep) {
+    const selectedSystem = vendors?.find((system) => system.systemId === selectedSystemId);
+    return (
+      <RightsIncludedPageContent
+        selectedSystemId={selectedSystemId}
+        integrationTitle={selectedSystem?.name[currentLanguage] ?? ''}
+      />
+    );
+  }
 
   return (
     <div className={classes.creationPageContainer}>
-      <div>
-        <PageDescription
-          heading={t('authent_creationpage.sub_title')}
-          ingress={t('authent_creationpage.content_text1')}
-        />
-      </div>
+      <PageDescription
+        heading={t('authent_creationpage.sub_title')}
+        ingress={t('authent_creationpage.content_text1')}
+      />
       <div className={classes.inputContainer}>
         <Combobox
           label={t('authent_creationpage.pull_down_menu_label')}
           loading={isLoadingVendors}
           loadingLabel={t('authent_creationpage.loading_systems')}
           placeholder={t('common.choose')}
-          onValueChange={(newValue: string[]) => {
-            if (newValue?.length) {
-              const system = vendors?.find((x) => x.systemId === newValue[0]);
-              dispatch(
-                setSelectedSystemId({
-                  systemId: newValue[0],
-                  friendlySystemName: system?.name[currentLanguage] ?? '',
-                }),
-              );
-            }
-          }}
-          filter={(inputValue: string, option) => {
-            const vendor = vendors?.find((x) => x.systemId === option.value);
-            if (!vendor) {
-              return false;
-            }
-            const isOrgNrMatch = isStringMatch(inputValue, vendor.systemVendorOrgNumber);
-            const isOrgNameMatch = isStringMatch(inputValue, vendor.systemVendorOrgName);
-            const isSystemNameMatch = isStringMatch(inputValue, vendor.name[currentLanguage]);
-            return isOrgNrMatch || isOrgNameMatch || isSystemNameMatch;
-          }}
           value={selectedSystemId ? [selectedSystemId] : undefined}
+          onValueChange={(newValue: string[]) => setSelectedSystemId(newValue[0])}
+          filter={(inputValue: string, { label, description }) => {
+            const isLabelMatch = isStringMatch(inputValue, label);
+            const isDescriptionMatch = isStringMatch(inputValue, description);
+            return isLabelMatch || isDescriptionMatch;
+          }}
         >
           {vendors?.map((vendor) => {
             return (
@@ -97,7 +88,7 @@ export const CreationPageContent = () => {
           variant='primary'
           data-size='sm'
           onClick={handleConfirm}
-          disabled={!integrationTitle.trim() || !selectedSystemId}
+          disabled={!selectedSystemId}
         >
           {t('authent_creationpage.confirm_button')}
         </Button>

diff --git a/...ncludedpage/RightsIncludedPageContent.tsx → ...reationpage/RightsIncludedPageContent.tsx b/...ncludedpage/RightsIncludedPageContent.tsx → ...reationpage/RightsIncludedPageContent.tsx
@@ -3,53 +3,36 @@ import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Alert, Button, Spinner } from '@digdir/designsystemet-react';
 import { AuthenticationRoute } from '@/routes/paths';
-import classes from './RightsIncludedPageContent.module.css';
+import classes from './CreationPageContent.module.css';
 import { useCreateSystemUserMutation, useGetSystemRightsQuery } from '@/rtk/features/systemUserApi';
-import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks';
-import { useFirstRenderEffect } from '@/resources/hooks';
-import { setCreatedId } from '@/rtk/features/createSystemUserSlice';
 import { RightsList } from '@/components/RightsList';
 import { ButtonRow } from '@/components/ButtonRow';
 import { DelegationCheckError } from '@/components/DelegationCheckError';
 import { ProblemDetail } from '@/types/problemDetail';
 import { PageDescription } from '@/components/PageDescription';
 
-export const RightsIncludedPageContent = () => {
-  // Dette er en ny side fra "Design av 5/12" (se Repo Wiki, med senere endringer tror jeg)
-  // Siden er basert på ConfirmationPage og OverviewPage så koden er ikke finpusset ennå.
-  // Merk! Det er nå denne RightsIncludedPageContent som skal kjøre POST til backend
-  // og ikke CreationPageContent som tidligere (men den kjører foreløpig fortsatt POST)
+interface RightsIncludedPageContentProps {
+  selectedSystemId: string;
+  integrationTitle: string;
+}
 
+export const RightsIncludedPageContent = ({
+  selectedSystemId,
+  integrationTitle,
+}: RightsIncludedPageContentProps) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+
   const [postNewSystemUser, { error: createSystemUserError, isLoading: isCreatingSystemUser }] =
     useCreateSystemUserMutation();
 
-  const integrationTitle = useAppSelector((state) => state.createSystemUser.integrationTitle);
-  const selectedSystemId = useAppSelector((state) => state.createSystemUser.selectedSystemId);
   const {
     data: rights,
     isLoading: isLoadingRights,
     isError: isLoadRightsError,
   } = useGetSystemRightsQuery(selectedSystemId);
 
-  const navigate = useNavigate();
-  const dispatch = useAppDispatch();
-
-  useFirstRenderEffect(() => {
-    // if integrationTitle or selectedSystemVendor is not set (if user goes directly to /rightsincluded url), navigate back to creation
-    if (!integrationTitle || !selectedSystemId) {
-      navigate(AuthenticationRoute.Creation);
-    }
-  });
-
-  const navigateToOverview = (): void => {
-    navigate(AuthenticationRoute.Overview);
-  };
-
   const handleConfirm = () => {
-    // POST 3 useState variables, while the last two not yet implemented
-    // Update 08.01.24: agreement with Simen-backend that only two
-    // key:value pairs are needed
     const postObjekt = {
       integrationTitle: integrationTitle,
       systemId: selectedSystemId,
@@ -58,21 +41,20 @@ export const RightsIncludedPageContent = () => {
     postNewSystemUser(postObjekt)
       .unwrap()
       .then((payload) => {
-        dispatch(setCreatedId(payload.id));
-        navigateToOverview();
+        navigate(AuthenticationRoute.Overview, { state: { createdId: payload.id } });
       });
   };
 
   const handleReject = () => {
-    navigateToOverview();
+    navigate(AuthenticationRoute.Overview);
   };
 
   if (isLoadingRights) {
     return <Spinner aria-label={t('authent_includedrightspage.loading_rights')} />;
   }
 
   return (
-    <div className={classes.rightsIncludedWrapper}>
+    <div>
       <PageDescription
         heading={
           rights?.length === 1

diff --git a/frontend/src/features/overviewpage/OverviewPageContent.tsx b/frontend/src/features/overviewpage/OverviewPageContent.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { AuthenticationRoute } from '@/routes/paths';
 import classes from './OverviewPageContent.module.css';
 import { PlusIcon } from '@navikt/aksel-icons';
 import { Alert, Button, Heading, Spinner } from '@digdir/designsystemet-react';
-import { useFirstRenderEffect } from '@/resources/hooks';
 import { useTranslation } from 'react-i18next';
 import { useGetSystemUsersQuery } from '@/rtk/features/systemUserApi';
-import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks';
-import { setSelectedSystemId } from '@/rtk/features/createSystemUserSlice';
 import { SystemUserActionBar } from '@/components/SystemUserActionBar';
 import { useGetLoggedInUserQuery } from '@/rtk/features/userApi';
 import { RightsError } from '@/components/RightsError';
@@ -23,18 +20,13 @@ export const OverviewPageContent = () => {
 
   const { data: userInfo, isLoading: isLoadingUserInfo } = useGetLoggedInUserQuery();
 
-  const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const routerLocation = useLocation();
 
-  const newlyCreatedId = useAppSelector((state) => state.createSystemUser.newlyCreatedId);
+  const newlyCreatedId = routerLocation?.state?.createdId;
   const newlyCreatedItem = systemUsers?.find((systemUser) => systemUser.id === newlyCreatedId);
 
-  // reset create wizard values when overviewPage is rendered; the user ends up here after create, cancel or back navigation
-  useFirstRenderEffect(() => {
-    dispatch(setSelectedSystemId({ systemId: '', friendlySystemName: '' }));
-  });
-
   const goToStartNewSystemUser = () => {
     navigate(AuthenticationRoute.Creation);
   };

diff --git a/frontend/src/features/rightsincludedpage/RightsIncludedPage.tsx b/frontend/src/features/rightsincludedpage/RightsIncludedPage.tsx
diff --git a/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.module.css b/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.module.css
diff --git a/frontend/src/features/rightsincludedpage/index.ts b/frontend/src/features/rightsincludedpage/index.ts
diff --git a/frontend/src/features/vendorRequestPage/VendorRequestPageContent.tsx b/frontend/src/features/vendorRequestPage/VendorRequestPageContent.tsx
@@ -10,8 +10,6 @@ import {
   useRejectSystemUserRequestMutation,
 } from '@/rtk/features/systemUserApi';
 import { AuthenticationRoute } from '@/routes/paths';
-import { setCreatedId } from '@/rtk/features/createSystemUserSlice';
-import { useAppDispatch } from '@/rtk/app/hooks';
 import { i18nLanguageToShortLanguageCode } from '@/utils/languageUtils';
 import { getApiBaseUrl, getLogoutUrl } from '@/utils/urlUtils';
 import { ButtonRow } from '@/components/ButtonRow';
@@ -29,7 +27,6 @@ export const VendorRequestPageContent = ({ request, userInfo }: VendorRequestPag
   const [isReceiptVisible, setIsReceiptVisible] = useState<boolean>(false);
 
   const navigate = useNavigate();
-  const dispatch = useAppDispatch();
 
   const [
     postAcceptCreationRequest,
@@ -76,8 +73,7 @@ export const VendorRequestPageContent = ({ request, userInfo }: VendorRequestPag
   };
 
   const redirectToOverview = (): void => {
-    dispatch(setCreatedId(request.id));
-    navigate(AuthenticationRoute.Overview);
+    navigate(AuthenticationRoute.Overview, { state: { createdId: request.id } });
   };
 
   const logoutAndRedirectToVendor = (): void => {

diff --git a/frontend/src/localizations/en.json b/frontend/src/localizations/en.json
@@ -39,7 +39,6 @@
     "loading_systems": "Loading vendors and systems..."
   },
   "authent_includedrightspage": {
-    "banner_title": "Create new system access",
     "sub_title": "The system access will contain these services",
     "sub_title_single": "The system access will contain this service",
     "content_text": "These services are pre-selected by the vendor system.",

diff --git a/frontend/src/localizations/no_nb.json b/frontend/src/localizations/no_nb.json
@@ -39,7 +39,6 @@
     "loading_systems": "Laster leverandører og system..."
   },
   "authent_includedrightspage": {
-    "banner_title": "Lag ny systemtilgang",
     "sub_title": "Systemtilgangen vil inneholde disse tjenestene",
     "sub_title_single": "Systemtilgangen vil inneholde denne tjenesten",
     "content_text": "Disse tjenestene er forhåndsvalgt av fagsystemet.",

diff --git a/frontend/src/localizations/no_nn.json b/frontend/src/localizations/no_nn.json
@@ -39,7 +39,6 @@
     "loading_systems": "Lastar leverandørar og system..."
   },
   "authent_includedrightspage": {
-    "banner_title": "Lag ny systemtilgang",
     "sub_title": "Systemtilgangen vil innehalde desse tenestene",
     "sub_title_single": "Systemtilgangen vil innehalde denne tenesta",
     "content_text": "Desse tenestene er førehandsvalde av fagsystemet.",

diff --git a/frontend/src/resources/hooks/index.ts b/frontend/src/resources/hooks/index.ts
diff --git a/frontend/src/resources/hooks/useFirstRenderEffect.tsx b/frontend/src/resources/hooks/useFirstRenderEffect.tsx
diff --git a/frontend/src/routes/Router/Router.tsx b/frontend/src/routes/Router/Router.tsx
@@ -3,7 +3,6 @@ import { createBrowserRouter, createRoutesFromElements, Route } from 'react-rout
 import { OverviewPage } from '@/features/overviewpage/OverviewPage';
 import { CreationPage } from '@/features/creationpage/CreationPage';
 import { NotFoundSite } from '@/sites/NotFoundSite';
-import { RightsIncludedPage } from '@/features/rightsincludedpage';
 import { DetailPage } from '@/features/detailpage/DetailPage';
 import { AuthenticationRoute } from '../paths';
 import { VendorRequestPage } from '@/features/vendorRequestPage';
@@ -22,11 +21,6 @@ export const Router = createBrowserRouter(
         element={<CreationPage />}
         errorElement={<NotFoundSite />}
       />
-      <Route
-        path={AuthenticationRoute.RightsIncluded}
-        element={<RightsIncludedPage />}
-        errorElement={<NotFoundSite />}
-      />
       <Route
         path={`${AuthenticationRoute.Details}/:id`}
         element={<DetailPage />}

diff --git a/frontend/src/routes/paths/AuthenticationPath.ts b/frontend/src/routes/paths/AuthenticationPath.ts
@@ -2,15 +2,13 @@ enum AuthenticationPath {
   Auth = 'auth',
   Creation = 'creation',
   Overview = 'overview',
-  RightsIncluded = 'rightsincluded',
   Details = 'details',
   VendorRequest = 'vendorrequest',
   ChangeRequest = 'vendorchangerequest',
 }
 
 export enum AuthenticationRoute {
   Overview = `/${AuthenticationPath.Auth}/${AuthenticationPath.Overview}`,
-  RightsIncluded = `/${AuthenticationPath.Auth}/${AuthenticationPath.RightsIncluded}`,
   Creation = `/${AuthenticationPath.Auth}/${AuthenticationPath.Creation}`,
   Details = `/${AuthenticationPath.Auth}/${AuthenticationPath.Details}`,
   VendorRequest = `/${AuthenticationPath.Auth}/${AuthenticationPath.VendorRequest}`,