Merge pull request #1 from bluesatunsw/main

Fast forward to master
bluesatunsw · May 16, 2022 · 75479f1 · 75479f1
2 parents cb04251 + a6f93a1
commit 75479f1
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 81 deletions.
diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
@@ -3,15 +3,15 @@ name: Frontend
 on:
   push:
     paths:
-      - 'frontend-react/**'
+      - 'frontend/**'
   pull_request:
     paths:
-      - 'frontend-react/**'
+      - 'frontend/**'
 
 jobs:
 
-  frontend_lint_ts:
-    name: TS Lint
+  frontend_lint:
+    name: React Lint
     runs-on: ubuntu-latest
     steps:
       - name: Checkout commit
@@ -20,18 +20,18 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
 
       - name: Install Modules
-        working-directory: ./frontend-react
+        working-directory: ./frontend
         run: npm install
 
       - name: Run ESLint
-        working-directory: ./frontend-react
-        run: npm run lint-ts
+        working-directory: ./frontend
+        run: npm run lint
 
-  frontend_lint_html:
-    name: HTML Lint
+  frontend_build:
+    name: React Build
     runs-on: ubuntu-latest
     steps:
       - name: Checkout commit
@@ -40,54 +40,14 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
 
       - name: Install Modules
-        working-directory: ./frontend-react
-        run: npm install
-
-      - name: Run HTMLHint
-        working-directory: ./frontend-react
-        run: npm run lint-html 
-
-  frontend_lint_css:
-    name: CSS Lint
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout commit
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '14'
-
-      - name: Install Modules
-        working-directory: ./frontend-react
-        run: npm install
-
-      - name: Run Stylelint
-        working-directory: ./frontend-react
-        run: npm run lint-css 
-
-  frontend_build_ts:
-    name: TS Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout commit
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '14'
-
-      - name: Install Modules
-        working-directory: ./frontend-react
+        working-directory: ./frontend
         run: npm install
 
       - name: Run TSC
-        working-directory: ./frontend-react
+        working-directory: ./frontend
         run: npm run build
 
   frontend_lighthouse:
@@ -102,18 +62,18 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
 
       - name: Install Modules
-        working-directory: ./frontend-react
-        run: npm install && npm install -g @lhci/[email protected]
+        working-directory: ./frontend
+        run: npm install && npm install -g @lhci/[email protected] && npm install -g http-server
 
       - name: Build Website
-        working-directory: ./frontend-react
+        working-directory: ./frontend
         run: npm run build
 
       - name: Generate Report
-        working-directory: ./frontend-react
+        working-directory: ./frontend
         run:
           lhci autorun
         env:

diff --git a/frontend/.eslint.js b/frontend/.eslint.js
@@ -0,0 +1,9 @@
+module.exports = {
+    env: {
+      browser: true
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ]
+  } 
diff --git a/frontend/.lighthouserc.js b/frontend/.lighthouserc.js
@@ -1,17 +1,44 @@
 module.exports = {
-    ci: {
-      collect: {
-        "staticDistDir": "./"
-      },
-      assert: {
-        "preset": "lighthouse:no-pwa",
-        "assertions": {
-            "csp-xss": "off",
-            "unused-javascript": ["warn", {"maxNumericValue": 1}]
-        }
-      },
-      upload: {
-        "target": "temporary-public-storage"
+  "ci": {
+    "collect": {
+      "url": [
+        "http://127.0.0.1:4000"
+      ],
+      "startServerCommand": "http-server ./build -p 4000 -g",
+      "startServerReadyPattern": "Available on",
+      "numberOfRuns": 3,
+      "settings": {
+        "chromeFlags": "--no-sandbox",
+        "formFactor": "desktop",
+        "throttling": {
+          "rttMs": 40,
+          "throughputKbps": 10 * 1024,
+          "cpuSlowdownMultiplier": 1,
+          "requestLatencyMs": 0,
+          "downloadThroughputKbps": 0,
+          "uploadThroughputKbps": 0,
+        },
+        "screenEmulation": {
+          "mobile": false,
+          "width": 1350,
+          "height": 940,
+          "deviceScaleFactor": 1,
+          "disabled": false,
+        },
+        "emulatedUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Safari/537.36 Chrome-Lighthouse"
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    },
+    "assert": {
+      "preset": "lighthouse:no-pwa",
+      "assertions": {
+        "csp-xss": "off",
+        "unused-javascript": ["warn", {"maxNumericValue": 1}],
+        "uses-text-compression": "off",
+        "uses-long-cache-ttl": "off"
       }
     }
-  };
+  }
+};
diff --git a/frontend/.stylelintrc.json b/frontend/.stylelintrc.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.4",
     "@mui/styled-engine-sc": "^5.6.1",
@@ -26,7 +28,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint -c .eslint.js src/**/*.{ts,tsx}"
   },
   "eslintConfig": {
     "extends": [
@@ -48,6 +51,8 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.25",
+    "eslint": "^8.15.0",
+    "eslint-plugin-react": "^7.29.4",
     "react-router-dom": "^6.3.0"
   }
-}
+}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -34,13 +34,15 @@ const ButtonGroup = styled.div`
 
 interface SideBarButtonProps {
   bgColor: string;
+  Color: string;
 }
 
 const SidebarButton = styled(Button) <SideBarButtonProps>`
   && {
     width: 160px;
     /* variant: contained; */
     background-color: ${props => props.bgColor};
+    color: ${props => props.Color};
     border-radius: 20px;
     text-transform: none;
   }
@@ -62,15 +64,16 @@ const SideBar: React.FC<SideBarProps> = ({ setWhatsUpModal, onFindId, onCalcEn,
       </SidebarTitle>
       <ButtonFlex>
         <ButtonGroup>
-          <SidebarButton bgColor="#F88282" onClick={(e) => {setWhatsUpModal(true)}}>
-            What's up
+
+          <SidebarButton bgColor="#F88282" Color="#000000" onClick={(e) => {setWhatsUpModal(true)}}>
+            What&apos;s up
           </SidebarButton>
-          <SidebarButton bgColor="#F88282" onClick={(e) => { setTargetModal(true) }}>
+          <SidebarButton bgColor="#F88282" Color="#000000" onClick={(e) => { setTargetModal(true) }}>
             Find by ID
           </SidebarButton>
         </ButtonGroup>
         <ButtonGroup>
-          <SidebarButton bgColor="#82A3F8" onClick={onCalcEn}>
+          <SidebarButton bgColor="#82A3F8" Color="#000000" onClick={onCalcEn}>
             Calculate encounter
           </SidebarButton>
         </ButtonGroup>