60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { api } from "../api/client";
|
|
import { AppShell, Notice, TopBar } from "../components/AppShell";
|
|
import { Icon } from "../components/Icon";
|
|
import { ru } from "../content/ru";
|
|
import { useSession } from "../session/SessionContext";
|
|
|
|
// Anonymous means no identifying data, with the same screening and care path.
|
|
export function AnonymousSignIn() {
|
|
const t = ru.anonymous;
|
|
const navigate = useNavigate();
|
|
const { signIn } = useSession();
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
const [screening, setScreening] = useState<boolean | null>(null);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
api.patientCapabilities()
|
|
.then((v) => { if (alive) setScreening(v.primary_screening); })
|
|
.catch(() => { if (alive) setError(true); });
|
|
return () => { alive = false; };
|
|
}, []);
|
|
|
|
const start = async () => {
|
|
setBusy(true);
|
|
setError(false);
|
|
try {
|
|
// No self-selected diagnosis: the common intake determines the follow-up modules.
|
|
signIn(await api.signInAnonymous());
|
|
navigate("/flow", { replace: true });
|
|
} catch {
|
|
setError(true);
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AppShell signedIn={false} focus>
|
|
<div className="focus">
|
|
<TopBar onBack={() => navigate("/")} />
|
|
<div className="stack signin">
|
|
<span className="tile-icon tile-icon--teal"><Icon name="lock" size={26} /></span>
|
|
<h1 className="h1">{t.title}</h1>
|
|
<p className="lead">{t.lead}</p>
|
|
<Notice>{t.note}</Notice>
|
|
{screening === false && <Notice>{t.unavailable}</Notice>}
|
|
{error && <Notice tone="danger">{ru.common.networkError}</Notice>}
|
|
<button type="button" className="btn btn--primary" disabled={busy} onClick={() => void start()}>
|
|
{busy ? t.submitting : screening ? t.start : t.continue}
|
|
<Icon name="chevronRight" size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|