feat: delete function, types moved to particular files

Author: IWantSomeFish

onlineshop/source/client/src/App.tsx

@@ -4,6 +4,8 @@ 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';
 
 const App: React.FC = () => (
 <div className="App" style={{paddingTop: 30}}>
@@ -17,7 +19,7 @@ const App: React.FC = () => (
                 <Button variant="contained" onClick={getUsers}>Get all users</Button>
             </div> 
             <div style={{paddingBottom: 10}}>
-                <Button variant="contained">Create User</Button>
+                <Button variant="contained" onClick={deleteUser}>Delete User</Button>
             </div>  
         </Grid2>
         <Grid2>
@@ -28,7 +30,7 @@ const App: React.FC = () => (
                 <Button variant="contained" onClick={getProjects}>Get all projects</Button>
             </div>
             <div style={{paddingBottom: 10}}>
-                <Button variant="contained">Create Project</Button>
+                <Button variant="contained" onClick={deleteProject}>Delete Project</Button>
             </div>
         </Grid2>
         </Grid2>

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

@@ -0,0 +1,34 @@
+import axios from "axios";
+import { GetProjectsResponse } from "../types/project";
+
+
+export default async function deleteProject() {
+    try{
+        let data
+        const element =(document.getElementById('project_id') as HTMLInputElement).value;
+        if (Number(element) < 0){
+            throw new Error('Index cant be lower than zero');
+        }
+        else {
+            data = await axios.delete<GetProjectsResponse>(`http://localhost:4000/api/projects/${Number(element)}`,
+            {
+            headers:{
+                Accept:'application/json',
+            },
+        },
+    );
+}
+        console.log(JSON.stringify(data.data, null, 4));
+        console.log('response status is: ', data.status);
+        return data;
+    }
+    catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log('error message: ', error.message);
+      return error.message;
+    } else {
+      console.log('unexpected error: ', error);
+      return 'An unexpected error occurred';
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import axios from "axios";
+import { GetUsersResponse } from "../types/user";
+
+
+export default async function deleteUser() {
+    try{
+        let data
+        const element =(document.getElementById('user_id') as HTMLInputElement).value;
+        if (Number(element) < 0){
+            throw new Error('Index cant be lower than zero');
+        }
+        else {
+            data = await axios.delete<GetUsersResponse>(`http://localhost:4000/api/users/${Number(element)}`,
+            {
+            headers:{
+                Accept:'application/json',
+            },
+        },
+    );
+}
+        console.log(JSON.stringify(data.data, null, 4));
+        console.log('response status is: ', data.status);
+        return data;
+    }
+    catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log('error message: ', error.message);
+      return error.message;
+    } else {
+      console.log('unexpected error: ', error);
+      return 'An unexpected error occurred';
+    }
+  }
+}

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

@@ -1,20 +1,6 @@
 import axios from "axios";
-import { User } from "./getUsers";
+import { GetProjectsResponse } from "../types/project";
 
-export type project = {
-    id: number,
-    projectName: string,
-    description: string,
-    feeAmount: number,
-    alreadyCollected: number,
-    user: User,
-    likesCount: number,
-    dislikesCount: number,
-};
-
-type GetProjectsResponse = {
-    data: project[]
-};
 
 export default async function getProjects() {
     try{

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

@@ -1,18 +1,5 @@
 import axios from "axios";
-import { project as user } from "./getProjects";
-
-export type User = {
-    id: number,
-    login: string,
-    password: string,
-    email: string,
-    nickname: string,
-    projects:user[];
-};
-
-type GetUsersResponse = {
-    data: User[];
-};
+import { GetUsersResponse } from "../types/user";
 
 export default async function getUsers() {
     try{

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

@@ -0,0 +1,16 @@
+import { User } from "./user";
+
+export type project = {
+    id: number,
+    projectName: string,
+    description: string,
+    feeAmount: number,
+    alreadyCollected: number,
+    user: User,
+    likesCount: number,
+    dislikesCount: number,
+};
+
+export type GetProjectsResponse = {
+    data: project[]
+};

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

@@ -0,0 +1,14 @@
+import { project } from "./project";
+
+export type User = {
+    id: number,
+    login: string,
+    password: string,
+    email: string,
+    nickname: string,
+    projects:project[];
+};
+
+export type GetUsersResponse = {
+    data: User[];
+};