Feature: Timer on retro board

packages/frontend/src/common/components/TimePicker.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { FormControl, FormHelperText, IconButton, OutlinedInput, TextField } from "@mui/material";
+import { Add, Remove } from "@mui/icons-material";
+import { FlexBox } from "./FlexBox";
+import { useValidatedTimeInput } from "../hooks/useValidatedTimeInput";
+
+interface TimePickerProps {
+  defaultMinutes: number;
+  defaultSeconds: number;
+}
+export function TimePicker({ defaultMinutes, defaultSeconds }: TimePickerProps) {
+  const {
+    formatedValue: formatedSeconds,
+    isError: isSecondsError,
+    handleChange: handleSecondsChange,
+  } = useValidatedTimeInput({
+    formatLength: 2,
+    maxValue: 60,
+    minValue: 0,
+    initialValue: defaultSeconds,
+  });
+
+  const {
+    formatedValue: formatedMinutes,
+    isError: isMinutesError,
+    value: minutes,
+    handleChange: handleMinutesChange,
+    changeValue: changeMinutes,
+  } = useValidatedTimeInput({
+    formatLength: 2,
+    minValue: 0,
+    initialValue: defaultMinutes,
+  });
+
+  function handleAddButtonClick() {
+    changeMinutes(minutes + 1);
+  }
+  function handleRemoveButtonClick() {
+    changeMinutes(minutes - 1);
+  }
+
+  return (
+    <FlexBox>
+      <FormControl>
+        <IconButton onClick={handleRemoveButtonClick} size="small">
+          <Remove />
+        </IconButton>
+      </FormControl>
+      <FormControl variant="filled">
+        <TextField
+          id="timepicker-minutes"
+          value={formatedMinutes}
+          onChange={handleMinutesChange}
+          autoFocus
+          required
+          size="small"
+          type="tel"
+          error={isMinutesError}
+        />
+        <FormHelperText>Minutes</FormHelperText>
+      </FormControl>
+      <span>:</span>
+      <FormControl variant="filled">
+        <OutlinedInput
+          id="timepicker-seconds"
+          value={formatedSeconds}
+          onChange={handleSecondsChange}
+          required
+          size="small"
+          type="tel"
+          error={isSecondsError}
+        />
+        <FormHelperText>Seconds</FormHelperText>
+      </FormControl>
+      <FormControl>
+        <IconButton onClick={handleAddButtonClick} size="small">
+          <Add />
+        </IconButton>
+      </FormControl>
+    </FlexBox>
+  );
+}

packages/frontend/src/common/hooks/useValidatedTimeInput.ts

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+
+interface useValidatedTimeInputOptions {
+  formatLength?: number;
+  minValue?: number;
+  maxValue?: number;
+  initialValue?: number;
+}
+export function useValidatedTimeInput(options: useValidatedTimeInputOptions | undefined = {}) {
+  const [value, setValue] = useState(options.initialValue ?? 0);
+  const [formatedValue, setFormatedValue] = useState(
+    options.initialValue ? addLeadingZeros(options.initialValue) : addLeadingZeros(0)
+  );
+  const [isError, setIsError] = useState(false);
+
+  function addLeadingZeros(value: number) {
+    if (options.formatLength) {
+      return ("0".repeat(options.formatLength) + value.toString()).slice(-options.formatLength);
+    } else {
+      return value;
+    }
+  }
+
+  function getAsNumber(input: string) {
+    return Number(input);
+  }
+
+  function isNumber(input: string) {
+    return !isNaN(parseFloat(input));
+  }
+
+  function isValid(input: number) {
+    if (!options) return true;
+
+    const { minValue = Number.MIN_VALUE, maxValue = Number.MAX_VALUE } = options;
+    return input >= minValue && input <= maxValue;
+  }
+  function changeValue(value: number) {
+    setValue(value);
+    setFormatedValue(addLeadingZeros(value));
+    setIsError(!isValid(value));
+  }
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    if (!isNumber(event.target.value)) {
+      setIsError(true);
+      return;
+    }
+    const number = getAsNumber(event.target.value);
+    changeValue(number);
+  }
+
+  return {
+    value,
+    formatedValue,
+    isError,
+    setIsError,
+    handleChange,
+    changeValue,
+    isValid: isValid(value),
+  };
+}

packages/frontend/src/retro/components/RetroActionButtons.tsx

@@ -3,13 +3,15 @@ import { ToggleRetroBlurButton } from "./buttons/ToggleRetroBlurButton";
 import { CreateColumnButton } from "./buttons/CreateColumnButton";
 import { FlexBox } from "../../common/components/FlexBox";
 import { ToggleRetroVotingButton } from "./buttons/ToggleRetroVotingButton";
+import { ToggleRetroTimerButton } from "./buttons/ToggleRetroTimerButton";
 
 export function RetroActionButtons() {
   return (
     <FlexBox flexDirection="row" p={1}>
       <CreateColumnButton />
       <ToggleRetroBlurButton />
       <ToggleRetroVotingButton />
+      <ToggleRetroTimerButton />
     </FlexBox>
   );
 }

packages/frontend/src/retro/components/buttons/ToggleRetroTimerButton.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Alarm } from "@mui/icons-material";
+import { ActionButton } from "../../../common/components/buttons/ActionButton";
+import { isModerator } from "../../../common/utils/participantsUtils";
+import { useUserContext } from "../../../common/context/UserContext";
+import { useDialog } from "../../../common/hooks/useDialog";
+import { CreateTimerDialog } from "../dialogs/CreateTimerDialog";
+import { useTimer } from "../../hooks/useTimer";
+
+export function ToggleRetroTimerButton() {
+  const { isOpen, closeDialog, openDialog } = useDialog();
+  const { user } = useUserContext();
+  const {
+    minutes,
+    seconds,
+    remainingTimeLabel,
+    startTimer,
+    stopTimer,
+    pauseTimer,
+    isTimerRunning,
+  } = useTimer({
+    timerFinished: handleTimerFinished,
+    defaultDuration: 300000,
+  });
+
+  function handleOpenDialog() {
+    if (!isModerator(user)) {
+      return;
+    }
+    openDialog();
+  }
+  function handleTimerFinished() {
+    console.log("timer has finished");
+  }
+  return (
+    <>
+      <ActionButton
+        onClick={handleOpenDialog}
+        label={isTimerRunning ? remainingTimeLabel : "Timer"}
+        icon={<Alarm />}
+        color={isTimerRunning ? "error" : undefined}
+      />
+      <CreateTimerDialog
+        isOpen={isOpen}
+        close={closeDialog}
+        startTimer={startTimer}
+        isTimerRunning={isTimerRunning}
+        remainingMinutes={minutes}
+        remainingSeconds={seconds}
+        stopTimer={stopTimer}
+        pauseTimer={pauseTimer}
+      />
+    </>
+  );
+}

packages/frontend/src/retro/components/dialogs/CreateTimerDialog.tsx

@@ -0,0 +1,63 @@
+import { Button, Dialog, DialogContent, DialogTitle, DialogActions } from "@mui/material";
+import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton";
+import { DialogProps } from "../../../common/types/commonTypes";
+import { useFullscreen } from "../../hooks/useFullscreen";
+import { TimePicker } from "../../../common/components/TimePicker";
+import React = require("react");
+
+interface CreateTimerDialogProps extends DialogProps {
+  startTimer: (duration: number) => void;
+  stopTimer: () => void;
+  pauseTimer: () => void;
+  isTimerRunning: boolean;
+  remainingMinutes: number;
+  remainingSeconds: number;
+}
+export function CreateTimerDialog({
+  isOpen,
+  close,
+  startTimer,
+  stopTimer,
+  pauseTimer,
+  isTimerRunning,
+  remainingMinutes,
+  remainingSeconds,
+}: CreateTimerDialogProps) {
+  const fullScreen = useFullscreen();
+
+  function handleSubmit() {
+    close();
+    if (isTimerRunning) {
+      stopTimer();
+    } else {
+      startTimer(100000);
+    }
+  }
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="xs"
+      fullScreen={fullScreen}
+      open={isOpen}
+      onClose={close}
+      aria-labelledby="new-card-dialog"
+    >
+      <DialogTitle id="new-card-dialog">Set Timer</DialogTitle>
+      <DialogContent>
+        <TimePicker
+          minutes={remainingMinutes}
+          seconds={remainingSeconds}
+          isEditable={isTimerRunning}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={close}>Cancel</Button>
+        {isTimerRunning ? <Button onClick={pauseTimer}>Pause</Button> : undefined}
+        <CallToActionButton onClick={handleSubmit}>
+          {isTimerRunning ? "Stop" : "Start"}
+        </CallToActionButton>
+      </DialogActions>
+    </Dialog>
+  );
+}

packages/frontend/src/retro/hooks/useTimer.ts

@@ -0,0 +1,79 @@
+import { useEffect, useMemo, useState } from "react";
+
+interface useTimerProps {
+  timerFinished: () => void;
+  defaultDuration: number;
+}
+export function useTimer({ timerFinished, defaultDuration }: useTimerProps) {
+  const [isRunning, setIsRunning] = useState(false);
+  const [duration, setDuration] = useState(defaultDuration);
+  const finishTime = useMemo(() => Date.now() + duration, [duration]);
+  const [milliseconds, setMilliseconds] = useState(finishTime - Date.now());
+  const minutes = getMinutes(milliseconds);
+  const seconds = getSeconds(milliseconds);
+
+  function startTimer(duration: number) {
+    console.log("start timer with {} duration", duration);
+    console.log("current time is {}", Date.now());
+    setDuration(duration);
+    setMilliseconds(duration);
+    setIsRunning(true);
+  }
+  function stopTimer() {
+    console.log("stop timer");
+    setIsRunning(false);
+  }
+  function pauseTimer() {
+    console.log("pause timer");
+    setIsRunning(false);
+  }
+
+  function createLabel(ms: number) {
+    return new Date(ms).toISOString().slice(14, 19);
+  }
+  function getMinutes(ms: number) {
+    console.log("minutes {}", Math.floor(ms / 1000 / 60));
+    return Math.floor(ms / 1000 / 60);
+  }
+  function getSeconds(ms: number) {
+    console.log("seconds {}", (ms / 1000) % 60);
+    return (ms / 1000) % 60;
+  }
+  useEffect(() => {
+    function endTimer() {
+      console.log("end timer");
+      setIsRunning(false);
+      setDuration(-1);
+      timerFinished();
+    }
+    function updateTimer() {
+      console.log("Interval executed at remaining duration {}", milliseconds);
+      setMilliseconds(finishTime - Date.now());
+      //   setMinutes(getMinutes(milliseconds));
+      //   setSeconds(getSeconds(milliseconds));
+    }
+    if (!isRunning) return;
+
+    if (milliseconds <= 0) {
+      endTimer();
+      return;
+    }
+
+    const interval = setInterval(() => {
+      updateTimer();
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [finishTime, isRunning, milliseconds, timerFinished]);
+  return {
+    milliseconds,
+    minutes,
+    seconds,
+    remainingTimeLabel: createLabel(milliseconds),
+    startTimer,
+    stopTimer,
+    pauseTimer,
+    isTimerRunning: isRunning,
+  };
+}