Merge pull request #51 from Timur233/SOK-71_forum_fix

Timur233 · Nov 29, 2024 · 84f7fdd · 84f7fdd
2 parents 763fe6f + 80aa50f
commit 84f7fdd
Show file tree

Hide file tree

Showing 14 changed files with 369 additions and 152 deletions.
diff --git a/packages/client/src/api/forumApi.tsx b/packages/client/src/api/forumApi.tsx
@@ -1,35 +1,44 @@
 import localApi from './localApi'
 import { Thread, Comment } from '@/types/forum'
+import { UserType } from '@/store/reducers/auth-reducer'
 
 export const fetchThreads = async (
   page: number,
   limit: number
 ): Promise<{ threads: Thread[]; totalPages: number }> => {
-  const response = await localApi.get('/threads', {
+  const response = await localApi.get('/api/topics', {
     params: { page, limit },
   })
   return response.data
 }
 
 export const fetchThreadById = async (id: number): Promise<Thread> => {
-  const response = await localApi.get(`/threads/${id}`)
-  return response.data
+  const response = await localApi.get(`/api/topics/${id}`)
+  return { ...response.data, comments: response.data.comments || [] }
 }
 
 export const createThread = async (data: {
   title: string
   message: string
+  author: JSON | UserType | null
 }): Promise<Thread> => {
-  const response = await localApi.post('/threads', data)
+  const response = await localApi.post(
+    `/api/topics?author=${data.author}`,
+    data
+  )
   return response.data
 }
 
 export const createComment = async (
   threadId: number,
-  message: string
+  author: JSON | UserType | null,
+  text: string,
+  parentCommentId: number | null
 ): Promise<Comment> => {
-  const response = await localApi.post(`/threads/${threadId}/comments`, {
-    message,
+  const response = await localApi.post(`/api/topics/${threadId}/comments`, {
+    author,
+    text,
+    parentCommentId,
   })
   return response.data
 }
@@ -39,7 +48,7 @@ export const fetchComments = async (
   page: number,
   limit: number
 ) => {
-  const response = await localApi.get(`/threads/${threadId}/comments`, {
+  const response = await localApi.get(`/api/topics/${threadId}/comments`, {
     params: { page, limit },
   })
   return {

diff --git a/packages/client/src/components/ui/BreadCrumbs/BreadCrumbs.tsx b/packages/client/src/components/ui/BreadCrumbs/BreadCrumbs.tsx
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom'
 import './BreadCrumbs.scss'
 
 type BreadCrumb = {
-  title: string
+  title: string | undefined
   href: string
 }
 

diff --git a/packages/client/src/pages/CreateThread/CreateThread.tsx b/packages/client/src/pages/CreateThread/CreateThread.tsx
@@ -6,16 +6,20 @@ import { Input } from '@/components/ui/Input/Input'
 import { PageTitle } from '@/components/ui/PageTitle/PageTitle'
 import './CreateThread.scss'
 import { File } from '@/components/ui/File/File'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 export const CreateThread = () => {
   const [title, setTitle] = useState('')
   const [message, setMessage] = useState('')
   const [attachedFile, setAttachedFile] = useState<File | null>(null)
+  const user = useSelector((state: RootState) => state.authReducer.user)
   const navigate = useNavigate()
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    await createThread({ title, message })
+    const author = user
+    await createThread({ title, message, author })
     navigate('/forum')
   }
 

diff --git a/packages/client/src/pages/Forum/Forum.tsx b/packages/client/src/pages/Forum/Forum.tsx
@@ -6,31 +6,33 @@ import { Pagination } from '@/components/ui/Pagination/Pagination'
 import { Thread } from '@/types/forum'
 import { useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { mockForumThreads } from '../../../mocks/Forum'
+import { fetchThreads } from '@/api/forumApi'
 import './Forum.scss'
+import { Loader } from '@/components/ui/Loader/Loader'
 
 const THREADS_COUNT = 10
 
 export const Forum = () => {
   const navigate = useNavigate()
+  const [loading, setLoading] = useState(false)
   const [threads, setThreads] = useState<Thread[]>([])
   const [error, setError] = useState<string | null>(null)
   const [totalPages, setTotalPages] = useState<number>(1)
   const [currentPage, setCurrentPage] = useState<number>(1)
 
   useEffect(() => {
     const loadThreads = async () => {
-      setThreads(mockForumThreads) // Используем заглушки
-
-      // try {
-      //   const data = await fetchThreads(currentPage, THREADS_COUNT)
-      //   setThreads(data.threads)
-      //   setTotalPages(data.totalPages)
-      // } catch (err) {
-      //   console.error('Ошибка загрузки тем форума:', err)
-      //   setError('Не удалось загрузить темы. Отображаются заглушки.')
-      //   setThreads(mockForumThreads) // Используем заглушки
-      // }
+      try {
+        setLoading(true)
+        const data = await fetchThreads(currentPage, THREADS_COUNT)
+        setThreads(data.threads)
+        setTotalPages(data.totalPages)
+      } catch (err) {
+        console.error('Ошибка загрузки тем форума:', err)
+        setError('Не удалось загрузить темы.')
+      } finally {
+        setLoading(false)
+      }
     }
 
     loadThreads()
@@ -47,24 +49,27 @@ export const Forum = () => {
           className="compact-button"
         />
       </div>
+      {loading && <Loader show={true} />}
       {error && <div className="forum-page__error">{error}</div>}
-      <div className="forum-page__threads threads">
-        {threads.map(thread => (
-          <Link to={`/forum/${thread.id}`} key={thread.id}>
-            <Card className="threads__item thread">
-              <div className="thread__title">{thread.title}</div>
-              <div className="thread__views views">
-                <span className="views__title">Просмотры:</span>
-                <span className="views__count">{thread.views}</span>
-              </div>
-              <div className="thread__answers answers">
-                <span className="answers__title">Ответы:</span>
-                <span className="answers__count">{thread.commentsCount}</span>
-              </div>
-            </Card>
-          </Link>
-        ))}
-      </div>
+      {threads ? (
+        <div className="forum-page__threads threads">
+          {threads.map(thread => (
+            <Link to={`/forum/${thread.id}`} key={thread.id}>
+              <Card className="threads__item thread">
+                <div className="thread__title">{thread.title}</div>
+                <div className="thread__answers answers">
+                  <span className="answers__title">Ответы:</span>
+                  <span className="answers__count">
+                    {thread.commentsCount - 1}
+                  </span>
+                </div>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <div>Ни одна тема пока не создана, Вы можете создать её первым!</div>
+      )}
       <Pagination
         totalPages={totalPages}
         currentPage={currentPage}

diff --git a/packages/client/src/pages/Thread/Thread.scss b/packages/client/src/pages/Thread/Thread.scss
@@ -62,8 +62,13 @@ $thread-page-color: #c5c5c5;
       align-items: center;
 
       &__avatar {
-        width: 40px;
-        height: 40px;
+        width: 160px;
+        max-width: 100%;
+        height: 158px;
+        max-height: 100%;
+        position: relative;
+        border-radius: 50%;
+        border: 5px solid $c_avatar-border-color;
       }
 
       &__login {
@@ -140,6 +145,18 @@ $thread-page-color: #c5c5c5;
       &__submit {
         align-self: flex-start;
       }
+
+      &__cancel-reply {
+        margin-left: auto;
+        color: $primary-color;
+        background: none;
+        border: none;
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
   }