Use PageContainer across the app

beda-software · Dec 2, 2024 · e6fe2f3 · e6fe2f3
1 parent eec11cb
commit e6fe2f3
Show file tree

Hide file tree

Showing 36 changed files with 1,117 additions and 1,423 deletions.
diff --git a/src/components/DashboardCard/DashboardCard.styles.ts b/src/components/DashboardCard/DashboardCard.styles.ts
@@ -6,7 +6,7 @@ export const S = {
     `,
     Card: styled.div`
         border-radius: 10px;
-        background-color: ${({ theme }) => theme.neutralPalette.gray_2};
+        background-color: ${({ theme }) => theme.neutralPalette.gray_1};
         color: ${({ theme }) => theme.neutralPalette.gray_13};
         border: 1px solid ${({ theme }) => theme.antdTheme?.colorBorderSecondary};
         min-width: fit-content;

diff --git a/src/components/PageContainer/index.tsx b/src/components/PageContainer/index.tsx
diff --git a/src/components/PatientEncounter/index.tsx b/src/components/PatientEncounter/index.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans } from '@lingui/macro';
 import { Col, Row } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { Patient } from 'fhir/r4b';
@@ -11,7 +11,6 @@ import { EncounterData } from 'src/components/EncountersTable/types';
 import { StatusBadge } from 'src/components/EncounterStatusBadge';
 import { ModalNewEncounter } from 'src/components/ModalNewEncounter';
 import { useEncounterList } from 'src/containers/EncounterList/hooks';
-import { usePatientHeaderLocationTitle } from 'src/containers/PatientDetails/PatientHeader/hooks';
 import { formatPeriodDateTime } from 'src/utils/date';
 import { renderHumanName } from 'src/utils/fhir';
 
@@ -76,8 +75,6 @@ export const PatientEncounter = ({ patient, searchParams, hideCreateButton }: Pr
         ...searchParams,
     });
 
-    usePatientHeaderLocationTitle({ title: t`Encounters` });
-
     return (
         <>
             {hideCreateButton ? null : (

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -18,7 +18,6 @@ export * from './ModalNewEncounter';
 export * from './ModalNewHealthcareService';
 export * from './ModalNewPatient';
 export * from './ModalTrigger';
-export * from './PageContainer';
 export * from './PatientEncounter';
 export * from './QuestionnaireResponseForm';
 export * from './QuestionnairesWizard';

diff --git a/src/containers/Appointment/PublicAppointment.styles.ts b/src/containers/Appointment/PublicAppointment.styles.ts
@@ -1,9 +1,6 @@
 import styled from 'styled-components';
 
-import { BasePageHeader } from 'src/components/BaseLayout';
-
 export const S = {
-    Header: styled(BasePageHeader)``,
     Content: styled.div`
         width: 540px;
         background-color: ${({ theme }) => theme.antdTheme?.colorBgContainer};

diff --git a/src/containers/Appointment/PublicAppointment.tsx b/src/containers/Appointment/PublicAppointment.tsx
@@ -6,11 +6,10 @@ import { axiosInstance as axiosAidboxInstance } from 'aidbox-react/lib/services/
 
 import { uuid4 } from '@beda.software/fhir-react';
 
-import { BasePageContent } from 'src/components/BaseLayout';
+import { PageContainer } from 'src/components/BaseLayout/PageContainer';
 import { DateTimeSlotPicker } from 'src/components/BaseQuestionnaireResponseForm/widgets';
 import { QuestionnaireResponseForm } from 'src/components/QuestionnaireResponseForm';
 import { Spinner } from 'src/components/Spinner';
-import { Title } from 'src/components/Typography';
 import { questionnaireIdLoader } from 'src/hooks/questionnaire-response-form-data';
 import { getToken } from 'src/services/auth';
 import { axiosInstance as axiosFHIRInstance } from 'src/services/fhir';
@@ -42,47 +41,39 @@ export function PublicAppointment() {
     }, [isAnonymousUser]);
 
     return (
-        <>
-            <S.Header>
-                <Title>
-                    <Trans>Appointment booking</Trans>
-                </Title>
-            </S.Header>
-
-            <BasePageContent style={{ alignItems: 'center' }}>
-                <S.Content>
-                    {isLoading ? (
-                        <Spinner />
-                    ) : (
-                        <QuestionnaireResponseForm
-                            questionnaireLoader={questionnaireIdLoader('public-appointment')}
-                            onSuccess={() => {
-                                notification.success({
-                                    message: t`Appointment successfully created`,
-                                });
-                                history.replace('/');
-                            }}
-                            itemControlQuestionItemComponents={{
-                                'date-time-slot': (props) => (
-                                    <DateTimeSlotPicker {...props} practitionerRolePath={practitionerRolePath} />
-                                ),
-                            }}
-                            initialQuestionnaireResponse={{
-                                questionnaire: 'public-appointment',
-                            }}
-                            launchContextParameters={[
-                                {
-                                    name: 'Patient',
-                                    resource: {
-                                        resourceType: 'Patient',
-                                        id: uuid4(),
-                                    },
+        <PageContainer title={<Trans>Appointment booking</Trans>} content={{ style: { alignItems: 'center' } }}>
+            <S.Content>
+                {isLoading ? (
+                    <Spinner />
+                ) : (
+                    <QuestionnaireResponseForm
+                        questionnaireLoader={questionnaireIdLoader('public-appointment')}
+                        onSuccess={() => {
+                            notification.success({
+                                message: t`Appointment successfully created`,
+                            });
+                            history.replace('/');
+                        }}
+                        itemControlQuestionItemComponents={{
+                            'date-time-slot': (props) => (
+                                <DateTimeSlotPicker {...props} practitionerRolePath={practitionerRolePath} />
+                            ),
+                        }}
+                        initialQuestionnaireResponse={{
+                            questionnaire: 'public-appointment',
+                        }}
+                        launchContextParameters={[
+                            {
+                                name: 'Patient',
+                                resource: {
+                                    resourceType: 'Patient',
+                                    id: uuid4(),
                                 },
-                            ]}
-                        />
-                    )}
-                </S.Content>
-            </BasePageContent>
-        </>
+                            },
+                        ]}
+                    />
+                )}
+            </S.Content>
+        </PageContainer>
     );
 }
diff --git a/src/containers/EncounterDetails/index.tsx b/src/containers/EncounterDetails/index.tsx
@@ -15,7 +15,6 @@ import { Spinner } from 'src/components/Spinner';
 import { Text } from 'src/components/Typography';
 import { DocumentsList } from 'src/containers/DocumentsList';
 import { ChooseDocumentToCreateModal } from 'src/containers/DocumentsList/ChooseDocumentToCreateModal';
-import { usePatientHeaderLocationTitle } from 'src/containers/PatientDetails/PatientHeader/hooks';
 import { questionnaireIdLoader } from 'src/hooks/questionnaire-response-form-data';
 
 import { AIScribe, useAIScribe } from './AIScribe';
@@ -35,8 +34,6 @@ export const EncounterDetails = (props: EncounterDetailsProps) => {
     const [documentListKey, setDocumentListKey] = useState(0);
     const reload = useCallback(() => setDocumentListKey((k) => k + 1), [setDocumentListKey]);
 
-    usePatientHeaderLocationTitle({ title: t`Consultation` });
-
     const [showScriber, setShowScriber] = useState(false);
     const { recorderControls } = useAIScribe();
 

diff --git a/src/containers/EncounterList/index.tsx b/src/containers/EncounterList/index.tsx
@@ -2,13 +2,12 @@ import { Trans } from '@lingui/macro';
 import { Col, Row } from 'antd';
 import { Link } from 'react-router-dom';
 
-import { BasePageContent, BasePageHeader } from 'src/components/BaseLayout';
+import { PageContainer } from 'src/components/BaseLayout/PageContainer';
 import { EncountersTable } from 'src/components/EncountersTable';
 import { EncounterData } from 'src/components/EncountersTable/types';
 import { StatusBadge } from 'src/components/EncounterStatusBadge';
 import { SearchBar } from 'src/components/SearchBar';
 import { useSearchBar } from 'src/components/SearchBar/hooks';
-import { Title } from 'src/components/Typography';
 import { formatPeriodDateTime } from 'src/utils/date';
 import { renderHumanName } from 'src/utils/fhir';
 import { matchCurrentUserRole, Role } from 'src/utils/role';
@@ -97,27 +96,25 @@ export function EncounterList() {
     ];
 
     return (
-        <>
-            <BasePageHeader style={{ paddingTop: 40, paddingBottom: 92 }}>
-                <Title style={{ marginBottom: 40 }}>
-                    <Trans>Encounters</Trans>
-                </Title>
-
-                <SearchBar
-                    columnsFilterValues={columnsFilterValues}
-                    onChangeColumnFilter={onChangeColumnFilter}
-                    onResetFilters={onResetFilters}
-                />
-            </BasePageHeader>
-
-            <BasePageContent style={{ marginTop: '-55px', paddingTop: 0 }}>
-                <EncountersTable
-                    columns={columns}
-                    remoteData={encounterDataListRD}
-                    handleTableChange={handleTableChange}
-                    pagination={pagination}
-                />
-            </BasePageContent>
-        </>
+        <PageContainer
+            variant="with-table"
+            title={<Trans>Encounters</Trans>}
+            header={{
+                children: (
+                    <SearchBar
+                        columnsFilterValues={columnsFilterValues}
+                        onChangeColumnFilter={onChangeColumnFilter}
+                        onResetFilters={onResetFilters}
+                    />
+                ),
+            }}
+        >
+            <EncountersTable
+                columns={columns}
+                remoteData={encounterDataListRD}
+                handleTableChange={handleTableChange}
+                pagination={pagination}
+            />
+        </PageContainer>
     );
 }