Admin page work

app/Admin/Overview/page.tsx

@@ -1,6 +1,7 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
-import UnderConstruction from "@/components/static_pages/UnderConstruction";
 import RoundedContainer from "@/components/ui/RoundedContainer";
 import { getServices } from "@/lib/api/helpers/services";
 import { Project, Service, User } from "@/lib/api/types";
@@ -8,7 +9,7 @@ import { getUsers } from "@/lib/api/helpers/users";
 
 export default function Overview() {
   const [projectStatus, setProjectStatus] = useState<boolean>(true);
-  const [projects, setProjects] = useState<Project[]>();
+  const [projects, setProjects] = useState<Project[]>([]);
   /*useEffect(() => {
     getProjects()
       .then((projects) => {
@@ -21,7 +22,7 @@ export default function Overview() {
       });
   }, []); IMPLEMENT GET PROJECTS */
   const [serviceStatus, setServiceStatus] = useState<boolean>(true);
-  const [services, setServices] = useState<Service[]>();
+  const [services, setServices] = useState<Service[]>([]);
   useEffect(() => {
     getServices()
       .then((services) => {
@@ -34,7 +35,7 @@ export default function Overview() {
       });
   }, []);
   const [userStatus, setUserStatus] = useState<boolean>(true);
-  const [users, setUsers] = useState<User[]>();
+  const [users, setUsers] = useState<User[]>([]);
   useEffect(() => {
     getUsers()
       .then((users) => {
@@ -50,12 +51,33 @@ export default function Overview() {
     <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>
   );

lib/api/helpers/projects.ts

@@ -0,0 +1,18 @@
+import { cmFetch } from "../cmFetch";
+import { Project } from "../types";
+
+export async function getProjects() {
+  return Promise<Project[]>; // TODO: IMPLEMENT
+}
+
+export async function getProject(/*id: number */) {
+  return Promise<Project>; // TODO: IMPLEMENT
+}
+
+export async function createProject(/*project: Project*/) {
+  return Promise<Project>; // TODO: IMPLEMENT
+}
+
+export async function deleteService(/*id: number*/) {
+  return Promise<Project>;
+}

lib/api/helpers/users.ts

@@ -1,5 +1,4 @@
 import { getSessionToken } from "@/lib/server_functions/userAuth";
-import logger from "@/lib/logging/logger";
 
 import { cmFetch, cmFetchRaw } from "../cmFetch";
 import { Token, User } from "../types";
@@ -25,7 +24,7 @@ export async function loginUser(user: FormData) {
     username: user.get("username"),
     password: user.get("password"),
   };
-  logger.log("debug", `Recieved login user request for form: ${body}`); // debug login form submission
+  // logger.log("debug", `Recieved login user request for form: ${body}`); // debug login form submission, ISSUE, THIS IS A CLIENT HELPER!
   return cmFetch<Token>(`/api/users/login`, {
     method: "POST",
     headers: {

lib/server_functions/userAuth.ts

@@ -9,7 +9,7 @@ import logger from "../logging/logger";
 export async function login(formData: FormData) {
   "use server";
   const token = await loginUser(formData);
-  logger.log("debug", `Fetched following token for login: ${token}`); // token check for backend debugging
+  // ERROR: No transport? logger.log("debug", `Fetched following token for login: ${token}`); // token check for backend debugging
   await createSession(token);
   redirect("/Admin/Overview");
 }
@@ -18,7 +18,7 @@ export async function signup(formData: FormData) {
   // Technically same code as login for now but will do different stuff with it later so separating it early on
   "use server";
   const token = await createUser(formData);
-  logger.log("debug", `Fetched following token for login: ${token}`); // token check for backend debugging
+  // ERROR: No transport? logger.log("debug", `Fetched following token for login: ${token}`); // token check for backend debugging
   await createSession(token);
   redirect("/Admin/Overview");
 }
@@ -37,7 +37,7 @@ export async function createSession(token: Token) {
 
 export async function getSessionToken() {
   const cookieStore = await cookies();
-  logger.log("debug", cookieStore.getAll()); //  debug: log cookies when checking for session token, ideally logs session token too
+  // ERROR: No transport? logger.log("debug", cookieStore.getAll()); //  debug: log cookies when checking for session token, ideally logs session token too
   const token = cookieStore.get("access_token")?.value;
 
   return token ? token : null;