98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import { useState } from "react";
|
|
import { api } from "../api/client";
|
|
import { useSession } from "../session/SessionContext";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { AppShell, Notice } from "../components/AppShell";
|
|
import { Icon, type IconName } from "../components/Icon";
|
|
import { ru } from "../content/ru";
|
|
import { useDialog } from "../dialog/DialogContext";
|
|
import { humanDate, useToday } from "./useToday";
|
|
|
|
// F1 / F2 · Врач: следующий визит и связь с врачом (действия выполняет движок диалога)
|
|
export function Doctor() {
|
|
const t = ru.doctor;
|
|
const navigate = useNavigate();
|
|
const dialog = useDialog();
|
|
const { plan, failed } = useToday();
|
|
const { session } = useSession();
|
|
const [connecting, setConnecting] = useState(false);
|
|
const [connectFailed, setConnectFailed] = useState(false);
|
|
const connect = async () => {
|
|
if (!session || connecting) return;
|
|
setConnecting(true);
|
|
setConnectFailed(false);
|
|
try {
|
|
await api.connectDoctor(session.token);
|
|
navigate("/today");
|
|
} catch {
|
|
setConnectFailed(true);
|
|
setConnecting(false);
|
|
}
|
|
};
|
|
|
|
const go = (button: string, label: string) =>
|
|
void dialog.send({ type: "button", button }, label).then((ok) => ok && navigate("/flow"));
|
|
|
|
const actions: { button: string; label: string; icon: IconName }[] = [
|
|
{ button: "menu:contact_doctor", label: t.write, icon: "message" },
|
|
{ button: "menu:visit", label: t.earlier, icon: "calendar" },
|
|
{ button: "safety_plan", label: t.plan, icon: "shield" },
|
|
];
|
|
|
|
return (
|
|
<AppShell>
|
|
<div className="stack">
|
|
<header className="head">
|
|
<h1 className="h1">{t.title}</h1>
|
|
</header>
|
|
|
|
{(failed || connectFailed) && <Notice tone="danger">{ru.common.networkError}</Notice>}
|
|
{!plan ? (!failed && <div className="loader" aria-label="Загрузка" />) : !plan.has_doctor ? (
|
|
<div className="stack stack--sm">
|
|
<Notice>{t.noDoctor}</Notice>
|
|
<button type="button" className="btn btn--primary" disabled={connecting} onClick={() => void connect()}>
|
|
{connecting ? t.connecting : t.connect}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="cols">
|
|
<section className="card-list" aria-label={t.visit}>
|
|
<div className="card-list__row">
|
|
<span className="tile-icon tile-icon--blue">
|
|
<Icon name="calendar" />
|
|
</span>
|
|
<span>
|
|
<span className="row-card__sub">{t.visit}</span>
|
|
<span className="row-card__title">{plan?.next_visit ? humanDate(plan.next_visit) : t.visitNone}</span>
|
|
</span>
|
|
</div>
|
|
<div className="card-list__row">
|
|
<span className="tile-icon tile-icon--blue">
|
|
<Icon name="doctor" />
|
|
</span>
|
|
<span className="row-card__title">{t.attending}</span>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="stack stack--sm">
|
|
{actions.map((a) => (
|
|
<button key={a.button} type="button" className="row-card" onClick={() => go(a.button, a.label)} disabled={dialog.busy}>
|
|
<span className="tile-icon">
|
|
<Icon name={a.icon} />
|
|
</span>
|
|
<span className="row-card__text">
|
|
<span className="row-card__title">{a.label}</span>
|
|
</span>
|
|
<Icon name="chevronRight" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Notice>{t.writeNote}</Notice>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|