Merge pull request #74 from deco-finter/fix/code-quality

Improve code quality
deco-finter · Oct 22, 2021 · e431b0c · e431b0c
2 parents 5cbe149 + 4ce18fa
commit e431b0c
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 118 deletions.
diff --git a/fableous-fe/src/components/StoryCompletionPrompt.tsx b/fableous-fe/src/components/StoryCompletionPrompt.tsx
@@ -0,0 +1,49 @@
+import { Button, Grid, Icon } from "@material-ui/core";
+import { Link } from "react-router-dom";
+import { proto as pb } from "../proto/message_pb";
+
+export default function StoryCompletionPrompt(props: {
+  restartSession: () => void;
+  sessionInfo: pb.WSControlMessageData | undefined;
+}) {
+  const { restartSession, sessionInfo } = props;
+
+  return (
+    <>
+      <Grid item xs={12}>
+        <Button
+          variant="contained"
+          color="primary"
+          endIcon={<Icon fontSize="small">brush</Icon>}
+          className="mb-2"
+          onClick={() => restartSession()}
+        >
+          Create another story
+        </Button>
+      </Grid>
+      <Grid item xs={12}>
+        <Button
+          variant="contained"
+          color="secondary"
+          component={Link}
+          endIcon={<Icon fontSize="small">photo</Icon>}
+          to={`/gallery/${sessionInfo?.classroomId}/${sessionInfo?.sessionId}`}
+          className="mb-2"
+        >
+          View completed story
+        </Button>
+      </Grid>
+      <Grid item xs={12}>
+        <Button
+          variant="contained"
+          color="secondary"
+          component={Link}
+          endIcon={<Icon fontSize="small">book</Icon>}
+          to={`/gallery/${sessionInfo?.classroomId}`}
+        >
+          View classroom gallery
+        </Button>
+      </Grid>
+    </>
+  );
+}
diff --git a/fableous-fe/src/components/canvas/CanvasToolbar.tsx b/fableous-fe/src/components/canvas/CanvasToolbar.tsx
@@ -8,12 +8,13 @@ import BrushIcon from "@material-ui/icons/Brush";
 import StopIcon from "@material-ui/icons/Stop";
 import StopRoundedIcon from "@material-ui/icons/StopRounded";
 import FormatColorFillIcon from "@material-ui/icons/FormatColorFill";
-import { Button, IconButton, makeStyles, Typography } from "@material-ui/core";
+import { IconButton, makeStyles, Typography } from "@material-ui/core";
 import EraserIcon from "./EraserIcon";
 import { ToolMode } from "../../constant";
 import { ImperativeCanvasRef } from "./data";
 import { proto as pb } from "../../proto/message_pb";
 import BrushWidthIcon from "./BrushWidthIcon";
+import ColorPaletteIcon from "./ColorPaletteIcon";
 import ToolbarTooltip from "./ToolbarTooltip";
 import { TutorialTargetId } from "../../tutorialTargetIds";
 import { BRUSH_COLORS, BRUSH_WIDTHS } from "./constants";
@@ -252,29 +253,14 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
                       >
                         {BRUSH_COLORS.slice(0, BRUSH_COLORS.length / 2).map(
                           (color) => (
-                            <Button
-                              component="div"
+                            <ColorPaletteIcon
+                              key={color}
+                              color={color}
+                              toolColor={toolColor}
                               onClick={() => {
                                 setToolColorRememberPrev(color);
                                 setIsColorPickerOpen(false);
                               }}
-                              style={{
-                                backgroundColor: color,
-                                width: "38px",
-                                height: "38px",
-                                padding: 0,
-                                margin: 4,
-                                minWidth: "auto",
-                                borderRadius: 4,
-                                border: `${
-                                  toolColor === color ? 2 : 1
-                                }px solid ${
-                                  toolColor === color
-                                    ? colors.orange.main
-                                    : "#AAA8"
-                                }`,
-                              }}
-                              key={color}
                             />
                           )
                         )}
@@ -286,29 +272,14 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
                       >
                         {BRUSH_COLORS.slice(BRUSH_COLORS.length / 2).map(
                           (color) => (
-                            <Button
-                              component="div"
+                            <ColorPaletteIcon
+                              key={color}
+                              color={color}
+                              toolColor={toolColor}
                               onClick={() => {
                                 setToolColorRememberPrev(color);
                                 setIsColorPickerOpen(false);
                               }}
-                              style={{
-                                backgroundColor: color,
-                                width: "38px",
-                                height: "38px",
-                                padding: 0,
-                                margin: 4,
-                                minWidth: "auto",
-                                borderRadius: 4,
-                                border: `${
-                                  toolColor === color ? 2 : 1
-                                }px solid ${
-                                  toolColor === color
-                                    ? colors.orange.main
-                                    : "#AAA8"
-                                }`,
-                              }}
-                              key={color}
                             />
                           )
                         )}

diff --git a/fableous-fe/src/components/canvas/ColorPaletteIcon.tsx b/fableous-fe/src/components/canvas/ColorPaletteIcon.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@material-ui/core";
+import { colors } from "../../colors";
+
+export default function ColorPaletteIcon(props: {
+  color: string;
+  toolColor: string;
+  onClick: () => void;
+}) {
+  const { color, toolColor, onClick } = props;
+  return (
+    <Button
+      component="div"
+      onClick={onClick}
+      style={{
+        backgroundColor: color,
+        width: "38px",
+        height: "38px",
+        padding: 0,
+        margin: 4,
+        minWidth: "auto",
+        borderRadius: 4,
+        border: `${toolColor === color ? 2 : 1}px solid ${
+          toolColor === color ? colors.orange.main : "#AAA8"
+        }`,
+      }}
+      key={color}
+    />
+  );
+}
diff --git a/fableous-fe/src/components/canvas/LayerIcon.tsx b/fableous-fe/src/components/canvas/LayerIcon.tsx
@@ -117,7 +117,7 @@ export default function LayerIcon(props: LayerIconProps) {
                 if (focusLayer === studentRole) {
                   return undefined;
                 }
-                notifyLayerFocus(studentRole as StudentRole);
+                notifyLayerFocus(studentRole);
                 return studentRole;
               });
               onClick();

diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx
@@ -15,7 +15,6 @@ import {
   Chip,
   ChipProps,
 } from "@material-ui/core";
-import { Link } from "react-router-dom";
 import useAxios from "axios-hooks";
 import * as yup from "yup";
 import { Formik, FormikHelpers } from "formik";
@@ -47,6 +46,7 @@ import { colors } from "../colors";
 import { TutorialTargetId } from "../tutorialTargetIds";
 import useTutorial from "../hooks/useTutorial";
 import { useCustomNav } from "../components/CustomNavProvider";
+import StoryCompletionPrompt from "../components/StoryCompletionPrompt";
 import { proto as pb } from "../proto/message_pb";
 
 enum ControllerState {
@@ -672,44 +672,12 @@ export default function ControllerCanvasPage() {
           </div>
         )}
         {controllerState === ControllerState.StoryFinished && (
-          <>
-            <Grid item xs={12}>
-              <Button
-                variant="contained"
-                color="primary"
-                endIcon={<Icon fontSize="small">brush</Icon>}
-                className="mb-2"
-                onClick={() => {
-                  setControllerState(ControllerState.JoinForm);
-                }}
-              >
-                Join another session
-              </Button>
-            </Grid>
-            <Grid item xs={12}>
-              <Button
-                variant="contained"
-                color="secondary"
-                component={Link}
-                endIcon={<Icon fontSize="small">photo</Icon>}
-                to={`/gallery/${sessionInfo?.classroomId}/${sessionInfo?.sessionId}`}
-                className="mb-2"
-              >
-                View completed story
-              </Button>
-            </Grid>
-            <Grid item xs={12}>
-              <Button
-                variant="contained"
-                color="secondary"
-                component={Link}
-                endIcon={<Icon fontSize="small">book</Icon>}
-                to={`/gallery/${sessionInfo?.classroomId}`}
-              >
-                View classroom gallery
-              </Button>
-            </Grid>
-          </>
+          <StoryCompletionPrompt
+            restartSession={() => {
+              setControllerState(ControllerState.JoinForm);
+            }}
+            sessionInfo={sessionInfo}
+          />
         )}
       </div>
       <div

diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx
@@ -13,7 +13,7 @@ import useAxios from "axios-hooks";
 import { Formik, FormikHelpers } from "formik";
 import { useSnackbar } from "notistack";
 import { useRef, useEffect, useState, useCallback } from "react";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
 import * as yup from "yup";
 import { restAPI, wsAPI } from "../api";
 import { APIResponse, Manifest, Session, Story } from "../data";
@@ -31,6 +31,7 @@ import ChipRow from "../components/ChipRow";
 import FormikTagField from "../components/FormikTagField";
 import LayerToolbar from "../components/canvas/LayerToolbar";
 import { achievementToProto } from "../components/achievement/achievement";
+import StoryCompletionPrompt from "../components/StoryCompletionPrompt";
 import { proto as pb } from "../proto/message_pb";
 
 const INIT_FLAG = {
@@ -748,44 +749,12 @@ export default function HubCanvasPage() {
           </Grid>
         )}
         {hubState === HubState.StoryFinished && (
-          <>
-            <Grid item xs={12}>
-              <Button
-                variant="contained"
-                color="primary"
-                endIcon={<Icon fontSize="small">brush</Icon>}
-                className="mb-2"
-                onClick={() => {
-                  setHubState(HubState.SessionForm);
-                }}
-              >
-                Create another session
-              </Button>
-            </Grid>
-            <Grid item xs={12}>
-              <Button
-                variant="contained"
-                color="secondary"
-                component={Link}
-                endIcon={<Icon fontSize="small">photo</Icon>}
-                to={`/gallery/${sessionInfo?.classroomId}/${sessionInfo?.sessionId}`}
-                className="mb-2"
-              >
-                View completed story
-              </Button>
-            </Grid>
-            <Grid item xs={12}>
-              <Button
-                variant="contained"
-                color="secondary"
-                component={Link}
-                endIcon={<Icon fontSize="small">book</Icon>}
-                to={`/gallery/${sessionInfo?.classroomId}`}
-              >
-                View classroom gallery
-              </Button>
-            </Grid>
-          </>
+          <StoryCompletionPrompt
+            restartSession={() => {
+              setHubState(HubState.SessionForm);
+            }}
+            sessionInfo={sessionInfo}
+          />
         )}
       </div>
       <div