reactstrap#Collapse TypeScript Examples

/**
 * Component for rendering results associated with a rich search query.
 */
export function StatVarResults({
  placeName,
  statVarInfo,
  statVarOrder,
  debug,
}: StatVarResultsPropType): JSX.Element {
  const [debugOpen, setDebugOpen] = useState(false);
  const places = Object.keys(placeName);
  if (!places.length) {
    return (
      <section className="block col-12">No places found in the query.</section>
    );
  }
  if (!statVarOrder.length) {
    return <section className="block col-12">No results found.</section>;
  }

  return (
    <section className="block col-12">
      <div id="chart-region">
        <ChartRegion
          placeName={placeName}
          statVarInfo={statVarInfo}
          statVarOrder={statVarOrder}
        ></ChartRegion>
      </div>
      <ul>
        {statVarOrder.map((sv) => (
          <li key={sv}>
            <a href={getURL(places, sv)}>{statVarInfo[sv].title}</a>
          </li>
        ))}
      </ul>
      {!!debug.length && (
        <div className="debug-view">
          <Button
            className="btn-light"
            onClick={() => setDebugOpen(!debugOpen)}
            size="sm"
          >
            {debugOpen ? "Hide Debug" : "Show Debug"}
          </Button>
          <Collapse isOpen={debugOpen}>
            <Card>
              <CardBody>
                {debug.map((line, key) => (
                  <div key={key}>{line}</div>
                ))}
              </CardBody>
            </Card>
          </Collapse>
        </div>
      )}
    </section>
  );
}

export function DatasetCurrent() {
  const { t } = useTranslationSafe()
  const [advancedOpen, setAdvancedOpen] = useState(false)
  const datasetCurrent = useRecoilValue(datasetCurrentAtom)
  const resetDatasetCurrent = useResetRecoilState(datasetCurrentNameAtom)

  const onChangeClicked = useCallback(() => {
    resetDatasetCurrent()
  }, [resetDatasetCurrent])

  const onCustomizeClicked = useCallback(() => setAdvancedOpen((advancedOpen) => !advancedOpen), [])

  if (!datasetCurrent) {
    return null
  }

  return (
    <CurrentDatasetInfoContainer>
      <CurrentDatasetInfoHeader>
        <DatasetInfoH4>{t('Selected pathogen')}</DatasetInfoH4>
      </CurrentDatasetInfoHeader>

      <CurrentDatasetInfoBody>
        <Row noGutters>
          <Col className="d-flex flex-row">
            <Left>
              <DatasetInfo dataset={datasetCurrent} />
            </Left>

            <Right>
              <ChangeButton type="button" color="secondary" onClick={onChangeClicked}>
                {t('Change')}
              </ChangeButton>
              <LinkExternal
                className="ml-auto mt-auto"
                href="https://github.com/nextstrain/nextclade_data/blob/master/CHANGELOG.md"
              >
                <small>{t('Recent dataset updates')}</small>
              </LinkExternal>
            </Right>
          </Col>
        </Row>

        <Row noGutters>
          <Col>
            <ButtonCustomize isOpen={advancedOpen} onClick={onCustomizeClicked} />

            <Collapse isOpen={advancedOpen}>
              <AdvancedModeExplanationWrapper>
                <AdvancedModeExplanationContent />
              </AdvancedModeExplanationWrapper>

              <FilePickerAdvanced />
            </Collapse>
          </Col>
        </Row>
      </CurrentDatasetInfoBody>
    </CurrentDatasetInfoContainer>
  )
}

export function ResultsFilter() {
  const { t } = useTranslationSafe()

  const isResultsFilterPanelCollapsed = useRecoilValue(isResultsFilterPanelCollapsedAtom)

  // TODO: we could use a map (object) and refer to filters by name,
  // in order to reduce code duplication in the state, callbacks and components being rendered
  const [seqNamesFilter, setSeqNamesFilter] = useRecoilStateDeferred(seqNamesFilterAtom)
  const [mutationsFilter, setMutationsFilter] = useRecoilStateDeferred(mutationsFilterAtom)
  const [cladesFilter, setCladesFilter] = useRecoilStateDeferred(cladesFilterAtom)
  const [aaFilter, setAAFilter] = useRecoilStateDeferred(aaFilterAtom)
  const [showGood, setShowGood] = useRecoilStateDeferred(showGoodFilterAtom)
  const [showMediocre, setShowMediocre] = useRecoilStateDeferred(showMediocreFilterAtom)
  const [showBad, setShowBad] = useRecoilStateDeferred(showBadFilterAtom)
  const [showErrors, setShowErrors] = useRecoilStateDeferred(showErrorsFilterAtom)

  const handleSeqNamesFilterChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { value } = event.target
      setSeqNamesFilter(value)
    },
    [setSeqNamesFilter],
  )

  const handleMutationsFilterChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { value } = event.target
      setMutationsFilter(value)
    },
    [setMutationsFilter],
  )

  const handleAAFilterChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { value } = event.target
      setAAFilter(value)
    },
    [setAAFilter],
  )

  const handleCladesFilterChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { value } = event.target
      setCladesFilter(value)
    },
    [setCladesFilter],
  )

  const handleSetShowGood = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { checked } = event.target
      setShowGood(checked)
    },
    [setShowGood],
  )

  const handleSetShowMediocre = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { checked } = event.target
      setShowMediocre(checked)
    },
    [setShowMediocre],
  )

  const handleSetShowBad = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { checked } = event.target
      setShowBad(checked)
    },
    [setShowBad],
  )

  const handleSetShowErrors = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { checked } = event.target
      setShowErrors(checked)
    },
    [setShowErrors],
  )

  return (
    <Collapse isOpen={!isResultsFilterPanelCollapsed}>
      <Card>
        <CardHeader>{t('Results filter')}</CardHeader>

        <CardBody>
          <FormSection>
            <Label>
              {t('By sequence name')}
              <InputText
                type="text"
                placeholder="Ex.: Wuhan, WH"
                value={seqNamesFilter}
                onChange={handleSeqNamesFilterChange}
                autoComplete="off"
                autoCorrect="off"
                autoCapitalize="off"
                spellCheck="false"
                data-gramm="false"
              />
            </Label>
          </FormSection>

          <FormSection>
            <Label>
              {t('By nucleotide mutations')}
              <InputText
                type="text"
                placeholder="Ex.: C3037T, .A"
                value={mutationsFilter}
                onChange={handleMutationsFilterChange}
                autoComplete="off"
                autoCorrect="off"
                autoCapitalize="off"
                spellCheck="false"
                data-gramm="false"
              />
            </Label>
          </FormSection>

          <FormSection>
            <Label>
              {t('By aminoacid changes')}
              <InputText
                type="text"
                placeholder="Ex.: ORF1b:P314L, S:, :84, ORF1b:P314-"
                value={aaFilter}
                onChange={handleAAFilterChange}
                autoComplete="off"
                autoCorrect="off"
                autoCapitalize="off"
                spellCheck="false"
                data-gramm="false"
              />
            </Label>
          </FormSection>

          <FormSection>
            <Label>
              {t('By clades')}
              <InputText
                type="text"
                placeholder="Ex.: 19B, 20"
                value={cladesFilter}
                onChange={handleCladesFilterChange}
                autoComplete="off"
                autoCorrect="off"
                autoCapitalize="off"
                spellCheck="false"
                data-gramm="false"
              />
            </Label>
          </FormSection>

          <FormSection>
            <Label>
              {t('By quality')}
              <FormGroup check>
                <Label check>
                  <InputCheckbox type="checkbox" checked={showGood} onChange={handleSetShowGood} />
                  {t('Good quality')}
                </Label>
              </FormGroup>

              <FormGroup check>
                <Label check>
                  <InputCheckbox type="checkbox" checked={showMediocre} onChange={handleSetShowMediocre} />
                  {t('Mediocre quality')}
                </Label>
              </FormGroup>

              <FormGroup check>
                <Label check>
                  <InputCheckbox type="checkbox" checked={showBad} onChange={handleSetShowBad} />
                  {t('Bad quality')}
                </Label>
              </FormGroup>

              <FormGroup check>
                <Label check>
                  <InputCheckbox type="checkbox" checked={showErrors} onChange={handleSetShowErrors} />
                  {t('Has errors')}
                </Label>
              </FormGroup>
            </Label>
          </FormSection>
        </CardBody>
      </Card>
    </Collapse>
  )
}

App: React.FC<AppProps> = (props) => {
    const [holderState, setHolderState] = useState<HolderState>(props.initialHolderState)
    const [uiState, dispatch] = useReducer(uiReducer, props.initialUiState)

    const [smartState, setSmartState] = useState<SmartState | null>(null)

    const issuerInteractions = holderState.interactions.filter(i => i.siopPartnerRole === 'issuer').slice(-1)
    const verifierInteractions = holderState.interactions.filter(i => i.siopPartnerRole === 'verifier').slice(-1)
    const siopAtNeedQr = issuerInteractions.concat(verifierInteractions).filter(i => i.status === 'need-qrcode').slice(-1)

    useEffect(() => {
        holderState.interactions.filter(i => i.status === 'need-redirect').forEach(i => {
            const redirectUrl = i.siopRequest.client_id + '#' + qs.encode(i.siopResponse.formPostBody)
            const opened = window.open(redirectUrl, "_blank")
            dispatchToHolder({ 'type': "siop-response-complete" })
        })
    }, [holderState.interactions])

    const dispatchToHolder = async (ePromise) => {
        const e = await ePromise
        const holder = await holderReducer(holderState, e)
        setHolderState(state => holder)
        console.log("After event", e, "Holder state is", holder)
    }

    const connectTo = who => async () => {
        dispatchToHolder({ 'type': 'begin-interaction', who })
    }

    const onScanned = async (qrCodeUrl: string) => {
        dispatch({ type: 'scan-barcode' })
        await dispatchToHolder(receiveSiopRequest(qrCodeUrl, holderState));
    }

    const connectToFhir = async () => {
        const connected = await makeFhirConnector(uiState, holderState)
        setSmartState(connected.newSmartState)
    }

    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => setIsOpen(!isOpen);


    return <div style={{ paddingTop: "5em" }}>
        <RS.Navbar expand="" className="navbar-dark bg-info fixed-top">
            <RS.Container>
                <NavbarBrand style={{ marginRight: "2em" }} href="/">
                    <img className="d-inline-block" style={{ maxHeight: "1em", maxWidth: "1em", marginRight: "10px" }} src={logo} />
                            Health Wallet Demo
                    </NavbarBrand>
                <NavbarToggler onClick={toggle} />
                <Collapse navbar={true} isOpen={isOpen}>
                    <Nav navbar={true}>
                        <NavLink href="#" onClick={() => {
                            dispatch({ type: 'open-scanner', 'label': 'Verifier' })
                        }}>Scan QR to Share</NavLink>
                        <NavLink href="#" onClick={connectTo('verifier')}> Open Employer Portal</NavLink>
                        <NavLink href="#config" onClick={e => dispatch({ type: 'toggle-editing-config' })}> Edit Config</NavLink>
                        <NavLink target="_blank" href="https://github.com/microsoft-healthcare-madison/health-wallet-demo">Source on GitHub</NavLink>
                    </Nav>
                </Collapse></RS.Container>
        </RS.Navbar>

        {uiState.scanningBarcode?.active &&
            <SiopRequestReceiver
                onReady={onScanned}
                onCancel={() => dispatch({'type': 'close-scanner'})}
                redirectMode="qr"
                label={uiState.scanningBarcode?.label}
            />
        }

        {siopAtNeedQr.length > 0 &&
            <SiopRequestReceiver
                onReady={onScanned}
                onCancel={() => dispatch({'type': 'close-scanner'})}
                redirectMode="window-open"
                label={siopAtNeedQr[0].siopPartnerRole}
                startUrl={siopAtNeedQr[0].siopPartnerRole === 'issuer' ? uiState.issuer.issuerStartUrl : uiState.verifier.verifierStartUrl}
            />}

        {uiState.editingConfig && <ConfigEditModal uiState={uiState} defaultUiState={props.defaultUiState} dispatch={dispatch} />}
        {uiState.presentingQr?.active && <QRPresentationModal healthCard={uiState.presentingQr.vcToPresent} dispatch={dispatch} />}

        <SiopApprovalModal  {...parseSiopApprovalProps(holderState, dispatchToHolder)} />

        <RS.Container >
            <RS.Row>
                <RS.Col xs="12">
                    <CovidCard
                        holderState={holderState}
                        smartState={smartState}
                        uiState={uiState}
                        displayQr={async (vc) => {
                            dispatch({type: 'begin-qr-presentation', vc})
                        }}
                        openScannerUi={async () => {
                            dispatch({ type: 'open-scanner', 'label': 'Lab' })
                        }}
                        connectToIssuer={connectTo('issuer')}
                        connectToFhir={connectToFhir}
                        dispatchToHolder={dispatchToHolder}
                    />
                    <Card style={{ padding: ".5em" }}>
                        <CardTitle style={{ fontWeight: "bolder" }}>
                            Debugging Details
                        </CardTitle>
                        <CardSubtitle className="text-muted">Your browser's dev tools will show details on current page state + events </CardSubtitle>
                    </Card>
                </RS.Col>
            </RS.Row>
        </RS.Container>
        <div>
        </div>
    </div>
}