feat: add button delete post

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-select": "^1.2.2",

src/entities/post-news/ui/post-news.tsx

@@ -1,16 +1,17 @@
 import { parseDateToMonth, parseDateToTime } from '@shared/lib/parse-date'
 import { type IPost } from '@shared/lib/types/api'
-import { Button } from '@shared/ui/button'
 import { UserAvatar } from '@shared/ui/user-avatar'
 import { type FC, type ReactNode } from 'react'
 
 import eye from '@assets/ui/Eye.svg'
+import { LinkName } from '@shared/ui/link-name'
 
 interface IPostNewsProps {
   post: IPost | undefined
   buttonLike: ReactNode
+  buttonDelete: ReactNode
 }
-const PostNews: FC<IPostNewsProps> = ({ post, buttonLike }) => {
+const PostNews: FC<IPostNewsProps> = ({ post, buttonLike, buttonDelete }) => {
   const createDate = post?.createdAt
     ? `${parseDateToMonth(post?.createdAt)} в ${parseDateToTime(post?.createdAt)}`
     : 'Дата неизвестна'
@@ -24,13 +25,14 @@ const PostNews: FC<IPostNewsProps> = ({ post, buttonLike }) => {
             link={post?.createdBy?.id}
           />
           <div>
-            <h4 className='text-[#D22828] text-[18px] font-bold'>{`${post?.createdBy?.firstName} ${post?.createdBy?.lastName}`}</h4>
+            <LinkName
+              link={post?.createdBy.id}
+              className='text-[#D22828] text-[18px] font-bold'
+            >{`${post?.createdBy?.firstName} ${post?.createdBy?.lastName}`}</LinkName>
             <p className='text-[#ADB5BD]'>{createDate}</p>
           </div>
         </div>
-        <div>
-          <Button variant='text' icon='more' className='p-0' />
-        </div>
+        <div>{buttonDelete}</div>
       </div>
       <p>
         {post?.text}

src/features/button-delete-post/index.ts

@@ -0,0 +1 @@
+export { ButtonDeletePost } from './ui/button-delete-post'

src/features/button-delete-post/ui/button-delete-post.tsx

@@ -0,0 +1,44 @@
+import { getAllPostsThunk } from '@app/store/reducers/news/async-thunks'
+import { selectUser } from '@app/store/reducers/profileInfo/selectors'
+import { deletePost } from '@shared/api/news/news'
+import { useAppDispatch, useAppSelector } from '@shared/lib/hooks/store-hooks'
+import { cn } from '@shared/lib/merge-classes'
+import { type IPost } from '@shared/lib/types/api'
+import { Button } from '@shared/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger
+} from '@shared/ui/dropdown-menu'
+import { type FC } from 'react'
+
+interface IButtonDeletePostProps {
+  post: IPost
+  className?: string
+}
+const ButtonDeletePost: FC<IButtonDeletePostProps> = ({ className, post }) => {
+  const dispatch = useAppDispatch()
+  const user = useAppSelector(selectUser)
+  const handleDeletePost = async (): Promise<void> => {
+    await deletePost(post.id)
+    dispatch(getAllPostsThunk())
+  }
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button variant='text' icon='more' className={cn(className, 'p-0')} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Действия</DropdownMenuLabel>
+        {post.createdById === user?.id && (
+          <DropdownMenuItem onClick={handleDeletePost} className='cursor-pointer'>
+            Удалить пост
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+export { ButtonDeletePost }

src/pages/page-news/ui/page-news.tsx

@@ -2,6 +2,7 @@ import { selectFriends } from '@app/store/reducers/friends/selectors'
 import { selectAllPosts } from '@app/store/reducers/news/selectors'
 import { selectUser } from '@app/store/reducers/profileInfo/selectors'
 import { PostNews } from '@entities/post-news'
+import { ButtonDeletePost } from '@features/button-delete-post'
 import { ButtonLikePost } from '@features/button-like-post'
 import { InputCreatePost } from '@features/input-create-post'
 import { useAppSelector } from '@shared/lib/hooks/store-hooks'
@@ -36,7 +37,12 @@ const PageNews: FC = () => {
       <div className='list w-full xxl:w-2/3 rounded-[10px] flex flex-col gap-[30px]'>
         <InputCreatePost />
         {tabs[type].map((post, ind) => (
-          <PostNews post={post} key={ind} buttonLike={<ButtonLikePost post={post} />} />
+          <PostNews
+            post={post}
+            key={ind}
+            buttonLike={<ButtonLikePost post={post} />}
+            buttonDelete={<ButtonDeletePost post={post} />}
+          />
         ))}
       </div>
     </div>

src/pages/page-profile/ui/page-profile.tsx

@@ -2,6 +2,7 @@ import { selectAllUsers } from '@app/store/reducers/friends/selectors'
 import { selectAllPosts } from '@app/store/reducers/news/selectors'
 import { selectUser } from '@app/store/reducers/profileInfo/selectors'
 import { PostNews } from '@entities/post-news'
+import { ButtonDeletePost } from '@features/button-delete-post'
 import { ButtonLikePost } from '@features/button-like-post'
 import { InputCreatePost } from '@features/input-create-post'
 import { useAppSelector } from '@shared/lib/hooks/store-hooks'
@@ -50,6 +51,7 @@ const PageProfile: FC = () => {
                 post={post}
                 key={ind}
                 buttonLike={<ButtonLikePost post={post} />}
+                buttonDelete={<ButtonDeletePost post={post} />}
               />
             ))}
         </div>