trimlog-ykonsole-chrome-extension/my-bois/src/components/Bois.jsx

import React, {useContext, useEffect, useMemo, useState} from 'react';

import "./Bois.css";
import {StatusContext} from "./Contexts";
import {CalorieScore, CpmScore, DistanceScore, RpmScore, Timer} from "./Score";
import calculateDiff from "../helpers/diff";
import useKey from "../hooks/useKey";
import {COLOR_VERY_BAD} from "../helpers/color";
import {Milestones} from "./Milestones";

const Boi = ({type, children}) => {
  return (
    <div className={`Boi Boi-${type}`}>
      {children}
    </div>
  )
};

export const LeftBoi = () => {
  const {prevLongDiff, workoutStatus, program} = useContext(StatusContext);
  if (workoutStatus === null || program === null) {
    return null;
  }

  const {minutes, seconds, calories, distance, rpm} = workoutStatus;
  const diff = calculateDiff(program, minutes, seconds, calories);
  const cpm = calories / (minutes + (seconds / 60));

  return (
    <Boi type="left">
      <Timer minutes={minutes} seconds={seconds}/>
      <CalorieScore calories={calories} diff={diff} prevDiff={prevLongDiff}/>
      <DistanceScore distance={distance}/>
      <RpmScore rpm={rpm}/>
      <CpmScore cpm={cpm}/>
    </Boi>
  );
};

export const CentreBoi = () => {
  const {
    state, program, setProgram, bike, setBike, bikes, programs,
    start, pause, stop, create, workoutStatus,
  } = useContext(StatusContext);
  const [options, setOptions] = useState(null);
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    if (bikes === null && programs === null) {
      return;
    }

    setOptions(state === "bike" ? bikes : programs);
  }, [state, bike, program, bikes, programs]);

  useKey("-", () => {
    if (options === null) {
      return false;
    }

    if (current > 0) {
      setCurrent(current - 1);
    } else {
      setCurrent(options.length - 1);
    }

    return true;
  });

  useKey("+", () => {
    if (options === null) {
      return false;
    }

    if (current < options.length - 1) {
      setCurrent(current + 1);
    } else {
      setCurrent(0);
    }

    return true;
  });

  useKey("Enter", () => {
    if (state === "bike") {
      setBike(options[current]);

      return true;
    } else if (state === "program") {
      setProgram(options[current]);
      create(options[current]);

      return true;
    } else if (state === "connected") {
      start();

      return true;
    } else if (state === "started") {
      pause();

      return true;
    }

    return false;
  });

  useKey("Escape", () => {
    if (state === "connected") {
      stop();

      return true;
    }
  });

  if (state === "started" && workoutStatus !== null) {
    const {minutes, seconds, calories} = workoutStatus;
    const diff = calculateDiff(program, minutes, seconds, calories);

    if (diff < 0) {
      return (
        <Boi type="centre">
          <span className="Boi-centre-warning" style={{color: COLOR_VERY_BAD}}>
            {diff}
          </span>
        </Boi>
      );
    } else {
      return null;
    }
  }

  if (bikes === null || programs === null) {
    return <Boi type="centre">Laster inn...</Boi>;
  }

  return (
    <Boi type="centre">
      {state === "stopped" && (
        <div className="Boi-centre-info">Inaktiv</div>
      )}
      {state === "bike" && (
        <div className="Boi-centre-info">
          Velg sykkel (+/-):
          <br/>
          <b>{options[current].name}</b>
        </div>
      )}
      {state === "program" && (
        <div className="Boi-centre-info">
          Velg program (+/-):
          <br/>
          <b>{options[current].name}</b>
        </div>
      )}
      {state === "connected" && (
        <table className="Boi-centre-info">
          <tr>
            <td>Enter:</td>
            <td><b>Start</b></td>
          </tr>
          <tr>
            <td>Esc:</td>
            <td><b>Avslutt</b></td>
          </tr>
        </table>
      )}
      {state === "unknown" && (
        <div className="Boi-centre-info">Noe gikk galt</div>
      )}
    </Boi>
  );
};

export const RightBoi = () => {
  const {milestones} = useContext(StatusContext);

  if ((milestones || []).length === 0) {
    return null;
  }

  return (
    <Boi type="right">
      <Milestones milestones={milestones.sort((i, j) => j.minutes - i.minutes)}/>
    </Boi>
  );
};