From 613f1cf96287ccbb1237a74610830ded07657f75 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Mon, 5 Feb 2024 22:34:07 +0900
Subject: [PATCH] fetch and display projects

---
 frontend/README.md               |  8 +++
 frontend/app/projects/layout.tsx |  4 +-
 frontend/app/projects/page.tsx   | 87 +++++++++++++++++++++++---------
 frontend/config/config.ts        |  5 ++
 4 files changed, 77 insertions(+), 27 deletions(-)
 create mode 100644 frontend/config/config.ts

diff --git a/frontend/README.md b/frontend/README.md
index ea0d625..5a7a253 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -18,3 +18,11 @@ npm install
 ```bash
 npm run dev
 ```
+
+## Edit Environmental variable
+
+Create `.env` File
+
+```
+NEXT_PUBLIC_API_SERVER=http://localhost:3001
+```
\ No newline at end of file
diff --git a/frontend/app/projects/layout.tsx b/frontend/app/projects/layout.tsx
index 88bdab8..c09e0c8 100644
--- a/frontend/app/projects/layout.tsx
+++ b/frontend/app/projects/layout.tsx
@@ -4,8 +4,8 @@ export default function ProjectsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-4 md:py-5">
+      <>
       {children}
-    </section>
+      </>
   );
 }
diff --git a/frontend/app/projects/page.tsx b/frontend/app/projects/page.tsx
index d45798d..39a2fa3 100644
--- a/frontend/app/projects/page.tsx
+++ b/frontend/app/projects/page.tsx
@@ -1,31 +1,46 @@
 "use client";
+import { useEffect, useState } from "react";
 import { title } from "@/components/primitives";
 import { ProjectCard } from "./project-card";
 import { Button } from "@nextui-org/react";
 
-const projects = [
-  {
-    name: "Robot1",
-    detail: "Embeded system test",
-  },
-  {
-    name: "Battle-tested in Production",
-    detail: "All the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.",
-  },
-  {
-    name: "bank front",
-    detail: "web frontend application for abc bank",
-  },
-  {
-    name: "bank API",
-    detail: "api server code for abc bank",
-  },
-  {
-    name: "Battle-tested in Production",
-    detail: "All the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.",
-  },
-];
+import Config from "@/config/config";
+const apiServer = Config.apiServer;
 
+/**
+ * fetch project records
+ *
+ * @param {string} url - API endpoint url
+ * @returns {Promise<Array>} - project record array
+ * @throws {Error}
+ */
+async function fetchProjects(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);
+  }
+}
+
+/**
+ * Create project
+ *
+ * @async
+ * @function
+ * @throws {Error}
+ */
 async function createProject() {
   const newProjectData = {
     name: "新しいプロジェクト",
@@ -40,7 +55,8 @@ async function createProject() {
     body: JSON.stringify(newProjectData),
   };
 
-  fetch("http://localhost:3001/projects", fetchOptions)
+  const url = `${apiServer}/projects`;
+  fetch(url, fetchOptions)
     .then((response) => {
       if (!response.ok) {
         throw new Error(`HTTP error! Status: ${response.status}`);
@@ -56,10 +72,31 @@ async function createProject() {
 }
 
 export default function ProjectsPage() {
+  const [projects, setProjects] = useState([]);
+  const url = `${apiServer}/projects`;
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchProjects(url);
+        setProjects(data);
+      } catch (error) {
+        console.error('Error in effect:', error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
+
   return (
     <div>
-      <h1 className={title()}>Projects</h1>
-      <Button color="primary" onClick={createProject}>Create</Button>
+      <div className="flex h-full items-center">
+        <h1 className={title()}>Projects</h1>
+        <Button variant="bordered" onClick={createProject} className="ms-5 mt-3">
+          Create
+        </Button>
+      </div>
+
       <div className="flex flex-wrap gap-4 mt-5">
         {projects.map((project, index) => (
           <ProjectCard
diff --git a/frontend/config/config.ts b/frontend/config/config.ts
new file mode 100644
index 0000000..4fc1c16
--- /dev/null
+++ b/frontend/config/config.ts
@@ -0,0 +1,5 @@
+const Config = {
+  apiServer: process.env.NEXT_PUBLIC_API_SERVER || 'http://localhost:3001',
+};
+
+export default Config;
\ No newline at end of file