Create Home tab

backend/index.js

@@ -29,10 +29,12 @@ app.use("/", indexRoute);
 
 // "/projects"
 const projectsIndexRoute = require("./routes/projects/index")(sequelize);
+const projectsShowRoute = require("./routes/projects/show")(sequelize);
 const projectsNewRoute = require("./routes/projects/new")(sequelize);
 const projectsEditRoute = require("./routes/projects/edit")(sequelize);
 const projectsDeleteRoute = require("./routes/projects/delete")(sequelize);
 app.use("/projects", projectsIndexRoute);
+app.use("/projects", projectsShowRoute);
 app.use("/projects", projectsNewRoute);
 app.use("/projects", projectsEditRoute);
 app.use("/projects", projectsDeleteRoute);

backend/models/projects.js

@@ -10,6 +10,10 @@ function defineProject(sequelize, DataTypes) {
     },
   });
 
+  Project.associate = (models) => {
+    Project.hasMany(models.Folder, { foreignKey: "projectId" });
+  };
+
   return Project;
 }
 

backend/routes/projects/show.js

@@ -0,0 +1,38 @@
+const express = require("express");
+const router = express.Router();
+const defineProject = require("../../models/projects");
+const defineFolder = require("../../models/folders");
+const { DataTypes } = require("sequelize");
+
+module.exports = function (sequelize) {
+  const Project = defineProject(sequelize, DataTypes);
+  const Folder = defineFolder(sequelize, DataTypes);
+  Project.hasMany(Folder, { foreignKey: "projectId" });
+
+  router.get("/:projectId", async (req, res) => {
+    const projectId = req.params.projectId;
+
+    if (!projectId) {
+      return res.status(400).json({ error: "projectId is required" });
+    }
+
+    try {
+      const project = await Project.findByPk(projectId, {
+        include: [
+          {
+            model: Folder,
+          },
+        ],
+      });
+      if (!project) {
+        return res.status(404).send("Project not found");
+      }
+      res.json(project);
+    } catch (error) {
+      console.error(error);
+      res.status(500).send("Internal Server Error");
+    }
+  });
+
+  return router;
+};

frontend/app/projects/[projectId]/dashboard/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <>This is Dashboard tab</>;
-}

frontend/app/projects/[projectId]/home/home.tsx

@@ -0,0 +1,59 @@
+"use client";
+import Config from "@/config/config";
+const apiServer = Config.apiServer;
+import { useState, useEffect } from "react";
+
+async function fetchProject(url) {
+  try {
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error.message);
+  }
+}
+
+type Props = {
+  projectId: string;
+};
+
+export function Home({ projectId }: Props) {
+  const [project, setProject] = useState({
+    Folders: [],
+  });
+  const url = `${apiServer}/projects/${projectId}`;
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchProject(url);
+        setProject(data);
+        console.log(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, [url]);
+
+  return (
+    <>
+      <h3 className="font-bold ms-2">Home</h3>
+
+      <h4 className="font-bold ms-2 mt-5">
+        Folder num: {project.Folders.length}
+      </h4>
+    </>
+  );
+}

frontend/app/projects/[projectId]/home/page.tsx

@@ -0,0 +1,9 @@
+import { Home } from "./home";
+
+export default function Page({ params }: { params: { projectId: string } }) {
+  return (
+    <>
+      <Home projectId={params.projectId} />
+    </>
+  );
+}

frontend/app/projects/[projectId]/sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Menu, MenuItem } from "@nextui-org/react";
-import { LayoutDashboard, Files, FlaskConical } from "lucide-react";
+import { Home, Files, FlaskConical } from "lucide-react";
 import { useRouter } from "next/navigation";
 import useGetCurrentIds from "@/utils/useGetCurrentIds";
 
@@ -11,11 +11,11 @@ export default function Sidebar() {
     <div className="w-64 border-r-1 dark:border-neutral-700">
       <Menu aria-label="sidebar">
         <MenuItem
-          startContent={<LayoutDashboard strokeWidth={1} size={28} />}
+          startContent={<Home strokeWidth={1} size={28} />}
           className="p-3"
-          onClick={() => router.push(`/projects/${projectId}/dashboard`)}
+          onClick={() => router.push(`/projects/${projectId}/home`)}
         >
-          Dashboard
+          Home
         </MenuItem>
         <MenuItem
           startContent={<Files strokeWidth={1} size={28} />}

frontend/app/projects/project-card.tsx

@@ -19,7 +19,7 @@ export function ProjectCard({ project, onEditClick, onDeleteClick }) {
       <CardHeader className="flex gap-3 h-[50px] justify-between text-ellipsis overflow-hidden">
         <div className="flex gap-5">
           <div className="flex flex-col gap-1 items-start justify-center">
-            <Link underline="hover" href={`/projects/${project.id}/dashboard`}>{project.name}</Link>
+            <Link underline="hover" href={`/projects/${project.id}/home`}>{project.name}</Link>
           </div>
         </div>
         <Dropdown>