delete edit users

client/src/Profile.scss

@@ -25,6 +25,28 @@
 
     }
 
+    form {
+      display: flex;
+      flex-direction: column;
+      max-width: 10rem;
+
+      input {
+        margin-bottom: 0.2rem;
+      }
+    }
+
+    button {
+      text-align: left;
+      background: none;
+      border: none;
+      cursor: pointer;
+      margin: 0;
+      padding: 0;
+      padding-top: 0.5rem;
+      color: black;
+      font-family: inherit;
+    }
+
   }
 
   .newPost {
@@ -42,4 +64,4 @@
   .posts {
     padding: 0 2rem 2rem;
   }
-}
+}

client/src/Profile.tsx

@@ -1,4 +1,9 @@
-import { Form, useLoaderData, useNavigation } from "react-router-dom";
+import {
+    Form,
+    useLoaderData,
+    useNavigation,
+    useSubmit,
+} from "react-router-dom";
 import { LoaderToType, profileLoader } from "./loaders";
 import { isError } from "./api/dto";
 import { useHomeContext } from "./HomeContext";
@@ -6,6 +11,7 @@ import { PostList } from "./PostList";
 
 import "./PostForm.scss";
 import "./Profile.scss";
+import { useState } from "react";
 
 export interface IProfileProps {
     self: boolean;
@@ -29,12 +35,60 @@ export function Profile({ self }: IProfileProps) {
     }
     const navigation = useNavigation();
     const busy = navigation.state === "submitting";
+    const [editing, setEditing] = useState(false);
+    const submit = useSubmit();
 
     return (
         <div className={"profileView"}>
             <div className={"profileInfo"}>
-                <span className={"fullName"}>{user.fullName}</span>
-                <span className={"username"}>{user.username}</span>
+                {editing ? (
+                    <>
+                        <Form className={"userForm"} method="patch">
+                            <label htmlFor="fname">Username:</label>
+                            <input
+                                type="text"
+                                defaultValue={user.username}
+                                name="username"
+                            />
+                            <label htmlFor="fname">Full name:</label>
+                            <input
+                                type="text"
+                                defaultValue={user.fullName}
+                                name="fullName"
+                            />
+                            <label htmlFor="password">Password:</label>
+                            <input type="password" name="password" />
+                            <button
+                                name="intent"
+                                value="user"
+                                type="submit"
+                                onClick={(e) => {
+                                    setEditing(false);
+                                    submit(e.currentTarget);
+                                }}
+                                disabled={busy}
+                            >
+                                update
+                            </button>
+                        </Form>
+                    </>
+                ) : (
+                    <>
+                        <span className={"fullName"}>{user.fullName}</span>
+                        <span className={"username"}>{user.username}</span>
+                        {<button onClick={() => setEditing(true)}>edit</button>}
+                        <Form className={"postForm"} method="post">
+                            <button
+                                name="intent"
+                                value="deleteSelf"
+                                type="submit"
+                                disabled={busy}
+                            >
+                                delete account
+                            </button>
+                        </Form>
+                    </>
+                )}
             </div>
             {self && (
                 <div className={"newPost"}>

client/src/actions.ts

@@ -1,4 +1,10 @@
-import { addFollower, removeFollower, signup } from "./api/Person";
+import {
+    addFollower,
+    deleteSelf,
+    removeFollower,
+    signup,
+    updateSelf,
+} from "./api/Person";
 import { ActionFunctionArgs, redirect } from "react-router-dom";
 import { login } from "./api/Token";
 import { isError } from "./api/dto";
@@ -66,6 +72,16 @@ export async function profileSelfAction({ request }: ActionFunctionArgs) {
             formData.get("text")!.toString(),
             parseInt(formData.get("postId")!.toString()),
         );
+    } else if (intent == "user") {
+        return await updateSelf(
+            formData.get("username")!.toString(),
+            formData.get("fullName")!.toString(),
+            formData.get("password")!.toString(),
+        );
+    } else if (intent == "deleteSelf") {
+        await deleteSelf();
+        deleteToken();
+        return redirect("/");
     }
 }
 

client/src/api/Person.ts

@@ -20,6 +20,22 @@ export async function signup(
     });
 }
 
+export async function updateSelf(
+    username: string,
+    fullName: string,
+    password: string,
+): Promise<TPersonToResp> {
+    return fetchJSONAuth("/person/self", "PATCH", PersonToResp, {
+        username,
+        fullName,
+        password,
+    });
+}
+
+export async function deleteSelf(): Promise<TNoContentToResp> {
+    return fetchJSONAuth("/person/self", "DELETE", NoContentToResp);
+}
+
 export async function getPersonByUuid(uuid: string): Promise<TPersonToResp> {
     return fetchJSONAuth("/person/by-uuid/" + uuid, "GET", PersonToResp);
 }