Merge pull request #5 from khanghy2130/add-displayname-to-side-panel

Saving user name & improved auth handling

app/components/SidePanel.tsx

@@ -1,45 +1,59 @@
-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>
-}
+    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/root.tsx

@@ -63,10 +63,19 @@ function App() {
             data: { subscription },
         } = supabase.auth.onAuthStateChange((event, session) => {
             revalidator.revalidate();
-            if (event === "SIGNED_IN") {
+            // handle events
+            if (event === "INITIAL_SESSION") {
+                if (session?.user) setUser(session.user);
+            } else if (event === "SIGNED_IN") {
                 setUser(session?.user);
             } else if (event === "SIGNED_OUT") {
                 setUser(undefined);
+            } else if (event === "PASSWORD_RECOVERY") {
+                // handle password recovery event
+            } else if (event === "TOKEN_REFRESHED") {
+                // handle token refreshed event
+            } else if (event === "USER_UPDATED") {
+                // handle user updated event
             }
         });
 
@@ -80,7 +89,7 @@ function App() {
 
     // hide for specific routes
     const location = useLocation();
-    const routesToHideNavigation = ["/login", "/signup"]; ///// add homepage
+    const routesToHideNavigation = ["/login"]; ///// add homepage
     const shouldHideNavigation = routesToHideNavigation.includes(
         location.pathname,
     );

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/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");
+    });
+});