ykonsole2/webui-react/src/pages/ProgramPage.tsx

import React, {useCallback, useContext, useEffect, useMemo} from "react";
import ProgramContext from "../contexts/ProgramContext";
import {useNavigate, useParams} from "react-router";
import LoadingPage from "./LoadingPage";
import Header, {HeaderButton, HeaderTitle} from "../primitives/header/Header";
import {Icon} from "../primitives/Shared";
import {
  faArrowUpRightDots,
  faChevronLeft,
  faPencilAlt, faStopwatch,
  faTag,
  faTrashCan
} from "@fortawesome/free-solid-svg-icons";
import Page, {PageBody, PageFlexColumn, PageFlexRow} from "../primitives/page/Page";
import {Size, valuesToString} from "../models/Shared";
import {TitleLine} from "../primitives/misc/Misc";
import Blob, {BlobText} from "../primitives/blob/Blob";
import programRepo from "../actions/programs";

export default function ProgramPage() {
  const {programs, refreshPrograms} = useContext(ProgramContext);
  const navigate = useNavigate();
  const {id} = useParams();
  const program = useMemo(() => programs?.find(p => p.id === id), [programs, id]);

  useEffect(() => {
    if (programs && !program) {
      navigate("/");
    }
  }, [programs, program]);


  const onDelete = useCallback(() => {
    if (!program || !window.confirm("Vil du fjerne denne enheten?")) return;

    programRepo().delete(program).then(() => {
      refreshPrograms();
      navigate("/");
    })
  }, [program, navigate, refreshPrograms]);

  if (!program) {
    return <LoadingPage text="Henter programmer"/>;
  }

  return (
    <Page title={program.name}>
      <Header>
        <HeaderButton onClick={() => navigate("/")}>
          <Icon value={faChevronLeft}/>
        </HeaderButton>
        <HeaderTitle>{program.name}</HeaderTitle>
      </Header>
      <PageBody>
        <PageFlexRow collapseOn={Size.Mobile}>
          <PageFlexColumn flex={1}>
            <TitleLine>Programm</TitleLine>
            <Blob>
              <BlobText>
                <Icon value={faTag}/> {program.name}
              </BlobText>
            </Blob>
            <Blob color="indigo" onClick={() => navigate(`/programs/${program.id}/edit`)}>
              <BlobText>
                <Icon value={faPencilAlt}/>
              </BlobText>
            </Blob>
            <Blob color="red" onClick={onDelete}>
              <BlobText>
                <Icon value={faTrashCan}/>
              </BlobText>
            </Blob>
          </PageFlexColumn>
          <PageFlexColumn flex={1}>
            <TitleLine>Steg</TitleLine>
            {program.steps.map((s, i) => (
              <PageFlexRow key={i}>
                <Blob>
                  <BlobText>
                    <Icon value={faArrowUpRightDots}/> {s.values.level}
                  </BlobText>
                </Blob>
                <Blob>
                  <BlobText>
                    <Icon value={faStopwatch}/> {valuesToString(s.duration || {}) || "Manuell"}
                  </BlobText>
                </Blob>
              </PageFlexRow>
            ))}
          </PageFlexColumn>
        </PageFlexRow>
      </PageBody>
    </Page>
  );
}