update ui

QuocAnh189 · Nov 9, 2024 · 2a331cf · 2a331cf
1 parent 4aa1cf5
commit 2a331cf
Show file tree

Hide file tree

Showing 10 changed files with 235 additions and 132 deletions.
diff --git a/src/components/message/UserAvatar.tsx → src/components/message/Avatar.tsx b/src/components/message/UserAvatar.tsx → src/components/message/Avatar.tsx
@@ -1,27 +1,34 @@
-const UserAvatar = ({ user = { name: 'Anh Quoc' }, online = null, profile = false }: any) => {
+interface IProps {
+  imageUrl: string
+  online?: boolean
+  profile?: boolean
+}
+
+const Avatar = (props: IProps) => {
+  const { imageUrl, online, profile } = props
   const onlineClass = online === true ? 'online' : online === false ? 'offline' : ''
 
-  const sizeClass = profile ? 'w-40' : 'w-8'
+  const sizeClass = profile ? 'w-50' : 'w-10'
 
   return (
     <>
-      {user?.avatar_url && (
+      {imageUrl && (
         <div className={`chat-image avatar ${onlineClass}`}>
           <div className={`rounded-full ${sizeClass}`}>
-            <img src={user.avatar_url} />
+            <img src={imageUrl} />
           </div>
         </div>
       )}
 
-      {!user?.avatar_url && (
+      {!imageUrl && (
         <div className={`chat-image avatar placeholder ${onlineClass}`}>
           <div className={`bg-gray-400 text-gray-800 rounded-full ${sizeClass}`}>
-            <span className='text-xl'>{user.name.substring(0, 1)}</span>
+            <span className='text-xl'>{'N'.substring(0, 1)}</span>
           </div>
         </div>
       )}
     </>
   )
 }
 
-export default UserAvatar
+export default Avatar
diff --git a/src/components/message/ConversationHeader.tsx b/src/components/message/ConversationHeader.tsx
@@ -1,19 +1,15 @@
 //components
-import UserAvatar from './UserAvatar'
-
-//icons
-import { ArrowLeftIcon } from '@heroicons/react/20/solid'
+import Avatar from './Avatar'
 
 const ConversationHeader = () => {
   return (
     <div className='p-3 flex justify-between items-center border-b border-slate-700'>
       <div className='flex items-center gap-3'>
-        <a href='' className='inline-block sm:hidden'>
-          <ArrowLeftIcon className='w-6 h-6' />
-        </a>
-
-        <UserAvatar />
-        <h3 className='text-gray-500'>Tran Phuoc Anh Quoc</h3>
+        <Avatar imageUrl='https://images.pexels.com/photos/2747449/pexels-photo-2747449.jpeg?cs=srgb&dl=pexels-wolfgang-1002140-2747449.jpg&fm=jpg' />
+        <div className=''>
+          <h3 className='text-gray-500'>Music With UIT</h3>
+          <p className='text-header'>Author: Trần Phước Anh Quốc</p>
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/message/ConversationItem.tsx b/src/components/message/ConversationItem.tsx
@@ -1,28 +1,26 @@
 //components
-import UserAvatar from './UserAvatar'
+import Avatar from './Avatar'
 
 //dayjs
 import dayjs from 'dayjs'
 
-const ConversationItem = ({ conversation, selectedConversation = null, online = null }: any) => {
-  let classes = 'border-transparent'
+interface IProps {
+  conversation: any
+  selectedConversation?: boolean
+  online?: boolean
+}
 
-  if (selectedConversation) {
-    if (!selectedConversation.is_group && !conversation.is_group && selectedConversation.id === conversation.id) {
-      classes = 'border-blue-500 bg-black/30'
-    }
-  }
+const ConversationItem = (prop: IProps) => {
+  const { conversation, online } = prop
 
   return (
     <a
       href=''
       className={
-        'conversation-item flex items-center p-2 gap-2 text-gray-300 transition-all cursor-pointer border-l-4 hover:bg-black/30 ' +
-        classes +
-        'pr-4'
+        'conversation-item flex items-center p-2 gap-2 text-gray-300 transition-all cursor-pointer border-l-4 hover:bg-black/30 pr-4'
       }
     >
-      <UserAvatar online={online} />
+      <Avatar imageUrl={conversation.avatarImageUrl} online={online} />
 
       <div
         className={

diff --git a/src/components/message/MessageInput.tsx b/src/components/message/MessageInput.tsx
@@ -67,7 +67,7 @@ const MessageInput = ({ conversation = null }: any) => {
         <AudioRecorder fileReady={recordedAudioReady} />
       </div>
       <div className='order-2 px-2 xs:p-0 min-w-[220px] basic-full xs:basic-0 xs:order-2 flex-1 relative'>
-        <div className='flex'>
+        <div className='flex h-full'>
           <NewMessageInput
             value={newMessage}
             onSend={onSendClick}

diff --git a/src/components/message/MessageItem.tsx b/src/components/message/MessageItem.tsx
@@ -1,6 +1,6 @@
 //components
 import ReactMarkdown from 'react-markdown'
-import UserAvatar from './UserAvatar'
+import Avatar from './Avatar'
 
 //dayjs
 import dayjs from 'dayjs'
@@ -9,30 +9,30 @@ import MessageOptionsDropdown from './MessageOptionsDropdown'
 
 const MessageItem = ({ message, attachmentClick }: any) => {
   const currentUser: any = {
-    id: 1
+    id: '1'
   }
 
   return (
-    <div className={'chat ' + (message.sender_id === currentUser.id ? 'chat-end' : 'chat-start')}>
-      {<UserAvatar user={message.sender} />}
+    <div className={'chat ' + (message.sender.id === currentUser.id ? 'chat-end' : 'chat-start')}>
+      {<Avatar imageUrl={message.sender.avatar} />}
 
       <div className='chat-header'>
-        {message.sender_id === currentUser.id ? message.sender.name : ''}
+        {message.sender.fullName}
 
         <time className='text-xs opacity-50 ml-2'>{dayjs(message.created_at).format('DD/MM h:mm A')}</time>
       </div>
 
       <div
         className={
-          'chat-bubble relative ' + (message.sender_id === currentUser.id ? ' chat-bubble-info' : ' chat-start')
+          'chat-bubble relative ' + (message.sender.id === currentUser.id ? ' chat-bubble-info' : ' chat-start')
         }
       >
         {message.sender_id === currentUser.id && <MessageOptionsDropdown />}
         <div className='chat-message'>
           <div className='chat-message-content'>
-            <ReactMarkdown>{message.message}</ReactMarkdown>
+            <ReactMarkdown>{message.content}</ReactMarkdown>
           </div>
-          <MessageAttachments attachments={message.attachments} attachmentClick={attachmentClick} />
+          <MessageAttachments attachments={message?.attachments} attachmentClick={attachmentClick} />
         </div>
       </div>
     </div>

diff --git a/src/db/conversation_event.ts b/src/db/conversation_event.ts
@@ -0,0 +1,81 @@
+const conversation_events = [
+  {
+    avatarImageUrl:
+      'https://images.pexels.com/photos/2747449/pexels-photo-2747449.jpeg?cs=srgb&dl=pexels-wolfgang-1002140-2747449.jpg&fm=jpg',
+    name: 'Music With UIT',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Giá của sự kiện này đang cập nhập và chúng tôi sẽ đề cập lại sau'
+  },
+  {
+    avatarImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ52LuXfuyFjceKAdGai9o6PTeoQr5yiQxUtA&s',
+    name: 'Music With UEH',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Sự kiện này tổ chức tại thành phố Hồ Chí Minh'
+  },
+  {
+    avatarImageUrl: 'https://prankl-consulting.com/wp-content/uploads/2023/06/AdobeStock_119471366-1-1088x726.jpeg',
+    name: 'Music In Live',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Giá của sự kiện này đang cập nhập và chúng tôi sẽ đề cập lại sau'
+  },
+  {
+    avatarImageUrl:
+      'https://img.freepik.com/free-vector/sport-text-banner-poster-design_1308-132612.jpg?semt=ais_hybrid',
+    name: 'Sport In UIT',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Tại sao tôi không thấy giá của sự kiện này'
+  },
+  {
+    avatarImageUrl:
+      'https://www.electricireland.com/images/folder/homepage-spotlights/benefits-0.jpg?sfvrsn=bc86ba0d_2',
+    name: 'Sport In UEH',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Sự kiện này tổ chức tại thành phố Hồ Chí Minh'
+  },
+  {
+    avatarImageUrl: 'https://www.uit.edu.vn/sites/vi/files/uploads/images/thumbs/202011/khpm2.jpg',
+    name: 'Sport In Live',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Sự kiện có hơn 3000 người tham dự'
+  },
+  {
+    avatarImageUrl:
+      'https://thesentry.com.vn/wp-content/uploads/2024/01/workshop-la-gi-7-buoc-to-chuc-workshop-hieu-qua-1.jpg',
+    name: 'Workshop with UIT',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Sự kiện này tổ chức tại thành phố Hồ Chí Minh'
+  },
+  {
+    avatarImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlctaT_Xg2OpWZRHXfP5k5KZrxVch4BCEG8A&s',
+    name: 'Workshop with UEH',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Sự kiện này tổ chức tại thành phố Hồ Chí Minh'
+  },
+  {
+    avatarImageUrl:
+      'https://vietnamteachingjobs.com/wp-content/uploads/2023/03/loi-ich-cua-work-shop-la-gi-1-750x375.jpg',
+    name: 'Workshop Technology',
+    creatorName: 'Tran Phuoc Anh Quoc',
+    creatorAvatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Sự kiện này tổ chức tại thành phố Hồ Chí Minh'
+  }
+]
+
+export default conversation_events
diff --git a/src/db/conversation_user.ts b/src/db/conversation_user.ts
@@ -0,0 +1,17 @@
+const conversation_users = [
+  {
+    avatarImageUrl: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
+    name: 'Tran Phuoc Anh Quoc',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Bạn có phải là người đã đặt vé của tôi sáng nay'
+  },
+  {
+    avatarImageUrl:
+      'https://res.cloudinary.com/dadvtny30/image/upload/v1729096963/portfolio/user/mzrgkwrrdp2rvbmvceff.jpg',
+    name: 'Tran Vuong Duy',
+    last_message_date: '2023-09-01T00:00:00.000Z',
+    last_message: 'Bạn có phải là người đã đặt vé của tôi sáng nay'
+  }
+]
+
+export default conversation_users