Updated CI/CD Tests

.github/workflows/deployment.yml

@@ -1,28 +1,49 @@
 name: Deployment
 
 on:
-  # Uncomment once we are ready to deploy 
-  #push:
-  #  branches:
-  #    - main
   workflow_dispatch:
+    # Uncomment once we are ready to deploy 
+    #push:
+    #  branches:
+    #    - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
   deploy-web:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout workspace
-      uses: actions/checkout@v4
-    - name: Update docker image
-      uses: appleboy/[email protected]
-      with:
-        host: ${{ secrets.SSH_HOST }}
-        username: ${{ secrets.SSH_USERNAME }}
-        key: ${{ secrets.SSH_KEY }}
-        script: |
-          [ ! -d "sailbot_workspace" ] && git clone https://github.com/UBCSailbot/sailbot_workspace.git
-          cd sailbot_workspace
-          git pull
-          touch src/website/.env.local # Adds a local environment file to VM to override env vars in .env.production  
-          echo NEXT_PUBLIC_SERVER_HOST=http://${{ secrets.SSH_HOST }} >> src/website/.env.local
-          docker compose -f .devcontainer/docker-compose.yml -f .devcontainer/website/docker-compose.website.prod.yml up --force-recreate -d --build --remove-orphans
+      - name: Checkout workspace
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+
+      - name: Debug - List directory structure
+        run: |
+          ls -R
+
+      - name: Install dependencies and run lint checks
+        run: |
+          cd src/website
+          npm ci
+          npm run lint
+
+      - name: Build website
+        run: |
+          cd src/website
+          npm run build
+
+      - name: Update docker image
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USERNAME }}
+          key: ${{ secrets.SSH_KEY }}
+          script: |
+            [ ! -d "sailbot_workspace" ] && git clone https://github.com/UBCSailbot/sailbot_workspace.git
+            cd sailbot_workspace
+            git pull
+            touch src/website/.env.local # Adds a local environment file to VM to override env vars in .env.production  
+            echo NEXT_PUBLIC_SERVER_HOST=http://${{ secrets.SSH_HOST }} >> src/website/.env.local
+            docker compose -f .devcontainer/docker-compose.yml -f .devcontainer/website/docker-compose.website.prod.yml up --force-recreate -d --build --remove-orphans

src/website/lib/dotenv.js

@@ -17,4 +17,4 @@ module.exports = () => {
   };
 };
 
-export {}
+export {};

src/website/lib/redux/middleware.ts

@@ -15,6 +15,6 @@ const middleware: Redux.Middleware[] = [
     },
     predicate: () => typeof window !== 'undefined',
   }),
-]
+];
 
 export { middleware };

src/website/pages/index.tsx

@@ -4,7 +4,7 @@ import { CircularProgress, Modal } from '@mui/material';
 import Header from '@/views/components/Header/Header';
 import styles from './style.module.css';
 import PolarisContainer from '@/views/components/Polaris/PolarisContainer';
-import { clearLogsPeriodically } from '@/lib/redux/logUtils'
+import { clearLogsPeriodically } from '@/lib/redux/logUtils';
 
 const MapsContainer = dynamic(() => import('@/views/MapsContainer'), {
   loading: () => <CircularProgress className={styles.loadingSpinner} />,

src/website/tsconfig.json

@@ -28,7 +28,10 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "hooks/useSessionState.js"
-, "lib/dotenv.js", "models/helper/parser.js", "utils/DownloadData.js"  ],
+    "hooks/useSessionState.js",
+    "lib/dotenv.js",
+    "models/helper/parser.js",
+    "utils/DownloadData.js"
+  ],
   "exclude": ["node_modules"]
 }

src/website/views/DashboardContainer.tsx

@@ -3,7 +3,11 @@ import { connect } from 'react-redux';
 import UPlotLineChartComponent from './components/LineChart/UPlotLineChart';
 import { GPS, GPSState } from '@/stores/GPS/GPSTypes';
 import { Batteries, BatteriesState } from '@/stores/Batteries/BatteriesTypes';
-import { WindSensor, WindSensors, WindSensorsState } from '@/stores/WindSensors/WindSensorsTypes';
+import {
+  WindSensor,
+  WindSensors,
+  WindSensorsState,
+} from '@/stores/WindSensors/WindSensorsTypes';
 import { DataFilterState } from '@/stores/DataFilter/DataFilterTypes';
 import UPlotMultiLineChartComponent from './components/LineChart/UPlotMultiLineChart';
 
@@ -219,10 +223,10 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
 
     if (
       timestampISO >=
-      // @ts-ignore
+        // @ts-ignore
         this._parseISOString(this.props.dataFilter.timestamps.startDate) &&
       timestampISO <=
-      // @ts-ignore
+        // @ts-ignore
         this._parseISOString(this.props.dataFilter.timestamps.endDate)
     ) {
       return true;

src/website/views/MapsContainer.tsx

@@ -68,10 +68,10 @@ class MapsContainer extends React.PureComponent<MapsContainerProps> {
 
     if (
       timestampISO >=
-      // @ts-ignore
+        // @ts-ignore
         this._parseISOString(this.props.dataFilter.timestamps.startDate) &&
       timestampISO <=
-      // @ts-ignore
+        // @ts-ignore
         this._parseISOString(this.props.dataFilter.timestamps.endDate)
     ) {
       return true;
@@ -125,7 +125,7 @@ class MapsContainer extends React.PureComponent<MapsContainerProps> {
         longitude: 999,
         speed: 999,
         heading: 999,
-        timestamp: new Date().toISOString()
+        timestamp: new Date().toISOString(),
       };
     }
     return gpsdata.at(-1);

src/website/views/components/DropDown/DropdownMenu.tsx

@@ -28,7 +28,12 @@ interface SortableGraphProps {
   setOrder: any;
 }
 
-const SortableGraph = ({ id, children, order, setOrder }: SortableGraphProps) => {
+const SortableGraph = ({
+  id,
+  children,
+  order,
+  setOrder,
+}: SortableGraphProps) => {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({
       id,

src/website/views/components/LineChart/UPlotLineChart.tsx

@@ -36,7 +36,12 @@ export default class UPlotLineChartComponent extends React.Component<
           show: true,
           spanGaps: false,
           label: 'Time',
-          value: (self: any, rawValue: any, xValuesIndex: any, currentVal: any) => {
+          value: (
+            self: any,
+            rawValue: any,
+            xValuesIndex: any,
+            currentVal: any,
+          ) => {
             if (currentVal == null) {
               let xValues = self.data[xValuesIndex];
               let xValue = fmtDate(tzDate(xValues[xValues.length - 1]));
@@ -52,7 +57,12 @@ export default class UPlotLineChartComponent extends React.Component<
           show: true,
           spanGaps: false,
           label: this.props.label,
-          value: (self: any, rawValue: any, yValuesIndex: any, currentVal: any) => {
+          value: (
+            self: any,
+            rawValue: any,
+            yValuesIndex: any,
+            currentVal: any,
+          ) => {
             if (currentVal == null) {
               let yValues = self.data[yValuesIndex];
               let yValue = yValues[yValues.length - 1]?.toFixed(2);

src/website/views/components/LineChart/UPlotMultiLineChart.tsx

@@ -37,7 +37,12 @@ export default class UPlotMultiLineChartComponent extends React.Component<
           show: true,
           spanGaps: false,
           label: 'Time',
-          value: (self: any, rawValue: any, xValuesIndex: any, currentVal: any) => {
+          value: (
+            self: any,
+            rawValue: any,
+            xValuesIndex: any,
+            currentVal: any,
+          ) => {
             if (currentVal == null) {
               let xValues = self.data[xValuesIndex];
               let xValue = fmtDate(tzDate(xValues[xValues.length - 1]));
@@ -53,7 +58,12 @@ export default class UPlotMultiLineChartComponent extends React.Component<
           show: true,
           spanGaps: false,
           label: this.props.labelOne,
-          value: (self: any, rawValue: any, yValuesIndex: any, currentVal: any) => {
+          value: (
+            self: any,
+            rawValue: any,
+            yValuesIndex: any,
+            currentVal: any,
+          ) => {
             if (currentVal == null) {
               let yValues = self.data[yValuesIndex];
               let yValue = yValues[yValues.length - 1]?.toFixed(2);
@@ -69,7 +79,12 @@ export default class UPlotMultiLineChartComponent extends React.Component<
           show: true,
           spanGaps: false,
           label: this.props.labelTwo,
-          value: (self: any, rawValue: any, yValuesIndex: any, currentVal: any) => {
+          value: (
+            self: any,
+            rawValue: any,
+            yValuesIndex: any,
+            currentVal: any,
+          ) => {
             if (currentVal == null) {
               let yValues = self.data[yValuesIndex];
               let yValue = yValues[yValues.length - 1]?.toFixed(2);

src/website/views/components/TimestampFilter/TimestampBtn.tsx

@@ -36,8 +36,8 @@ const TimestampBtn = ({ gps, dataFilter }: TimestampFilterBtnProps) => {
         } to ${
           dataFilter.timestamps.endDate
             ? fmtDate(tzDate(parseISOString(dataFilter.timestamps.endDate)))
-            // @ts-ignore
-            : fmtDate(tzDate(parseISOString(gps.data.at(-1).timestamp)))
+            : // @ts-ignore
+              fmtDate(tzDate(parseISOString(gps.data.at(-1).timestamp)))
         }`}
       </div>
       <div