Feature: Timer on retro board

.eslintrc.js

@@ -38,5 +38,11 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": "warn",
     "@typescript-eslint/triple-slash-reference": "off",
     "prettier/prettier": "warn",
+    "padding-line-between-statements": [
+      "warn",
+      { blankLine: "always", prev: "block-like", next: "function" },
+      { blankLine: "always", prev: "const", next: "function" },
+      { blankLine: "always", prev: "function", next: "return" },
+    ],
   },
 };

packages/frontend/package.json

@@ -14,8 +14,8 @@
     "@mui/lab": "5.0.0-alpha.117",
     "@mui/material": "^5.11.6",
     "@shared/browserlogger": "*",
-    "@shared/socket": "*",
     "@shared/configuration": "*",
+    "@shared/socket": "*",
     "axios": "^1.6.0",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.0",

packages/frontend/src/common/components/buttons/ActionButton.tsx

@@ -1,30 +1,29 @@
 import { Button, ButtonProps, useTheme } from "@mui/material";
-import React from "react";
+import React, { MouseEventHandler } from "react";
 
 interface ActionButtonProps extends ButtonProps {
-  onClick: () => void;
+  onClick: MouseEventHandler<HTMLButtonElement>;
   label: string;
-  isDisabled?: boolean;
   icon?: React.ReactNode;
 }
 
-export function ActionButton({ onClick, isDisabled, label, icon, ...props }: ActionButtonProps) {
+export function ActionButton({ onClick, label, icon, ...props }: ActionButtonProps) {
   const theme = useTheme();
 
   return (
     <Button
       {...props}
       variant="contained"
       onClick={onClick}
-      disabled={isDisabled}
       sx={{
         m: 1,
         borderRadius: theme.spacing(2),
         boxShadow: "0px 5px 10px 0px rgba(0, 0, 0, 0.5)",
         whiteSpace: "nowrap",
         width: theme.spacing(22),
+        ...props.sx,
       }}
-      startIcon={icon ?? undefined}
+      startIcon={icon}
       fullWidth
     >
       {label}

packages/frontend/src/poker/components/buttons/PokerResultButton.tsx

@@ -20,7 +20,7 @@ export function PokerResultButton() {
     <ActionButton
       onClick={handleClick}
       label="Show Results"
-      isDisabled={noUserVoted}
+      disabled={noUserVoted}
       icon={<Visibility />}
     />
   );

packages/frontend/src/poker/components/buttons/ResetVotesButton.tsx

@@ -20,7 +20,7 @@ export function ResetVotesButton() {
       <ActionButton
         onClick={openDialog}
         label="Reset Votes"
-        isDisabled={noUserVoted}
+        disabled={noUserVoted}
         icon={<RestartAlt />}
       />
       <ResetVotesDialog isOpen={isOpen} close={closeDialog} />

packages/frontend/src/poker/components/dialogs/CreatePokerSessionDialog.tsx

@@ -73,6 +73,7 @@ export function CreatePokerSessionDialog() {
     redirectToRoom(roomId);
     handleClose();
   }
+
   return (
     <Dialog
       fullWidth

packages/frontend/src/poker/components/dialogs/ResetVotesDialog.tsx

@@ -15,6 +15,7 @@ import { CallToActionButton } from "../../../common/components/buttons/CallToAct
 export function ResetVotesDialog({ isOpen, close }: DialogProps) {
   const { handleResetUserStory } = usePokerContext();
   const fullScreen = useFullscreen();
+
   function handleClick() {
     handleResetUserStory();
     close();

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 { ToggleTimerDialogButton } from "./buttons/ToggleTimerDialogButton";
 
 export function RetroActionButtons() {
   return (
     <FlexBox flexDirection="row" p={1}>
       <CreateColumnButton />
       <ToggleRetroBlurButton />
       <ToggleRetroVotingButton />
+      <ToggleTimerDialogButton />
     </FlexBox>
   );
 }

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { FlexBox } from "../../common/components/FlexBox";
+import { TextInput } from "../../common/components/TextInput";
+import IncrementTimerButton from "./buttons/IncrementTimerButton";
+interface TimePickerProps {
+  minutes: string;
+  seconds: string;
+  disabled: boolean;
+  isMinutesError: boolean;
+  isSecondsError: boolean;
+  onSecondsChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onMinutesChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onSubmit: () => void;
+  onTimerIncrement: (increment: number) => void;
+}
+export function TimePicker({
+  minutes,
+  seconds,
+  disabled,
+  isMinutesError,
+  isSecondsError,
+  onSecondsChange,
+  onMinutesChange,
+  onSubmit,
+  onTimerIncrement,
+}: TimePickerProps) {
+  return (
+    <>
+      <FlexBox gap={2}>
+        <TextInput
+          value={minutes}
+          onChange={onMinutesChange}
+          onSubmit={onSubmit}
+          autoFocus
+          required
+          disabled={disabled}
+          type="tel"
+          error={isMinutesError}
+          label="Minutes"
+        />
+        <TextInput
+          value={seconds}
+          onChange={onSecondsChange}
+          onSubmit={onSubmit}
+          required
+          type="tel"
+          disabled={disabled}
+          error={isSecondsError}
+          label="Seconds"
+        />
+      </FlexBox>
+      <FlexBox>
+        <IncrementTimerButton onTimerIncrement={onTimerIncrement} minutesToIncrement={1} />
+        <IncrementTimerButton onTimerIncrement={onTimerIncrement} minutesToIncrement={3} />
+        <IncrementTimerButton onTimerIncrement={onTimerIncrement} minutesToIncrement={5} />
+      </FlexBox>
+    </>
+  );
+}

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

@@ -16,7 +16,7 @@ export function CreateColumnButton() {
       <ActionButton
         onClick={openDialog}
         label={"Add Column"}
-        isDisabled={!isModerator(user)}
+        disabled={!isModerator(user)}
         icon={<Add />}
       />
       <CreateColumnDialog isOpen={isOpen} close={closeDialog} />

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

@@ -3,7 +3,7 @@ import { Publish } from "@mui/icons-material";
 import { ListItemIcon, ListItemText, MenuItem } from "@mui/material";
 import { useUserContext } from "../../../common/context/UserContext";
 import { RetroSchemaV1 } from "../../types/retroSchema";
-import { RetroState } from "../../types/retroTypes";
+import { RetroState, TimerStatus } from "../../types/retroTypes";
 import { useRetroContext } from "../../context/RetroContext";
 import { isModerator } from "../../../common/utils/participantsUtils";
 
@@ -29,6 +29,8 @@ export function ImportRetroMenuItem() {
       participants: {},
       waitingList: {},
       isVotingEnabled: false,
+      timerStatus: TimerStatus.STOPPED,
+      timerDuration: 0,
     };
     handleSetRetroState(retro);
   }

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { ActionButton } from "../../../common/components/buttons/ActionButton";
+
+interface IncrementTimerButtonProps {
+  onTimerIncrement: (amount: number) => void;
+  minutesToIncrement: number;
+}
+export default function IncrementTimerButton({
+  onTimerIncrement,
+  minutesToIncrement,
+}: IncrementTimerButtonProps) {
+  return (
+    <ActionButton
+      label={`+${minutesToIncrement} Minutes`}
+      onClick={() => {
+        onTimerIncrement(minutesToIncrement);
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { Alarm, SnoozeOutlined } from "@mui/icons-material";
+import { isModerator } from "../../../common/utils/participantsUtils";
+import { TimerDialog } from "../dialogs/TimerDialog";
+import { useRetroContext } from "../../context/RetroContext";
+import { useUserContext } from "../../../common/context/UserContext";
+import { useDialog } from "../../../common/hooks/useDialog";
+import { useTimer } from "../../hooks/useTimer";
+
+import { TimerStatus } from "../../types/retroTypes";
+import { WiggleActionButton } from "./WiggleActionButton";
+import useTimedEffect from "../../hooks/useTimedEffect";
+
+export function ToggleTimerDialogButton() {
+  const { isOpen, closeDialog, openDialog } = useDialog();
+  const { retroState } = useRetroContext();
+  const { timerStatus } = retroState;
+  const { user } = useUserContext();
+
+  const { isEffectActive, startEffect } = useTimedEffect({ effectLength: 3000 });
+  const { minutes, seconds, remainingTimeLabel } = useTimer({ onTimerFinish: startEffect });
+
+  function handleOpenDialog() {
+    if (!isModerator(user)) return;
+    openDialog();
+  }
+
+  if (!isModerator(user) && timerStatus === TimerStatus.STOPPED && !isEffectActive) return null;
+
+  return (
+    <>
+      <WiggleActionButton
+        onClick={handleOpenDialog}
+        label={timerStatus !== TimerStatus.STOPPED ? remainingTimeLabel : "Timer"}
+        icon={timerStatus === TimerStatus.PAUSED ? <SnoozeOutlined /> : <Alarm />}
+        color={
+          timerStatus === TimerStatus.PAUSED
+            ? "info"
+            : timerStatus === TimerStatus.RUNNING || isEffectActive
+            ? "error"
+            : undefined
+        }
+        isWiggling={isEffectActive}
+      />
+      <TimerDialog
+        isOpen={isOpen}
+        close={closeDialog}
+        remainingMinutes={minutes}
+        remainingSeconds={seconds}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,43 @@
+import React, { MouseEventHandler } from "react";
+import { ButtonProps } from "@mui/material";
+import { keyframes } from "@emotion/react";
+import { ActionButton } from "../../../common/components/buttons/ActionButton";
+
+interface WiggleActionButtonProps extends ButtonProps {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  label: string;
+  icon?: React.ReactNode;
+  isWiggling: boolean;
+}
+
+export function WiggleActionButton({
+  onClick,
+  label,
+  icon,
+  isWiggling,
+  ...props
+}: WiggleActionButtonProps) {
+  const wiggle = keyframes`
+      0%, 20%, 40%, 60%, 80%, 100% {
+          transform: rotate(0deg);
+      }
+      5%, 25%, 45%, 65%, 85% {
+          transform: rotate(5deg);
+      }
+      10%, 30%, 50%, 70%, 90% {
+          transform: rotate(-5deg);
+      }
+      15%, 35%, 55%, 75%, 95% {
+          transform: rotate(0deg);
+      }
+  `;
+  return (
+    <ActionButton
+      label={label}
+      onClick={onClick}
+      icon={icon}
+      sx={{ animation: isWiggling ? `${wiggle} 0.5s ease infinite` : undefined }}
+      {...props}
+    />
+  );
+}

packages/frontend/src/retro/components/columns/column-header/SortColumnMenuItem.tsx

@@ -11,6 +11,7 @@ interface SortColumnMenuItemProps {
 export const SortColumnMenuItem = React.forwardRef(
   ({ column }: SortColumnMenuItemProps, ref: any) => {
     const { handleSortCardsByVotesDescending } = useRetroContext();
+
     function sortByVotesDescending() {
       handleSortCardsByVotesDescending(column.index);
     }

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

@@ -18,6 +18,7 @@ export function QrCodeDialog({ isOpen, close }: DialogProps) {
   async function onRendered() {
     await QRCode.toCanvas(qrCanvas.current, window.location.href);
   }
+
   return (
     <Dialog
       fullScreen={fullScreen}