From fb5a1afd4a3efc7780d09657e90dc1474400f474 Mon Sep 17 00:00:00 2001
From: hbrooks <seanhunterbrooks@gmail.com>
Date: Tue, 29 Aug 2023 17:00:51 -0400
Subject: [PATCH] rename HomeContainer to AppShell, render the Avatar with a
 default one if one doesnt exist;

---
 .../home/{HomeContainer.tsx => AppShell.tsx}  | 20 ++++++++++++++-----
 src/pages/home.tsx                            |  4 ++--
 2 files changed, 17 insertions(+), 7 deletions(-)
 rename src/components/home/{HomeContainer.tsx => AppShell.tsx} (93%)

diff --git a/src/components/home/HomeContainer.tsx b/src/components/home/AppShell.tsx
similarity index 93%
rename from src/components/home/HomeContainer.tsx
rename to src/components/home/AppShell.tsx
index c2d217c..4b60801 100644
--- a/src/components/home/HomeContainer.tsx
+++ b/src/components/home/AppShell.tsx
@@ -12,16 +12,15 @@ function classNames(...classes: string[]) {
 
 type User =  Database['public']['Tables']['users']['Row'] 
 
-type HomeContainerProps = {
+type AppShellProps = {
   user: User;
 }
   
-export default function HomeContainer(props: HomeContainerProps) {
+export default function AppShell(props: AppShellProps) {
   const { push } = useRouter();
   const supabase = createClientComponentClient<Database>()
 
   const userNavigation = [
-    { name: 'Your Profile', href: '#' },
     { name: 'Settings', href: '#' },
     { name: 'Sign out', href: '#', onClick: () => {
       supabase.auth.signOut();
@@ -29,6 +28,17 @@ export default function HomeContainer(props: HomeContainerProps) {
     } },
   ]
 
+  const getAvatar = (size: number) => {
+    if (props.user.avatar_url) {
+      return <img className={`h-${size} w-${size} rounded-full`} src={props.user.avatar_url} alt="" />
+    }
+    return <div className={`h-${size} w-${size} rounded-full bg-gray-500"`}>
+      <div className="flex h-full w-full items-center justify-center text-white">
+        {props.user.email[0]}
+      </div>
+    </div>
+  }
+
 
 
   return (
@@ -65,7 +75,7 @@ export default function HomeContainer(props: HomeContainerProps) {
                           <Menu.Button className="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
                             <span className="absolute -inset-1.5" />
                             <span className="sr-only">Open user menu</span>
-                            <img className="h-8 w-8 rounded-full" src={props.user.avatar_url} alt="" />
+                            {getAvatar(8)}
                           </Menu.Button>
                         </div>
                         <Transition
@@ -118,7 +128,7 @@ export default function HomeContainer(props: HomeContainerProps) {
                 <div className="border-t border-gray-700 pb-3 pt-4">
                   <div className="flex items-center px-5">
                     <div className="flex-shrink-0">
-                      <img className="h-10 w-10 rounded-full" src={props.user.avatar_url} alt="" />
+                      {getAvatar(10)}
                     </div>
                     <div className="ml-3">
                       <div className="text-base font-medium leading-none text-white">{props.user.email}</div>
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 2f053e7..ef5e4bd 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useEffect } from 'react';
 import { useSessionContext } from '@supabase/auth-helpers-react'
 import { useRouter } from 'next/router';
-import HomeContainer from '@/components/home/HomeContainer';
+import AppShell from '@/components/home/AppShell';
 import Spinner from '@/components/home/Spinner';
 import ErrorMode from '@/components/home/ErrorMode';
 import { Database } from '../../types/supabase';
@@ -48,7 +48,7 @@ export default function AuthPage() {
   if (isLoading) {
     return (<Spinner/>);
   } else if (user) {
-    return (<HomeContainer
+    return (<AppShell
       user={user}
     />)
   } else {