Merge branch 'main' into 80-implement-ts-appversion-package-for-versi…

…oning-in-nachet-frontend

.github/workflows/gh-pages-deployment.yml

@@ -2,34 +2,16 @@ name: Build and Deploy to GitHub Pages
 
 on:
   push:
-    branches:
-      - redat97/issue62
+  pull_request:
 
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    env:
-      NODE_VERSION: 18
-      PUBLISH_DIR: ./build
-
-    steps:
-    - name: Checkout Repository
-      uses: actions/checkout@v3
-
-    - uses: actions/setup-node@v3
-      with:
-        node-version: ${{ env.NODE_VERSION }}
+permissions:
+  contents: write
 
-    - name: Install Dependencies
-      run: npm install
-
-    - name: Build
-      run: npm run build
-      env:
-        REACT_APP_BACKEND_URL: ${{ secrets.REACT_APP_BACKEND_URL }}
-
-    - name: Deploy to GitHub Pages
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ${{ env.PUBLISH_DIR }}
+jobs:
+  deploy:
+    uses: ai-cfia/github-workflows/.github/workflows/workflow-gh-pages-deployment.yml@59-fix-github-pages-deployment-for-nachet-backend
+    with:
+      node-version: 18
+      publish-dir: ./build
+      cache-dependency-path: .
+    secrets: inherit

.github/workflows/vercel-deployment.yml

@@ -0,0 +1,22 @@
+name: Vercel Preview Deployment
+
+on:
+  push:
+  pull_request:
+
+jobs:
+
+  vercel-deployment-dev:
+    uses: ai-cfia/github-workflows/.github/workflows/workflow-vercel-deployment.yml@main
+    with:
+        project-name: 'nachet-frontend'
+        deployment-environment: 'dev'
+    secrets: inherit
+
+  vercel-deployment-uat:
+    if: github.ref == 'refs/heads/main'
+    uses: ai-cfia/github-workflows/.github/workflows/workflow-vercel-deployment.yml@main
+    with:
+        project-name: 'nachet-frontend'
+        deployment-environment: 'uat'
+    secrets: inherit

.gitignore

@@ -3,3 +3,4 @@ node_modules/**
 .vscode/settings.json
 .vscode/extensions.json
 .env
+.vercel

package.json

@@ -83,5 +83,9 @@
     "gh-pages": "^5.0.0",
     "prettier": "^3.0.0",
     "typescript": "^5.1.6"
+  },
+  "engines": {
+    "npm": "^9.8.1",
+    "node": "^18.16.0"
   }
 }

src/App.tsx

@@ -8,7 +8,13 @@ import Body from "./root/body";
 import Footer from "./components/footer";
 import Appbar from "./components/header/appbar";
 
-function App(): JSX.Element {
+interface AppProps {
+  basename?: string;
+}
+
+function App({
+  basename = process.env.REACT_APP_BASENAME ?? "/",
+}: AppProps): JSX.Element {
   const [windowSize, setWindowSize] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
@@ -81,7 +87,7 @@ function App(): JSX.Element {
   }, [windowSize]);
 
   return (
-    <Router>
+    <Router basename={basename}>
       <Fragment>
         <Navbar
           windowSize={windowSize}

src/pages/classifier/index.tsx

@@ -5,9 +5,10 @@ import {
   LeftContent,
   ColumnContainer,
   InfoContent,
+  WarningLabel,
 } from "./indexElements";
 import type Webcam from "react-webcam";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import MicroscopeFeed from "../../components/body/microscope_feed";
 import ClassificationResults from "../../components/body/classification_results";
 import ImageCache from "../../components/body/image_cache";
@@ -43,6 +44,7 @@ interface params {
   switchTable: boolean;
   setSwitchTable: React.Dispatch<React.SetStateAction<boolean>>;
   setCurDir: React.Dispatch<React.SetStateAction<string>>;
+  backendURL: string | null;
   windowSize: {
     width: number;
     height: number;
@@ -53,8 +55,40 @@ interface params {
 }
 
 const Classifier: React.FC<params> = (props) => {
+  const [alertMessage, setAlertMessage] = useState("");
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    // Set a delay before checking the backend URL
+    const delay = 3000; // Delay in milliseconds (3000ms = 3 seconds)
+
+    const timer = setTimeout(() => {
+      // Explicitly check for null, undefined, or empty string
+      if (
+        props.backendURL === null ||
+        props.backendURL === undefined ||
+        props.backendURL === ""
+      ) {
+        setIsError(true);
+        setAlertMessage("Backend URL is not set or is not working.");
+      } else {
+        setIsError(false);
+      }
+    }, delay);
+
+    // Clear the timer when the component unmounts or when the backendURL changes
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [props.backendURL]);
+
   return (
     <ColumnContainer>
+      <>
+        {isError && (
+          <>{isError && <WarningLabel>{alertMessage}</WarningLabel>}</>
+        )}
+      </>
       <RowContainer>
         <LeftContent>
           <MicroscopeFeed

src/pages/classifier/indexElements.tsx

@@ -77,3 +77,15 @@ export const RightContent = styled.div`
   z-index: 0;
   position: relative;
 `;
+
+export const WarningLabel = styled.div`
+  background: #ffd700; // Corrected to camelCase
+  width: 110%;
+  height: 2.5vh;
+  color: #ff4500;
+  margin-bottom: 10px; // Corrected to camelCase
+  margin-top: -6.4vh; // Corrected to camelCase
+  text-align: center; // Corrected to camelCase
+  font-size: 2vh; // Corrected to camelCase
+  padding: 0 1.9vw;
+`;