Refactor projects page's component and UI

frontend/app/projects/projectsControl.ts

@@ -0,0 +1,117 @@
+import Config from "@/config/config";
+const apiServer = Config.apiServer;
+
+/**
+ * fetch project records
+ */
+async function fetchProjects() {
+  const url = `${apiServer}/projects`;
+
+  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 createProject(name: string, detail: string) {
+  const newProjectData = {
+    name: name,
+    detail: detail,
+  };
+
+  const fetchOptions = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(newProjectData),
+  };
+
+  const url = `${apiServer}/projects`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error creating new project:", error);
+    throw error;
+  }
+}
+
+/**
+ * Update project
+ */
+async function updateProject(projectId: number, name: string, detail: string) {
+  const updatedProjectData = {
+    name: name,
+    detail: detail,
+  };
+
+  const fetchOptions = {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(updatedProjectData),
+  };
+
+  const url = `${apiServer}/projects/${projectId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error updating project:", error);
+    throw error;
+  }
+}
+
+/**
+ * Delete project
+ */
+async function deleteProject(projectId: number) {
+  const fetchOptions = {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  const url = `${apiServer}/projects/${projectId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error deleting project:", error);
+    throw error;
+  }
+}
+
+export { fetchProjects, createProject, updateProject, deleteProject };