feat: frontend finished (i think)

Author: IWantSomeFish

onlineshop/source/client/src/App.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 import './App.css';
 import { Button, Grid2, TextField } from '@mui/material';
-import getProjects from './components/getProjects';
-import getUsers from './components/getUsers';
 import deleteUser from './components/deleteUser';
 import deleteProject from './components/deleteProject';
 import CreateProjectForm from './components/createProject';
 import CreateUserForm from './components/createUser';
 import UpdateProjectForm from './components/updateProject';
 import UpdateUserForm from './components/updateUser';
+import UserList from './components/showUsers';
+import ProjectList from './components/showProjects';
 
 const App: React.FC = () => (
 <div className="App" style={{paddingTop: 30}}>
@@ -19,31 +19,35 @@ const App: React.FC = () => (
             <div style={{paddingBottom: 10}}>
                 <TextField defaultValue="-1" id="user_id" label="Outlined" variant="outlined"/>
             </div>
-            <div style={{paddingBottom: 10}}>
-                <Button variant="contained" onClick={getUsers}>Get all users</Button>
-            </div> 
             <div style={{paddingBottom: 10}}>
                 <Button variant="contained" onClick={deleteUser}>Delete User</Button>
             </div>
             <div style={{paddingBottom: 10}}>
-            <CreateUserForm/>
+                <CreateUserForm/>
+            </div>
+            <div style={{paddingBottom: 10}}>
+                <UpdateUserForm/> 
+            </div>
+            <div style={{paddingBottom: 10}}>
+                <UserList/>
             </div>
-            <UpdateUserForm/> 
         </Grid2>
         <Grid2>
             <div style={{paddingBottom: 10}}>
                 <TextField defaultValue='-1' id="project_id" label="Outlined" variant="outlined"/>
             </div>
-            <div style={{paddingBottom: 10}}>
-                <Button variant="contained" onClick={getProjects}>Get all projects</Button>
-            </div>
             <div style={{paddingBottom: 10}}>
                 <Button variant="contained" onClick={deleteProject}>Delete Project</Button>
             </div>
             <div style={{paddingBottom: 10}}>
                 <CreateProjectForm/>
             </div>
-                <UpdateProjectForm/> 
+            <div style={{paddingBottom: 10}}>
+                <UpdateProjectForm/>
+            </div>  
+            <div style={{paddingBottom: 10}}>
+                <ProjectList/>
+            </div>
         </Grid2>
         </Grid2>
     </div>

onlineshop/source/client/src/components/getProjects.tsx

@@ -31,7 +31,7 @@ export default async function getProjects() {
         }
         console.log(JSON.stringify(data.data, null, 4));
         console.log('response status is: ', data.status);
-        return data;
+        return data.data;
     }
     catch (error) {
     if (axios.isAxiosError(error)) {

onlineshop/source/client/src/components/getUsers.tsx

@@ -30,7 +30,7 @@ export default async function getUsers() {
     }
         console.log(JSON.stringify(data.data, null, 4));
         console.log('response status is: ', data.status);
-        return data;
+        return data.data;
     }
     catch (error) {
     if (axios.isAxiosError(error)) {

onlineshop/source/client/src/components/showProjects.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { Typography, List, ListItem, Button } from '@mui/material';
+import React from 'react';
+import { project } from '../types/project';
+import getProjects from './getProjects';
+
+export default function ProjectList(){
+    const [projects, setProjects] = useState<project[]>([]);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleLoadProjects = async () => {
+    const result = await getProjects();
+
+    if (Array.isArray(result)) {
+      setProjects(result);
+      setError(null);
+    } else if (typeof result === 'object' && result !== null && 'id' in result) {
+      setProjects([result as unknown as project]);
+      setError(null);
+    } else {
+      setError(String(result));
+      setProjects([]);
+    }
+  };
+    return (
+    <div>
+    <Button variant="contained" onClick={handleLoadProjects} style={{marginBottom: 10}}>
+        Get Users
+    </Button>
+    <Typography variant="h5" gutterBottom>List of Projects</Typography>
+
+      {error && <Typography color="error">{error}</Typography>}
+
+      {projects.length === 0 && !error && (
+        <Typography color="text.secondary">Empty list</Typography>
+      )}
+
+      <List>
+        {projects.map((project) => (
+          <ListItem key={project.id} alignItems="flex-start">
+      <div>
+        <Typography variant="subtitle1"><strong>ID:</strong> {project.id}</Typography>
+        <Typography variant="body2"><strong>NAME:</strong> {project.projectName}</Typography>
+        <Typography variant="body2"><strong>DESC:</strong> {project.desription}</Typography>
+        <Typography variant="body2"><strong>CREATOR:</strong> {project.user?.login ?? "Unknown user"}</Typography>
+      </div>
+    </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+}

onlineshop/source/client/src/components/showUsers.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { User } from '../types/user';
+import getUsers from './getUsers';
+import { Typography, List, ListItem, Button } from '@mui/material';
+import React from 'react';
+
+export default function UserList(){
+    const [users, setUsers] = useState<User[]>([]);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleLoadUsers = async () => {
+    const result = await getUsers();
+
+    if (Array.isArray(result)) {
+      setUsers(result);
+      setError(null);
+    } else if (typeof result === 'object' && result !== null && 'id' in result) {
+      setUsers([result as unknown as User]);
+      setError(null);
+    } else {
+      setError(String(result));
+      setUsers([]);
+    }
+  };
+    return (
+    <div>
+    <Button variant="contained" onClick={handleLoadUsers} style={{marginBottom: 10}}>
+        Get Users
+    </Button>
+    <Typography variant="h5" gutterBottom>List of Users</Typography>
+
+      {error && <Typography color="error">{error}</Typography>}
+
+      {users.length === 0 && !error && (
+        <Typography color="text.secondary">Empty list</Typography>
+      )}
+
+      <List>
+        {users.map((user) => (
+          <ListItem key={user.id} alignItems="flex-start">
+      <div>
+        <Typography variant="subtitle1"><strong>ID:</strong> {user.id}</Typography>
+        <Typography variant="body2"><strong>NICKNAME:</strong> {user.nickname}</Typography>
+        <Typography variant="body2"><strong>EMAIL:</strong> {user.email}</Typography>
+      </div>
+    </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+}

onlineshop/source/client/src/types/project.tsx

@@ -3,7 +3,7 @@ import { User } from "./user";
 export type project = {
     id: number,
     projectName: string,
-    description: string,
+    desription: string,
     feeAmount: number,
     alreadyCollected: number,
     user: User,