imported the gate and terminal related files to prep for the aviation map

src/gate/GateList.tsx

@@ -0,0 +1,143 @@
+import { Gate } from "models/Gate";
+import { Box, Card, Theme } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useMobile } from "hooks";
+//import MaterialTable from "material-table";
+//import { getTableIcons } from "common/ResponsiveTable";
+import { Terminal } from "models/Terminal";
+import { makeStyles } from "@mui/styles";
+
+interface Props {
+  gates: Gate[];
+  terminals: Terminal[];
+  useMobile: boolean;
+  //duplicateGate: (gate: Gate) => void;
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+    gridListTile: {
+      minHeight: "184px",
+      height: "auto !important",
+      width: "184px",
+      padding: 2
+    },
+    hidden: {
+      visibility: "hidden"
+    },
+    gateCard: {
+      marginBottom: 10,
+      paddingLeft: 15
+    }
+  }));
+
+export default function GateList(props: Props) {
+  const { gates, terminals } = props;
+  // const history = useHistory();
+  const navigate = useNavigate();
+  const isMobile = useMobile();
+  const classes = useStyles();
+  const [terminalMap, setTerminalMap] = useState<Map<string, string>>(new Map<string, string>());
+
+  const goToGate = (gate: Gate) => {
+    let path = "/terminals/" + gate.key;
+    navigate(path, { state: gate })
+  };
+
+  useEffect(() => {
+    let map = new Map<string, string>();
+    terminals.forEach(t => {
+      map.set(t.key, t.name);
+    });
+    setTerminalMap(map);
+  }, [terminals]);
+
+  const desktopView = () => {
+    return (<Box>Desktop table</Box>)
+    // return (
+    //   <MaterialTable
+    //     columns={[
+    //       {
+    //         title: "Gate",
+    //         field: "name",
+    //         headerStyle: {
+    //           fontWeight: 650,
+    //           fontSize: 20
+    //         }
+    //       },
+    //       {
+    //         title: "Terminals",
+    //         field: "settings.terminal",
+    //         headerStyle: {
+    //           fontWeight: 650,
+    //           fontSize: 20
+    //         },
+    //         render: rowData => terminalMap.get(rowData.terminal())
+    //       },
+    //       {
+    //         title: "Duct Type",
+    //         field: "settings.ductName",
+    //         headerStyle: {
+    //           fontWeight: 650,
+    //           fontSize: 20
+    //         }
+    //       },
+    //       {
+    //         title: "Duct Size(mm)",
+    //         field: "settings.ductDiameter",
+    //         headerStyle: {
+    //           fontWeight: 650,
+    //           fontSize: 20
+    //         }
+    //       },
+    //       {
+    //         title: "Duct Length(m)",
+    //         field: "settings.ductLength",
+    //         headerStyle: {
+    //           fontWeight: 650,
+    //           fontSize: 20
+    //         }
+    //       },
+    //       {
+    //         title: "PCA Unit",
+    //         field: "settings.pcaType",
+    //         headerStyle: {
+    //           fontWeight: 650,
+    //           fontSize: 20
+    //         }
+    //       }
+    //     ]}
+    //     data={gates}
+    //     icons={getTableIcons()}
+    //     onRowClick={(_, gate) => {
+    //       gate && goToGate(gate);
+    //     }}
+    //     title={""}
+    //     options={{
+    //       pageSize: 10
+    //     }}
+    //   />
+    // );
+  };
+
+  const mobileView = () => {
+    return (
+      <React.Fragment>
+        {gates.map((gate, i) => (
+          <Card
+            key={i}
+            className={classes.gateCard}
+            onClick={() => {
+              goToGate(gate);
+            }}>
+            <Box margin={2} fontSize={20} fontWeight={650}>
+              {gate.name}
+            </Box>
+          </Card>
+        ))}
+      </React.Fragment>
+    );
+  };
+
+  return isMobile || props.useMobile ? mobileView() : desktopView();
+}