types#MutationType TypeScript Examples

function isGeneTherapyFeasible(answers: Questionnaire): boolean {
  if (
    answers.mutationType === MutationType.NOT_SURE ||
    answers.proteinSize === ProteinSize.NOT_SURE
  )
    return true
  return (
    answers.mutationType === MutationType.LEADS_TO_LOSS &&
    answers.proteinSize === ProteinSize.LESS_THAN_1100
  )
}

MutationForm = () => {
  return (
    <>
      <Form.Item
        label="How do mutations in this gene cause the disease?"
        name="mutationType"
        rules={[
          {
            required: true,
            message: 'Please select one of the options',
          },
        ]}
      >
        <Radio.Group>
          <Radio value={MutationType.LEADS_TO_LOSS}>
            {mutationsTypesMap[MutationType.LEADS_TO_LOSS]}
          </Radio>
          <Radio value={MutationType.LEADS_TO_GAIN}>
            {mutationsTypesMap[MutationType.LEADS_TO_GAIN]}
          </Radio>
          <Radio value={MutationType.LEADS_TO_MORE}>
            {mutationsTypesMap[MutationType.LEADS_TO_MORE]}
          </Radio>
          <Radio value={MutationType.NOT_SURE}>
            {mutationsTypesMap[MutationType.NOT_SURE]}
          </Radio>
        </Radio.Group>
      </Form.Item>
    </>
  )
}

export default function questionnaire() {
  const [current, setCurrent] = React.useState(0)
  const [formValues, setFormValues] = React.useState({})
  const [feasibility, setFeasibility] = React.useState({
    isFeasible: false,
    assessmentFinished: false,
    answers: {},
  })
  const [content, setContent] = React.useState({
    imgURL: '/eligibility_2.png',
    description:
      "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De",
  })

  React.useEffect(() => {
    if (current === 0)
      setContent({
        imgURL: '/eligibility_2.png',
        description:
          "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De",
      })
    else if (current === 1)
      setContent({
        imgURL: '/eligibility_4.png',
        description:
          "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De",
      })
    else
      setContent({
        imgURL: '/eligibility_3.png',
        description:
          "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De",
      })
  }, [current])

  const [form] = Form.useForm()
  useEffect(() => {
    setFormValues({ ...formValues, ...form.getFieldsValue() })
  }, [form])
  async function handleFormSubmit(values: Questionnaire) {
    const isFeasible = isGeneTherapyFeasible(values)
    setFeasibility({
      isFeasible,
      assessmentFinished: true,
      answers: values,
    })
  }

  const nextStep = () =>
    form.validateFields().then(() => setCurrent(current + 1))
  const title = 'Determine eligibility for AAV-based gene therapy'
  const subTitle =
    'Complete this short questionnaire to help our team determine your eligibility.'
  return (
    <AppLayout title="" selectedKey="programs">
      <SubHeader title={<h3>{title}</h3>} subTitle={subTitle} />
      <QuestionnaireContainer>
        <div className="questionnaire-form">
          {feasibility.assessmentFinished ? (
            <QuestionnaireResult
              isFeasible={feasibility.isFeasible}
              answers={feasibility.answers as Questionnaire}
            />
          ) : (
            <>
              <Steps current={current}>
                {steps.map((item, index) => (
                  <Step
                    className={index === 0 ? 'first-step' : ''}
                    key={item.title}
                    title={item.title}
                  />
                ))}
              </Steps>
              <OFForm
                onFinish={handleFormSubmit}
                initialValues={{
                  proteinSize: ProteinSize.LESS_THAN_1100,
                  mutationType: MutationType.LEADS_TO_LOSS,
                }}
                layout="vertical"
                form={form}
              >
                <div className="steps-content">
                  {steps.map((item, index) => (
                    <div
                      key={item.title}
                      style={{
                        display: index === current ? 'block' : 'none',
                      }}
                    >
                      {item.content}
                    </div>
                  ))}
                </div>
                <div className="steps-action">
                  {current > 0 && (
                    <Button
                      style={{ margin: '0 8px' }}
                      onClick={() => setCurrent(current - 1)}
                    >
                      Back
                    </Button>
                  )}

                  {current < steps.length - 1 && (
                    <Button type="primary" onClick={nextStep}>
                      Next
                    </Button>
                  )}
                  {current === steps.length - 1 && (
                    <Button type="primary" htmlType="submit">
                      Check Eligibility
                    </Button>
                  )}
                </div>
              </OFForm>
            </>
          )}
        </div>
        <QuestionnaireIllustration
          feasibility={feasibility}
          className="questionnaire-illustration"
          imgURL={content.imgURL}
          description={content.description}
        />
      </QuestionnaireContainer>
    </AppLayout>
  )
}