Merge pull request #6 from projkov/5-signup-wizard

Add SignUpWizard component

Author: ir4y

src/components/SignUpWizard/hooks.ts

@@ -0,0 +1,54 @@
+import { Questionnaire, QuestionnaireResponse, Patient, Consent } from 'fhir/r4b';
+import { compact } from 'lodash';
+
+import { getFHIRResources } from '@beda.software/emr/services';
+import { extractBundleResources, useService } from '@beda.software/fhir-react';
+import { mapSuccess, resolveMap } from '@beda.software/remote-data';
+
+export function useSignUpWizard(patient: Patient) {
+    const [response] = useService(async () => {
+        const questionnaireIDs = ['patient-informed-consent', 'authorization-for-release-of-medical-images', 'breast-cancer-study-survey'];
+
+        return mapSuccess(
+            await resolveMap({
+                consentBundle: getFHIRResources<Consent>('Consent', {
+                    category: 'npp',
+                    patient: `Patient/${patient.id}`,
+                }),
+                questionnaireBundle: getFHIRResources<Questionnaire>('Questionnaire', {
+                    _id: questionnaireIDs.join(','),
+                    _elements: 'id,title',
+                }),
+                questionnaireResponseBundle: getFHIRResources<QuestionnaireResponse>('QuestionnaireResponse', {
+                    subject: patient?.id,
+                    questionnaire: questionnaireIDs.join(','),
+                }),
+            }),
+            ({ consentBundle, questionnaireBundle, questionnaireResponseBundle }) => {
+                const consent = extractBundleResources<Consent>(consentBundle).Consent[0];
+                const questionnaireResponses =
+                    extractBundleResources(questionnaireResponseBundle).QuestionnaireResponse;
+                const questionnaires = extractBundleResources(questionnaireBundle).Questionnaire;
+
+                const finishedQuestionnaireIds = compact(questionnaireResponses.map((qr) => qr.questionnaire));
+                const questionnairesInOrder = compact(
+                    questionnaireIDs.map((qId) => questionnaires.find((q) => q.id === qId)),
+                );
+                const notFinishedQuestionnaires = questionnairesInOrder.filter(
+                    (q) => !finishedQuestionnaireIds.includes(q.id),
+                );
+                const showWizard = notFinishedQuestionnaires.length > 0 || !consent;
+
+                return {
+                    questionnaires: questionnairesInOrder,
+                    notFinishedQuestionnaires,
+                    questionnaireResponses,
+                    consent,
+                    showWizard
+                };
+            },
+        );
+    });
+
+    return { response };
+}

src/components/SignUpWizard/index.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import { QuestionnairesWizard, QuestionnairesWizardHeader } from '@beda.software/emr/components';
+
+import { S } from './styles';
+import { SignUpWizardProps } from './types';
+
+const WizardContainer = ({ children }: { children: React.ReactNode }) => (
+    <S.OuterContainer>
+        <S.InnerContainer>
+            {children}
+        </S.InnerContainer>
+    </S.OuterContainer>
+);
+
+export function SignUpWizard(props: SignUpWizardProps) {
+    const { patient, onSuccess, questionnaires, notFinishedQuestionnaires,
+        questionnaireResponses, show } = props;
+    const [headerProps, setHeaderProps] = useState({ title: "", index: 0, total: 0 });
+
+    if (!show) {
+        return null;
+    }
+
+    return (
+        <WizardContainer>
+            <QuestionnairesWizardHeader {...headerProps} />
+            <S.FormContainer>
+                <QuestionnairesWizard
+                    questionnaires={questionnaires}
+                    questionnaireResponses={questionnaireResponses}
+                    initialQuestionnaireResponse={{
+                        subject: { reference: `${patient?.resourceType}/${patient?.id}` },
+                    }}
+                    initialQuestionnaireId={
+                        notFinishedQuestionnaires[0]?.id
+                    }
+                    onQuestionnaireChange={(q, index) =>
+                        setHeaderProps({ title: q.title ?? "", index: index, total: questionnaires.length })}
+                    launchContextParameters={[{ name: 'Patient', resource: patient }]}
+                    onSuccess={onSuccess}
+                />
+            </S.FormContainer>
+        </WizardContainer>
+    );
+}

src/components/SignUpWizard/styles.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const OuterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const InnerContainer = styled.div`
+  width: 800px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  gap: 100px;
+  flex-direction: 'column';
+  display: 'flex';
+`;
+
+const FormContainer = styled.div`
+  margin-top: 40px;
+`;
+
+export const S = {
+    OuterContainer: OuterContainer,
+    InnerContainer: InnerContainer,
+    FormContainer: FormContainer
+};

src/components/SignUpWizard/types.ts

@@ -0,0 +1,10 @@
+import { Patient, Questionnaire, QuestionnaireResponse } from 'fhir/r4b';
+
+export interface SignUpWizardProps {
+    patient: Patient;
+    questionnaires: Questionnaire[];
+    notFinishedQuestionnaires: Questionnaire[];
+    questionnaireResponses: QuestionnaireResponse[];
+    show: boolean;
+    onSuccess: () => void;
+}

src/containers/App/index.tsx

@@ -39,8 +39,9 @@ import { sharedAuthorizedPatient, sharedAuthorizedUser } from '@beda.software/em
 import { matchCurrentUserRole, Role } from '@beda.software/emr/utils';
 
 import { BaseLayout } from 'src/components/BaseLayout';
+import { SignUpWizard } from 'src/components/SignUpWizard';
+import { useSignUpWizard } from 'src/components/SignUpWizard/hooks';
 
-import { usePatientConsent } from './hooks';
 import { DocumentPrint } from '../DocumentPrint';
 import { EnableTwoFactor } from '../EnableTwoFactor';
 import { ForgotPassword } from '../ForgotPassword';
@@ -237,7 +238,7 @@ function AuthenticatedPatientUserApp({ reload }: { reload: () => void }) {
 
     const [patient] = sharedAuthorizedPatient.useSharedState();
     const [user] = sharedAuthorizedUser.useSharedState();
-    const { response } = usePatientConsent(patient!);
+    const { response } = useSignUpWizard(patient!);
 
     const doLogout = useCallback(async (path: string) => {
         await logout();
@@ -263,33 +264,38 @@ function AuthenticatedPatientUserApp({ reload }: { reload: () => void }) {
 
     return (
         <RenderRemoteData remoteData={response} renderLoading={Spinner}>
-            {({ consent }) => (
-                <Routes>
-                    <Route path={`/print-patient-document/:id/:qrId`} element={<DocumentPrint />} />
-                    <Route
-                        path="*"
-                        element={
-                            <BaseLayout>
-                                <Routes>
-                                    <Route path={`/patients/:id/*`} element={<PatientDetails />} />
-                                    {consent ? (
+            {({ showWizard, questionnaires, notFinishedQuestionnaires, questionnaireResponses }) => {
+
+                if (showWizard) {
+                    return (
+                        <SignUpWizard
+                            patient={patient!}
+                            questionnaires={questionnaires}
+                            notFinishedQuestionnaires={notFinishedQuestionnaires}
+                            questionnaireResponses={questionnaireResponses}
+                            show={showWizard}
+                            onSuccess={reload}
+                        />
+                    );
+                };
+
+                return (
+                    <Routes>
+                        <Route path={`/print-patient-document/:id/:qrId`} element={<DocumentPrint />} />
+                        <Route
+                            path="*"
+                            element={
+                                <BaseLayout>
+                                    <Routes>
+                                        <Route path={`/patients/:id/*`} element={<PatientDetails />} />
                                         <Route path="*" element={<Navigate to={`/patients/${patient!.id}`} />} />
-                                    ) : (
-                                        <Route
-                                            path="*"
-                                            element={
-                                                <Navigate
-                                                    to={`/patients/${patient!.id}/documents/new/patient-informed-consent`}
-                                                />
-                                            }
-                                        />
-                                    )}
-                                </Routes>
-                            </BaseLayout>
-                        }
-                    />
-                </Routes>
-            )}
+                                    </Routes>
+                                </BaseLayout>
+                            }
+                        />
+                    </Routes>
+                );
+            }}
         </RenderRemoteData>
     );
 }