Implemented settings ui

app/components/settings.tsx

@@ -1,7 +1,6 @@
 import {
     Modal,
     Button,
-    InputGroup,
     Input,
     TextField,
     Form,
@@ -9,9 +8,11 @@ import {
     Description,
     Label,
     Typography,
+    Spinner,
 } from "@heroui/react";
-import type { Dispatch, SetStateAction } from "react";
+import { useState, type Dispatch, type SetStateAction } from "react";
 import { useAuth } from "~/hooks/auth";
+import { useNotification } from "~/hooks/notification";
 
 export function Settings({
     show,
@@ -20,7 +21,82 @@ export function Settings({
     show: boolean;
     setShow: Dispatch<SetStateAction<boolean>>;
 }) {
-    const { user, loading, login, logout } = useAuth();
+    const { user, update } = useAuth();
+    const { notify } = useNotification();
+    const [loading, setLoading] = useState(false);
+
+    const notifySucess = () => {
+        notify(
+            {
+                        type: "success",
+                        loading: false,
+                        title: "Settings successfully updated!",
+                        message: "",
+                    },
+                    2000,
+        )
+    };
+
+    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const data: Record<string, string> = {};
+
+        // Convert FormData to plain object
+        formData.forEach((value, key) => {
+            data[key] = value.toString();
+        });
+
+        const save = async () => {
+            setLoading(true);
+            await fetch(`${import.meta.env.VITE_BASE_API_URL}/update`, {
+                body: JSON.stringify(data),
+                credentials: "include",
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }).catch((e) => {
+                notify(
+                    {
+                        type: "danger",
+                        loading: false,
+                        title: "An error occured.",
+                        message: `An error occured: ${e}`,
+                    },
+                    10000,
+                );
+            });
+
+            await update();
+            setLoading(false);
+            notifySucess();
+        };
+
+        save();
+    };
+
+    const loadFromSteam = async () => {
+        setLoading(true);
+        await fetch(`${import.meta.env.VITE_BASE_API_URL}/reload`, {
+            credentials: "include",
+        }).catch((e) => {
+            notify(
+                {
+                    type: "danger",
+                    loading: false,
+                    title: "An error occured.",
+                    message: `An error occured: ${e}`,
+                },
+                10000,
+            );
+        });
+
+        await update();
+        setLoading(false);
+        notifySucess();
+    };
+
     return (
         <div>
             <Modal isOpen={show}>
@@ -39,14 +115,14 @@ export function Settings({
                                 }}
                             />
                             <Modal.Body>
-                                <Form className="w-full">
+                                <Form className="w-full" onSubmit={onSubmit}>
                                     <Fieldset>
                                         <Typography.Heading level={3}>
                                             Account settings.
                                         </Typography.Heading>
                                         <Typography.Paragraph size="sm">
                                             Update your profile information
-                                            either manually or from Steam.{" "}
+                                            either manually or from Steam.
                                             <br />
                                             Change several settings concerning
                                             some functionnalities of the app.
@@ -73,8 +149,21 @@ export function Settings({
                                         </Fieldset.Group>
                                         <Fieldset.Actions className="flex justify-end">
                                             <div className="flex-1">
-                                                <Button variant="tertiary">
-                                                    Load from Steam
+                                                <Button
+                                                    variant="tertiary"
+                                                    isPending={loading}
+                                                    onPress={() => {
+                                                        loadFromSteam();
+                                                    }}
+                                                >
+                                                    {loading ? (
+                                                        <Spinner
+                                                            color="current"
+                                                            size="md"
+                                                        />
+                                                    ) : (
+                                                        "Load from Steam"
+                                                    )}
                                                 </Button>
                                             </div>
                                             <Button
@@ -82,10 +171,23 @@ export function Settings({
                                                 onPress={() => {
                                                     setShow(false);
                                                 }}
+                                                isPending={loading}
                                             >
                                                 Cancel
                                             </Button>
-                                            <Button type="submit">Save</Button>
+                                            <Button
+                                                type="submit"
+                                                isPending={loading}
+                                            >
+                                                {loading ? (
+                                                    <Spinner
+                                                        color="current"
+                                                        size="md"
+                                                    />
+                                                ) : (
+                                                    "Save"
+                                                )}
+                                            </Button>
                                         </Fieldset.Actions>
                                     </Fieldset>
                                 </Form>