reactstrap#NavbarBrand TypeScript Examples

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

App: React.FC<{
    initialState: VerifierState
}> = (props) => {
    const [verifierState, setVerifierState] = useState<VerifierState>(props.initialState)
    const [runCount, setRunCount] = useState(0)

    useEffect(() => {
        dispatchToVerifier(prepareSiopRequest(verifierState))
    }, [runCount])

    useEffect(() => {
        if (!verifierState?.siopRequest?.siopRequestQrCodeUrl)
            return;

        setTimeout(async () => {
            dispatchToVerifier(receiveSiopResponse(verifierState))
        })

        console.log("Display barcode for", verifierState.siopRequest.siopRequestQrCodeUrl)
    }, [verifierState?.siopRequest?.siopRequestQrCodeUrl])

    const dispatchToVerifier = async (e) => {
        const nextState = await verifierReducer(verifierState, await e)
        setVerifierState(nextState)
        console.log("Verifier state after", e, nextState)
    }

    const displayResponse = verifierState?.siopResponse
    const displayRequest = (verifierState?.siopRequest?.siopRequestQrCodeUrl && !displayResponse)

    let name, conclusion;
    if (displayResponse) {
        const fhirName = displayResponse?.idTokenVcs[0].vc.credentialSubject.fhirBundle.entry[0].resource.name[0]
        name = fhirName?.given[0] + " " + fhirName?.family
        conclusion = displayResponse?.idTokenVcs.map(jwtPayload => jwtPayload.vc.credentialSubject.fhirBundle.entry[1].resource.conclusion)
    }

    return <div style={{ paddingTop: "5em" }}>
        <RS.Navbar expand="" className="navbar navbar-dark bg-success fixed-top">
            <RS.Container>
                <NavbarBrand style={{ marginRight: "2em" }} href="/">
                    <img className="d-inline-block" style={{ maxHeight: "1em", maxWidth: "1em", marginRight: "10px" }} src={logo} />
                            Share your COVID Card with <b>Venue</b>
                </NavbarBrand>
            </RS.Container>
        </RS.Navbar>
        <RS.Container >
            {displayRequest &&
                <>
                    <RS.Row>
                        <RS.Col xs="12">
                            <QrDisplay url={verifierState.siopRequest.siopRequestQrCodeUrl}></QrDisplay>
                        </RS.Col>
                    </RS.Row>
                    <RS.Row>
                        <RS.Col xs="12">
                            <RS.Alert color="primary">
                                Scan to continue
                </RS.Alert>
                        </RS.Col>
                    </RS.Row>
                </>}
            {displayResponse &&
                <>
                    <RS.Row>
                        <RS.Col xs="12">
                            <RS.Card style={{ border: "1px solid grey", padding: ".5em", marginBottom: "1em" }}>
                                <RS.CardTitle style={{ fontWeight: "bolder" }}>
                                    COVID Card Shared!
                                </RS.CardTitle>
                                <RS.CardSubtitle className="text-muted">Verified name: {JSON.stringify(name)}</RS.CardSubtitle>
                                <RS.CardText style={{ fontFamily: "monospace" }}> {conclusion.join("; ")}</RS.CardText>
                            </RS.Card>
                        </RS.Col>
                    </RS.Row>
                </>}

            <RS.Row>
                <RS.Col xs="12">
                    <button onClick={e => setRunCount(c => c + 1)}>Again!</button>
                </RS.Col>
            </RS.Row>
        </RS.Container>
        <div>
        </div>
    </div>
}