reactstrap#CardTitle TypeScript Examples

function Home(props) {
  const { t } = useTranslation("layout");
  const [selectedProduct, setSelectedProduct] = useState<Product>();
  const [products, setProducts] = useState<Product[] | undefined>();
  const [demoMode, setDemoMode] = useState<boolean>(props.demoMode === undefined ? false : true);

  const getProducts = async () => {
    try {
      setProducts(await new BackendClient().getProductsList());
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    //noinspection JSIgnoredPromiseFromCall
    getProducts();
  }, []);

  return (
    <>
      <TestnetWarning />
      <Container>
        <h1 className="text-center font-weight-bold mt-5">{t("name")}</h1>

        <section className="mt-5">
          {products && (
            <Row>
              {products.map((product, i) => (
                <Col key={product.gtin} md={6} lg={4}>
                  <Card key={product.gtin} className="mb-4">
                    <CardImg top src={product.image_url} />
                    <CardBody>
                      <CardTitle className="font-weight-bold h5">{product.name}</CardTitle>
                      <CardText>{product.description}</CardText>
                    </CardBody>
                    <CardFooter>
                      <Row>
                        <Col>
                          <div>
                            <strong>Price:</strong> {product.price / 1000000} {product.currency}
                          </div>
                        </Col>
                        <Col lg={4} className="text-right">
                          <Button
                            color="secondary"
                            block
                            className="btn-sm"
                            onClick={() => setSelectedProduct(products[i])}
                          >
                            Buy Now
                          </Button>
                        </Col>
                      </Row>
                    </CardFooter>
                  </Card>
                </Col>
              ))}
            </Row>
          )}
          {!products && <ProductsLoader />}
        </section>
      </Container>
      <Payment
        demoMode={demoMode}
        product={selectedProduct}
        isOpen={!!selectedProduct}
        onClose={() => setSelectedProduct(undefined)}
      />
    </>
  );
}

DataVisualization = () => {
  
  const [dropdownLabel2, setDropdownLabel2] = useState("All Time");
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [dropdownOpen2, setDropdownOpen2] = useState(false);
  const [dropdownOpen3, setDropdownOpen3] = useState(false);
  const [dateRange, setDateRange] = useState(new Date(2020,0,0));
  const [course, setCourse] = useState("All Courses");
  const [courses, setCourses] = useState(new Array<string>());
  const [appointments, setAppointments] = useState(0);
  const [hours, setHours] = useState(0);
  const [earnings, setEarnings] = useState(0);
  const [chart, setChart] = useState(0);
  const [meetingsMap, setMeetingsMap] = useState(new Map<number,number>());
  const [earningsMap, setEarningsMap] = useState(new Map<number,number>());
  const toggle = () => setDropdownOpen(prevState => !prevState);
  const toggle2 = () => setDropdownOpen2(prevState => !prevState);
  const toggle3 = () => setDropdownOpen3(prevState => !prevState);
  let tutor = useSelector(selectClientData);
  let tutorID = tutor.clientId;
  useEffect(() => {
    GetTutoringHours(course, tutorID).then( apiResult => {
    setMeetingsMap(apiResult[0]);
    setEarningsMap(apiResult[1]);
    setAppointments(apiResult[3]);
    setHours(apiResult[2]);
    setEarnings(apiResult[4]);
    setCourses(apiResult[5]);
    });
  },[]);



  let coursesDropdowns:Array<ReactElement> = [];
  coursesDropdowns.push(<DropdownItem onClick={() => {
    setCourse("All Courses");
    GetTutoringHours("All Courses", tutorID).then( apiResult => {
      setMeetingsMap(apiResult[0]);
      setEarningsMap(apiResult[1]);
      setAppointments(apiResult[3]);
      setHours(apiResult[2]);
      setEarnings(apiResult[4]);
      setCourses(apiResult[5]);
      });
  }}>
    All Courses
  </DropdownItem>);
  for (let i = 0; i < courses.length; i++) {
    coursesDropdowns.push(<DropdownItem onClick={() => {
      setCourse(courses[i]);
      GetTutoringHours(courses[i], tutorID).then( apiResult => {
        setMeetingsMap(apiResult[0]);
        setEarningsMap(apiResult[1]);
        setAppointments(apiResult[3]);
        setHours(apiResult[2]);
        setEarnings(apiResult[4]);
        setCourses(apiResult[5]);
        });
    }}>
      {courses[i]}
    </DropdownItem>);         
  }
    return (
        <Container fluid className="background" style={{marginBottom:'10em'}}>
        <hr></hr>
        <Row xs="2" className="parent">

        </Row>
        <div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                    <Card body>
                    <CardTitle tag="h5">Appointments</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            end={appointments} 
                            useEasing={true}
                            duration={3.5}
                            />
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                    <Card body>
                    <CardTitle tag="h5">Hours Tutored</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            end={hours} 
                            useEasing={true}
                            duration={4}
                            />
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                <Card body>
                    <CardTitle tag="h5">Earnings</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            decimals={2}
                            prefix="$"
                            end={earnings} 
                            useEasing={true}
                            

                            duration={4}/>
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
            </div>
        
            <div style={{display:'flex', flexDirection:'row'}}>
            <Card body>
                <CardTitle tag="h5">
                <div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
                  <div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
                    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
                      <DropdownToggle caret>
                        {(chart === 0) ? "Calendar" : (chart === 1 ? "Total Hours" : "Total Earnings")}
                        
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Tutor Data</DropdownItem>
                        <DropdownItem onClick={() => setChart(0)}>Calendar</DropdownItem>
                        <DropdownItem onClick={() => setChart(1)}>Total Hours</DropdownItem>
                        <DropdownItem divider />
                        <DropdownItem onClick={() => setChart(2)}>Total Earnings</DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                  </div>
                    { chart != 0 ?
                    <div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
                    <Dropdown isOpen={dropdownOpen2} toggle={toggle2} style={{alignSelf:'right'}}>
                      <DropdownToggle caret>
                        {dropdownLabel2}
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Date Range</DropdownItem>
                        <DropdownItem onClick={() => {
                          let date = new Date(getNow());
                          date.setFullYear(2020);
                          date.setMonth(0);
                          date.setDate(0);
                          setDateRange(date);
                          setDropdownLabel2("All Time");
                        }}>
                          All Time
                        </DropdownItem>
                        
                        <DropdownItem onClick={() => {
                              let date = new Date(getNow());
                              date.setFullYear(date.getFullYear() - 1);
                              setDateRange(date);
                              setDropdownLabel2("1Y");

                            }}>1Y
                        </DropdownItem>

                        <DropdownItem onClick={() => { 
                              let date = new Date(getNow()); 
                              date.setMonth(date.getMonth() - 6);
                              setDateRange(date);
                              setDropdownLabel2("6M");
                            }}>6M
                        </DropdownItem>
                        <DropdownItem onClick={() => { 
                              let date = new Date(getNow()); 
                              date.setMonth(date.getMonth() - 1);
                              setDateRange(date);
                              setDropdownLabel2("1M");
                            }}>1M
                        </DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                    </div>
                    : <div></div>}
                    <div style={{display:'flex', flexDirection:'column', marginTop:'0.25em'}}>
                      <Dropdown isOpen={dropdownOpen3} toggle={toggle3} style={{alignSelf:'right'}}>
                      <DropdownToggle caret>
                        {course}
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Filter by Course</DropdownItem>
                        {coursesDropdowns}
                      </DropdownMenu>
                    </Dropdown>
                    </div>
                    </div>
                    </CardTitle>
                    
                    <CardText>
                      {chart == 0 ?
                        <TutorHeatmap dateMap={meetingsMap} />
                        : (chart == 1 ? <LineGraph dateMap={meetingsMap}
                          fromTime={dateRange}
                          isHours={true}/>
                          :<LineGraph dateMap={earningsMap}
                          fromTime={dateRange}
                          isHours={false}/>
                          )}
                      
                      
                    </CardText>

                    
              </Card>
            </div>
            </Container>
    );
}

CovidCard: React.FC<{
    holderState: HolderState,
    smartState: SmartState,
    uiState: UiState,
    displayQr: (vc) => Promise<void>,
    openScannerUi: () => Promise<void>,
    connectToIssuer: () => Promise<void>,
    connectToFhir: () => Promise<void>,
    dispatchToHolder: (e: Promise<any>) => Promise<void>
}> = ({ holderState, smartState, uiState, displayQr, openScannerUi, connectToFhir, connectToIssuer, dispatchToHolder }) => {
    const issuerInteractions = holderState.interactions.filter(i => i.siopPartnerRole === 'issuer').slice(-1)
    const issuerInteraction = issuerInteractions.length ? issuerInteractions[0] : null


    let currentStep = CardStep.CONFIGURE_WALLET;
    /* tslint:disable-next-line:prefer-conditional-expression */
    if (issuerInteraction?.status !== 'complete') {
        currentStep = CardStep.CONNECT_TO_ISSUER;
    } else {
        currentStep = CardStep.DOWNLOAD_CREDENTIAL;
    }
    if (holderState.vcStore.length) {
        currentStep = CardStep.COMPLETE
    }

    const retrieveVcClick = async () => {
        const onMessage = async ({ data, source }) => {
            const { verifiableCredential } = data
            window.removeEventListener("message", onMessage)
            await dispatchToHolder(receiveVcs(verifiableCredential, holderState))
        }
        window.addEventListener("message", onMessage)
        window.open(uiState.issuer.issuerDownloadUrl)
    }

    useEffect(() => {
        if (smartState?.access_token && holderState.vcStore.length === 0) {
            const credentials = axios.post(uiState.fhirClient.server + `/Patient/${smartState.patient}/$health-cards-issue`, {
                "resourceType": "Parameters",
                "parameter": [{
                    "name": "credentialType",
                    "valueUri": "https://smarthealth.cards#immunization"
                },{
                    "name": "presentationContext",
                    "valueUri": "https://smarthealth.cards#presentation-context-online"
                }, {
                    "name": "encryptForKeyId",
                    "valueString": "#encryption-key-1"
                }]
            })
            credentials.then(response => {
                const vcs = response.data.parameter.filter(p => p.name === 'verifiableCredential').map(p => p.valueString)
                dispatchToHolder(receiveVcs(vcs, holderState))
            })
        }
    }, [smartState])


    const covidVcs = holderState.vcStore.filter(vc => vc.type.includes("https://smarthealth.cards#covid19"));

    const resources = covidVcs.flatMap(vc =>
        vc.vcPayload.vc.credentialSubject.fhirBundle.entry
            .flatMap(e => e.resource))

    const doses = resources.filter(r => r.resourceType === 'Immunization').length;
    const patient = resources.filter(r => r.resourceType === 'Patient')[0];
    console.log("P", patient);


    useEffect(() => {
        if (covidVcs.length === 0) {
            return;
        }
        let file = new File([JSON.stringify({
            "verifiableCredential": covidVcs.map(v => v.vcSigned)
        })], "c19.smart-health-card", {
            type: "application/smart-health-card"
        })
        const url = window.URL.createObjectURL(file);
        setDownloadFileUrl(url)
    }, [covidVcs.length])
    const [downloadFileUrl, setDownloadFileUrl] = useState("");

    return <> {
        currentStep === CardStep.COMPLETE && <Card style={{ border: "1px solid grey", padding: ".5em", marginBottom: "1em" }}>
            <CardTitle style={{ fontWeight: "bolder" }}>
                COVID Cards ({covidVcs.length})
                </CardTitle>

            <CardSubtitle className="text-muted">Your COVID results are ready to share, based on {" "}
                {resources && <>{resources.length} FHIR Resource{resources.length > 1 ? "s" : ""} <br /> </>}
            </CardSubtitle>
            <ul>
                <li> Name: {patient.name[0].given[0]} {patient.name[0].family}</li>
                <li> Birthdate: {patient.birthDate}</li>
                <li> Immunization doses received: {doses}</li>
            </ul>
            <Button className="mb-1" color="info" onClick={() => displayQr(covidVcs[0])}>Display QR</Button>
            <a href={downloadFileUrl} download="covid19.smart-health-card">Download file</a>
        </Card>
    } {currentStep < CardStep.COMPLETE &&
        <Card style={{ border: ".25em dashed grey", padding: ".5em", marginBottom: "1em" }}>
            <CardTitle>COVID Cards </CardTitle>
            <CardSubtitle className="text-muted">You don't have any COVID cards in your wallet yet.</CardSubtitle>

            <Button disabled={true} className="mb-1" color="info">
                {currentStep > CardStep.CONFIGURE_WALLET && '✓ '} 1. Set up your Health Wallet</Button>

            <RS.UncontrolledButtonDropdown className="mb-1" >
                <DropdownToggle caret color={currentStep === CardStep.CONNECT_TO_ISSUER ? 'success' : 'info'} >
                    {currentStep > CardStep.CONNECT_TO_ISSUER && '✓ '}
                                    2. Get your Vaccination Credential
                                </DropdownToggle>
                <DropdownMenu style={{ width: "100%" }}>
                    <DropdownItem onClick={connectToFhir} >Connect with SMART on FHIR </DropdownItem>
                    <DropdownItem >Load from file (todo)</DropdownItem>
                </DropdownMenu>
            </RS.UncontrolledButtonDropdown>
            <Button
                disabled={currentStep !== CardStep.DOWNLOAD_CREDENTIAL}
                onClick={retrieveVcClick}
                className="mb-1"
                color={currentStep === CardStep.DOWNLOAD_CREDENTIAL ? 'success' : 'info'} >
                3. Save COVID card to wallet</Button>
        </Card>
        }
    </>

}

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>
}