issue #26: dockerfile (#36)

* issue #26: dockerfile

* corrections for npm run build

* issue #26: dockerfile is working

* issue #26: eof

* issue #26: markdown linting errros

* issue #26: markdown linting errors

* issue #26: ran npm run lint

* issue #26: fixed merge conflict

* issue #26: no tests for now

---------

Co-authored-by: JulesB <[email protected]>

.github/react-frontend-workflow.yml → .github/workflows/fertiscan-frontend-workflows.yml

@@ -1,4 +1,4 @@
-name: React frontend workflows
+name: Fertiscan frontend workflows
 
 on:
   pull_request:

Dockerfile

@@ -0,0 +1,34 @@
+FROM node:20.12.2-alpine AS build
+
+WORKDIR /code
+
+# Copy files
+COPY ./src ./src
+COPY ./public ./public
+COPY package.json .
+COPY package-lock.json .
+COPY tsconfig.json .
+COPY tsconfig.node.json .
+COPY vite.config.ts .
+COPY index.html .
+
+# Install npm at a specific version, dependencies, build, and run tests
+RUN npm install --include=dev
+RUN npm run build
+
+# Setup for production
+FROM node:20.12.2-alpine AS runtime
+
+# Install serve globally
+RUN npm install -g serve
+
+# Set working directory
+WORKDIR /app
+
+# Copy build artifacts from the build stage
+COPY --from=build /code/dist /app
+
+EXPOSE 3000
+
+# Serve your app
+ENTRYPOINT ["serve", "-s", "/app"]

README.md

@@ -1 +0,0 @@
-

README.old.md

@@ -1,15 +1,20 @@
 # React + TypeScript + Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This template provides a minimal setup to get React working in Vite with HMR
+and some ESLint rules.
 
 Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- [@vitejs/plugin-react](
+https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)
+uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)
+uses [SWC](https://swc.rs/) for Fast Refresh
 
 ## Expanding the ESLint configuration
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+If you are developing a production application, we recommend updating the
+configuration to enable type aware lint rules:
 
 - Configure the top-level `parserOptions` property like this:
 
@@ -25,6 +30,10 @@ export default {
 };
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Replace `plugin:@typescript-eslint/recommended` to
+`plugin:@typescript-eslint/recommended-type-checked` or
+`plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+- Install [eslint-plugin-react](
+https://github.com/jsx-eslint/eslint-plugin-react) and add
+`plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package.json

@@ -8,7 +8,8 @@
     "build": "tsc && vite build",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "echo \"No tests for now\""
   },
   "dependencies": {
     "@dts-stn/service-canada-design-system": "^1.67.3",

src/App.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import HomePage from "./Pages/HomePage/HomePage";
-import JsonPage from "./Pages/JsonPage/Json"
+import JsonPage from "./Pages/JsonPage/Json";
 import NoPage from "./Pages/NoPage/NoPage";
 import "./App.css";
 import Header from "./Components/Header/Header";
@@ -12,7 +12,7 @@ function App() {
       <Routes>
         <Route path="/">
           <Route index element={<HomePage />} />
-          <Route path="Json" element={<JsonPage/>}/>
+          <Route path="Json" element={<JsonPage />} />
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>

src/Components/DragDropFileInput/DragDropFileInput.css

@@ -64,4 +64,4 @@ input[type="file"] {
 
 .drag-drop-container{
   grid-area: a;
-}
+}

src/Components/DragDropFileInput/DragDropFileInput.tsx

@@ -8,12 +8,12 @@ interface FileInputProps {
 const DragDropFileInput: React.FC<FileInputProps> = ({ sendChange, file }) => {
   const [dragActive, setDragActive] = useState(false);
   const fileInput = useRef<null | HTMLInputElement>(null);
-  useEffect(()=>{
-    if(file==""){
+  useEffect(() => {
+    if (file == "") {
       const input = fileInput!.current as HTMLInputElement;
-      input.value="";
+      input.value = "";
     }
-  },[file])
+  }, [file]);
   const handleDrag = (event: React.DragEvent<HTMLLabelElement>) => {
     event.preventDefault();
     if (event.type === "dragover") {

src/Components/FileList/FileElement/FileElement.css

@@ -75,4 +75,4 @@
 
   .cross:after {
     transform: translate(-50%, -50%) rotate(-45deg);
-  }
+  }

src/Components/FileList/FileElement/FileElement.tsx

@@ -1,48 +1,60 @@
 import React, { useState, useEffect, useRef } from "react";
-import "./FileElement.css"
+import "./FileElement.css";
 interface FileElementProps {
   key: number;
   file: File;
   position: number;
-  onClick: (selected:boolean) => void; // Function to be called on click
-  onDelete: ()=>void;
+  onClick: (selected: boolean) => void; // Function to be called on click
+  onDelete: () => void;
 }
 
-const FileElement: React.FC<FileElementProps> = ({ file, position, onClick, onDelete }) => {
+const FileElement: React.FC<FileElementProps> = ({
+  file,
+  position,
+  onClick,
+  onDelete,
+}) => {
   const [fileUrl, setFileUrl] = useState("");
   const fileCard = useRef<null | HTMLDivElement>(null);
   useEffect(() => {
     const reader = new FileReader();
-    reader.onload = (e) => setFileUrl(e?.target?.result as string || "");
+    reader.onload = (e) => setFileUrl((e?.target?.result as string) || "");
     reader.readAsDataURL(file);
   }, [file]);
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault(); // Prevent default navigation
     const element = event.target as HTMLElement;
-    if(element.className !== ("cross")){
-      document.querySelectorAll(".file-element").forEach(div=>(div.id!=fileCard.current?.id && div.classList.remove("selected")))
-      if(fileCard.current?.classList.contains("selected")){
+    if (element.className !== "cross") {
+      document
+        .querySelectorAll(".file-element")
+        .forEach(
+          (div) =>
+            div.id != fileCard.current?.id && div.classList.remove("selected"),
+        );
+      if (fileCard.current?.classList.contains("selected")) {
         onClick?.(false);
         fileCard.current?.classList.remove("selected");
-      }else{
+      } else {
         onClick?.(true);
         fileCard.current?.classList.add("selected");
       }
     }
   };
 
-  const deleteImage = (event: React.MouseEvent<HTMLDivElement>)=>{
-    event.preventDefault()
+  const deleteImage = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
     onDelete();
-  }
+  };
 
   return (
-    <div ref={fileCard} className="file-element" id={"file_" + position} onClick={handleClick}>
-      <img
-        src={fileUrl}
-        alt={file.name}
-      />
+    <div
+      ref={fileCard}
+      className="file-element"
+      id={"file_" + position}
+      onClick={handleClick}
+    >
+      <img src={fileUrl} alt={file.name} />
       <p className="file-title black bold unselectable">{file.name}</p>
       <div className="cross" onClick={deleteImage}></div>
     </div>

src/Components/FileList/FileList.css

@@ -56,4 +56,3 @@
   .overlay.active {
     visibility: visible; /* Show overlay when an image is selected */
   }
-

src/Components/FileList/FileList.tsx

@@ -1,43 +1,48 @@
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";
 import "./FileList.css";
 import FileElement from "./FileElement/FileElement";
 
 interface FileListProps {
   files: File[];
-  onSelectedChange: (file:File|null)=>void;
-  propagateDelete: (file:File, wasShown:boolean)=>void;
+  onSelectedChange: (file: File | null) => void;
+  propagateDelete: (file: File, wasShown: boolean) => void;
 }
 
-const FileList: React.FC<FileListProps> = ({ files, onSelectedChange, propagateDelete}) => {
+const FileList: React.FC<FileListProps> = ({
+  files,
+  onSelectedChange,
+  propagateDelete,
+}) => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
-  const handleSelectFile = (file: File|null, index: number) => {
+  const handleSelectFile = (file: File | null) => {
     setSelectedFile(file);
-    onSelectedChange(file)
+    onSelectedChange(file);
   };
 
-  const handleDelete = (file: File, index:number)=>{
-    if(selectedFile===file){
-      setSelectedFile(null)
-      propagateDelete(file, false)
-    }else{
-      propagateDelete(file, files[files.length-1]===file);
+  const handleDelete = (file: File) => {
+    if (selectedFile === file) {
+      setSelectedFile(null);
+      propagateDelete(file, false);
+    } else {
+      propagateDelete(file, files[files.length - 1] === file);
     }
-
-  }
+  };
 
   return (
     <div className={`file-list ${files.length === 0 ? "empty" : ""}`}>
       <div className={`no-element ${files.length === 0 ? "active" : ""}`}>
         No element to show
       </div>
-      {[...files].map((file: File, index: number, array: File[]) => (
+      {[...files].map((file: File, index: number) => (
         <FileElement
           key={index}
           file={file}
           position={index}
-          onClick={(selected) => selected ? handleSelectFile(file, index): handleSelectFile(null,-1)}
-          onDelete={()=>handleDelete(file, index)}
+          onClick={(selected) =>
+            selected ? handleSelectFile(file) : handleSelectFile(null)
+          }
+          onDelete={() => handleDelete(file)}
         />
       ))}
     </div>

src/Pages/HomePage/HomePage.css

@@ -29,4 +29,4 @@
 .submit-btn{
     margin-top:50px;
     grid-area: c;
-}
+}