Merge pull request #2143 from City-of-Helsinki/hl-833

HL-833: use openDrawer param on application page to open sidebar
City-of-Helsinki · Jul 17, 2023 · 47b43a7 · 47b43a7
2 parents 36b198d + 2055ba4
commit 47b43a7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx b/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx
@@ -32,12 +32,18 @@ export interface ApplicationListProps {
 
 const buildApplicationUrl = (
   id: string,
-  status: APPLICATION_STATUSES
+  status: APPLICATION_STATUSES,
+  openDrawer = false
 ): string => {
   if (status === APPLICATION_STATUSES.DRAFT) {
     return `${ROUTES.APPLICATION_FORM}?id=${id}`;
   }
-  return `${ROUTES.APPLICATION}?id=${id}`;
+
+  const applicationUrl = `${ROUTES.APPLICATION}?id=${id}`;
+  if (openDrawer) {
+    return `${applicationUrl}&openDrawer=1`;
+  }
+  return applicationUrl;
 };
 
 const ApplicationList: React.FC<ApplicationListProps> = ({
@@ -58,9 +64,16 @@ const ApplicationList: React.FC<ApplicationListProps> = ({
         transform: ({
           id,
           companyName,
+          unreadMessagesCount,
           status: applicationStatus,
         }: ApplicationListTableTransforms) => (
-          <$Link href={buildApplicationUrl(id, applicationStatus)}>
+          <$Link
+            href={buildApplicationUrl(
+              id,
+              applicationStatus,
+              unreadMessagesCount > 0
+            )}
+          >
             {String(companyName)}
           </$Link>
         ),
@@ -168,10 +181,16 @@ const ApplicationList: React.FC<ApplicationListProps> = ({
     }
 
     cols.push({
-      transform: ({ unreadMessagesCount }: ApplicationListTableTransforms) => (
+      transform: ({
+        unreadMessagesCount,
+        id,
+        status: applicationStatus,
+      }: ApplicationListTableTransforms) => (
         <$CellContent>
           {Number(unreadMessagesCount) > 0 ? (
-            <IconSpeechbubbleText color={theme.colors.coatOfArms} />
+            <$Link href={buildApplicationUrl(id, applicationStatus, true)}>
+              <IconSpeechbubbleText color={theme.colors.coatOfArms} />
+            </$Link>
           ) : null}
         </$CellContent>
       ),

diff --git a/...nts/applicationReview/actions/handlingApplicationActions/useHandlingApplicationActions.ts b/...nts/applicationReview/actions/handlingApplicationActions/useHandlingApplicationActions.ts
@@ -4,6 +4,8 @@ import useHandlerReviewActions from 'benefit/handler/hooks/useHandlerReviewActio
 import { HandledAplication } from 'benefit/handler/types/application';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { Application } from 'benefit-shared/types/application';
+import { isTruthy } from 'benefit-shared/utils/common';
+import { useRouter } from 'next/router';
 import { TFunction, useTranslation } from 'next-i18next';
 import React, { useEffect, useState } from 'react';
 import useToggle from 'shared/hooks/useToggle';
@@ -35,8 +37,11 @@ const useHandlingApplicationActions = (
   const { updateStatus } = useApplicationActions(application);
   const { handledApplication, setHandledApplication } =
     React.useContext(AppContext);
-  const [isMessagesDrawerVisible, toggleMessagesDrawerVisiblity] =
-    useToggle(false);
+  const router = useRouter();
+  const { openDrawer } = router.query;
+  const [isMessagesDrawerVisible, toggleMessagesDrawerVisiblity] = useToggle(
+    isTruthy(openDrawer.toString())
+  );
 
   const [isConfirmationModalOpen, setIsConfirmationModalOpen] =
     useState<boolean>(false);

diff --git a/frontend/benefit/shared/src/utils/common.ts b/frontend/benefit/shared/src/utils/common.ts
@@ -23,3 +23,6 @@ export const setAppLoaded = (): void => {
     }
   }
 };
+
+export const isTruthy = (value: string | boolean): boolean =>
+  ['1', true, 'true'].includes(value);