605 hide collaboration functioanlity (#612)

* disable no-plusplus * fix lint for graphical tree generator * fix lint * fix logi * add a pre-merge action * remove unused * adjust ci * fix tabs * add ignoreRestSibling option * fox unused var lint * fix format * ignore workspace selector * fix util * console rework * fix create link --------- Co-authored-by: david zhou <[email protected]>
devsoc-unsw · Mar 17, 2024 · 1a6ba60 · 1a6ba60
1 parent 10efe97
commit 1a6ba60
Show file tree

Hide file tree

Showing 27 changed files with 143 additions and 111 deletions.
diff --git a/.github/workflows/pre-merge.yml b/.github/workflows/pre-merge.yml
@@ -0,0 +1,18 @@
+name: Pre-Merge Checks
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize, edited]
+
+jobs:
+  sanity:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Dependency
+        working-directory: ./client
+        run: npm install
+      - name: Lint
+        working-directory: ./client
+        run: npm run lint
+
diff --git a/client/.eslintrc.json b/client/.eslintrc.json
@@ -57,7 +57,8 @@
     "react/react-in-jsx-scope": "off",
     "jsx-a11y/anchor-is-valid": "off",
     "class-methods-use-this": "off",
-    "no-unused-vars": ["off"],
-    "@typescript-eslint/no-unused-vars": ["warn"]
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "ignoreRestSiblings": true }],
+    "no-plusplus": "off"
   }
 }
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -39,6 +39,7 @@
     "d3": "^7.8.5",
     "framer-motion": "^10.16.4",
     "lodash": "^4.17.21",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "^18.2.0",

diff --git a/client/src/components/Dialog/Dialog.tsx b/client/src/components/Dialog/Dialog.tsx
@@ -2,6 +2,7 @@ import * as Internal from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import { ReactNode } from 'react';
 import styles from 'styles/Dialog.module.css';
+import PropTypes from 'prop-types';
 
 const Dialog = ({ trigger, children }: { trigger: ReactNode; children: ReactNode }) => {
   return (
@@ -12,7 +13,7 @@ const Dialog = ({ trigger, children }: { trigger: ReactNode; children: ReactNode
         <Internal.Content className={styles.DialogContent}>
           {children}
           <Internal.Close asChild>
-            <button className={styles.IconButton}>
+            <button className={styles.IconButton} type="button" aria-label="Close">
               <Cross2Icon />
             </button>
           </Internal.Close>
@@ -22,15 +23,27 @@ const Dialog = ({ trigger, children }: { trigger: ReactNode; children: ReactNode
   );
 };
 
-const DialogTitle = ({ children }) => {
+interface ReactNodeProp {
+  children: ReactNode;
+}
+
+const DialogTitle: React.FC<ReactNodeProp> = ({ children }) => {
   return <Internal.Title className={styles.DialogTitle}>{children}</Internal.Title>;
 };
 
-const DialogDescription = ({ children }) => {
+DialogTitle.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+const DialogDescription: React.FC<ReactNodeProp> = ({ children }) => {
   return (
     <Internal.Description className={styles.DialogDescription}>{children}</Internal.Description>
   );
 };
 
+DialogDescription.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 export default Dialog;
 export { DialogTitle, DialogDescription };
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
@@ -5,7 +5,6 @@ import structsLogo from 'assets/img/structs.png';
 import tiktokLogo from 'assets/img/tiktokColouredWhite.svg';
 import janeStreetLogo from 'assets/img/JaneStreetWhite.png';
 
-
 const StyledFooter = styled('footer')(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   position: 'relative',
@@ -78,19 +77,30 @@ const Footer = () => {
             </Typography>
             {/* TikTok logo */}
             <Link href="https://www.tiktok.com/" target="_blank" rel="noopener noreferrer">
-              <img src={tiktokLogo} alt="TikTok Logo" height={40} style={{ marginRight: '2vw', verticalAlign: 'middle' }} />
+              <img
+                src={tiktokLogo}
+                alt="TikTok Logo"
+                height={40}
+                style={{ marginRight: '2vw', verticalAlign: 'middle' }}
+              />
             </Link>
 
             {/* Jane Street */}
             <Link href="https://www.janestreet.com/" target="_blank" rel="noopener noreferrer">
-              <img src={janeStreetLogo} alt="Jane Street Logo" height={50} style={{ verticalAlign: 'middle', marginBottom: '0px' }} />
+              <img
+                src={janeStreetLogo}
+                alt="Jane Street Logo"
+                height={50}
+                style={{ verticalAlign: 'middle', marginBottom: '0px' }}
+              />
             </Link>
-
           </Grid>
         </Grid>
       </Container>
       <Box textAlign="center" paddingTop={5}>
-        <Typography color="textSecondary">© {new Date().getFullYear()} — Software Development Society (DevSoc)</Typography>
+        <Typography color="textSecondary">
+          © {new Date().getFullYear()} — Software Development Society (DevSoc)
+        </Typography>
       </Box>
     </StyledFooter>
   );

diff --git a/client/src/components/Login/Login.tsx b/client/src/components/Login/Login.tsx
@@ -1,8 +1,7 @@
-import React, { FC, useState, useContext } from 'react';
-import { Box, Typography, useTheme, Button, Input } from '@mui/material';
+import { FC, useState } from 'react';
+import { Button, Input } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import axios from 'axios';
-import { Block } from '@mui/icons-material';
 import { SERVER_URL } from 'utils/constants';
 
 interface Props {
@@ -39,14 +38,12 @@ const Overlay = styled('div')({
  */
 const Login: FC<Props> = ({ handleLogon }) => {
   // Handle login toggle
-  const [canLogin, setCanLogin] = useState(true);
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [register, setRegister] = useState(false);
 
   const handleBack = () => {
     setRegister(false);
-    setCanLogin(true);
     setUsername('');
     setPassword('');
   };
@@ -58,7 +55,6 @@ const Login: FC<Props> = ({ handleLogon }) => {
       password,
     };
     axios.post(`${SERVER_URL}/auth/login`, data).then((response) => {
-      setCanLogin(false);
       if (response.data.found) {
         localStorage.setItem('user', username);
 
@@ -75,7 +71,7 @@ const Login: FC<Props> = ({ handleLogon }) => {
   };
 
   const handleRegister = () => {
-    if (username.length == 0 || password.length == 0) {
+    if (username.length === 0 || password.length === 0) {
       alert('Please enter username or password');
       return;
     }
@@ -99,7 +95,7 @@ const Login: FC<Props> = ({ handleLogon }) => {
   const handleClear = () => {
     axios
       .delete(`${SERVER_URL}/api/deleteAllUsers`)
-      .then((response) => {
+      .then(() => {
         handleBack();
         handleLogon(false);
         alert('Users cleared');
@@ -120,52 +116,47 @@ const Login: FC<Props> = ({ handleLogon }) => {
   };
 
   return (
-    <>
-      {canLogin ? (
-        <Button style={{ color: '#0288D1' }} onClick={() => setCanLogin(false)}>
-          Login
-        </Button>
-      ) : (
-        <Overlay>
-          <LoginMenu>
-            <Button onClick={() => handleBack()}>Back</Button>
-            <Input
-              placeholder="Username"
-              value={username}
-              onChange={(event) => setUsername(event.target.value)}
-              onKeyDown={handleKeyPress}
-            />
-            <Input
-              placeholder="Password"
-              value={password}
-              type="password"
-              onChange={(event) => setPassword(event.target.value)}
-              onKeyDown={handleKeyPress}
-            />
-            {register ? (
-              <Button color="inherit" onClick={handleRegister}>
-                Register
-              </Button>
-            ) : (
-              <>
-                <Button color="inherit" onClick={handleLogin}>
-                  Login
-                </Button>
-                <a
-                  style={{ textDecoration: 'underline', fontSize: '0.8em' }}
-                  onClick={() => setRegister(true)}
-                >
-                  Create Account
-                </a>
-              </>
-            )}
-            <Button color="inherit" onClick={handleClear}>
-              clear database
+    <Overlay>
+      <LoginMenu>
+        <Button onClick={() => handleBack()}>Back</Button>
+        <Input
+          placeholder="Username"
+          value={username}
+          onChange={(event) => setUsername(event.target.value)}
+          onKeyDown={handleKeyPress}
+        />
+        <Input
+          placeholder="Password"
+          value={password}
+          type="password"
+          onChange={(event) => setPassword(event.target.value)}
+          onKeyDown={handleKeyPress}
+        />
+        {register ? (
+          <Button color="inherit" onClick={handleRegister}>
+            Register
+          </Button>
+        ) : (
+          <>
+            <Button color="inherit" onClick={handleLogin}>
+              Login
             </Button>
-          </LoginMenu>
-        </Overlay>
-      )}
-    </>
+            <a
+              role="button"
+              tabIndex={0}
+              style={{ textDecoration: 'underline', fontSize: '0.8em' }}
+              onClick={() => setRegister(true)}
+              onKeyDown={() => setRegister(true)}
+            >
+              Create Account
+            </a>
+          </>
+        )}
+        <Button color="inherit" onClick={handleClear}>
+          clear database
+        </Button>
+      </LoginMenu>
+    </Overlay>
   );
 };
 

diff --git a/client/src/components/Navbars/DevelopmentModeNavbar.tsx b/client/src/components/Navbars/DevelopmentModeNavbar.tsx
@@ -17,7 +17,7 @@ const DevelopmentModeNavbar = () => {
       <div className={styles.navItem}>
         <Dialog
           trigger={
-            <button className={dialogStyles.IconButton}>
+            <button className={dialogStyles.IconButton} aria-label="Info" type="button">
               <InfoCircledIcon />
             </button>
           }

diff --git a/client/src/components/Navbars/TopNavbar.tsx b/client/src/components/Navbars/TopNavbar.tsx
@@ -12,14 +12,12 @@ import {
   Button,
   ListItemIcon,
   useTheme,
-  Input,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import CheckIcon from '@mui/icons-material/Check';
 import logo from 'assets/img/logo.png';
 import { Link, useParams } from 'react-router-dom';
 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';

diff --git a/client/src/components/Select/Select.tsx b/client/src/components/Select/Select.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable */
+// TODO: Proper rework on this file => we want to re-design this anyway. I can't fix lint now because it will potentially change functioanlity of the file
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import * as Internal from '@radix-ui/react-select';
 import classNames from 'classnames';

diff --git a/client/src/components/Tabs/Tabs.tsx b/client/src/components/Tabs/Tabs.tsx
@@ -2,6 +2,13 @@ import React, { ReactNode } from 'react';
 import * as Internal from '@radix-ui/react-tabs';
 import styles from 'styles/Tabs.module.css';
 
+interface TabProps {
+  // TODO: Fix this
+  // eslint-disable-next-line react/no-unused-prop-types
+  label: string;
+  children: ReactNode;
+}
+
 export const Tabs = React.forwardRef<HTMLDivElement, Internal.TabsProps>(
   ({ children, ...props }, ref) => (
     <Internal.Root className={styles.TabsRoot} defaultValue="0" ref={ref} {...props}>
@@ -23,6 +30,6 @@ export const Tabs = React.forwardRef<HTMLDivElement, Internal.TabsProps>(
 
 Tabs.displayName = 'Tabs' as string;
 
-export const Tab = ({ children, label }: { label: string; children: ReactNode }) => (
+export const Tab: React.FC<TabProps> = ({ children }) => (
   <div className={styles.TabsContent}>{children}</div>
 );
diff --git a/client/src/components/Visualiser/VisualiserInterface/CreateLink.tsx b/client/src/components/Visualiser/VisualiserInterface/CreateLink.tsx
@@ -1,6 +1,7 @@
 import { Typography, Button, TextField, Alert, Snackbar, Collapse } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React, { useEffect, useContext, useState, useRef } from 'react';
+import { useEffect, useContext, useState, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
 import VisualiserContext from './VisualiserContext';
 
 const MenuButton = styled(Button)({
@@ -30,7 +31,7 @@ const CreateLink = () => {
   }, [showLink]);
 
   const makeLink = () => {
-    const pieces = location.pathname.split('/');
+    const pieces = useLocation().pathname.split('/');
 
     const rawDataString = controller.getData();
     let newData: string = '';

diff --git a/client/src/components/Visualiser/VisualiserInterface/CreateMenu.tsx b/client/src/components/Visualiser/VisualiserInterface/CreateMenu.tsx
@@ -13,13 +13,6 @@ const MenuButton = styled(Button)({
   },
 });
 
-const LoadingButton = styled(Button)({
-  backgroundColor: '#C81437',
-  '&:hover': {
-    backgroundColor: '#F05C79',
-  },
-});
-
 /**
  * Contains the ability to reset and create new data structures
  *

diff --git a/client/src/components/Visualiser/VisualiserInterface/Saving.tsx b/client/src/components/Visualiser/VisualiserInterface/Saving.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable */
+// TODO: Proper rework on this file => we want to re-design this anyway. I can't fix lint now because it will potentially change functioanlity of the file
 import { Box, Typography, Button, Alert, Snackbar, Collapse, TextField } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React, { useEffect, useRef, useState } from 'react';

diff --git a/client/src/store/globalStore.ts b/client/src/store/globalStore.ts
@@ -5,7 +5,7 @@ export interface GlobalState {
 }
 
 const useGlobalState = create<GlobalState>(() => ({
-  inDev: true,
+  inDev: false,
 }));
 
 export default useGlobalState;
diff --git a/client/src/visualiser-debugger/Component/Console/Console.tsx b/client/src/visualiser-debugger/Component/Console/Console.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable */
+// TODO: Proper rework on this file => we want to re-design this anyway. I can't fix lint now because it will potentially change functioanlity of the file
 import React, { Fragment, useRef, useState } from 'react';
 import { socket } from 'utils/socket';