Add advanced board switcher functionality

cogboard-webapp/package.json

@@ -7,8 +7,8 @@
     "@emotion/styled": "^10.0.14",
     "@material-ui/core": "^4.2.1",
     "@material-ui/icons": "^4.2.1",
-    "http-proxy-middleware": "^0.20.0",
     "@reach/router": "^1.2.1",
+    "http-proxy-middleware": "^0.20.0",
     "moment-timezone": "^0.5.26",
     "react": "^16.8.6",
     "react-dnd": "^9.3.4",
@@ -19,6 +19,7 @@
     "react-scripts": "3.0.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0",
     "uuid": "^3.3.2"
   },
   "scripts": {

cogboard-webapp/src/components/BoardCard/index.js

@@ -17,6 +17,7 @@ const BoardCard = ({ boardData, className }) => {
     autoSwitch,
     columns,
     id,
+    switchInterval,
     title
   } = boardData;
   const [open, openDialog, handleDialogClose] = useDialogToggle();
@@ -78,10 +79,11 @@ const BoardCard = ({ boardData, className }) => {
       >
         <EditBoard
           closeDialog={handleDialogClose}
+          autoSwitch={autoSwitch}
+          columns={columns}
           id={id}
+          switchInterval={switchInterval}
           title={title}
-          columns={columns}
-          autoSwitch={autoSwitch}
         />
       </AppDialog>
     </div>

cogboard-webapp/src/components/BoardForm/index.js

@@ -9,6 +9,7 @@ import { StyledFieldset } from './styled';
 
 const BoardForm = ({ renderActions, ...initialFormValues }) => {
   const { values, handleChange } = useFormData(initialFormValues);
+  const { autoSwitch } = values;
 
   return (
     <>
@@ -51,6 +52,19 @@ const BoardForm = ({ renderActions, ...initialFormValues }) => {
             label="Auto switch"
           />
         </FormControl>
+        {autoSwitch &&
+          <TextField
+            onChange={handleChange('switchInterval')}
+            id="switchInterval"
+            InputLabelProps={{
+              shrink: true
+            }}
+            label="Switch interval [s]"
+            margin="normal"
+            value={values.switchInterval}
+            type="number"
+          />
+        }
       </StyledFieldset>
       {renderActions(values)}
     </>
@@ -60,12 +74,14 @@ const BoardForm = ({ renderActions, ...initialFormValues }) => {
 BoardForm.propTypes = {
   autoSwitch: bool,
   columns: number,
+  switchInterval: number,
   title: string,
 };
 
 BoardForm.defaultProps = {
   autoSwitch: true,
   columns: 8,
+  switchInterval: 60,
   title: 'Board',
 };
 

cogboard-webapp/src/components/BoardSwitcher/helpers.js

@@ -0,0 +1,15 @@
+export const formatTime = timeInSec => {
+  const seconds = timeInSec % 60;
+  const minutes = Math.floor(timeInSec / 60);
+  const leadingZero = seconds < 10 ? 0 : '';
+
+  return `${minutes}:${leadingZero}${seconds}`;
+};
+
+export const getPrevAndNextIndex = (array, currentIndex) => {
+  const lastIndex = array.length - 1;
+  const nextIndex = currentIndex < lastIndex ? currentIndex + 1 : 0;
+  const prevIndex = currentIndex > 0 ? currentIndex - 1 : lastIndex;
+
+  return [prevIndex, nextIndex];
+};

cogboard-webapp/src/components/BoardSwitcher/hooks.js

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { navigate } from '@reach/router';
+
+import { getSwitcherBoards, getSwitchInterval, getBoardTitle, getCurrentBoardId } from '../../selectors';
+import { getPrevAndNextIndex } from './helpers';
+
+export const useBoardSwitching = () => {
+  const switcherBoards = useSelector(getSwitcherBoards);
+  const currentBoardId = useSelector(getCurrentBoardId);
+  const hasBoardsToSwitch = switcherBoards.length > 1;
+  const initialBoardIndex = switcherBoards.includes(currentBoardId) ? switcherBoards.indexOf(currentBoardId) : 0;
+  const [boardIndex, setIndex] = useState(initialBoardIndex);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [timeElapsed, setTimeElapsed] = useState(0);
+  const [prevBoardIndex, nextBoardIndex] = getPrevAndNextIndex(switcherBoards, boardIndex);
+  const switchInterval = useSelector(state => getSwitchInterval(state, switcherBoards[boardIndex]));
+  const prevBoardTitle = useSelector(state => getBoardTitle(state, switcherBoards[prevBoardIndex]));
+  const nextBoardTitle = useSelector(state => getBoardTitle(state, switcherBoards[nextBoardIndex]));
+
+  const switchBoard = useCallback(
+    (direction) => {
+      const switchDirection = {
+        next: nextBoardIndex,
+        prev: prevBoardIndex
+      };
+      const currentBoardIndex = switchDirection[direction];
+
+      setIndex(currentBoardIndex);
+    },
+    [nextBoardIndex, prevBoardIndex]
+  );
+
+  const handleBoardsSwitch = (direction) => () => {
+    if (!hasBoardsToSwitch) {
+      return;
+    }
+
+    switchBoard(direction);
+    setTimeElapsed(0);
+  };
+
+  const handlePlayToggle = () => {
+    setIsPlaying(prevState => !prevState);
+  };
+
+  useEffect(
+    () => {
+      navigate(switcherBoards[boardIndex] || switcherBoards[0]);
+    },
+    [boardIndex, switcherBoards]
+  );
+
+  useEffect(
+    () => {
+      if (isPlaying) {
+        const interval = setInterval(() => {
+          setTimeElapsed(prevState => prevState + 1);
+
+          if (timeElapsed >= switchInterval) {
+            switchBoard('next');
+            setTimeElapsed(0);
+          }
+        }, 1000);
+
+        return () => clearInterval(interval);
+      }
+    },
+    [isPlaying, timeElapsed, switchInterval, switchBoard]
+  );
+
+  return {
+    handleBoardsSwitch,
+    handlePlayToggle,
+    hasBoardsToSwitch,
+    isPlaying,
+    nextBoardTitle,
+    prevBoardTitle,
+    switchInterval,
+    timeElapsed
+  };
+};

cogboard-webapp/src/components/BoardSwitcher/index.js

@@ -1,62 +1,66 @@
 import React from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
-import { navigate } from '@reach/router';
 
-import { IconButton } from '@material-ui/core';
-import { SkipPrevious, PlayArrow, SkipNext } from '@material-ui/icons';
+import { useBoardSwitching } from './hooks';
+import { formatTime } from './helpers';
+
+import { IconButton, Tooltip } from '@material-ui/core';
+import { SkipPrevious, PlayArrow, SkipNext, Pause } from '@material-ui/icons';
 import { StyledTimer } from './styled';
 
 const BoardSwitcher = ({ className }) => {
-  const switcherBoards = useSelector(
-    ({ boards }) => boards.allBoards.filter(boardId => boards.boardsById[boardId].autoSwitch),
-    shallowEqual
-  );
-  const { currentBoard } = useSelector(({ ui }) => ui);
-  const currentBoardIndex = switcherBoards.includes(currentBoard) ? switcherBoards.indexOf(currentBoard) : 0;
-  const lastBoardIndex = switcherBoards.length - 1;
-
-  const handleBoardsSwitch = (direction) => () => {
-    if (switcherBoards.length <= 1) {
-      return;
-    }
+  const {
+    handleBoardsSwitch,
+    handlePlayToggle,
+    hasBoardsToSwitch,
+    isPlaying,
+    nextBoardTitle,
+    prevBoardTitle,
+    switchInterval,
+    timeElapsed
+  } = useBoardSwitching();
+  const timeLeft = switchInterval - timeElapsed;
 
-    const switchDirection = {
-      next: currentBoardIndex < lastBoardIndex ? currentBoardIndex + 1 : 0,
-      prev: currentBoardIndex > 0 ? currentBoardIndex - 1 : lastBoardIndex,
-    };
-    const boardIndex = switchDirection[direction];
-
-    navigate(switcherBoards[boardIndex]);
-  };
+  if (!hasBoardsToSwitch) {
+    return null;
+  }
 
   return (
     <div className={className}>
-      <StyledTimer>
-        0:48
-      </StyledTimer>
-      <IconButton
-        onClick={handleBoardsSwitch('prev')}
-        color="inherit"
-        aria-label="Open drawer"
-        edge="start"
+      <StyledTimer>{formatTime(timeLeft)}</StyledTimer>
+      <Tooltip
+        title={prevBoardTitle}
+        placement="bottom-end"
       >
-        <SkipPrevious />
-      </IconButton>
+        <IconButton
+          onClick={handleBoardsSwitch('prev')}
+          color="inherit"
+          aria-label="Next board"
+          edge="start"
+        >
+          <SkipPrevious />
+        </IconButton>
+      </Tooltip>
       <IconButton
+        onClick={handlePlayToggle}
         color="inherit"
-        aria-label="Open drawer"
+        aria-label="Auto switch boards"
         edge="start"
       >
-        <PlayArrow />
+        {isPlaying ? <Pause /> : <PlayArrow />}
       </IconButton>
-      <IconButton
-        onClick={handleBoardsSwitch('next')}
-        color="inherit"
-        aria-label="Open drawer"
-        edge="start"
+      <Tooltip
+        title={nextBoardTitle}
+        placement="bottom-end"
       >
-        <SkipNext />
-      </IconButton>
+        <IconButton
+          onClick={handleBoardsSwitch('next')}
+          color="inherit"
+          aria-label="Next board"
+          edge="start"
+        >
+          <SkipNext />
+        </IconButton>
+      </Tooltip>
     </div>
   );
 };

cogboard-webapp/src/selectors/index.js

@@ -0,0 +1,34 @@
+import { createSelector } from 'reselect';
+
+const getBoardsById = ({ boards }) => boards.boardsById;
+
+const getAllBoards = ({ boards }) => boards.allBoards;
+
+const getUi = ({ ui }) => ui;
+
+const getBoardId = (_, boardId) => boardId;
+
+export const getCurrentBoardId = createSelector(
+  [getUi],
+  ui => ui.currentBoard
+);
+
+const getBoard = createSelector(
+  [getBoardsById, getBoardId],
+  (boardsById, boardId) => boardsById[boardId]
+);
+
+export const getBoardTitle = createSelector(
+  [getBoard],
+  (board) => board && board.title
+);
+
+export const getSwitchInterval = createSelector(
+  [getBoard],
+  (board) => board && board.switchInterval
+);
+
+export const getSwitcherBoards = createSelector(
+  [getAllBoards, getBoardsById],
+  (allBoards, boardsById) => allBoards.filter(boardId => boardsById[boardId].autoSwitch)
+);