feat: fetch profile image for nav bar

This commit is contained in:
Sosokker 2024-11-07 04:58:36 +07:00
parent c99301a66d
commit ac2af453e5
2 changed files with 16 additions and 4 deletions

View File

@ -16,9 +16,10 @@ import { useUserRole } from "@/hooks/useUserRole";
interface AuthenticatedComponentsProps {
uid: string;
avatarUrl?: string | null;
}
export const AuthenticatedComponents = ({ uid }: AuthenticatedComponentsProps) => {
export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedComponentsProps) => {
const notifications = 100;
const displayValue = notifications >= 100 ? "..." : notifications;
const { data } = useUserRole();
@ -44,7 +45,12 @@ export const AuthenticatedComponents = ({ uid }: AuthenticatedComponentsProps) =
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="overflow-hidden rounded-full">
<Avatar>
<AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
{avatarUrl ? (
<AvatarImage src={avatarUrl} alt="profile" />
) : (
<AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" alt="profile" />
)}
<AvatarFallback>1</AvatarFallback>
</Avatar>
</Button>

View File

@ -17,6 +17,7 @@ import { SearchBar } from "./serchBar";
import { AuthenticatedComponents } from "./AuthenticatedComponents";
import { UnAuthenticatedComponents } from "./UnAuthenticatedComponents";
import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
import { getUserId } from "@/lib/supabase/actions/getUserId";
const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
@ -44,8 +45,9 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
ListItem.displayName = "ListItem";
export async function NavigationBar() {
const client = createSupabaseClient();
const userId = await getUserId();
const { data: avatarUrl } = await client.from("profiles").select("avatar_url").eq("id", userId).single();
const businessComponents = [
{
title: "Business",
@ -119,7 +121,11 @@ export async function NavigationBar() {
<ThemeToggle />
</div>
<Separator orientation="vertical" className="mx-3" />
{userId ? <AuthenticatedComponents uid={userId} /> : <UnAuthenticatedComponents />}
{userId ? (
<AuthenticatedComponents uid={userId} avatarUrl={avatarUrl?.avatar_url} />
) : (
<UnAuthenticatedComponents />
)}
</div>
</div>
</div>