EDITOR-#333 switch between editor and command (#334)

* add a button * remove button * delete mode * del mode * fixed routes * fix logo missing at /editor/command * extract routing logic to a hook --------- Co-authored-by: madmaxieee <[email protected]>
NTUEELightDance · Feb 6, 2023 · e84fdfe · e84fdfe
1 parent 94704f1
commit e84fdfe
Show file tree

Hide file tree

Showing 11 changed files with 3,031 additions and 231 deletions.
diff --git a/editor-server/yarn.lock b/editor-server/yarn.lock
diff --git a/editor/components/ControlBar/index.tsx b/editor/components/ControlBar/index.tsx
@@ -4,16 +4,17 @@ import WaveSurferApp from "../Wavesurfer/WaveSurferApp";
 import VolumeSlider from "./VolumeSlider";
 import ScaleSlider from "./ScaleSlider";
 import FadeSwitch from "./FadeSwitch";
-import useMode from "@/hooks/useMode";
+
+import useRoute from "@/hooks/useRoute";
 
 function ControlBar({ wavesurfer }: { wavesurfer: WaveSurferApp }) {
-  const mode = useMode();
+  const { page } = useRoute();
 
   return (
     <>
       <PlayBackController wavesurfer={wavesurfer} />
       <TimeController />
-      {mode === "editor" && <FadeSwitch />}
+      {page === "EDITOR" && <FadeSwitch />}
       <VolumeSlider wavesurfer={wavesurfer} />
       <ScaleSlider wavesurfer={wavesurfer} />
     </>

diff --git a/editor/components/Header/index.tsx b/editor/components/Header/index.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
-import { AppBar, Toolbar, Box, Stack } from "@mui/material";
+
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Toolbar from "@mui/material/Toolbar";
+import Stack from "@mui/material/Stack";
 
 import { Settings } from "../Settings";
 import Tools from "components/Tools";
@@ -11,15 +16,13 @@ import StateIndicator from "./StateIndicator";
 
 import { reactiveState } from "core/state";
 import { useReactiveVar } from "@apollo/client";
-import useMode from "@/hooks/useMode";
 
-/**
- * Top Bar, include title, timeController, upload/download btn
- */
+import useRoute from "@/hooks/useRoute";
+
 export default function Header() {
   const [showSettings, setShowSettings] = useState<boolean>(false);
   const editMode = useReactiveVar(reactiveState.editMode);
-  const mode = useMode();
+  const { page, navigate } = useRoute();
 
   return (
     <Stack direction="column">
@@ -28,11 +31,26 @@ export default function Header() {
         <Toolbar style={{ minHeight: "6vh", width: "100%" }}>
           <Box sx={{ height: "6vh", p: "1vh 1vw", mr: "3vw" }}>
             <img
-              src="LDlogoWhite.png"
+              src="/LDlogoWhite.png"
               alt="NTUEE Light Dance logo"
               style={{ height: "100%" }}
             />
           </Box>
+          <Button
+            variant="outlined"
+            onClick={() => {
+              if (page === "EDITOR") {
+                navigate.toCommandCenter();
+              } else if (page === "COMMAND_CENTER") {
+                navigate.toEditor();
+              } else {
+                navigate.toLogin();
+              }
+              window.location.reload();
+            }}
+          >
+            {page == "EDITOR" ? "command" : "editor"}
+          </Button>
           <Box
             sx={{
               display: "flex",
@@ -41,7 +59,7 @@ export default function Header() {
               gap: "1vw",
             }}
           >
-            {mode === "editor" && (
+            {page === "EDITOR" && (
               <>
                 <EditButtons />
                 <EditorSelector />

diff --git a/editor/components/RequireAuth/index.tsx b/editor/components/RequireAuth/index.tsx
@@ -3,12 +3,14 @@ import { useReactiveVar } from "@apollo/client";
 
 import { reactiveState } from "@/core/state";
 
+import { ROUTES } from "@/constants";
+
 export default function RequireAuth({ children }: { children: JSX.Element }) {
   const isLoggedIn = useReactiveVar(reactiveState.isLoggedIn);
   const location = useLocation();
 
   if (!isLoggedIn) {
-    return <Navigate to="/login" state={{ from: location }} replace />;
+    return <Navigate to={ROUTES.LOGIN} state={{ from: location }} replace />;
   }
 
   return children;

diff --git a/editor/components/Settings/Preference/index.tsx b/editor/components/Settings/Preference/index.tsx
@@ -3,21 +3,21 @@ import { Box } from "@mui/material";
 
 import { layoutMode } from "types/layout";
 import MarkerSwitch from "./MarkerSwitch";
-import { PreferenceSelector } from "./PreferenceSelector";
+// import { PreferenceSelector } from "./PreferenceSelector";
 
 function Preference() {
-  const [mode, setMode] = useState<layoutMode>("editor");
+  // const [mode, setMode] = useState<layoutMode>("editor");
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: "1em" }}>
-      <PreferenceSelector
+      {/* <PreferenceSelector
         label="mode"
         value={mode}
         Options={["editor", "command"]}
         onChange={(e) => {
           setMode(e.target.value as layoutMode);
         }}
-      />
+      /> */}
       <MarkerSwitch />
     </Box>
   );

diff --git a/editor/constants/index.ts b/editor/constants/index.ts
@@ -68,3 +68,10 @@ export const COMMANDS = {
   RESTARTCONTROLLER,
   NTHU_STOP,
 };
+
+export const ROUTES = {
+  ROOT: "/",
+  EDITOR: "/editor",
+  COMMAND_CENTER: "/editor/command",
+  LOGIN: "/login",
+};
diff --git a/editor/hooks/useRoute.ts b/editor/hooks/useRoute.ts
@@ -0,0 +1,45 @@
+import { useCallback, useMemo } from "react";
+
+import { useNavigate, useLocation } from "react-router-dom";
+
+import { ROUTES } from "@/constants";
+
+export type PageName = keyof typeof ROUTES | "UNKNOWN";
+
+export default function useRoute() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const page: PageName = useMemo(() => {
+    const path = location.pathname;
+    if (path === ROUTES.EDITOR) {
+      return "EDITOR";
+    } else if (path === ROUTES.COMMAND_CENTER) {
+      return "COMMAND_CENTER";
+    } else if (path === ROUTES.LOGIN) {
+      return "LOGIN";
+    } else if (path === ROUTES.ROOT) {
+      return "ROOT";
+    } else {
+      return "UNKNOWN";
+    }
+  }, [location.pathname]);
+
+  const toEditor = useCallback(() => {
+    navigate(ROUTES.EDITOR);
+  }, [navigate]);
+
+  const toCommandCenter = useCallback(() => {
+    navigate(ROUTES.COMMAND_CENTER);
+  }, [navigate]);
+
+  const toLogin = useCallback(() => {
+    navigate(ROUTES.LOGIN);
+  }, [navigate]);
+
+  return {
+    location,
+    page,
+    navigate: { toEditor, toCommandCenter, toLogin },
+  };
+}
diff --git a/editor/pages/Login.tsx b/editor/pages/Login.tsx
@@ -14,6 +14,8 @@ import Typography from "@mui/material/Typography";
 import { reactiveState } from "@/core/state";
 import { login, checkToken } from "@/core/actions";
 
+import { ROUTES } from "@/constants";
+
 export default function LogIn() {
   const isLoggedIn = useReactiveVar(reactiveState.isLoggedIn);
   const location = useLocation();
@@ -24,7 +26,7 @@ export default function LogIn() {
 
   if (isLoggedIn) {
     const from = location.state?.from;
-    return <Navigate to={from?.pathname || "/"} />;
+    return <Navigate to={from?.pathname || ROUTES.ROOT} />;
   }
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {

diff --git a/editor/pages/index.tsx b/editor/pages/index.tsx
@@ -10,6 +10,8 @@ import RequireAuth from "@/components/RequireAuth";
 import Login from "./Login";
 import NotFound from "./NotFound";
 
+import { ROUTES } from "@/constants";
+
 const theme = createTheme({ palette: { mode: "dark" } });
 
 const EditorWrapper = lazy(async () => await import("./App"));
@@ -26,11 +28,15 @@ export default function RootRouter() {
             <Route
               index
               element={
-                <Navigate to="/editor" replace={true} state={{ from: "/" }} />
+                <Navigate
+                  to={ROUTES.EDITOR}
+                  replace={true}
+                  state={{ from: ROUTES.ROOT }}
+                />
               }
             />
             <Route
-              path="editor"
+              path={ROUTES.EDITOR}
               element={
                 <RequireAuth>
                   <Suspense fallback={<Loading />}>
@@ -50,7 +56,7 @@ export default function RootRouter() {
                 }
               />
               <Route
-                path="command"
+                path={ROUTES.COMMAND_CENTER}
                 element={
                   <RequireAuth>
                     <Suspense fallback={<Loading />}>
@@ -61,7 +67,7 @@ export default function RootRouter() {
               />
             </Route>
             <Route
-              path="login"
+              path={ROUTES.LOGIN}
               element={
                 <Suspense fallback={<Loading />}>
                   <Login />