Subject: added display name to SidePanel

app/components/SidePanel.tsx

@@ -1,45 +1,63 @@
-import { Link } from '@remix-run/react';
+import { Link } from "@remix-run/react";
 
-import { useTheme } from '~/utils/Navbar/ThemeProvider';
-
-import type { ContextProps } from '../utils/types/ContextProps.type';
+import { useTheme } from "~/utils/Navbar/ThemeProvider";
 
+import type { ContextProps } from "../utils/types/ContextProps.type";
 
 type Props = {
     sidePanelIsShown: boolean;
     setSidePanelIsShown: React.Dispatch<React.SetStateAction<boolean>>;
     user: ContextProps["user"];
-    supabase: ContextProps["supabase"]
+    supabase: ContextProps["supabase"];
 };
 
-export default function SidePanel(
-    {sidePanelIsShown, setSidePanelIsShown, user, supabase}
-: Props){
+export default function SidePanel({
+    sidePanelIsShown,
+    setSidePanelIsShown,
+    user,
+    supabase,
+}: Props) {
     const [theme, setTheme] = useTheme();
     const toggleTheme = () => {
         setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
     };
 
     const logout = async () => {
-        const {error} = await supabase.auth.signOut();
+        const { error } = await supabase.auth.signOut();
         if (error) alert("Error while logging out.");
-    }
-
-    return <div 
-    className={(sidePanelIsShown ? "right-0" : "-right-96") + 
-    ` fixed h-screen transition-[right] ease-in-out duration-500
-    w-96 max-w-full bg-gray-800 flex flex-col items-center`
-    }>
-        <button className='btn' 
-        onClick={()=>setSidePanelIsShown(false)}>CLOSE</button>
-        <button className='btn' onClick={toggleTheme}>Theme: {theme}</button>
-
-        {user? <div className='flex flex-col mt-12'>
-            <p>Logged in as {user.email}</p>
-            <button className='btn' onClick={logout}>Log out</button>
-        </div> : <Link to="/login">
-            <button className='btn'>Login</button>
-        </Link>}
-
-    </div>
-}
+    };
+
+    // TEST //
+    console.log(user);
+    // TEST //
+
+    return (
+        <div
+            className={
+                (sidePanelIsShown ? "right-0" : "-right-96") +
+                ` fixed flex h-screen w-96 max-w-full
+    flex-col items-center bg-gray-800 transition-[right] duration-500 ease-in-out`
+            }
+        >
+            <button className="btn" onClick={() => setSidePanelIsShown(false)}>
+                CLOSE
+            </button>
+            <button className="btn" onClick={toggleTheme}>
+                Theme: {theme}
+            </button>
+
+            {user ? (
+                <div className="mt-12 flex flex-col">
+                    <p>Logged in as {user.user_metadata.full_name}!</p>
+                    <button className="btn" onClick={logout}>
+                        Log out
+                    </button>
+                </div>
+            ) : (
+                <Link to="/login">
+                    <button className="btn">Login</button>
+                </Link>
+            )}
+        </div>
+    );
+}

app/routes/login/LoginForm.tsx

@@ -29,7 +29,7 @@ export default function LoginForm({
 }) {
     const fillDemoAcc = () => {
         setEmail("[email protected]");
-        setPassword("123+Ab");
+        setPassword("Test!123");
     };
 
     return (

app/routes/login/index.tsx

@@ -48,7 +48,6 @@ export default function Login() {
             setErrorMessage(error.message);
             return;
         }
-
         return navigate("/");
     };
 
@@ -69,6 +68,8 @@ export default function Login() {
         setIsSubmitting(true);
 
         const form = event.currentTarget;
+
+        // BUG: Need to reload the app every time user_data in option has changed ( 111-115 ).
         const formValues: { [key: string]: string } = {
             displayName: form["reg_display_name_input"].value,
             email: form["reg_email_input"].value,
@@ -107,6 +108,11 @@ export default function Login() {
             const { error, data } = await supabase.auth.signUp({
                 email: formValues.email,
                 password: formValues.password,
+                options: {
+                    data: {
+                        full_name: formValues.displayName,
+                    },
+                },
             });
             if (error) {
                 setIsSubmitting(false);

app/routes/testRoute.inner.tsx

@@ -0,0 +1,9 @@
+import { useOutletContext } from "@remix-run/react";
+
+export default function testRouteInner() {
+    const { parentState } = useOutletContext<{ parentState: boolean }>();
+
+    if (!parentState) return;
+
+    return <div> Test Router Inner </div>;
+}

app/routes/testRoute.tsx

@@ -0,0 +1,21 @@
+import { Outlet } from "@remix-run/react";
+import { useState } from "react";
+
+export default function testRoute() {
+    const [parentState, setParentState] = useState<boolean>(false);
+
+    return (
+        <div>
+            Test Route
+            <button
+                onClick={() => {
+                    setParentState(!parentState);
+                }}
+            >
+                {" "}
+                Click here{" "}
+            </button>
+            <Outlet context={{ parentState }} />
+        </div>
+    );
+}

app/tests/somefile.test.tsx

@@ -1,23 +1,20 @@
-import {describe, it, expect} from "vitest"
-import {render, screen} from '@testing-library/react'
-import {userEvent} from "@testing-library/user-event"
-import "@testing-library/jest-dom"
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import "@testing-library/jest-dom";
 
-import Index from '../routes/_index';
+import Index from "../routes/_index";
 
-
-describe('App', () => {
-
-    it('clicks to change text', async () => {
+describe("App", () => {
+    it("clicks to change text", async () => {
         // ARRANGE
-        render(<Index/>)
-      
+        render(<Index />);
+
         // ACT
-        await userEvent.click(screen.getByText('click here'))
-        await screen.findByRole('heading')
-
-        // ASSERT
-        expect(screen.getByRole('heading')).toHaveTextContent("done")
-    })
+        await userEvent.click(screen.getByText("click here"));
+        await screen.findByRole("heading");
 
-})
+        // ASSERT
+        expect(screen.getByRole("heading")).toHaveTextContent("done");
+    });
+});

database.types.ts

@@ -1,51 +0,0 @@
-export type Json =
-  | string
-  | number
-  | boolean
-  | null
-  | { [key: string]: Json | undefined }
-  | Json[]
-
-export interface Database {
-  public: {
-    Tables: {
-      profiles: {
-        Row: {
-          created_at: string
-          id: string
-          username: string | null
-        }
-        Insert: {
-          created_at?: string
-          id: string
-          username?: string | null
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          username?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "profiles_id_fkey"
-            columns: ["id"]
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          }
-        ]
-      }
-    }
-    Views: {
-      [_ in never]: never
-    }
-    Functions: {
-      [_ in never]: never
-    }
-    Enums: {
-      [_ in never]: never
-    }
-    CompositeTypes: {
-      [_ in never]: never
-    }
-  }
-}