Эмодзи (клиентская часть)

packages/client/src/pages/ForumItemPage/ForumItemPage.tsx

@@ -10,6 +10,8 @@ import { forums as previeForums } from '../Forum/components/forumPreviewTable/st
 import { TForum, TMessage, messageFormFileds } from './model'
 import ForumMessagesList from './components/forumMessagesList/forumMessagesList'
 import AddMessageFrame from './components/addMessageFrame/addMessageFrame'
+import { useTypedSelector } from '../../redux/store'
+import { getUserData } from '../../redux/selectors'
 
 const ForumPage = () => {
   const { id } = useParams()
@@ -18,7 +20,7 @@ const ForumPage = () => {
   if (!forum) return <Navigate to="*" />
   const { theme, messages }: TForum = forum
   const [forumMessages, updateForum] = useState(messages)
-
+  const user = useTypedSelector(getUserData)
   const callbacks = {
     onAddMessage: useCallback(
       (e: FormEvent) => {
@@ -32,7 +34,7 @@ const ForumPage = () => {
         const newMesage: TMessage = {
           messageId: uuid(),
           message,
-          author: 'Admin',
+          author: user.login ? user.login : 'Author',
           time: new Date(),
         }
         forum.messages.push(newMesage)
@@ -52,6 +54,7 @@ const ForumPage = () => {
         <AddMessageFrame
           inputName={messageFormFileds.message}
           onAddMessage={callbacks.onAddMessage}
+          name={user.login}
         />
       </div>
     </div>

packages/client/src/pages/ForumItemPage/components/addMessageFrame/addMessageFrame.tsx

@@ -6,17 +6,19 @@ import './styles.scss'
 type TAddMessageFrameProps = {
   inputName: string
   onAddMessage: (e: FormEvent) => void
+  name: string
 }
 
 const AddMessageFrame = ({
   inputName,
   onAddMessage,
+  name = 'Admin',
 }: TAddMessageFrameProps) => {
   const cn = bem('addMessageFrame')
 
   return (
     <div className={cn()}>
-      <div>Admin</div>
+      <div>{name}</div>
       <form onSubmit={onAddMessage} className={cn('form')}>
         <label htmlFor={inputName} className={cn('label')}>
           <textarea

packages/client/src/pages/ForumItemPage/components/forumMessagesList/forumMessagesList.tsx

@@ -1,11 +1,16 @@
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import { TMessage } from '../../model'
 
 import bem from 'bem-ts'
 import './styles.scss'
-import { forums } from '../../../Forum/components/forumPreviewTable/stubs'
 
+const emoji = ['😀', '🤑', '😭', '💩', '❤', '👍']
 const ForumMessagesList = ({ messages }: { messages: TMessage[] }) => {
+  const [selectedEmoji, setSelectedEmoji] = useState('')
+
+  const handleEmojiSelect = (emoji: string) => {
+    setSelectedEmoji(emoji)
+  }
   const cn = bem('forumMessages')
   const getTime = (time: Date) => {
     return (
@@ -29,7 +34,26 @@ const ForumMessagesList = ({ messages }: { messages: TMessage[] }) => {
             <span>{author}</span>
             <span>{getTime(time)}</span>
           </div>
+          {selectedEmoji}
           <p>{message}</p>
+          <div
+            style={{
+              display: 'flex',
+            }}>
+            {emoji.map(item => (
+              <div>
+                <button
+                  key={item}
+                  style={{
+                    width: '30px',
+                    height: '30px',
+                  }}
+                  onClick={() => handleEmojiSelect(`${item}`)}>
+                  {item}
+                </button>
+              </div>
+            ))}
+          </div>
         </li>
       ))}
     </ul>

packages/client/src/pages/Main/MainPage.tsx

@@ -30,6 +30,7 @@ const MainPage = () => {
       <MainButton to={'start'} text={'Начать игру'} />
       <MainButton to={'board'} text={'Таблица лидеров'} />
       <MainButton to={'profile'} text={'Профиль'} />
+      <MainButton to={'forum'} text={'Форум'} />
       <Typography
         variant={'h2'}
         component={'h2'}