integrated frontend & backend for logbooks

backend/index.js

@@ -9,7 +9,7 @@ import fileUpload from "express-fileupload";
 dotenv.config();
 
 const corsOptions = {
-  origin: ["http://localhost:5173"],
+  origin: ["http://localhost:5173"]
 };
 const app = express();
 const PORT = process.env.PORT || 8080;
@@ -18,7 +18,7 @@ app.use(cors(corsOptions));
 app.use(express.json());
 app.use(fileUpload());
 
-//Routes
+// Routes
 app.use("/api/auth", authRoutes);
 app.use("/api/logbooks", logbookRoutes);
 app.use("/api/transcriptions", transcriptionRoutes);

backend/src/routes/auth-route.js

@@ -11,14 +11,14 @@ const router = express.Router();
 const supabase = createClient(supabaseUrl, supabaseKey);
 
 // remove for production 
-router.get("/token", async (req, res) => {
+router.post("/token", async (req, res) => {
     try {
         const { email, password } = req.body;
         if (!email) {
-            throw new Error("email is missing"); 
+            throw new Error("Email is missing"); 
         }
         if (!password) {
-            throw new Error("password is missing"); 
+            throw new Error("Password is missing"); 
         }
         const { data, error } = await supabase.auth.signInWithPassword({
             email: email,

backend/src/services/logbooks-service.js

@@ -31,7 +31,7 @@ export async function getLogbook(req) {
         const { logbookID } = req.params;
         const logbook = await getTable(supabase, "logbooks", "id", logbookID, "resource");
         if (typeof logbook == "undefined") {
-            throw new Error(`logbook ${logbookID} does not exist`);
+            throw new Error(`Logbook ${logbookID} does not exist`);
         }
         return logbook;
     } catch (error) {
@@ -50,13 +50,13 @@ export async function createLog(req) {
             throw new Error(logbookType.error);
         }
         if (body["type"] !== logbookType) {
-            throw new Error(`log type '${body["type"]}' does not match logbook type '${logbookType}'`);
+            throw new Error(`Log type '${body["type"]}' does not match logbook type '${logbookType}'`);
         }
         switch (body["type"]) {
             case "adult_cardiac_logs":
                 return await insertTable(supabase, "adult_cardiac_logs", body);
             default:
-                throw new Error(`log and logbook type '${body["type"]}' are invalid`);
+                throw new Error(`Log and logbook type '${body["type"]}' are invalid`);
         }
     } catch (error) {
         return { error: error.message };
@@ -88,7 +88,7 @@ export async function getLog(req) {
         }
         const log = await getTable(supabase, logbookType, "id", logID, "resource");
         if (typeof log == "undefined") {
-            throw new Error(`log ${logID} does not exist`);
+            throw new Error(`Log ${logID} does not exist`);
         }
         return log;
     } catch (error) {

backend/src/utils/get-logbook-type.js

@@ -2,7 +2,7 @@ export default async function getLogbookType(logbookID, supabase) {
     try {
         const { data, error } = await supabase.from("logbooks").select().eq("id", logbookID);
         if (data.length == 0) {
-            throw new Error(`logbook ${logbookID} does not exist`); 
+            throw new Error(`Logbook ${logbookID} does not exist`); 
         } else if (error) {
             throw new Error(error.message);
         }

backend/src/utils/get-table.js

@@ -6,7 +6,7 @@ export default async function getTable(supabase, table, param, value, type) {
         } else if (param !== null && value !== null) {
             ({ data, error } = await supabase.from(table).select().eq(param, value));
         } else {
-            throw new Error(`${param == null ? "param" : "value"} is empty at getTable`);
+            throw new Error(`${param == null ? "Param" : "Value"} is empty at getTable`);
         }
         if (error) {
             throw new Error(error.message);

frontend/package.json

@@ -18,7 +18,7 @@
     "@mui/material": "^6.1.2",
     "@mui/x-date-pickers": "^7.23.0",
     "@supabase/supabase-js": "^2.45.5",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "pdfjs-dist": "^4.7.76",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/components/Logbooks/LogbookCard.jsx

@@ -3,8 +3,35 @@ import LogRectangle from "../../assets/images/LogRectangle.png";
 import "./LogbookCard.css";
 
 export default function LogbookCard({ title, type, storage, created }) {
+  /** Converts type to display name. */
+  let formattedType;
+  switch (type) {
+    case "adult_cardiac_logs":
+      formattedType = "Cardiac Surgery - Adult";
+      break;
+    case "congenital_surgery_logs":
+      formattedType = "Cardiac Surgery - Congenital";
+      break;
+    case "general_surgery_logs":
+      formattedType = "General Surgery";
+      break;
+    case "gyn_logs":
+      formattedType = "Obstetrics/Gynecology";
+      break;
+    case "ob_logs":
+      formattedType = "Obstetrics/Gynecology";
+      break;
+    default:
+      formattedType = "Unknown Type";
+      break;
+  }
+
+  /** Formats the date */
+  const createdDate = new Date(created);
+  const formattedDate = createdDate.toLocaleDateString('en-CA');
+
   /** Retrieve type information from the mapping */
-  const typeInfo = LogbookTypeInfo[type] || {};
+  const typeInfo = LogbookTypeInfo[formattedType] || {};
 
   /** Construct class name */
   const className = ["logbook-card", typeInfo.className]
@@ -17,21 +44,21 @@ export default function LogbookCard({ title, type, storage, created }) {
   return (
     <div className={className}>
       <div className="book-cover">
-        <img src={bookImage} alt={type} className="book-cover-image" />
+        <img src={bookImage} alt={formattedType} className="book-cover-image" />
       </div>
       <div className="details-container">
         <img src={LogRectangle} alt="" className="log-rectangle" />
         <div className="book-details">
           <h3 className="book-title">{title}</h3>
           <div className="type-label">
-            Type: <span className="type-value">{type}</span>
+            Type: <span className="type-value">{formattedType}</span>
           </div>
           <div className="storage-info">
-            Storage: <span className="storage-count">{storage}</span>/100 logs
+            Storage: <span className="storage-count">{storage}</span>/ 100 logs
             used
           </div>
           <div className="created-date">
-            <strong>Created</strong> {created}
+            <strong>Created</strong> {formattedDate}
           </div>
         </div>
       </div>

frontend/src/pages/logbooks/Logbooks.jsx

@@ -10,41 +10,9 @@ import {
   EyeIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-
-/** Array of logbook data */
-const logbooks = [
-  {
-    title: "Cardiac Surgery - Nov.",
-    type: "Cardiac Surgery - Adult",
-    storage: "20",
-    created: "10-01-2024",
-  },
-  {
-    title: "Cardiac Cong. - Nov.",
-    type: "Cardiac Surgery - Congenital",
-    storage: "20",
-    created: "10-01-2024",
-  },
-  {
-    title: "Ophthalmology - Nov.",
-    type: "Ophthalmology",
-    storage: "20",
-    created: "10-01-2024",
-  },
-  {
-    title: "OB/GYN - Nov.",
-    type: "Obstetrics/Gynecology",
-    storage: "20",
-    created: "10-01-2024",
-  },
-  {
-    title: "General Surgery - Nov.",
-    type: "General Surgery",
-    storage: "20",
-    created: "10-01-2024",
-  },
-  // Add more logbooks as needed
-];
+import { useState, useEffect } from 'react';
+import { useAuth } from "../../contexts/AuthContext";
+import { fetchData } from "../../utils/helpers/fetchData";
 
 /** Array of logbook actions */
 const logbookActions = [
@@ -76,6 +44,18 @@ const logbookActions = [
 ];
 
 export default function Logbooks() {
+  const [logbooks, setLogbooks] = useState([]);
+  const { session } = useAuth();
+
+  async function fetchLogbooks() {
+    const response = await fetchData(session?.access_token, "logbooks");
+    setLogbooks(response)
+  }
+
+  useEffect(() => {
+    fetchLogbooks();
+  }, []);
+
   return (
     <NavContentWrapper>
       <div className="logbooks-container">

frontend/src/utils/helpers/fetchData.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+export async function fetchData(token, route, params = undefined) {
+  try {
+    const response = await axios.get(`/api/${route}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      params: params,
+    });
+    return response.data.data;
+  } catch (error) {
+    console.error(error.response.statusText);
+  }
+}

frontend/vite.config.js

@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:5000',
+        target: 'http://localhost:8080',
         changeOrigin: true,
       }
     }