Add react hooks & components to split up the profile page. Learning how to separate hooks

src/components/default/footer/index.tsx

@@ -0,0 +1,20 @@
+'use server';
+
+const FooterTest = () => {
+  return (
+    <footer className='w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16'>
+      <p>
+        Powered by{' '}
+        <a
+          href='https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs'
+          target='_blank'
+          className='font-bold hover:underline'
+          rel='noreferrer'
+        >
+          Supabase
+        </a>
+      </p>
+    </footer>
+  );
+};
+export default FooterTest;

src/components/default/navigation/auth/AvatarDropdown.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui';
+import { getSignedUrl, getProfile, signOut } from '@/lib/actions';
+
+import type { Profile } from '@/utils/supabase';
+import Link from 'next/link';
+
+const AvatarDropdown = () => {
+  const [profile, setProfile] = useState<Profile | undefined>(undefined);
+  const [signedUrl, setSignedUrl] = useState<string | undefined>(undefined);
+
+  const handleSignOut = async () => {
+    await signOut();
+  };
+
+  useEffect(() => {
+    const handleGetProfile = async () => {
+      try {
+        const profileResponse = await getProfile();
+        if (!profileResponse.success)
+          throw new Error('Profile response unsuccessful');
+        setProfile(profileResponse.data);
+      } catch (error) {
+        console.error('Error getting profile:', error);
+      }
+    };
+    handleGetProfile().catch((error) => {
+      console.error('Error getting profile:', error);
+    })
+  }, []);
+
+  useEffect(() => {
+    const handleGetSignedUrl = async () => {
+      try {
+        const response = await getSignedUrl({
+          bucket: 'avatars',
+          url: profile?.avatar_url ?? '',
+        });
+        if (response.success) {
+          setSignedUrl(response.data);
+        }
+      } catch (error) {
+        console.error('Error getting signed URL:', error);
+      }
+    };
+    handleGetSignedUrl().catch((error) => {
+      console.error('Error getting signed URL:', error);
+    });
+  }, [profile]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Avatar>
+          <AvatarImage src={signedUrl ?? '/favicon.ico'} />
+          <AvatarFallback>AN</AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href='/profile' className='w-full justify-center'>
+            Edit profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className='h-[2px]' />
+        <DropdownMenuItem asChild>
+          <button onClick={handleSignOut} className='w-full justify-center'>
+            Log out
+          </button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+export default AvatarDropdown;

src/components/default/navigation/auth/index.tsx

@@ -0,0 +1,29 @@
+'use server';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui';
+import { getProfile } from '@/lib/actions';
+import AvatarDropdown from './AvatarDropdown';
+
+const NavigationAuth = async () => {
+  try {
+    const profile = await getProfile();
+    return profile.success ? (
+      <div className='flex items-center gap-4'>
+        <AvatarDropdown />
+      </div>
+    ) : (
+      <div className='flex gap-2'>
+        <Button asChild size='default' variant={'outline'}>
+          <Link href='/sign-in'>Sign in</Link>
+        </Button>
+        <Button asChild size='sm' variant={'default'}>
+          <Link href='/sign-up'>Sign up</Link>
+        </Button>
+      </div>
+    );
+  } catch (error) {
+    console.error('Error getting profile:', error);
+  }
+};
+export default NavigationAuth;

src/components/default/navigation/index.tsx

@@ -0,0 +1,36 @@
+'use server';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui';
+import NavigationAuth from './auth';
+import { ThemeToggle } from '@/components/context/theme';
+
+const Navigation = () => {
+  return (
+    <nav
+      className='w-full flex justify-center
+      border-b border-b-foreground/10 h-16'
+    >
+      <div
+        className='w-full max-w-5xl flex justify-between
+        items-center p-3 px-5 text-sm'
+      >
+        <div className='flex gap-5 items-center font-semibold'>
+          <Link href={'/'}>T3 Supabase Template</Link>
+          <div className='flex items-center gap-2'>
+            <Button asChild>
+              <Link href='https://git.gbrown.org/gib/T3-Template'>
+                Go to Git Repo
+              </Link>
+            </Button>
+          </div>
+        </div>
+        <div className='flex items-center gap-2'>
+          <ThemeToggle />
+          <NavigationAuth />
+        </div>
+      </div>
+    </nav>
+  );
+};
+export default Navigation;

src/components/default/profile/AvatarUpload.tsx

@@ -0,0 +1,71 @@
+import { useFileUpload } from '@/lib/hooks/useFileUpload';
+import { useAvatar } from '@/lib/hooks/useAvatar';
+import type { Profile } from '@/utils/supabase';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui';
+import { Pencil, User, Loader2 } from 'lucide-react';
+
+type AvatarUploadProps = {
+  profile?: Profile;
+  onAvatarUploaded: (path: string) => Promise<void>;
+};
+
+export const AvatarUpload = ({ profile, onAvatarUploaded }: AvatarUploadProps) => {
+  const { avatarUrl } = useAvatar(profile);
+  const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
+
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    
+    const result = await uploadToStorage(file, 'avatars');
+    if (result.success && result.path) {
+      await onAvatarUploaded(result.path);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative group cursor-pointer mb-4" onClick={handleAvatarClick}>
+        <Avatar className="h-32 w-32">
+          {avatarUrl ? (
+            <AvatarImage src={avatarUrl} alt={profile?.full_name ?? 'User'} />
+          ) : (
+            <AvatarFallback className="text-2xl">
+              {profile?.full_name 
+                ? profile.full_name.split(' ').map(n => n[0]).join('').toUpperCase() 
+                : <User size={32} />}
+            </AvatarFallback>
+          )}
+        </Avatar>
+        <div className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
+          transition-all flex items-center justify-center"
+        >
+          <Pencil className="text-white opacity-0 group-hover:opacity-100
+            transition-opacity" size={24}
+          />
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFileChange}
+          disabled={isUploading}
+        />
+      </div>
+      {isUploading && (
+        <div className="flex items-center text-sm text-gray-500 mt-2">
+          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+          Uploading...
+        </div>
+      )}
+      <p className="text-sm text-gray-500 mt-2">
+        Click on the avatar to upload a new image
+      </p>
+    </div>
+  );
+}

src/components/default/profile/ProfileForm.tsx

@@ -0,0 +1,110 @@
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import type { Profile } from '@/utils/supabase';
+import {
+  Button,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
+import { Loader2 } from 'lucide-react';
+import { useEffect } from 'react';
+
+const formSchema = z.object({
+  full_name: z.string().min(5, {
+    message: 'Full name is required & must be at least 5 characters.'
+  }),
+  email: z.string().email(),
+});
+
+type ProfileFormProps = {
+  profile?: Profile;
+  isLoading: boolean;
+  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
+};
+
+export function ProfileForm({ profile, isLoading, onSubmit }: ProfileFormProps) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      full_name: profile?.full_name ?? '',
+      email: profile?.email ?? '',
+    },
+  });
+
+  // Update form values when profile changes
+  useEffect(() => {
+    if (profile) {
+      form.reset({
+        full_name: profile.full_name ?? '',
+        email: profile.email ?? '',
+      });
+    }
+  }, [profile, form]);
+
+  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+    await onSubmit(values);
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(handleSubmit)}
+        className='space-y-6'
+      >
+        <FormField
+          control={form.control}
+          name='full_name'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Full Name</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormDescription>
+                Your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormDescription>
+                Your email address associated with your account.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        
+        <div className="flex justify-end">
+          <Button type='submit' disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              'Save Changes'
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

src/components/default/profile/index.tsx

@@ -0,0 +1,2 @@
+export * from './AvatarUpload';
+export * from './ProfileForm';

src/components/default/submit-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui';
 import { type ComponentProps } from 'react';
 import { useFormStatus } from 'react-dom';
 

src/components/default/tutorial/code-block.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui';
+
+const CopyIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='20'
+    height='20'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='2'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+  >
+    <rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect>
+    <path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path>
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='20'
+    height='20'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='2'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+  >
+    <polyline points='20 6 9 17 4 12'></polyline>
+  </svg>
+);
+
+export function CodeBlock({ code }: { code: string }) {
+  const [icon, setIcon] = useState(CopyIcon);
+
+  const copy = async () => {
+    await navigator?.clipboard?.writeText(code);
+    setIcon(CheckIcon);
+    setTimeout(() => setIcon(CopyIcon), 2000);
+  };
+
+  return (
+    <pre className='bg-muted rounded-md p-6 my-6 relative'>
+      <Button
+        size='icon'
+        onClick={copy}
+        variant={'outline'}
+        className='absolute right-2 top-2'
+      >
+        {icon}
+      </Button>
+      <code className='text-xs p-3'>{code}</code>
+    </pre>
+  );
+}

src/components/default/tutorial/fetch-data-steps.tsx

@@ -0,0 +1,95 @@
+import { TutorialStep, CodeBlock } from '@/components/default/tutorial';
+
+const create = `create table notes (
+  id bigserial primary key,
+  title text
+);
+
+insert into notes(title)
+values
+  ('Today I created a Supabase project.'),
+  ('I added some data and queried it from Next.js.'),
+  ('It was awesome!');
+`.trim();
+
+const server = `import { createClient } from '@/utils/supabase/server'
+
+export default async function Page() {
+  const supabase = await createClient()
+  const { data: notes } = await supabase.from('notes').select()
+
+  return <pre>{JSON.stringify(notes, null, 2)}</pre>
+}
+`.trim();
+
+const client = `'use client'
+
+import { createClient } from '@/utils/supabase/client'
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+  const [notes, setNotes] = useState<any[] | null>(null)
+  const supabase = createClient()
+
+  useEffect(() => {
+    const getData = async () => {
+      const { data } = await supabase.from('notes').select()
+      setNotes(data)
+    }
+    getData()
+  }, [])
+
+  return <pre>{JSON.stringify(notes, null, 2)}</pre>
+}
+`.trim();
+
+export const FetchDataSteps = () => {
+  return (
+    <ol className='flex flex-col gap-6'>
+      <TutorialStep title='Create some tables and insert some data'>
+        <p>
+          Head over to the{' '}
+          <a
+            href='https://supabase.com/dashboard/project/_/editor'
+            className='font-bold hover:underline text-foreground/80'
+            target='_blank'
+            rel='noreferrer'
+          >
+            Table Editor
+          </a>{' '}
+          for your Supabase project to create a table and insert some example
+          data. If you&apos;re stuck for creativity, you can copy and paste the
+          following into the{' '}
+          <a
+            href='https://supabase.com/dashboard/project/_/sql/new'
+            className='font-bold hover:underline text-foreground/80'
+            target='_blank'
+            rel='noreferrer'
+          >
+            SQL Editor
+          </a>{' '}
+          and click RUN!
+        </p>
+        <CodeBlock code={create} />
+      </TutorialStep>
+
+      <TutorialStep title='Query Supabase data from Next.js'>
+        <p>
+          To create a Supabase client and query data from an Async Server
+          Component, create a new page.tsx file at{' '}
+          <span className='relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-medium text-secondary-foreground border'>
+            /app/notes/page.tsx
+          </span>{' '}
+          and add the following.
+        </p>
+        <CodeBlock code={server} />
+        <p>Alternatively, you can use a Client Component.</p>
+        <CodeBlock code={client} />
+      </TutorialStep>
+
+      <TutorialStep title='Build in a weekend and scale to millions!'>
+        <p>You&apos;re ready to launch your product to the world! 🚀</p>
+      </TutorialStep>
+    </ol>
+  );
+};

src/components/default/tutorial/index.tsx

@@ -0,0 +1,3 @@
+export { CodeBlock } from './code-block';
+export { FetchDataSteps } from './fetch-data-steps';
+export { TutorialStep } from './tutorial-step';

src/components/default/tutorial/tutorial-step.tsx

@@ -0,0 +1,30 @@
+import { Checkbox } from '@/components/ui';
+
+export const TutorialStep = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <li className='relative'>
+      <Checkbox
+        id={title}
+        name={title}
+        className={`absolute top-[3px] mr-2 peer`}
+      />
+      <label
+        htmlFor={title}
+        className={`relative text-base text-foreground peer-checked:line-through font-medium`}
+      >
+        <span className='ml-8'>{title}</span>
+        <div
+          className={`ml-8 text-sm peer-checked:line-through font-normal text-muted-foreground`}
+        >
+          {children}
+        </div>
+      </label>
+    </li>
+  );
+};