Formatted exceptions are shown in eligibility and study-consent pages

RADAR-base · Aug 26, 2024 · 08064c2 · 08064c2
1 parent 74cb53e
commit 08064c2
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 49 deletions.
diff --git 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<EligibilityPageProps> = ({ definitions }) => {
+const Eligibility: NextPage<EligibilityPageProps> = ({
+ definitions,
+ exceptionMessage,
+ exceptionStatusCode,
+}) => {
  const IS_ELIGIBLE = "yes"
  const router = useRouter()
  const [eligibility, setEligibility] = useState<boolean>()
@@ -63,6 +74,15 @@ const Eligibility: NextPage<EligibilityPageProps> = ({ definitions }) => {
  }
  }
 
+ if (exceptionMessage) {
+ return (
+ <FormattedExcpetion tileText="An exception occurred while fetching the project or definitions">
+ <p>{exceptionMessage}</p>
+ {exceptionStatusCode && <p>Status Code: {exceptionStatusCode}</p>}
+ </FormattedExcpetion>
+ )
+ }
+
  return (
  <>
  <Head>
@@ -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
@@ -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<StudyConsentPageProps> = ({ definitions }) => {
+const StudyConsent: NextPage<StudyConsentPageProps> = ({
+ definitions,
+ exceptionMessage,
+ exceptionStatusCode,
+}) => {
  const [flow, setFlow] = useState<SettingsFlow>()
 
  // Get ?flow=... from the URL
@@ -114,6 +124,15 @@ const StudyConsent: NextPage<StudyConsentPageProps> = ({ definitions }) => {
  },
  }
 
+ if (exceptionMessage) {
+ return (
+ <FormattedExcpetion tileText="An exception occurred while fetching the project or definitions">
+ <p>{exceptionMessage}</p>
+ {exceptionStatusCode && <p>Status Code: {exceptionStatusCode}</p>}
+ </FormattedExcpetion>
+ )
+ }
+
  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
@@ -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<StudyPageProps> = ({
 
  if (exceptionMessage) {
  return (
- <MarginCard>
- <CardTitle>
- An exception occurred while fetching the project or definitions
- </CardTitle>
+ <FormattedExcpetion tileText="An exception occurred while fetching the project or definitions">
  <p>{exceptionMessage}</p>
  {exceptionStatusCode && <p>Status Code: {exceptionStatusCode}</p>}
- </MarginCard>
+ </FormattedExcpetion>
  )
  }
 
  if (projectExists === false) {
  return (
- <MarginCard>
- <CardTitle>Project Not Found</CardTitle>
+ <FormattedExcpetion tileText="Project Not Found">
  <p>
  The project with the name {projectId} does not exist in the Management
  Portal.
  </p>
  <p>Please enter a valid project name.</p>
- </MarginCard>
+ </FormattedExcpetion>
  )
  }
 
@@ -80,7 +77,11 @@ const Study: NextPage<StudyPageProps> = ({
  <CardTitle>{projectId} Research Study</CardTitle>
  <img src="image.png" />
  <StudyInfo questions={studyInfo.current} />
- <TextCenterButton className="" data-testid="" href="/eligibility">
+ <TextCenterButton
+ className=""
+ data-testid=""
+ href={`/eligibility?projectId=${projectId}`}
+ >
  Join Now
  </TextCenterButton>
  {/* <Flow onSubmit={onSubmit} flow={flow} /> */}
@@ -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
@@ -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<FormattedExceptionProps> = ({tileText, children}) => {
- return (
- <>
- <MarginCard>
- <CardTitle>{tileText}</CardTitle>
- {children}
- </MarginCard>
- </>
- )
+type FormattedExceptionProps = PropsWithChildren<{ tileText: string }>
+
+const FormattedException: FC<FormattedExceptionProps> = ({
+ tileText,
+ children,
+}) => {
+ return (
+ <>
+ <MarginCard>
+ <CardTitle>{tileText}</CardTitle>
+ {children}
+ </MarginCard>
+ </>
+ )
 }
 
-export default FormattedException;
+export default FormattedException