From 4d7b3dd8cd9c42fe32916b26e7ea6d4e895ad9fb Mon Sep 17 00:00:00 2001 From: SasukeUchiha Date: Wed, 26 Jul 2023 02:48:44 +0300 Subject: [PATCH] V 0.05 --- README.md | 6 ++ client/package-lock.json | 16 +++++ client/package.json | 1 + client/public/chat-pattern.webp | Bin 0 -> 10620 bytes client/src/App.tsx | 6 +- client/src/components/Messenger/Chat/Chat.tsx | 43 +++++++++++++ .../components/Messenger/Chat/EmptyChat.tsx | 13 ++++ .../src/components/Messenger/Chat/Message.tsx | 33 ++++++++++ .../components/Messenger/Chat/SendMessage.tsx | 28 +++++++++ .../components/Messenger/Chat/Textarea.tsx | 25 ++++++++ .../src/components/Messenger/Chat/TopInfo.tsx | 38 ++++++++++++ .../src/components/Messenger/Chats/Chat.tsx | 11 ++-- .../src/components/Messenger/Sidebar/Menu.tsx | 2 +- .../components/Messenger/Sidebar/MenuItem.tsx | 9 +-- .../components/Messenger/Sidebar/Sidebar.tsx | 1 + .../components/Messenger/StartMessaging.tsx | 13 ++++ client/src/components/UI/Avatar.tsx | 16 +++++ client/src/components/UI/IcoButton.tsx | 14 +++++ client/src/hooks/useBasePath.ts | 11 ++++ client/src/models/IChat.ts | 4 +- client/src/models/IMessage.ts | 8 +++ client/src/models/Message.ts | 5 -- client/src/models/User.ts | 2 + client/src/pages/Messenger/ChatPage.tsx | 14 +++++ client/src/pages/Messenger/MessengerPage.tsx | 8 ++- client/src/store/reducers/MessengerSlice.ts | 58 ++++++++++++++---- client/src/store/reducers/UserSlice.ts | 8 +-- client/tailwind.config.js | 3 + 28 files changed, 355 insertions(+), 41 deletions(-) create mode 100644 client/public/chat-pattern.webp create mode 100644 client/src/components/Messenger/Chat/Chat.tsx create mode 100644 client/src/components/Messenger/Chat/EmptyChat.tsx create mode 100644 client/src/components/Messenger/Chat/Message.tsx create mode 100644 client/src/components/Messenger/Chat/SendMessage.tsx create mode 100644 client/src/components/Messenger/Chat/Textarea.tsx create mode 100644 client/src/components/Messenger/Chat/TopInfo.tsx create mode 100644 client/src/components/Messenger/StartMessaging.tsx create mode 100644 client/src/components/UI/Avatar.tsx create mode 100644 client/src/components/UI/IcoButton.tsx create mode 100644 client/src/hooks/useBasePath.ts create mode 100644 client/src/models/IMessage.ts delete mode 100644 client/src/models/Message.ts create mode 100644 client/src/pages/Messenger/ChatPage.tsx diff --git a/README.md b/README.md index 2585e65..c54d2ea 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,12 @@ Ararat International School - платформа по обучению игры - Express.js - Mongo DB +#### V 0.05 +- [Messenger] Добавлена заглушка когда чат не выбран +- [Messenger] Чаты теперь открываются по маршруту /messenger/chat/:id +- [Messenger] Создана страница чата +- [Messenger] Убран лишний re-render у Layout по переходу между чатами + #### V 0.04 - Пункт Мессенджер теперь ведет по пути /messenger - [Messenger] Добавлен sidebar diff --git a/client/package-lock.json b/client/package-lock.json index dc5e306..2d61cae 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -16,6 +16,7 @@ "@types/uniqid": "^5.3.2", "axios": "^1.4.0", "body-scroll-lock": "^4.0.0-beta.0", + "date-fns": "^2.30.0", "framer-motion": "^10.13.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1755,6 +1756,21 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/client/package.json b/client/package.json index 0389738..09f3259 100644 --- a/client/package.json +++ b/client/package.json @@ -18,6 +18,7 @@ "@types/uniqid": "^5.3.2", "axios": "^1.4.0", "body-scroll-lock": "^4.0.0-beta.0", + "date-fns": "^2.30.0", "framer-motion": "^10.13.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/client/public/chat-pattern.webp b/client/public/chat-pattern.webp new file mode 100644 index 0000000000000000000000000000000000000000..61408ea706d8fa087cf5815999d14ccff274fc6a GIT binary patch literal 10620 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 state.UserSlice); @@ -35,7 +36,8 @@ function App() { }/> }/> }/> - }/> + }/> + }/> ) diff --git a/client/src/components/Messenger/Chat/Chat.tsx b/client/src/components/Messenger/Chat/Chat.tsx new file mode 100644 index 0000000..c7eac16 --- /dev/null +++ b/client/src/components/Messenger/Chat/Chat.tsx @@ -0,0 +1,43 @@ +import { FC, useRef, useEffect } from 'react' +import TopInfo from './TopInfo'; +import Message from './Message'; +import EmptyChat from './EmptyChat'; +import SendMessage from './SendMessage'; +import { useAppSelector } from '../../../hooks/redux'; + +const Chat: FC = () => { + const messagesEndRef = useRef(null) + const { user } = useAppSelector(state => state.UserSlice) + const { chat } = useAppSelector(state => state.MessengerSlice) + useEffect(() => { + if(messagesEndRef.current) { + messagesEndRef.current.scrollIntoView() + } + }, [chat.messages]) + + + return ( +
+ +
+
0 ? 'mt-10' : 'h-full justify-center'].join(' ')}> + {chat.messages.length > 0 + ? + <> + {chat.messages.map(message=> + + )} +
+ + : + + } + +
+
+ +
+ ) +} + +export default Chat; \ No newline at end of file diff --git a/client/src/components/Messenger/Chat/EmptyChat.tsx b/client/src/components/Messenger/Chat/EmptyChat.tsx new file mode 100644 index 0000000..99fe18f --- /dev/null +++ b/client/src/components/Messenger/Chat/EmptyChat.tsx @@ -0,0 +1,13 @@ +import {FC} from 'react' +import { IoChatbubblesOutline } from '@react-icons/all-files/io5/IoChatbubblesOutline' + +const EmptyChat: FC = () => { + return ( +
+
+

Dialog is Empty

+
+ ) +} + +export default EmptyChat; \ No newline at end of file diff --git a/client/src/components/Messenger/Chat/Message.tsx b/client/src/components/Messenger/Chat/Message.tsx new file mode 100644 index 0000000..72e9eb2 --- /dev/null +++ b/client/src/components/Messenger/Chat/Message.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react' +import { IMessage } from '../../../models/IMessage' +import { User } from '../../../models/User'; +import format from 'date-fns/format'; +import { BsCheckAll } from '@react-icons/all-files/bs/BsCheckAll' +import Avatar from '../../UI/Avatar'; + +interface MessageProps { + msg: IMessage; + user?: User; + isMe: boolean; +} + +const Message: FC = ({msg, user, isMe}) => { + return ( +
+ +
+

{user?.name} {user?.sname}

+

{msg.msg}

+
+

{format(msg.time, 'H:mm')}

+ {isMe && + + } +
+ +
+
+ ) +} + +export default Message; \ No newline at end of file diff --git a/client/src/components/Messenger/Chat/SendMessage.tsx b/client/src/components/Messenger/Chat/SendMessage.tsx new file mode 100644 index 0000000..9b305d8 --- /dev/null +++ b/client/src/components/Messenger/Chat/SendMessage.tsx @@ -0,0 +1,28 @@ +import { FC, useState } from 'react' +import Textarea from './Textarea'; +import IcoButton from '../../UI/IcoButton'; +import { BsMic } from '@react-icons/all-files/bs/BsMic'; +import { VscSend } from '@react-icons/all-files/vsc/VscSend'; +import {BsEmojiSmile} from '@react-icons/all-files/bs/BsEmojiSmile'; +import {ImAttachment} from '@react-icons/all-files/im/ImAttachment'; + +const SendMessage: FC = () => { + const [msg, setMsg] = useState(''); + return ( +
+
+ } className='!px-3 !py-2'/> + } className='!px-3 !py-2'/> +
+ + ) +} + +export default Textarea; \ No newline at end of file diff --git a/client/src/components/Messenger/Chat/TopInfo.tsx b/client/src/components/Messenger/Chat/TopInfo.tsx new file mode 100644 index 0000000..e7805f9 --- /dev/null +++ b/client/src/components/Messenger/Chat/TopInfo.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react' +import { User } from '../../../models/User'; +import Avatar from '../../UI/Avatar'; +import IcoButton from '../../UI/IcoButton'; +import formatDistanceToNow from 'date-fns/formatDistanceToNow'; +import { BsTelephone } from '@react-icons/all-files/bs/BsTelephone'; +import { BsCameraVideo } from '@react-icons/all-files/bs/BsCameraVideo'; + +interface TopInfoProps { + data: User; +} + +const TopInfo: FC = ({data}) => { + return ( +
+
+ +
+

{data.name} {data.sname}

+

+ {data.online + ? + 'online' + : + formatDistanceToNow(data.lastOnline, {addSuffix: true}) + } +

+
+
+
+ } className='mr-2'/> + }/> +
+
+ ) +} + +export default TopInfo; \ No newline at end of file diff --git a/client/src/components/Messenger/Chats/Chat.tsx b/client/src/components/Messenger/Chats/Chat.tsx index 78692c4..54f894d 100644 --- a/client/src/components/Messenger/Chats/Chat.tsx +++ b/client/src/components/Messenger/Chats/Chat.tsx @@ -1,25 +1,26 @@ import { FC } from 'react' import { IChat } from '../../../models/IChat'; import { Link } from 'react-router-dom'; -//import { useLocation } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; +import format from 'date-fns/format'; interface ChatProps { data: IChat } const Chat: FC= ({data}) => { - // const location = useLocation(); + const { userid } = useParams(); return ( - +
avatar

{data.name + ' ' + data.sname}

-

{data.lastmsg.msg}

+

{data.lastmsg.msg}

- {data.lastmsg.time} + {format(data.lastmsg.time, 'H:mm')} {data.unreaded > 0 && {data.unreaded} } diff --git a/client/src/components/Messenger/Sidebar/Menu.tsx b/client/src/components/Messenger/Sidebar/Menu.tsx index bd9362e..244a6f1 100644 --- a/client/src/components/Messenger/Sidebar/Menu.tsx +++ b/client/src/components/Messenger/Sidebar/Menu.tsx @@ -12,7 +12,7 @@ const Menu: FC = () => { return (