Feature: MASSIVE REAFACTOR :) Tailwind css in and working, project se…

…t up correctly finally in react, all package management now works as intended and many other smaller tweeks
bluesatunsw · Oct 30, 2023 · 17efc65 · 17efc65
1 parent b547ae7
commit 17efc65
Show file tree

Hide file tree

Showing 56 changed files with 66,573 additions and 12,223 deletions.
diff --git a/frontend/.gitignore → frontend-react-tsx/.gitignore b/frontend/.gitignore → frontend-react-tsx/.gitignore
diff --git a/frontend/README.md → frontend-react-tsx/README.md b/frontend/README.md → frontend-react-tsx/README.md
diff --git a/frontend-react-tsx/package-lock.json b/frontend-react-tsx/package-lock.json
diff --git a/frontend/package.json → frontend-react-tsx/package.json b/frontend/package.json → frontend-react-tsx/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "frontend-new",
+  "name": "frontend-react-tsx",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

diff --git a/frontend/public/favicon.ico → frontend-react-tsx/public/favicon.ico b/frontend/public/favicon.ico → frontend-react-tsx/public/favicon.ico
diff --git a/frontend/public/index.html → frontend-react-tsx/public/index.html b/frontend/public/index.html → frontend-react-tsx/public/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#142449" />
+    <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Bluesat groundstation frontend v1"
+      content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Groundstation</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/public/logo192.png → frontend-react-tsx/public/logo192.png b/frontend/public/logo192.png → frontend-react-tsx/public/logo192.png
diff --git a/frontend/public/logo512.png → frontend-react-tsx/public/logo512.png b/frontend/public/logo512.png → frontend-react-tsx/public/logo512.png
diff --git a/frontend/public/manifest.json → frontend-react-tsx/public/manifest.json b/frontend/public/manifest.json → frontend-react-tsx/public/manifest.json
diff --git a/frontend/public/robots.txt → frontend-react-tsx/public/robots.txt b/frontend/public/robots.txt → frontend-react-tsx/public/robots.txt
diff --git a/frontend-react-tsx/src/App.css b/frontend-react-tsx/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend-react-tsx/src/App.test.tsx b/frontend-react-tsx/src/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/frontend/src/App.tsx → frontend-react-tsx/src/App.tsx b/frontend/src/App.tsx → frontend-react-tsx/src/App.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Plot from 'react-plotly.js';
 import './App.css';
 
-import Home from './pages/Home'
+import Home from './Home'
 
 import { useWebsocket } from './Websocket';
+import Plot from 'react-plotly.js';
 
 const App: React.FC = () => {
 
@@ -13,6 +13,7 @@ const App: React.FC = () => {
   return (
     <div className="App">
       {/* <p>hello</p> */}
+      <h1 className='text-3xl font-bold underline'>TEST</h1>
       {state === undefined && <p>State not yet initialised</p>}
       {/* {state && <p>{`${JSON.stringify(state)}`}</p>} */}
       {<Home/>}

diff --git a/frontend/src/Groundstation.ts → frontend-react-tsx/src/Groundstation.ts b/frontend/src/Groundstation.ts → frontend-react-tsx/src/Groundstation.ts
diff --git a/frontend/src/pages/Home.tsx → frontend-react-tsx/src/Home.tsx b/frontend/src/pages/Home.tsx → frontend-react-tsx/src/Home.tsx
@@ -1,22 +1,22 @@
 import React, { useState } from 'react';
-import Sidebar from '../components/Sidebar';
-import { Button, Dialog, DialogContent, Divider, Snackbar } from "@mui/material"
+import { Button, Dialog, DialogContent, Divider, Grid, Snackbar } from "@mui/material"
 import type { gps_pos } from '../types/hardwareTypes';
 import type { targetSat } from '../types/targetSat';
-import LocationModal from '../components/LocationModal';
 import {
     n2yo_visual_passes, n2yo_radio_passes,
     n2yo_get_visual_passes, n2yo_get_radio_passes
 } from '../types/n2yotypes';
-import { getRadioPasses, getVisualPasses } from '../logic/backend_req';
-import SelectTargetModal from '../components/SelectTargetModal';
-import WhatsUpModal from '../components/WhatsUpModal/WhatsUpModal';
-import Grid from '@mui/material/Grid';
-import EncounterSub from '../components/EncounterSub/EncounterSub';
-import MapSub from '../components/MapSub/MapSub';
-import MonitorSub from '../components/MonitorSub/MonitorSub';
-import LogSub from '../components/LogSub/LogSub';
-import { sendAction, useWebsocket } from '../Websocket';
+import { sendAction, useWebsocket } from './Websocket';
+import SelectTargetModal from './components/SelectTargetModal';
+import WhatsUpModal from './components/WhatsUpModal/WhatsUpModal';
+import EncounterSub from './components/EncounterSub/EncounterSub';
+import MapSub from './components/MapSub/MapSub';
+import MonitorSub from './components/MonitorSub/MonitorSub';
+import LoggingSub from './components/LogSub/LogSub';
+import LocationModal from './components/LocationModal';
+import SideBar from './components/Sidebar';
+import { getRadioPasses, getVisualPasses } from './logic/backend_req';
+
 
 
 const Index: React.FC = () => {
@@ -115,6 +115,8 @@ const Index: React.FC = () => {
             export interface SelectSatellite {
                 satellite: Satellite,
             } */}
+
+            <h1 className="text-3xl font-bold underline">TEST WITH TAILWIND</h1>
 
 
 
@@ -164,7 +166,7 @@ const Index: React.FC = () => {
             {/* Dashboard layout */}
             <Grid container spacing={1} xs={12} sx={{ margin: "20px", width: "100%" }}>
                 <Grid item xs={12}>
-                    <Sidebar setWhatsUpModal={setWhatsUpModal} onFindId={findId}
+                    <SideBar setWhatsUpModal={setWhatsUpModal} onFindId={findId}
                         setTargetModal={setTargetModal} onCalcEn={calcEncounter} />
                     <Divider sx={{ margin: "10px" }} />
                 </Grid>
@@ -178,7 +180,7 @@ const Index: React.FC = () => {
                     <MonitorSub tab={monitorTab} setTab={setMonitorTab} connected={beConnected} setConnected={setBeConnected} location={loc} setLocModal={setLocModal} />
                 </Grid>
                 <Grid item xs={4} sx={{ height: "50%" }}>
-                    <LogSub />
+                    <LoggingSub />
                 </Grid>
             </Grid>
         </div>

diff --git a/frontend/src/State.ts → frontend-react-tsx/src/State.ts b/frontend/src/State.ts → frontend-react-tsx/src/State.ts
diff --git a/frontend/src/Websocket.ts → frontend-react-tsx/src/Websocket.ts b/frontend/src/Websocket.ts → frontend-react-tsx/src/Websocket.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import {State, StateAction} from "./State"
 import {applyPatch, Operation} from "fast-json-patch"
+import { State, StateAction } from "./State";
 interface Patch {
     type: "Patch";
     ops: Operation[]; // from fast-json-patch

diff --git a/frontend/src/components/Common.tsx → frontend-react-tsx/src/components/Common.tsx b/frontend/src/components/Common.tsx → frontend-react-tsx/src/components/Common.tsx
diff --git a/frontend/src/components/Common/Clock.tsx → ...react-tsx/src/components/Common/Clock.tsx b/frontend/src/components/Common/Clock.tsx → ...react-tsx/src/components/Common/Clock.tsx
diff --git a/...ounterSub/EncounterInfo/EncounterInfo.tsx → ...ounterSub/EncounterInfo/EncounterInfo.tsx b/...ounterSub/EncounterInfo/EncounterInfo.tsx → ...ounterSub/EncounterInfo/EncounterInfo.tsx
@@ -4,8 +4,9 @@
 
 import {useEffect} from 'react';
 import { Grid, Table, TableBody, TableCell, TableContainer, TableRow, Typography } from "@mui/material"
-import { n2yo_radio_passes, n2yo_visual_passes } from '../../../types/n2yotypes';
+
 import UTCtoD from '../../../logic/utility';
+import { n2yo_radio_passes, n2yo_visual_passes } from '../../../../types/n2yotypes';
 
 
 

diff --git a/.../components/EncounterSub/EncounterSub.tsx → .../components/EncounterSub/EncounterSub.tsx b/.../components/EncounterSub/EncounterSub.tsx → .../components/EncounterSub/EncounterSub.tsx
@@ -4,10 +4,10 @@
 
 import React from 'react';
 import { Card, CardContent, Divider, Grid, Stack } from "@mui/material"
-import { targetSat } from '../../types/targetSat';
-import { n2yo_radio_passes, n2yo_visual_passes } from '../../types/n2yotypes';
 import TargetInfo from './TargetInfo/TargetInfo';
 import EncounterInfo from './EncounterInfo/EncounterInfo';
+import { n2yo_radio_passes, n2yo_visual_passes } from '../../../types/n2yotypes';
+import { targetSat } from '../../../types/targetSat';
 
 interface EncounterSubProps {
     sat: targetSat,

diff --git a/...ts/EncounterSub/TargetInfo/TargetInfo.tsx → ...ts/EncounterSub/TargetInfo/TargetInfo.tsx b/...ts/EncounterSub/TargetInfo/TargetInfo.tsx → ...ts/EncounterSub/TargetInfo/TargetInfo.tsx
@@ -3,13 +3,13 @@
 // Matt
 
 import React from 'react';
-import type { targetSat } from '../../../types/targetSat';
 import { Grid, Typography } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableRow from '@mui/material/TableRow';
+import { targetSat } from '../../../../types/targetSat';
 
 interface TargetInfoProps {
     sat: targetSat

diff --git a/frontend/src/components/LocationModal.tsx → ...eact-tsx/src/components/LocationModal.tsx b/frontend/src/components/LocationModal.tsx → ...eact-tsx/src/components/LocationModal.tsx
@@ -7,11 +7,12 @@
 // implementing acquisition asynchronously.
 
 import { Button, TextField } from '@mui/material';
-import { gps_pos } from '../types/hardwareTypes';
+
 import React from 'react';
 import styled from '@emotion/styled';
 import Stack from "@mui/material/Stack";
 import { Container, Body } from './Common';
+import { gps_pos } from '../../types/hardwareTypes';
 
 
 const Field = styled.div`

diff --git a/frontend/src/components/LogSub/LogSub.tsx → ...eact-tsx/src/components/LogSub/LogSub.tsx b/frontend/src/components/LogSub/LogSub.tsx → ...eact-tsx/src/components/LogSub/LogSub.tsx
diff --git a/frontend/src/components/MapSub/MapSub.tsx → ...eact-tsx/src/components/MapSub/MapSub.tsx b/frontend/src/components/MapSub/MapSub.tsx → ...eact-tsx/src/components/MapSub/MapSub.tsx
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { Card, CardContent, Grid } from "@mui/material"
-import { targetSat } from '../../types/targetSat';
+import { targetSat } from '../../../types/targetSat';
 import Clock from '../Common/Clock';
 
 interface MapSubProps {

diff --git a/.../src/components/MonitorSub/MonitorSub.tsx → .../src/components/MonitorSub/MonitorSub.tsx b/.../src/components/MonitorSub/MonitorSub.tsx → .../src/components/MonitorSub/MonitorSub.tsx
@@ -8,8 +8,8 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import BackendMonitor from './SystemInfo/BackendMonitor/BackendMonitor';
 import SysLocation from './SystemInfo/SysLocation';
-import { gps_pos } from '../../types/hardwareTypes';
 import Tracking from './Tracking/Tracking';
+import { gps_pos } from '../../../types/hardwareTypes';
 
 interface MonitorSubProps {
     location: gps_pos,

diff --git a/...Info/BackendMonitor/BackendConnection.tsx → ...Info/BackendMonitor/BackendConnection.tsx b/...Info/BackendMonitor/BackendConnection.tsx → ...Info/BackendMonitor/BackendConnection.tsx
@@ -5,8 +5,8 @@
 
 import React, { useEffect } from 'react';
 import { Stack, Typography } from "@mui/material"
-import { getStatus } from '../../../../logic/backend_req'
-import type { backend_status } from '../../../../types/hardwareTypes';
+import { backend_status } from '../../../../../types/hardwareTypes';
+import { getStatus } from '../../../../logic/backend_req';
 
 interface Props {
     connected: boolean,

diff --git a/...temInfo/BackendMonitor/BackendMonitor.tsx → ...temInfo/BackendMonitor/BackendMonitor.tsx b/...temInfo/BackendMonitor/BackendMonitor.tsx → ...temInfo/BackendMonitor/BackendMonitor.tsx
@@ -5,7 +5,6 @@
 
 import { Button, Grid, Stack, TextField, Typography } from '@mui/material';
 import React from 'react';
-import { backend_setPort } from '../../../../logic/backend_req'
 import BackendConnection from './BackendConnection';
 
 
@@ -44,4 +43,8 @@ const BackendMonitor: React.FC<Props> = ({ connected, setConnected }) => {
     )
 }
 
-export default BackendMonitor;
+export default BackendMonitor;
+
+function backend_setPort(port: number) {
+    throw new Error('Function not implemented.');
+}
diff --git a/...nts/MonitorSub/SystemInfo/SysLocation.tsx → ...nts/MonitorSub/SystemInfo/SysLocation.tsx b/...nts/MonitorSub/SystemInfo/SysLocation.tsx → ...nts/MonitorSub/SystemInfo/SysLocation.tsx
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { Button, Card, CardActions, CardContent, Grid, Typography } from "@mui/material"
-import { gps_pos } from '../../../types/hardwareTypes';
+import { gps_pos } from '../../../../types/hardwareTypes';
 import Clock from '../../Common/Clock';
 interface SysLocationProps {
     location: gps_pos;

diff --git a/...mponents/MonitorSub/Tracking/Tracking.tsx → ...mponents/MonitorSub/Tracking/Tracking.tsx b/...mponents/MonitorSub/Tracking/Tracking.tsx → ...mponents/MonitorSub/Tracking/Tracking.tsx
diff --git a/...tend/src/components/SelectTargetModal.tsx → ...-tsx/src/components/SelectTargetModal.tsx b/...tend/src/components/SelectTargetModal.tsx → ...-tsx/src/components/SelectTargetModal.tsx
@@ -7,12 +7,12 @@
 // implementing acquisition asynchronously.
 
 import { Button, TextField, Card, CardContent, Typography } from '@mui/material';
-import { gps_pos } from '../types/hardwareTypes';
 import React from 'react';
 import styled from '@emotion/styled';
 import Stack from "@mui/material/Stack";
 import { Container, Body } from './Common';
-import { targetSat } from '../types/targetSat';
+import { targetSat } from '../../types/targetSat';
+import { gps_pos } from '../../types/hardwareTypes';
 import { getPositions } from '../logic/backend_req';
 
 

diff --git a/frontend/src/components/Sidebar.tsx → ...tend-react-tsx/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx → ...tend-react-tsx/src/components/Sidebar.tsx
diff --git a/...d/src/components/WhatsUpModal/Category.ts → ...x/src/components/WhatsUpModal/Category.ts b/...d/src/components/WhatsUpModal/Category.ts → ...x/src/components/WhatsUpModal/Category.ts
diff --git a/...d/src/components/WhatsUpModal/SatChip.tsx → ...x/src/components/WhatsUpModal/SatChip.tsx b/...d/src/components/WhatsUpModal/SatChip.tsx → ...x/src/components/WhatsUpModal/SatChip.tsx
@@ -7,8 +7,8 @@
 
 import { Avatar, Chip, Tooltip } from '@mui/material';
 import React from 'react';
-import { n2yo_above } from '../../types/n2yotypes';
 import { deepOrange, green } from '@mui/material/colors';
+import { n2yo_above } from '../../../types/n2yotypes';
 
 interface SatChipProps {
     sat : n2yo_above,

diff --git a/...c/components/WhatsUpModal/SatSelector.tsx → ...c/components/WhatsUpModal/SatSelector.tsx b/...c/components/WhatsUpModal/SatSelector.tsx → ...c/components/WhatsUpModal/SatSelector.tsx
@@ -5,8 +5,8 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { n2yo_above } from '../../types/n2yotypes';
 import SatChip from './SatChip';
+import { n2yo_above } from '../../../types/n2yotypes';
 
 
 

diff --git a/.../components/WhatsUpModal/WhatsUpModal.tsx → .../components/WhatsUpModal/WhatsUpModal.tsx b/.../components/WhatsUpModal/WhatsUpModal.tsx → .../components/WhatsUpModal/WhatsUpModal.tsx
@@ -11,9 +11,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 import SatSelector from './SatSelector';
 import { categories } from './Category'
-import { n2yo_above } from '../../types/n2yotypes';
-import { gps_pos } from '../../types/hardwareTypes';
-import type { targetSat } from '../../types/targetSat';
+import { gps_pos } from '../../../types/hardwareTypes';
+import { n2yo_above } from '../../../types/n2yotypes';
+import { targetSat } from '../../../types/targetSat';
 import { getPositions, getWhatsUp } from '../../logic/backend_req';
 
 const Container = styled.div`

diff --git a/frontend-react-tsx/src/index.css b/frontend-react-tsx/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/frontend/src/index.tsx → frontend-react-tsx/src/index.tsx b/frontend/src/index.tsx → frontend-react-tsx/src/index.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-
-ReactDOM.render(
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/frontend/src/logic/backend_req.ts → frontend-react-tsx/src/logic/backend_req.ts b/frontend/src/logic/backend_req.ts → frontend-react-tsx/src/logic/backend_req.ts
@@ -2,8 +2,9 @@
 // Matt Rossouw (omeh-a)
 // 05/2022
 
-import { gps_pos, backend_status } from "../types/hardwareTypes";
-import { n2yo_get_radio_passes, n2yo_get_visual_passes, n2yo_positions, n2yo_whats_up } from "../types/n2yotypes";
+import { gps_pos } from "../../types/hardwareTypes";
+import { n2yo_get_radio_passes, n2yo_get_visual_passes, n2yo_positions, n2yo_whats_up } from "../../types/n2yotypes";
+
 
 // Parameters set by frontend to communicate with backend
 let port: number = 4999

diff --git a/frontend/src/logic/utility.ts → frontend-react-tsx/src/logic/utility.ts b/frontend/src/logic/utility.ts → frontend-react-tsx/src/logic/utility.ts
diff --git a/frontend-react-tsx/src/logo.svg b/frontend-react-tsx/src/logo.svg
diff --git a/frontend/src/react-app-env.d.ts → frontend-react-tsx/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts → frontend-react-tsx/src/react-app-env.d.ts
diff --git a/frontend/src/reportWebVitals.ts → frontend-react-tsx/src/reportWebVitals.ts b/frontend/src/reportWebVitals.ts → frontend-react-tsx/src/reportWebVitals.ts
diff --git a/frontend-react-tsx/src/setupTests.ts b/frontend-react-tsx/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
diff --git a/frontend-react-tsx/tailwind.config.js b/frontend-react-tsx/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/frontend/tsconfig.json → frontend-react-tsx/tsconfig.json b/frontend/tsconfig.json → frontend-react-tsx/tsconfig.json
@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "react-jsx"
   },
   "include": [
     "src"

diff --git a/frontend/src/types/hardwareTypes.ts → frontend-react-tsx/types/hardwareTypes.ts b/frontend/src/types/hardwareTypes.ts → frontend-react-tsx/types/hardwareTypes.ts
diff --git a/frontend/src/types/n2yotypes.ts → frontend-react-tsx/types/n2yotypes.ts b/frontend/src/types/n2yotypes.ts → frontend-react-tsx/types/n2yotypes.ts
diff --git a/frontend/src/types/targetSat.ts → frontend-react-tsx/types/targetSat.ts b/frontend/src/types/targetSat.ts → frontend-react-tsx/types/targetSat.ts