feat: make app-header work with authentication

experiment-station · Dec 12, 2023 · 1a55ee8 · 1a55ee8
1 parent 732333a
commit 1a55ee8
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 45 deletions.
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
@@ -13,7 +13,7 @@ export default function Page() {
 
       <form action="/auth/sign-in" method="POST">
         <Flex direction="column">
-          <Button color="gray" highContrast size="3" type="submit">
+          <Button highContrast size="3" type="submit">
             <FaSpotify />
             Continue with Spotify
           </Button>

diff --git a/components/layout/app-header.tsx b/components/layout/app-header.tsx
@@ -1,7 +1,19 @@
 import { ArrowRightIcon, PersonIcon } from '@radix-ui/react-icons';
-import { Avatar, Button, DropdownMenu, Flex, Text } from '@radix-ui/themes';
+import {
+  Avatar,
+  Button,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRoot,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Flex,
+  Text,
+} from '@radix-ui/themes';
 import Link from 'next/link';
 
+import { UnstyledButton } from '../ui/unstyled-button';
 import { AppContent } from './app-content';
 import { AppHeaderLogo } from './app-header-logo';
 
@@ -22,52 +34,60 @@ function AppHeaderActionsAuthenticated(
   props: Pick<Exclude<Props, { variant: 'guest' }>, 'user'>,
 ) {
   return (
-    <Flex align="center" gap="2">
-      <Flex align="end" direction="column">
-        <Text size="2" weight="medium">
-          {props.user.username}
-        </Text>
+    <DropdownMenuRoot>
+      <DropdownMenuTrigger>
+        <Avatar
+          fallback={<PersonIcon />}
+          radius="full"
+          src={props.user.avatarURL}
+        />
+      </DropdownMenuTrigger>
 
-        <Text color="gray" size="2">
-          {props.user.credits === 0 ? 'No' : props.user.credits} credits
-          remaining
-        </Text>
-      </Flex>
+      <DropdownMenuContent
+        align="end"
+        highContrast
+        style={{
+          minWidth: 200,
+        }}
+      >
+        <DropdownMenuLabel asChild>
+          <Flex align="start" direction="column" height="auto">
+            <Text color="gray" highContrast weight="medium">
+              {props.user.username}
+            </Text>
 
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <Avatar
-            fallback={<PersonIcon />}
-            radius="full"
-            src={props.user.avatarURL}
-          />
-        </DropdownMenu.Trigger>
+            <Text color="gray">
+              {props.user.credits === 0 ? 'No' : props.user.credits} credits
+              remaining
+            </Text>
+          </Flex>
+        </DropdownMenuLabel>
 
-        <DropdownMenu.Content>
-          <DropdownMenu.Item>Buy credits</DropdownMenu.Item>
-          <DropdownMenu.Item>Settings</DropdownMenu.Item>
-          <DropdownMenu.Separator />
-          <DropdownMenu.Item color="red">Sign out</DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </Flex>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem>Your episodes</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem asChild color="red">
+          <form action="/auth/sign-out" method="POST">
+            <UnstyledButton type="submit">Sign out</UnstyledButton>
+          </form>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuRoot>
   );
 }
 
 function AppHeaderActionsGuest() {
   return (
-    <Flex gap="2">
-      <Button asChild variant="soft">
-        <Link href="/sign-in">Sign in</Link>
-      </Button>
-
-      <Button asChild>
-        <Link href="/sign-up">
-          Get started
-          <ArrowRightIcon />
-        </Link>
-      </Button>
-    </Flex>
+    <Button asChild highContrast>
+      <Link href="/sign-in">
+        Get started
+        <ArrowRightIcon />
+      </Link>
+    </Button>
   );
 }
 

diff --git a/components/layout/app-layout.tsx b/components/layout/app-layout.tsx
@@ -1,22 +1,40 @@
 import type { PropsWithChildren } from 'react';
 
+import { fetchAccount } from '@/lib/services/account';
+import { getIsAuthenticated } from '@/lib/services/supabase/auth';
 import { Box, Flex } from '@radix-ui/themes';
 
 import { AppContent } from './app-content';
 import { AppFooter } from './app-footer';
 import { AppHeader } from './app-header';
 
-export function AppLayout({ children }: PropsWithChildren) {
+export async function AppLayout({ children }: PropsWithChildren) {
+  let appHeader = <AppHeader variant="guest" />;
+  const isAuthenticated = await getIsAuthenticated();
+
+  if (isAuthenticated) {
+    const account = await fetchAccount();
+
+    appHeader = (
+      <AppHeader
+        user={{
+          avatarURL: account.avatar_url || '',
+          credits: account.ai_credit || 0,
+          username: account.display_name || '',
+        }}
+        variant="authenticated"
+      />
+    );
+  }
+
   return (
     <Flex
       direction="column"
       style={{
         minHeight: '100vh',
       }}
     >
-      <header className="sticky">
-        <AppHeader variant="guest" />
-      </header>
+      <header className="sticky">{appHeader}</header>
 
       <main>
         <AppContent>

diff --git a/components/theme-provider/radix-themes.provider.tsx b/components/theme-provider/radix-themes.provider.tsx
@@ -4,7 +4,7 @@ import { Theme } from '@radix-ui/themes';
 
 export function RadixThemesProvider({ children }: PropsWithChildren) {
   return (
-    <Theme accentColor="amber" appearance="dark" grayColor="sand">
+    <Theme accentColor="gray" appearance="dark">
       {children}
     </Theme>
   );

diff --git a/components/ui/unstyled-button.tsx b/components/ui/unstyled-button.tsx
@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+
+export function UnstyledButton(props: ComponentProps<'button'>) {
+  return (
+    <button
+      style={{
+        background: 'none',
+        border: 'none',
+        color: 'inherit',
+        font: 'inherit',
+        margin: 0,
+        padding: 0,
+      }}
+      type={props.type ?? 'button'}
+      {...props}
+    />
+  );
+}