rename HomeContainer to AppShell, render the Avatar with a default on…

…e if one doesnt exist;
ellipsis-dev · Aug 29, 2023 · fb5a1af · fb5a1af
1 parent a61d7ac
commit fb5a1af
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/components/home/HomeContainer.tsx → src/components/home/AppShell.tsx b/src/components/home/HomeContainer.tsx → src/components/home/AppShell.tsx
@@ -12,23 +12,33 @@ 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();
       push('/');
     } },
   ]
 
+  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
@@ -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 {