integrated frontend & backend for log history

backend/index.js

@@ -3,6 +3,7 @@ import dotenv from "dotenv";
 import express from "express";
 import authRoutes from "./src/routes/auth-route.js";
 import logbookRoutes from "./src/routes/logbooks-route.js";
+import logsRoutes from "./src/routes/logs-route.js";
 import transcriptionRoutes from "./src/routes/transcription-route.js";
 import fileUpload from "express-fileupload";
 
@@ -21,6 +22,7 @@ app.use(fileUpload());
 // Routes
 app.use("/api/auth", authRoutes);
 app.use("/api/logbooks", logbookRoutes);
+app.use("/api/logs", logsRoutes);
 app.use("/api/transcriptions", transcriptionRoutes);
 
 app.listen(PORT, () => {

backend/src/routes/logs-route.js

@@ -0,0 +1,16 @@
+import express from "express";
+import auth from "../middlewares/auth.js";
+import { getUserLogs } from "../services/logs-service.js";
+
+const router = express.Router();
+
+router.get("", auth, async (req, res) => {
+    const userLogs = await getUserLogs(req);
+    if (userLogs.error) {
+        res.status(500).json({ error: userLogs.error });
+    } else {
+        res.status(200).json({ data: userLogs });
+    }
+})
+
+export default router;

backend/src/services/logs-service.js

@@ -0,0 +1,20 @@
+import getTable from "../utils/get-table.js";
+import { getUserLogbooks } from "./logbooks-service.js";
+
+export async function getUserLogs(req) {
+    try {
+        const supabase = req.supabase;
+        const userLogbooks = await getUserLogbooks(req);
+        if (userLogbooks.error) {
+            throw new Error(userLogbooks.error)
+        }
+        const logs = [];
+        for (const logbook of userLogbooks) {
+            const logbookLogs = await getTable(supabase, logbook.type, "logbook_id", logbook.id, "collection");
+            logs.push(...logbookLogs)
+        }
+        return logs;
+    } catch (error) {
+        return { error: error.message };
+    }
+}

frontend/src/components/LogHistory/LogTable.jsx

@@ -1,5 +1,7 @@
 import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
 import "./LogTable.css";
+import formatDate from "../../utils/helpers/formatDate";
+import formatType from "../../utils/helpers/formatType";
 
 export default function LogTable({
   currentLogs,
@@ -41,8 +43,8 @@ export default function LogTable({
               />
             </td>
             <td className="log-title-column title-column">{log.title}</td>
-            <td className="type-column">{log.type}</td>
-            <td className="date-column">{log.dateCreated}</td>
+            <td className="type-column">{formatType(log.type)}</td>
+            <td className="date-column">{formatDate(log.created_at)}</td>
           </tr>
         ))}
       </tbody>

frontend/src/components/Logbooks/LogbookCard.jsx

@@ -1,34 +1,12 @@
 import { LogbookTypeInfo } from "./LogbookTypeInfo";
 import LogRectangle from "../../assets/images/LogRectangle.png";
 import "./LogbookCard.css";
+import formatType from "../../utils/helpers/formatType"
+import formatDate from "../../utils/helpers/formatDate";
 
 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');
+  const formattedType = formatType(type);
+  const formattedDate = formatDate(created);
 
   /** Retrieve type information from the mapping */
   const typeInfo = LogbookTypeInfo[formattedType] || {};

frontend/src/pages/log_history/LogHistory.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { NavContentWrapper } from "../../components/NavContentWrapper/NavContentWrapper";
 import ContentHeader from "../../components/ContentHeader/ContentHeader";
 import LogTable from "../../components/LogHistory/LogTable";
@@ -11,6 +11,8 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 import "./LogHistory.css";
+import { useAuth } from "../../contexts/AuthContext";
+import { fetchData } from "../../utils/helpers/fetchData";
 
 /** Array of log actions */
 const logActions = [
@@ -50,13 +52,18 @@ export default function LogHistory() {
 }
 
 function MainContent() {
-  /** Generate logs data dynamically */
-  const logs = Array.from({ length: 20 }, (_, index) => ({
-    id: index + 1,
-    title: `Log Title ${index + 1}`,
-    type: `Type ${(index % 5) + 1}`,
-    dateCreated: `2024-11-${(index % 30) + 1}`,
-  }));
+  /** Retrieve user's logs from API */
+  const [logs, setLogs] = useState([]);
+  const { session } = useAuth();
+
+  async function fetchLogs() {
+    const response = await fetchData(session?.access_token, "logs");
+    setLogs(response)
+  };
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
 
   /** State for current page and selected logs */
   const [currentPage, setCurrentPage] = useState(1);

frontend/src/pages/logbooks/Logbooks.jsx

@@ -44,6 +44,7 @@ const logbookActions = [
 ];
 
 export default function Logbooks() {
+  /** Retrieve user's logbooks from API */
   const [logbooks, setLogbooks] = useState([]);
   const { session } = useAuth();
 

frontend/src/utils/helpers/formatDate.js

@@ -0,0 +1,6 @@
+/** Formats date from "YYYY-MM-DD HH:MM:SS.ssssss+TZ" to "YYYY-MM-DD" */
+export default function formatDate(date) {
+    const createdDate = new Date(date);
+    return createdDate.toLocaleDateString('en-CA');
+  }
+

frontend/src/utils/helpers/formatType.js

@@ -0,0 +1,25 @@
+/** Formats a given log type to a more readable display name */
+export default function formatType(type) {
+  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;
+  }
+  return formattedType;
+}