From 08064c27935f10f63b5dce5e30a214bf24b711d3 Mon Sep 17 00:00:00 2001 From: this-Aditya Date: Mon, 26 Aug 2024 14:58:07 +0530 Subject: [PATCH] Formatted exceptions are shown in eligibility and study-consent pages --- pages/eligibility.tsx | 74 ++++++++++++++++++++++++++++------- pages/study-consent.tsx | 69 ++++++++++++++++++++++++++------ pages/study.tsx | 20 +++++----- pkg/ui/FormattedExcpetion.tsx | 30 ++++++++------ 4 files changed, 144 insertions(+), 49 deletions(-) diff --git a/pages/eligibility.tsx b/pages/eligibility.tsx index 8dc75a1..b30b433 100644 --- a/pages/eligibility.tsx +++ b/pages/eligibility.tsx @@ -9,7 +9,12 @@ import { toast } from "react-toastify" import { REMOTE_DEFINITIONS_CONFIG } from "../config/github-config" // Import render helpers import { MarginCard, CardTitle, TextCenterButton } from "../pkg" +import FormattedExcpetion from "../pkg/ui/FormattedExcpetion" import githubService from "../services/github-service" +import { ContentLengthError } from "../utils/errors/ContentLengthError" +import { GithubApiError } from "../utils/errors/GithubApiError" +import { MPFetchError } from "../utils/errors/MPFetchError" +import { NoContentError } from "../utils/errors/NoContentError" import { Definition } from "../utils/structures" interface EligibilityFormProps { @@ -19,10 +24,16 @@ interface EligibilityFormProps { interface EligibilityPageProps { definitions: string + exceptionMessage: string + exceptionStatusCode: number } // Renders the eligibility page -const Eligibility: NextPage = ({ definitions }) => { +const Eligibility: NextPage = ({ + definitions, + exceptionMessage, + exceptionStatusCode, +}) => { const IS_ELIGIBLE = "yes" const router = useRouter() const [eligibility, setEligibility] = useState() @@ -63,6 +74,15 @@ const Eligibility: NextPage = ({ definitions }) => { } } + if (exceptionMessage) { + return ( + +

{exceptionMessage}

+ {exceptionStatusCode &&

Status Code: {exceptionStatusCode}

} + + ) + } + return ( <> @@ -118,19 +138,45 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const { projectId } = context.query if (typeof projectId === "string") { - const consentDefinitions: string | undefined = - await githubService.initiateFetch( - projectId, - REMOTE_DEFINITIONS_CONFIG.ELIGIBILITY_DEFINITION_FILE_NAME_CONTENT, - REMOTE_DEFINITIONS_CONFIG.ELIGIBILITY_VERSION, - ) - - if (consentDefinitions == undefined) return { props: {} } - - return { - props: { - definitions: consentDefinitions, - }, + try { + const consentDefinitions: string | undefined = + await githubService.initiateFetch( + projectId, + REMOTE_DEFINITIONS_CONFIG.ELIGIBILITY_DEFINITION_FILE_NAME_CONTENT, + REMOTE_DEFINITIONS_CONFIG.ELIGIBILITY_VERSION, + ) + + if (consentDefinitions == undefined) return { props: {} } + + return { + props: { + definitions: consentDefinitions, + }, + } + } catch (error: any) { + if ( + error instanceof ContentLengthError || + error instanceof NoContentError + ) { + return { + props: { + exceptionMessage: error.message, + }, + } + } else if (error instanceof GithubApiError) { + return { + props: { + exceptionMessage: error.message, + exceptionStatusCode: error.statusCode, + }, + } + } else { + return { + props: { + exceptionMessage: error.message, + }, + } + } } } else return { props: {} } } diff --git a/pages/study-consent.tsx b/pages/study-consent.tsx index 6ab9310..65e11be 100644 --- a/pages/study-consent.tsx +++ b/pages/study-consent.tsx @@ -24,7 +24,11 @@ import { } from "../pkg" import { handleFlowError } from "../pkg/errors" import ory from "../pkg/sdk" +import FormattedExcpetion from "../pkg/ui/FormattedExcpetion" import githubService from "../services/github-service" +import { ContentLengthError } from "../utils/errors/ContentLengthError" +import { GithubApiError } from "../utils/errors/GithubApiError" +import { NoContentError } from "../utils/errors/NoContentError" import { Definition } from "../utils/structures" interface Props { @@ -34,6 +38,8 @@ interface Props { interface StudyConsentPageProps { definitions: string + exceptionMessage: string + exceptionStatusCode: number } function StudyConsentCard({ children }: Props & { children: ReactNode }) { @@ -44,7 +50,11 @@ function StudyConsentCard({ children }: Props & { children: ReactNode }) { ) } -const StudyConsent: NextPage = ({ definitions }) => { +const StudyConsent: NextPage = ({ + definitions, + exceptionMessage, + exceptionStatusCode, +}) => { const [flow, setFlow] = useState() // Get ?flow=... from the URL @@ -114,6 +124,15 @@ const StudyConsent: NextPage = ({ definitions }) => { }, } + if (exceptionMessage) { + return ( + +

{exceptionMessage}

+ {exceptionStatusCode &&

Status Code: {exceptionStatusCode}

} + + ) + } + return ( router // On submission, add the flow ID to the URL but do not navigate. This prevents the user loosing @@ -225,19 +244,45 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const { projectId } = context.query if (typeof projectId === "string") { - const consentDefinitions: string | undefined = - await githubService.initiateFetch( - projectId, - REMOTE_DEFINITIONS_CONFIG.CONSENT_DEFINITION_FILE_NAME_CONTENT, - REMOTE_DEFINITIONS_CONFIG.CONSENT_VERSION, - ) + try { + const consentDefinitions: string | undefined = + await githubService.initiateFetch( + projectId, + REMOTE_DEFINITIONS_CONFIG.CONSENT_DEFINITION_FILE_NAME_CONTENT, + REMOTE_DEFINITIONS_CONFIG.CONSENT_VERSION, + ) - if (consentDefinitions == undefined) return { props: {} } + if (consentDefinitions == undefined) return { props: {} } - return { - props: { - definitions: consentDefinitions, - }, + return { + props: { + definitions: consentDefinitions, + }, + } + } catch (error: any) { + if ( + error instanceof ContentLengthError || + error instanceof NoContentError + ) { + return { + props: { + exceptionMessage: error.message, + }, + } + } else if (error instanceof GithubApiError) { + return { + props: { + exceptionMessage: error.message, + exceptionStatusCode: error.statusCode, + }, + } + } else { + return { + props: { + exceptionMessage: error.message, + }, + } + } } } else return { props: {} } } diff --git a/pages/study.tsx b/pages/study.tsx index 6b191f9..b3b0695 100644 --- a/pages/study.tsx +++ b/pages/study.tsx @@ -6,6 +6,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react" import { REMOTE_DEFINITIONS_CONFIG } from "../config/github-config" // Import render helpers import { MarginCard, CardTitle, TextCenterButton, InnerCard } from "../pkg" +import FormattedExcpetion from "../pkg/ui/FormattedExcpetion" import githubService from "../services/github-service" import fetchProjectsFromMp from "../services/mp-projects-fetcher" import { ContentLengthError } from "../utils/errors/ContentLengthError" @@ -48,26 +49,22 @@ const Study: NextPage = ({ if (exceptionMessage) { return ( - - - An exception occurred while fetching the project or definitions - +

{exceptionMessage}

{exceptionStatusCode &&

Status Code: {exceptionStatusCode}

} - + ) } if (projectExists === false) { return ( - - Project Not Found +

The project with the name {projectId} does not exist in the Management Portal.

Please enter a valid project name.

- + ) } @@ -80,7 +77,11 @@ const Study: NextPage = ({ {projectId} Research Study - + Join Now {/* */} @@ -141,7 +142,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => { : { props: { definitions: studyDefinitions, projectExists: true } } } catch (error: any) { if ( - error instanceof MPFetchError || error instanceof ContentLengthError || error instanceof NoContentError ) { diff --git a/pkg/ui/FormattedExcpetion.tsx b/pkg/ui/FormattedExcpetion.tsx index 8f0f998..64b5e2b 100644 --- a/pkg/ui/FormattedExcpetion.tsx +++ b/pkg/ui/FormattedExcpetion.tsx @@ -1,17 +1,21 @@ -import {CardTitle, MarginCard} from "../styled"; -import {FC, PropsWithChildren} from "react"; +import { FC, PropsWithChildren } from "react" -type FormattedExceptionProps = PropsWithChildren<{tileText: string}> +import { CardTitle, MarginCard } from "../styled" -const FormattedException: FC = ({tileText, children}) => { - return ( - <> - - {tileText} - {children} - - - ) +type FormattedExceptionProps = PropsWithChildren<{ tileText: string }> + +const FormattedException: FC = ({ + tileText, + children, +}) => { + return ( + <> + + {tileText} + {children} + + + ) } -export default FormattedException; \ No newline at end of file +export default FormattedException