M2-5304 Fix: Notification appears twice on the assessment page (#386)

* Create base layout for assessment page * Apply base assessment layout to assessment welcome page * Remove notification center from loading screen * Eslint fixes --------- Co-authored-by: Viktor Riabkov <[email protected]>
ChildMindInstitute · Feb 23, 2024 · bdeac58 · bdeac58
1 parent 85e9cd7
commit bdeac58
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 123 deletions.
diff --git a/src/widgets/ActivityDetails/ui/AssessmentLayout.tsx b/src/widgets/ActivityDetails/ui/AssessmentLayout.tsx
@@ -0,0 +1,60 @@
+import { PropsWithChildren } from 'react';
+
+import Box from '@mui/material/Box';
+
+import { AssessmentLayoutFooter } from './AssessmentLayoutFooter';
+import { AssessmentLayoutHeader } from './AssessmentLayoutHeader';
+
+import { Theme } from '~/shared/constants';
+import { NotificationCenter } from '~/shared/ui';
+
+type Props = PropsWithChildren<{
+  activityName: string;
+  progress: number;
+
+  isPublic: boolean;
+  publicAppletKey: string | null;
+
+  appletId: string;
+  activityId: string;
+  eventId: string;
+
+  footerActions?: React.ReactNode;
+}>;
+
+export const AssessmentLayout = (props: Props) => {
+  return (
+    <Box
+      id="assessment-screen-layout"
+      display="flex"
+      flex={1}
+      flexDirection="column"
+      bgcolor={Theme.colors.light.surface}
+    >
+      <AssessmentLayoutHeader
+        title={props.activityName}
+        progress={props.progress}
+        appletId={props.appletId}
+        activityId={props.activityId}
+        eventId={props.eventId}
+        isPublic={props.isPublic}
+        publicKey={props.isPublic ? props.publicAppletKey : null}
+      />
+
+      <Box
+        id="assessment-content-container"
+        display="flex"
+        flex={1}
+        flexDirection="column"
+        overflow="scroll"
+      >
+        <NotificationCenter />
+        <Box display="flex" flex={1} justifyContent="center">
+          {props.children}
+        </Box>
+      </Box>
+
+      <AssessmentLayoutFooter>{props.footerActions}</AssessmentLayoutFooter>
+    </Box>
+  );
+};
diff --git a/src/widgets/ActivityDetails/ui/AssessmentLoadingScreen.tsx b/src/widgets/ActivityDetails/ui/AssessmentLoadingScreen.tsx
@@ -6,7 +6,6 @@ import { ActivityDetailsContext } from '../lib';
 
 import { SaveAndExitButton } from '~/features/SaveAssessmentAndExit';
 import { ROUTES } from '~/shared/constants';
-import { NotificationCenter } from '~/shared/ui';
 import Loader from '~/shared/ui/Loader';
 import { useCustomMediaQuery, useCustomNavigation } from '~/shared/utils';
 
@@ -53,7 +52,6 @@ export const AssessmentLoadingScreen = () => {
         flexDirection="column"
         overflow="auto"
       >
-        <NotificationCenter />
         <Loader />
       </Box>
     </Box>

diff --git a/src/widgets/ActivityDetails/ui/AssessmentPassingScreen.tsx b/src/widgets/ActivityDetails/ui/AssessmentPassingScreen.tsx
@@ -2,8 +2,7 @@ import { useCallback, useContext, useMemo, useState } from 'react';
 
 import Box from '@mui/material/Box';
 
-import { AssessmentLayoutFooter } from './AssessmentLayoutFooter';
-import { AssessmentLayoutHeader } from './AssessmentLayoutHeader';
+import { AssessmentLayout } from './AssessmentLayout';
 import { ActivityDetailsContext } from '../lib';
 import { validateBeforeMoveForward } from '../model';
 import {
@@ -23,8 +22,7 @@ import {
   AppletEventsResponse,
   RespondentMetaDTO,
 } from '~/shared/api';
-import { Theme } from '~/shared/constants';
-import { MuiModal, NotificationCenter, useNotification } from '~/shared/ui';
+import { MuiModal, useNotification } from '~/shared/ui';
 import { useAppSelector, useCustomTranslation, useFlowType, usePrevious } from '~/shared/utils';
 
 type Props = {
@@ -225,51 +223,15 @@ export const AssessmentPassingScreen = (props: Props) => {
 
   return (
     <>
-      <Box
-        id="assessment-screen-layout"
-        display="flex"
-        flex={1}
-        flexDirection="column"
-        bgcolor={Theme.colors.light.surface}
-      >
-        <AssessmentLayoutHeader
-          title={props.activityDetails.name}
-          progress={progress}
-          appletId={applet.id}
-          activityId={activityId}
-          eventId={eventId}
-          isPublic={context.isPublic}
-          publicKey={context.isPublic ? context.publicAppletKey : null}
-        />
-
-        <Box
-          id="assessment-content-container"
-          display="flex"
-          flex={1}
-          flexDirection="column"
-          overflow="auto"
-        >
-          <NotificationCenter />
-          <Box display="flex" flex={1} justifyContent="center">
-            <Box maxWidth="900px" display="flex" alignItems="center" flex={1}>
-              {item && (
-                <ActivityCardItem
-                  key={item.id}
-                  item={item}
-                  replaceText={replaceTextVariables}
-                  watermark={props.appletDetails.watermark}
-                  allowToSkipAllItems={props.activityDetails.isSkippable}
-                  step={step}
-                  prevStep={prevStep}
-                  onValueChange={onItemValueChange}
-                  onItemAdditionalTextChange={onItemAdditionalTextChange}
-                />
-              )}
-            </Box>
-          </Box>
-        </Box>
-
-        <AssessmentLayoutFooter>
+      <AssessmentLayout
+        activityName={props.activityDetails.name}
+        progress={progress}
+        appletId={applet.id}
+        activityId={activityId}
+        eventId={eventId}
+        isPublic={context.isPublic}
+        publicAppletKey={context.isPublic ? context.publicAppletKey : null}
+        footerActions={
           <ItemCardButton
             isLoading={false}
             isBackShown={hasPrevStep && canGoBack}
@@ -278,8 +240,24 @@ export const AssessmentPassingScreen = (props: Props) => {
             backButtonText={t('Consent.back')}
             nextButtonText={t('Consent.next')}
           />
-        </AssessmentLayoutFooter>
-      </Box>
+        }
+      >
+        <Box maxWidth="900px" display="flex" alignItems="center" flex={1}>
+          {item && (
+            <ActivityCardItem
+              key={item.id}
+              item={item}
+              replaceText={replaceTextVariables}
+              watermark={props.appletDetails.watermark}
+              allowToSkipAllItems={props.activityDetails.isSkippable}
+              step={step}
+              prevStep={prevStep}
+              onValueChange={onItemValueChange}
+              onItemAdditionalTextChange={onItemAdditionalTextChange}
+            />
+          )}
+        </Box>
+      </AssessmentLayout>
 
       <MuiModal
         isOpen={isModalOpen}

diff --git a/src/widgets/ActivityDetails/ui/AssessmentWelcomeScreen.tsx b/src/widgets/ActivityDetails/ui/AssessmentWelcomeScreen.tsx
@@ -3,9 +3,7 @@ import { useContext } from 'react';
 import Box from '@mui/material/Box';
 
 import { ActivityMetaData } from './ActivityMetaData';
-import { AssessmentLayoutFooter } from './AssessmentLayoutFooter';
-import { AssessmentLayoutHeader } from './AssessmentLayoutHeader';
-import Layout from '../../AppLayout';
+import { AssessmentLayout } from './AssessmentLayout';
 import { ActivityDetailsContext } from '../lib';
 
 import { appletModel } from '~/entities/applet';
@@ -37,79 +35,71 @@ export const AssessmentWelcomeScreen = (props: Props) => {
   };
 
   return (
-    <Layout
-      bgColor={Theme.colors.light.surface}
-      header={
-        <AssessmentLayoutHeader
-          title={props.activityDetails.name}
-          progress={0}
-          appletId={context.appletId}
-          activityId={props.activityDetails.id}
-          eventId={context.eventId}
-          isPublic={context.isPublic}
-          publicKey={context.isPublic ? context.publicAppletKey : null}
+    <AssessmentLayout
+      activityName={props.activityDetails.name}
+      progress={0}
+      appletId={context.appletId}
+      activityId={props.activityDetails.id}
+      eventId={context.eventId}
+      isPublic={context.isPublic}
+      publicAppletKey={context.isPublic ? context.publicAppletKey : null}
+      footerActions={
+        <StartAssessmentButton
+          width={greaterThanSM ? '375px' : '335px'}
+          onClick={startAssessment}
         />
       }
-      footer={
-        <AssessmentLayoutFooter>
-          <StartAssessmentButton
-            width={greaterThanSM ? '375px' : '335px'}
-            onClick={startAssessment}
-          />
-        </AssessmentLayoutFooter>
-      }
     >
-      <Box height="100%" width="100%" display="flex" justifyContent="center" paddingTop="80px">
-        <Box
-          id="welcome-screen-activity-details"
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-          maxWidth="570px"
+      <Box
+        id="welcome-screen-activity-details"
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        marginTop="80px"
+        maxWidth="570px"
+      >
+        <AvatarBase
+          src={props.activityDetails.image}
+          name={props.activityDetails?.name}
+          width="124px"
+          height="124px"
+          testid="flow-welcome-screen-avatar"
+        />
+
+        <Text
+          variant="body1"
+          fontSize="18px"
+          fontWeight="400"
+          color={Theme.colors.light.secondary}
+          sx={{ marginTop: '24px' }}
         >
-          <AvatarBase
-            src={props.activityDetails.image}
-            name={props.activityDetails?.name}
-            width="124px"
-            height="124px"
-            testid="flow-welcome-screen-avatar"
+          <ActivityMetaData
+            activityLength={props.activityDetails.items.length}
+            groupInProgress={getGroupProgress({ entityId, eventId: context.eventId })}
           />
+        </Text>
+        <Text
+          variant="body1"
+          fontSize="18px"
+          fontWeight="700"
+          color={Theme.colors.light.onSurface}
+          margin="16px 0px"
+          testid="flow-welcome-screen-title"
+        >
+          {props.activityDetails.name}
+        </Text>
 
-          <Text
-            variant="body1"
-            fontSize="18px"
-            fontWeight="400"
-            color={Theme.colors.light.secondary}
-            sx={{ marginTop: '24px' }}
-          >
-            <ActivityMetaData
-              activityLength={props.activityDetails.items.length}
-              groupInProgress={getGroupProgress({ entityId, eventId: context.eventId })}
-            />
-          </Text>
-          <Text
-            variant="body1"
-            fontSize="18px"
-            fontWeight="700"
-            color={Theme.colors.light.onSurface}
-            margin="16px 0px"
-            testid="flow-welcome-screen-title"
-          >
-            {props.activityDetails.name}
-          </Text>
-
-          <Text
-            variant="body1"
-            fontSize="18px"
-            fontWeight="400"
-            color={Theme.colors.light.onSurface}
-            testid="flow-welcome-screen-decription"
-            sx={{ textAlign: 'center' }}
-          >
-            {props.activityDetails.description}
-          </Text>
-        </Box>
+        <Text
+          variant="body1"
+          fontSize="18px"
+          fontWeight="400"
+          color={Theme.colors.light.onSurface}
+          testid="flow-welcome-screen-decription"
+          sx={{ textAlign: 'center' }}
+        >
+          {props.activityDetails.description}
+        </Text>
       </Box>
-    </Layout>
+    </AssessmentLayout>
   );
 };