112 lines
2.5 KiB
TypeScript
112 lines
2.5 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { title } from "@/components/primitives";
|
|
import { ProjectCard } from "./project-card";
|
|
import { Button } from "@nextui-org/react";
|
|
|
|
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: "新しいプロジェクト",
|
|
detail: "新しいプロジェクトの詳細説明がここにくるよ",
|
|
};
|
|
|
|
const fetchOptions = {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(newProjectData),
|
|
};
|
|
|
|
const url = `${apiServer}/projects`;
|
|
fetch(url, fetchOptions)
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
console.log("New project created:", data);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error creating new project:", error);
|
|
});
|
|
}
|
|
|
|
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>
|
|
<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
|
|
key={index}
|
|
projectName={project.name}
|
|
projectDetail={project.detail}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|