updated

stephan-rz · May 19, 2024 · a823032 · a823032
1 parent b965b4b
commit a823032
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
     "react-hot-toast": "^2.4.1",
     "react-spinners": "^0.13.8",
     "resend": "^3.2.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/bcrypt": "^5.0.2",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={poppins.className}>
-        <SessionProvider>
+        <SessionProvider >
           <NextProvider>
             {children}
           </NextProvider>

diff --git a/src/components/avatar.tsx b/src/components/avatar.tsx
@@ -1,9 +1,14 @@
 import { Avatar } from "@nextui-org/react"
+import { User } from "@prisma/client"
 
-export const UserAvatar = (image: string) => {
+interface UserAvatarProps {
+    user?: User
+}
+
+export const UserAvatar = ({ user }: UserAvatarProps) => {
     return (
         <div className="relative">
-            <Avatar src={image} alt="avatar" showFallback />
+            <Avatar src={user?.image as string} alt="avatar" showFallback />
             <span className="absolute block rounded-full bg-green-500 ring-2 ring-white top-[2px] right-[2px] h-2 w-2 md:h-2 md:w-2" />
         </div>
     )

diff --git a/src/components/conversations/chat-header.tsx b/src/components/conversations/chat-header.tsx
@@ -1,12 +1,12 @@
 "use client"
 
 import useOtherUser from "@/hooks/use-other-user";
-import { Avatar } from "@nextui-org/react";
 import { Conversation, User } from "@prisma/client";
 import { ArrowLeft, Ellipsis } from "lucide-react";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import ProfileDrawer from "./profile-drawer";
+import { UserAvatar } from "../avatar";
 
 interface ChatHeaderProps {
     conversation: Conversation & {
@@ -38,10 +38,7 @@ const ChatHeader = ({ conversation }: ChatHeaderProps) => {
                     <Link href="/conversations" className="lg:hidden block text-white hover:text-primary transition cursor-pointer">
                         <ArrowLeft size={24} />
                     </Link>
-                    <div className="relative">
-                        <Avatar src={otherUser?.image as string} alt="avatar" showFallback />
-                        <span className="absolute block rounded-full bg-green-500 ring-2 ring-white top-[2px] right-[2px] h-2 w-2 md:h-2 md:w-2" />
-                    </div>
+                    <UserAvatar user={otherUser} />
                     <div className="flex flex-col">
                         <div className="truncate">
                             {conversation.name || otherUser.name}

diff --git a/src/components/conversations/conversation-box.tsx b/src/components/conversations/conversation-box.tsx
@@ -9,6 +9,7 @@ import useOtherUser from "@/hooks/use-other-user"
 import { useCurrentUser } from "@/hooks/use-current-user"
 import { cn } from "@/lib/utils"
 import { Avatar } from "@nextui-org/react"
+import { UserAvatar } from "../avatar"
 
 interface ConversationBoxProps {
     data: FullConversationType,
@@ -60,10 +61,7 @@ const ConversationBox = ({
 
     return (
         <button onClick={handleClick} className={cn("w-full relative flex items-center space-x-3 p-3 hover:bg-zinc-700 rounded-lg transition cursor-pointer", selected ? "bg-zinc-800" : "bg-zinc-900")}>
-            <div className="relative">
-                <Avatar src={otherUser?.image as string} alt="avatar" showFallback/>
-                <span className="absolute block rounded-full bg-green-500 ring-2 ring-white top-[2px] right-[2px] h-2 w-2 md:h-2 md:w-2"/>
-            </div>
+            <UserAvatar user={otherUser} />
             <div className="min-w-0 flex-1">
                 <div className="focus:outline-none">
                     <div className="flex justify-between gap-3 items-center mb-1">

diff --git a/src/components/conversations/message-box.tsx b/src/components/conversations/message-box.tsx
@@ -6,6 +6,7 @@ import { FullMessageType } from "@/types"
 import { Avatar } from "@nextui-org/react";
 import { format } from "date-fns";
 import Image from "next/image";
+import { UserAvatar } from "../avatar";
 
 interface MessageBoxProps {
     data: FullMessageType;
@@ -45,10 +46,7 @@ const MessageBox = ({
     return (
         <div className={container}>
             <div className={avatar}>
-                <div className="relative">
-                    <Avatar src={data?.sender.image as string} alt="avatar" showFallback />
-                    <span className="absolute block rounded-full bg-green-500 ring-2 ring-white top-[2px] right-[2px] h-2 w-2 md:h-2 md:w-2" />
-                </div>
+                <UserAvatar user={data.sender} />
             </div>
             <div className={body}>
                 <div className="flex items-center gap-2">

diff --git a/src/components/conversations/profile-drawer.tsx b/src/components/conversations/profile-drawer.tsx
@@ -9,6 +9,7 @@ import { Trash2, X } from "lucide-react";
 import { useMemo, Fragment, useState } from "react";
 import Modal from "../modal";
 import DeleteConfirmModal from "../modals/conversation-delete-confirm-modal";
+import { UserAvatar } from "../avatar";
 
 
 interface ProfileDrawerProps {
@@ -73,10 +74,7 @@ const ProfileDrawer = ({
                                             <div className="relative mt-6 flex-1 px-4 sm:px-6">
                                                 <div className="flex flex-col items-center">
                                                     <div className="mb-2">
-                                                        <div className="relative">
-                                                            <Avatar size="lg" src={otherUser?.image as string} alt="avatar" showFallback />
-                                                            <span className="absolute block rounded-full bg-green-500 ring-2 ring-white top-[5px] right-[5px] h-2 w-2 md:h-2 md:w-2" />
-                                                        </div>
+                                                        <UserAvatar user={otherUser} />
                                                     </div>
                                                     <div>
                                                         {title}