From bcd5474fce79d7df93f899edcc1d740eb7e12618 Mon Sep 17 00:00:00 2001 From: Man Luu Date: Fri, 15 Mar 2024 21:22:47 -0500 Subject: [PATCH] Subject: added display name to SidePanel --- app/components/SidePanel.tsx | 76 +++++++++++++++++++++------------- app/routes/login/LoginForm.tsx | 2 +- app/routes/login/index.tsx | 8 +++- app/routes/testRoute.inner.tsx | 9 ++++ app/routes/testRoute.tsx | 21 ++++++++++ app/tests/somefile.test.tsx | 33 +++++++-------- database.types.ts | 51 ----------------------- 7 files changed, 100 insertions(+), 100 deletions(-) create mode 100644 app/routes/testRoute.inner.tsx create mode 100644 app/routes/testRoute.tsx diff --git a/app/components/SidePanel.tsx b/app/components/SidePanel.tsx index d4e62fb..3aaae14 100644 --- a/app/components/SidePanel.tsx +++ b/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>; 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
- - - - {user?
-

Logged in as {user.email}

- -
: - - } - -
-} \ No newline at end of file + }; + + // TEST // + console.log(user); + // TEST // + + return ( +
+ + + + {user ? ( +
+

Logged in as {user.user_metadata.full_name}!

+ +
+ ) : ( + + + + )} +
+ ); +} diff --git a/app/routes/login/LoginForm.tsx b/app/routes/login/LoginForm.tsx index 439e92e..0d01d86 100644 --- a/app/routes/login/LoginForm.tsx +++ b/app/routes/login/LoginForm.tsx @@ -29,7 +29,7 @@ export default function LoginForm({ }) { const fillDemoAcc = () => { setEmail("hynguyendev@gmail.com"); - setPassword("123+Ab"); + setPassword("Test!123"); }; return ( diff --git a/app/routes/login/index.tsx b/app/routes/login/index.tsx index eda3050..b683d83 100644 --- a/app/routes/login/index.tsx +++ b/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); diff --git a/app/routes/testRoute.inner.tsx b/app/routes/testRoute.inner.tsx new file mode 100644 index 0000000..2724885 --- /dev/null +++ b/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
Test Router Inner
; +} diff --git a/app/routes/testRoute.tsx b/app/routes/testRoute.tsx new file mode 100644 index 0000000..6115d10 --- /dev/null +++ b/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(false); + + return ( +
+ Test Route + + +
+ ); +} diff --git a/app/tests/somefile.test.tsx b/app/tests/somefile.test.tsx index 7669603..cde0d83 100644 --- a/app/tests/somefile.test.tsx +++ b/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() - + render(); + // 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"); + }); +}); diff --git a/database.types.ts b/database.types.ts index ef60d33..e69de29 100644 --- a/database.types.ts +++ b/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 - } - } -}