605 hide collaboration functioanlity (#610)

* add back homepage * revert back font default color to whit * rearrange file locations * introduce devMode state => for releasing new feature that won't deploy * change to isDev => is in development --------- Co-authored-by: david zhou <[email protected]>
devsoc-unsw · Mar 17, 2024 · 10efe97 · 10efe97
1 parent f5b370a
commit 10efe97
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 25 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,10 +1,10 @@
 import { ThemeProvider, Box } from '@mui/material';
 import { AnimatePresence } from 'framer-motion';
 import { Route, Routes } from 'react-router-dom';
-import Feedback from 'visualiser-debugger/Feedback';
-import HomePage from 'visualiser-debugger/HomePage';
-import Page404 from 'visualiser-debugger/Page404';
-import VisualiserPage from 'visualiser-debugger/VisualiserPage';
+import Feedback from 'Feedback';
+import HomePage from 'HomePage';
+import Page404 from 'Page404';
+import VisualiserPage from 'VisualiserPage';
 import { structsTheme } from 'structsThemes';
 import './App.scss';
 import DevelopmentMode from 'visualiser-debugger/DevelopmentMode';
@@ -15,7 +15,7 @@ const App = () => (
       <ThemeProvider theme={structsTheme}>
         <Routes>
           {/* Homepage */}
-          <Route path="/" element={<DevelopmentMode />} />
+          <Route path="/" element={<HomePage />} />
 
           {/* Visualiser routes */}
           <Route path="/visualiser/:topic/:data?" element={<VisualiserPage />} />

diff --git a/client/src/visualiser-debugger/Feedback.tsx → client/src/Feedback.tsx b/client/src/visualiser-debugger/Feedback.tsx → client/src/Feedback.tsx
diff --git a/client/src/visualiser-debugger/HomePage.tsx → client/src/HomePage.tsx b/client/src/visualiser-debugger/HomePage.tsx → client/src/HomePage.tsx
diff --git a/client/src/visualiser-debugger/Page404.scss → client/src/Page404.scss b/client/src/visualiser-debugger/Page404.scss → client/src/Page404.scss
diff --git a/client/src/visualiser-debugger/Page404.tsx → client/src/Page404.tsx b/client/src/visualiser-debugger/Page404.tsx → client/src/Page404.tsx
diff --git a/...rc/visualiser-debugger/VisualiserPage.tsx → client/src/VisualiserPage.tsx b/...rc/visualiser-debugger/VisualiserPage.tsx → client/src/VisualiserPage.tsx
diff --git a/client/src/components/Navbars/TopNavbar.tsx b/client/src/components/Navbars/TopNavbar.tsx
@@ -22,6 +22,7 @@ import { titleToUrl, toTitleCase, urlToTitle } from 'utils/url';
 import axios from 'axios';
 import Login from 'components/Login/Login';
 import { getTopics } from '../../visualiser-src/common/helpers';
+import useGlobalState from '../../store/globalStore';
 
 const LogoText = styled(Typography)({
   textTransform: 'none',
@@ -57,6 +58,7 @@ const TopNavbar: FC<Props> = ({ position = 'fixed' }) => {
     setLoggedIn(false);
   };
 
+  const inDev = useGlobalState((state) => state.inDev);
   return (
     <Box>
       <AppBar
@@ -105,18 +107,22 @@ const TopNavbar: FC<Props> = ({ position = 'fixed' }) => {
                 </LogoText>
               </Button>
             </Grid>
-            <Grid item xs={4} display="flex" justifyContent="end">
-              {loggedIn ? (
-                <>
-                  <Button style={{ color: '#0288D1' }}>{localStorage.getItem('user')}</Button>
-                  <Button style={{ color: '#0288D1' }} onClick={handleLogout}>
-                    Log Out
-                  </Button>
-                </>
-              ) : (
-                <Login handleLogon={setLoggedIn} />
-              )}
-            </Grid>
+
+            {/* TODO: Release this feature */}
+            {inDev && (
+              <Grid item xs={4} display="flex" justifyContent="end">
+                {loggedIn ? (
+                  <>
+                    <Button style={{ color: '#0288D1' }}>{localStorage.getItem('user')}</Button>
+                    <Button style={{ color: '#0288D1' }} onClick={handleLogout}>
+                      Log Out
+                    </Button>
+                  </>
+                ) : (
+                  <Login handleLogon={setLoggedIn} />
+                )}
+              </Grid>
+            )}
           </Grid>
         </Toolbar>
       </AppBar>

diff --git a/client/src/components/Visualiser/VisualiserInterface/CreateMenu.tsx b/client/src/components/Visualiser/VisualiserInterface/CreateMenu.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, useContext } from 'react';
 import VisualiserContext from './VisualiserContext';
 import CreateLink from './CreateLink';
 import Saving from './Saving';
+import useGlobalState from '../../../store/globalStore';
 
 const MenuButton = styled(Button)({
   backgroundColor: '#46B693',
@@ -39,6 +40,7 @@ const CreateMenu = () => {
     controller.generateDataStructure();
   }, [controller]);
 
+  const inDev = useGlobalState((state) => state.inDev);
   return (
     <Box
       display="flex"
@@ -59,8 +61,13 @@ const CreateMenu = () => {
           Reset All
         </Typography>
       </MenuButton>
-      <Saving topicTitle={topicTitle} controller={controller} />
-      <CreateLink />
+      {/* TODO: Release this feature */}
+      {inDev && (
+        <>
+          <Saving topicTitle={topicTitle} controller={controller} />
+          <CreateLink />
+        </>
+      )}
     </Box>
   );
 };

diff --git a/client/src/store/globalStore.ts b/client/src/store/globalStore.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+export interface GlobalState {
+  inDev: boolean;
+}
+
+const useGlobalState = create<GlobalState>(() => ({
+  inDev: true,
+}));
+
+export default useGlobalState;
diff --git a/client/src/structsThemes.ts b/client/src/structsThemes.ts
@@ -26,7 +26,7 @@ export const structsTheme = createTheme({
       paper: '#14113C',
     },
     text: {
-      primary: '#00000',
+      primary: '#FFFFFF',
       secondary: 'rgba(255, 255, 255, 0.7)',
       disabled: 'rgba(255, 255, 255, 0.5)',
     },

diff --git a/...rc/components/DevelopmentMode/Console.tsx → ...er-debugger/Component/Console/Console.tsx b/...rc/components/DevelopmentMode/Console.tsx → ...er-debugger/Component/Console/Console.tsx
diff --git a/client/src/visualiser-debugger/DevelopmentMode.tsx b/client/src/visualiser-debugger/DevelopmentMode.tsx
@@ -5,7 +5,7 @@ import globalStyles from 'styles/global.module.css';
 import classNames from 'classnames';
 import { Tabs, Tab } from 'components/Tabs';
 import { Socket } from 'socket.io-client';
-import Console from 'components/DevelopmentMode/Console';
+import Console from 'visualiser-debugger/Component/Console/Console';
 import DevelopmentModeNavbar from '../components/Navbars/DevelopmentModeNavbar';
 import Configuration from './Component/Configuration/Configuration';
 import Controls from './Component/Control/Controls';
@@ -21,6 +21,7 @@ import {
   PLACEHOLDER_WORKSPACE,
   loadCode,
 } from './Component/FileTree/Util/util';
+import useGlobalState from '../store/globalStore';
 
 type ExtendedWindow = Window &
   typeof globalThis & { socket: Socket; getBreakpoints: (line: string, listName: string) => void };
@@ -190,8 +191,7 @@ const DevelopmentMode = () => {
   // Refactor to better support Debugger mode
   // - There're a lot of console.log functions, we can delegate responsibility in each component
   // - Refactor Tabs
-  const DEBUG_MODE = false;
-  return !DEBUG_MODE ? (
+  return (
     <div className={classNames(globalStyles.root, styles.light)}>
       <div className={styles.layout}>
         <div className={classNames(styles.pane, styles.nav)}>
@@ -255,8 +255,6 @@ const DevelopmentMode = () => {
         </div>
       </div>
     </div>
-  ) : (
-    <VisualizerMain backendState={backendState} />
   );
 };