Implemented settings ui

app/components/notification.tsx

@@ -14,7 +14,7 @@ export function Notification({
     message,
 }: NotificationType) {
     return (
-        <div className="flex justify-center fixed top-12 w-dvw z-50">
+        <div className="flex justify-center fixed top-12 w-dvw z-1000">
             <Alert className="w-fit h-fit border border-white" status={type}>
                 {loading ? (
                     <Alert.Indicator>

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">
+                                                <Button
-                                                    Load from Steam
+                                                    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>

app/hooks/auth.tsx

@@ -20,6 +20,7 @@ type AuthContextType = {
     loading: boolean;
     login: () => void;
     logout: () => Promise<void>;
+    update: () => Promise<boolean>;
 };
 
 const AuthContext = createContext<AuthContextType>({
@@ -27,6 +28,9 @@ const AuthContext = createContext<AuthContextType>({
     loading: false,
     login: () => {},
     logout: async () => {},
+    update: async () => {
+        return false;
+    },
 });
 
 export function AuthProvider({ children }: PropsWithChildren) {
@@ -70,24 +74,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
                     });
             }
 
-            let data = await fetch(`${import.meta.env.VITE_BASE_API_URL}/me`, {
+            if (await update()) {
-                credentials: "include",
-            })
-                .then((r) => r.json())
-                .catch((e) => {
-                    notify(
-                        {
-                            type: "danger",
-                            loading: false,
-                            title: "An error occured.",
-                            message: `An error occured: ${e}`,
-                        },
-                        10000,
-                    );
-                });
-
-            if (data !== undefined) {
-            setUser(data);
                 notify(
                     {
                         type: "success",
@@ -98,7 +85,6 @@ export function AuthProvider({ children }: PropsWithChildren) {
                     2000,
                 );
             }
-
             setLoading(false);
         };
 
@@ -140,8 +126,32 @@ export function AuthProvider({ children }: PropsWithChildren) {
             });
     };
 
+    const update = async () => {
+        let data = await fetch(`${import.meta.env.VITE_BASE_API_URL}/me`, {
+            credentials: "include",
+        })
+            .then((r) => r.json())
+            .catch((e) => {
+                notify(
+                    {
+                        type: "danger",
+                        loading: false,
+                        title: "An error occured.",
+                        message: `An error occured: ${e}`,
+                    },
+                    10000,
+                );
+            });
+
+        if (data !== undefined) {
+            setUser(data);
+            return true;
+        }
+        return false;
+    };
+
     return (
-        <AuthContext.Provider value={{ user, loading, login, logout }}>
+        <AuthContext.Provider value={{ user, loading, login, logout, update }}>
             {children}
         </AuthContext.Provider>
     );