re-worked the terminals page and gateList component for better use with ResponsiveTable

src/pages/Terminals.tsx

@@ -15,7 +15,6 @@ import {
 import { Terminal } from "models";
 import { useTerminalAPI, useGlobalState } from "providers";
 import React, { useCallback, useEffect, useState } from "react";
-import GateSettings from "gate/GateSettings";
 import PageContainer from "./PageContainer";
 import AddIcon from "@mui/icons-material/Add";
 import TerminalSettings from "terminal/TerminalSettings";
@@ -24,7 +23,6 @@ import EditIcon from "@mui/icons-material/Edit";
 import { blue, green, red } from "@mui/material/colors";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { useSnackbar, useUserAPI } from "hooks";
-import { Gate } from "models/Gate";
 import GateList from "gate/GateList";
 import { Scope } from "models";
 import { pond } from "protobuf-ts/pond";
@@ -34,7 +32,6 @@ import ObjectUsersIcon from "@mui/icons-material/AccountCircle";
 import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
 import ShareObject from "user/ShareObject";
 import RemoveSelfFromObject from "user/RemoveSelfFromObject";
-import AddGateFab from "gate/AddGateFab";
 import { makeStyles } from "@mui/styles";
 
 const parentTab = {
@@ -142,19 +139,12 @@ interface Props {
 }
 
 export default function Terminals(props: Props) {
-  const [loading, setLoading] = useState(false);
   const terminalAPI = useTerminalAPI();
   const [value, setValue] = useState(0);
   const [terminals, setTerminals] = useState<Terminal[]>([]);
-  const [gates, setGates] = useState<Gate[]>([]);
-  // map using the terminal key and the gates for that terminal
-  const [gateMap, setGateMap] = useState<Map<string, Gate[]>>(new Map<string, Gate[]>());
-  const [displayGates, setDisplayGates] = useState<Gate[]>([]);
-  const [gateDialog, setGateDialog] = useState(false);
   const classes = useStyles();
   const theme = useTheme();
   const [addTerminal, setAddTerminal] = useState(false);
-  const [tabClick, setTabClick] = useState(true);
   const [menuAnchorEl, setMenuAnchorEl] = useState<Element | null>(null);
   const [currentTerminal, setCurrentTerminal] = useState<Terminal>();
   const [removeTerminal, setRemoveTerminal] = useState(false);
@@ -184,44 +174,17 @@ export default function Terminals(props: Props) {
   useEffect(() => {
     if (props.terminal) {
       setCurrentTerminal(props.terminal);
-      setDisplayGates(gateMap.get(props.terminal.key) ?? []);
     }
-  }, [props.terminal, gateMap]);
+  }, [props.terminal]);
 
   const load = useCallback(() => {
-    console.log(loading)
-    if (loading) return;
-    console.log("terminal load")
-    setLoading(true);
-    terminalAPI
-      .listTerminalsAndGates(200, 0)
-      .then(resp => {
-        console.log(resp)
-        setTerminals(resp.data.terminals.map(a => Terminal.any(a)));
-        let allGates = resp.data.gates.map(t => Gate.any(t));
-        setGates(allGates);
-        let tMap: Map<string, Gate[]> = new Map<string, Gate[]>();
-        allGates.forEach(gate => {
-          let mapEntry = tMap.get(gate.terminal());
-          if (mapEntry) {
-            mapEntry.push(gate);
-          } else {
-            tMap.set(gate.terminal(), [gate]);
-          }
-          setGateMap(tMap);
-          setDisplayGates(allGates);
-        });
-      })
-      .catch(err => {
-        openSnack("There was a problem loading your terminals");
-      })
-      .finally(() => {
-        setLoading(false);
-      });
+    terminalAPI.listTerminals(200, 0, "asc", "name").then(resp => {
+      setTerminals(resp.data.terminals.map(a => Terminal.any(a)));
+    })
   }, [terminalAPI, openSnack]); //eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    console.log("load use")
+    //TODO: will need to figure out a way to prevent multiple api calls when loading the page
     load();
   }, [load]);
 
@@ -324,12 +287,13 @@ export default function Terminals(props: Props) {
   };
 
   const changeTabs = (newValue: number) => {
-    if (tabClick && newValue <= terminals.length) {
+    //TODO: change this to just change the selected tab
+    if (newValue <= terminals.length) {
       setValue(newValue);
       if (terminals[newValue - 1]) {
-        setDisplayGates(gateMap.get(terminals[newValue - 1].key) ?? []);
+        setCurrentTerminal(terminals[newValue -1])
       } else {
-        setDisplayGates(gates);
+        setCurrentTerminal(undefined)
       }
     }
   };
@@ -337,7 +301,7 @@ export default function Terminals(props: Props) {
   const gateDisplay = () => {
     return (
       <GateList
-        gates={displayGates}
+        currentTerminal={currentTerminal?.key}
         terminals={terminals}
         useMobile={props.terminal !== undefined}
       />
@@ -370,10 +334,9 @@ export default function Terminals(props: Props) {
                 <span>
                   <div className={classes.tabText}>{a.name}</div>
                   <MoreVert
-                    onMouseEnter={() => setTabClick(false)}
-                    onMouseLeave={() => setTabClick(true)}
                     className={classes.icon}
                     onClick={event => {
+                      event.stopPropagation()
                       let target = event.currentTarget;
                       setMenuAnchorEl(target);
                       setCurrentTerminal(terminals[index]);
@@ -465,22 +428,6 @@ export default function Terminals(props: Props) {
 
   return (
     <PageContainer>
-      <GateSettings
-        open={gateDialog}
-        close={newGate => {
-          if (newGate) {
-            if (newGate.terminal() !== "") {
-              let tMap = gateMap;
-              tMap.get(newGate.terminal())?.push(newGate);
-            }
-            let t = gates;
-            t.push(newGate);
-            setGates([...t]);
-          }
-          setGateDialog(false);
-        }}
-        terminals={terminals}
-      />
       <TerminalSettings
         open={addTerminal}
         closeDialog={newTerminal => {
@@ -498,12 +445,6 @@ export default function Terminals(props: Props) {
       {removeDialog()}
       {sharingDialogs()}
       {gateDisplay()}
-      <AddGateFab
-        onClick={() => {
-          setGateDialog(true);
-        }}
-        pulse={gates.length < 1}
-      />
     </PageContainer>
   );
 }