84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import RoundedContainer from "@/components/ui/RoundedContainer";
|
|
import { getServices } from "@/lib/api/helpers/services";
|
|
import { Project, Service, User } from "@/lib/api/types";
|
|
import { getUsers } from "@/lib/api/helpers/users";
|
|
|
|
export default function Overview() {
|
|
const [projectStatus, setProjectStatus] = useState<boolean>(true);
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
/*useEffect(() => {
|
|
getProjects()
|
|
.then((projects) => {
|
|
if (projects.length > 0) {
|
|
setProjects(projects);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
setProjectStatus(false);
|
|
});
|
|
}, []); IMPLEMENT GET PROJECTS */
|
|
const [serviceStatus, setServiceStatus] = useState<boolean>(true);
|
|
const [services, setServices] = useState<Service[]>([]);
|
|
useEffect(() => {
|
|
getServices()
|
|
.then((services) => {
|
|
if (services.length > 0) {
|
|
setServices(services);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
setServiceStatus(false);
|
|
});
|
|
}, []);
|
|
const [userStatus, setUserStatus] = useState<boolean>(true);
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
useEffect(() => {
|
|
getUsers()
|
|
.then((users) => {
|
|
if (users.length > 0) {
|
|
setUsers(users);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
setUserStatus(false);
|
|
});
|
|
}, []);
|
|
return (
|
|
<div>
|
|
<RoundedContainer>
|
|
<p>Users</p>
|
|
{users.length < 1 ? (
|
|
users.map((user) => <p key={user.id}>{user.username}</p>)
|
|
) : userStatus.valueOf() ? (
|
|
<p>Loading users...</p>
|
|
) : (
|
|
<p>Failed to load users :C</p>
|
|
)}
|
|
</RoundedContainer>
|
|
<RoundedContainer>
|
|
<p>Services</p>
|
|
{services.length < 1 ? (
|
|
services.map((service) => <p key={service.id}>{service.title}</p>)
|
|
) : serviceStatus ? (
|
|
<p>Loading services...</p>
|
|
) : (
|
|
<p>Failed to load services :C</p>
|
|
)}
|
|
</RoundedContainer>
|
|
<RoundedContainer>
|
|
<p>Projects</p>
|
|
{projects.length < 1 ? (
|
|
projects.map((project) => <p key={project.id}>{project.title}</p>)
|
|
) : projectStatus ? (
|
|
<p>Loading projects...</p>
|
|
) : (
|
|
<p>Failed to load projects :C</p>
|
|
)}
|
|
</RoundedContainer>
|
|
</div>
|
|
);
|
|
}
|