Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve code quality #74

Merged
merged 4 commits into from
Oct 22, 2021
Merged

Improve code quality #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8249928
fix: code duplication
daystram Oct 21, 2021
ae74126
fix: unnecessary assertion
daystram Oct 21, 2021
3569e1c
refactor: changed wording
daystram Oct 21, 2021
4ce18fa
Merge branch 'master' into fix/code-quality
daystram Oct 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions fableous-fe/src/components/StoryCompletionPrompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
49 changes: 10 additions & 39 deletions fableous-fe/src/components/canvas/CanvasToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}
/>
)
)}
Expand All @@ -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}
/>
)
)}
Expand Down
29 changes: 29 additions & 0 deletions fableous-fe/src/components/canvas/ColorPaletteIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
/>
);
}
2 changes: 1 addition & 1 deletion fableous-fe/src/components/canvas/LayerIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export default function LayerIcon(props: LayerIconProps) {
if (focusLayer === studentRole) {
return undefined;
}
notifyLayerFocus(studentRole as StudentRole);
notifyLayerFocus(studentRole);
return studentRole;
});
onClick();
Expand Down
46 changes: 7 additions & 39 deletions fableous-fe/src/containers/ControllerCanvasPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down
47 changes: 8 additions & 39 deletions fableous-fe/src/containers/HubCanvasPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 = {
Expand Down Expand Up @@ -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
Expand Down