add post-comments actions, model, update components

package.json

@@ -52,7 +52,7 @@
         "classnames": "^2.5.1",
         "clsx": "^2.1.0",
         "dayjs": "^1.11.11",
-        "product-types": "^0.3.94",
+        "product-types": "^0.3.102",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.53.0",

src/app/action/post-comment/likePostComment/likePostComment.action.ts

@@ -0,0 +1,13 @@
+import { request } from '@/app/lib/fetch/request.ts';
+import { isDomainComment } from 'product-types/dist/comment/DomainComment';
+
+
+export const likePostCommentAction = function (commentId: string) {
+    return request(
+        `v1/post-comment/like/${ commentId }`,
+        {
+            method: 'POST',
+        },
+        isDomainComment,
+    );
+};

src/app/action/post-comment/sendPostComment/sendPostComment.action.ts

@@ -0,0 +1,14 @@
+import { request } from '@/app/lib/fetch/request.ts';
+import { isDomainComment } from 'product-types/dist/comment/DomainComment';
+
+
+export const sendPostCommentAction = function (postId: string, comment: string) {
+    return request(
+        `v1/post-comment/${ postId }`,
+        {
+            method: 'POST',
+            body  : JSON.stringify({ comment }),
+        },
+        isDomainComment,
+    );
+};

src/app/action/post-comment/unlikePostComment/unlikePostComment.action.ts

@@ -0,0 +1,13 @@
+import { request } from '@/app/lib/fetch/request.ts';
+import { isDomainComment } from 'product-types/dist/comment/DomainComment';
+
+
+export const unlikePostCommentAction = function (commentId: string) {
+    return request(
+        `v1/post-comment/unlike/${ commentId }`,
+        {
+            method: 'POST',
+        },
+        isDomainComment,
+    );
+};

src/app/model/posts/posts.model.ts

@@ -10,11 +10,15 @@ import {
 import {
     removePostAction,
 } from '@/app/action/posts/removePost/removePost.action.ts';
+import {
+    sendPostCommentAction,
+} from '@/app/action/post-comment/sendPostComment/sendPostComment.action.ts';
 
 
 export const getPostsByUserIdEffect = effect(getPostsByUserIdAction);
 export const createPostEffect       = effect(createPostAction);
 export const removePostEffect       = effect(removePostAction);
+export const sendPostCommentEffect  = effect(sendPostCommentAction);
 
 
 export const $currentPostUserId = store<string>('')
@@ -43,4 +47,16 @@ export const $postsList = store<Array<DomainPost>>([])
             return state;
         }
     })
+    .on(sendPostCommentEffect, 'onSuccess', (state, {
+        result, args: [ postId ],
+    }) => {
+        console.log('OnSuccess', result);
+        const post = state.find((post) => post.id === postId);
+        console.log('Find from', state);
+        console.log('Finded', post);
+        if (post) {
+            post.comments.push(result);
+            return [ ...state ];
+        }
+    })
     .on(logoutEffect, 'onBefore', () => []);

src/entities/comment/CommentsFormPreview/ui/CommentsFormPreview.tsx

@@ -24,7 +24,9 @@ import { LikeButton } from '@/entities/common/LikeButton/ui/LikeButton.tsx';
 export type CommentsFormPreviewProps =
     {
         comments: Array<DomainComment>;
-        onSubmitHandler: (comment: string) => Promise<void>;
+        onLike: (commentId: string) => Promise<any>;
+        onUnlike: (commentId: string) => Promise<any>;
+        onSubmitHandler: (comment: string) => Promise<any>;
     }
     & ComponentPropsWithoutRef<'div'>;
 
@@ -33,6 +35,8 @@ export const CommentsFormPreview: FC<CommentsFormPreviewProps> = memo(function C
               className,
               comments,
               onSubmitHandler,
+              onLike,
+              onUnlike,
               ...other
           } = props;
     const {
@@ -60,26 +64,22 @@ export const CommentsFormPreview: FC<CommentsFormPreviewProps> = memo(function C
                         extraFooter={
                             <Row>
                                 <ForwardButton
-                                    amount={ 1 }
+                                    amount={ comment.forwardsAmount }
                                     size={ ButtonSizeType.SMALL }
                                 />
                                 <ReplyButton
-                                    amount={ 5 }
+                                    amount={ comment.repliesAmount }
                                     size={ ButtonSizeType.SMALL }
                                 />
                                 <LikeButton
-                                    amount={ 5 }
-                                    liked={ true }
+                                    amount={ comment.likesAmount }
+                                    liked={ comment.liked }
+                                    onLike={ () => onLike(comment.id) }
+                                    onUnlike={ () => onUnlike(comment.id) }
                                     size={ ButtonSizeType.SMALL }
                                 />
                             </Row>
                         }
-                        extraHeader={
-                            <ReplyButton
-                                amount={ 5 }
-                                size={ ButtonSizeType.SMALL }
-                            />
-                        }
                         key={ comment.id }
                     />
                 ))

src/entities/common/LikeButton/ui/LikeButton.tsx

@@ -1,4 +1,11 @@
-import { FC, memo } from 'react';
+import {
+    FC,
+    memo,
+    useCallback,
+    useLayoutEffect,
+    useMemo,
+    useState,
+} from 'react';
 import {
     ButtonWithLoading,
     ButtonWithLoadingProps,
@@ -14,22 +21,57 @@ export type LikeButtonProps =
     {
         liked: boolean;
         amount: number;
+        onLike: () => Promise<any>;
+        onUnlike: () => Promise<any>;
     }
     & ButtonWithLoadingProps;
 
 export const LikeButton: FC<LikeButtonProps> = memo(function LikeButton (props) {
-    const { className, liked, styleType, amount, ...other } = props;
+    const {
+              className, liked, styleType, amount, onUnlike, onLike, ...other
+          }                                           = props;
+    const [ currentLikedState, setCurrentLikedState ] = useState<boolean>(liked);
+
+    useLayoutEffect(() => {
+        setCurrentLikedState(liked);
+    }, [ liked ]);
+
+    const onClickHandler = useCallback(async () => {
+        if (currentLikedState) {
+            return onUnlike().then(() => setCurrentLikedState(false));
+        } else {
+            return onLike().then(() => setCurrentLikedState(true));
+        }
+    }, [ currentLikedState, onLike, onUnlike ]);
+
+    const currentAmount = useMemo(() => {
+        if (currentLikedState) {
+            if (liked) {
+                return amount;
+            } else {
+                return amount + 1;
+            }
+        } else {
+            if (liked) {
+                return amount - 1;
+            } else {
+                return amount;
+            }
+        }
+    }, [ amount, currentLikedState, liked ]);
 
     return (
         <PopOver popover={ liked ? 'Dislike' : 'Like' }>
             <ButtonWithLoading
                 { ...other }
                 className={ classNames(css.container, {}, [ className ]) }
-                styleType={ liked ? styleType ?? ButtonStyleType.PRIMARY
-                                  : ButtonStyleType.GHOST }
+                onClick={ onClickHandler }
+                styleType={ currentLikedState
+                            ? styleType ?? ButtonStyleType.PRIMARY
+                            : ButtonStyleType.GHOST }
             >
-                { liked ? <IoHeart/> : <IoHeartSharp/> }
-                <span>{ liked ? amount + 1 : amount }</span>
+                { currentLikedState ? <IoHeart/> : <IoHeartSharp/> }
+                <span>{ currentAmount }</span>
             </ButtonWithLoading>
         </PopOver>
     );

src/entities/user/UserHeader/ui/UserHeader.tsx

@@ -1,15 +1,17 @@
 import { ComponentPropsWithoutRef, FC, memo } from 'react';
 import classNames from 'classnames';
 import css from './UserHeader.module.scss';
-import { DomainUser } from 'product-types/dist/user/DomainUser';
 import {
     UserAvatar, UserAvatarSize,
 } from '@/entities/user/avatar/UserAvatar/ui/UserAvatar.tsx';
+import {
+    DomainUserWithOnline,
+} from 'product-types/dist/user/DomainUserWithOnline';
 
 
 export type UserHeaderProps =
     {
-        user: DomainUser;
+        user: DomainUserWithOnline;
     }
     & ComponentPropsWithoutRef<'div'>;
 

src/entities/user/item/UserPreviewItem/ui/UserPreviewItem.tsx

@@ -1,19 +1,14 @@
 import { ComponentPropsWithoutRef, FC, memo } from 'react';
 import classNames from 'classnames';
 import css from './UserPreviewItem.module.scss';
-import { DomainUser } from 'product-types/dist/user/DomainUser';
 import { Link } from '@/shared/ui-kit/links/Link/ui/Link.tsx';
 import {
     UserAvatar,
     UserAvatarSize,
 } from '@/entities/user/avatar/UserAvatar/ui/UserAvatar.tsx';
 import { useTranslation } from '@/features/i18n/hook/useTranslation.ts';
-import { getRouteUrl } from '@/app/routes/lib/getRouteUrl.ts';
-import {
-    SITE_ROUTE_PARAM_USER_LOGIN,
-    SiteAppRoute,
-    SiteAppRoutePath,
-} from '@/app/routes/main-site/config/routes.tsx';
+import { getUserPageUrl } from '@/features/routes/lib/getUserPageUrl.ts';
+import { DomainUser } from 'product-types/dist/user/DomainUser';
 
 
 export type UserPreviewItemProps =
@@ -43,7 +38,7 @@ export const UserPreviewItem: FC<UserPreviewItemProps> = memo(function ProfilePr
                     login: user.login,
                 }) }
                 className={ css.link }
-                to={ getRouteUrl(SiteAppRoutePath[SiteAppRoute.USER], { [SITE_ROUTE_PARAM_USER_LOGIN]: user.login }) }
+                to={ getUserPageUrl(user.login) }
             >
                 <UserAvatar
                     avatar={ user.avatar }

src/widgets/posts/UserPosts/ui/UserPosts.tsx

@@ -11,7 +11,7 @@ import {
     $currentPostUserId,
     $postsList,
     $postsPending,
-    getPostsByUserIdEffect,
+    getPostsByUserIdEffect, sendPostCommentEffect,
 } from '@/app/model/posts/posts.model.ts';
 import { useStore } from '@vanyamate/sec-react';
 import {
@@ -41,7 +41,15 @@ import {
 import {
     CommentsFormPreview,
 } from '@/entities/comment/CommentsFormPreview/ui/CommentsFormPreview.tsx';
+import {
+    likePostCommentAction,
+} from '@/app/action/post-comment/likePostComment/likePostComment.action.ts';
+import {
+    unlikePostCommentAction,
+} from '@/app/action/post-comment/unlikePostComment/unlikePostComment.action.ts';
+
 
+// TODO: Переделать LikeButton, CommentsFormPreview
 
 export type UserPostsProps =
     {
@@ -69,11 +77,25 @@ export const UserPosts: FC<UserPostsProps> = memo(function UserPosts (props) {
                 extraFooter={
                     <Row spaceBetween>
                         <Row>
-                            <LikeButton amount={ 100 } liked={ true }/>
-                            <ForwardButton amount={ 15 }/>
-                            <CommentButton amount={ 6 }/>
+                            <LikeButton
+                                amount={ post.likesAmount }
+                                liked={ post.liked }
+                                onLike={ async () => {
+                                } }
+                                onUnlike={ async () => {
+                                } }
+                            />
+                            <ForwardButton amount={ post.forwardsAmount }/>
+                            <CommentButton amount={ post.commentsAmount }/>
                         </Row>
-                        <LikeButton amount={ 1000 } liked={ false }/>
+                        <LikeButton
+                            amount={ 1000 }
+                            liked={ false }
+                            onLike={ async () => {
+                            } }
+                            onUnlike={ async () => {
+                            } }
+                        />
                     </Row>
                 }
                 extraHeader={
@@ -82,27 +104,12 @@ export const UserPosts: FC<UserPostsProps> = memo(function UserPosts (props) {
                 key={ post.id }
                 module={
                     <CommentsFormPreview
-                        comments={ [
-                            {
-                                comment     : 'Long long comment Long long' +
-                                    ' comment Long long commentLong long' +
-                                    ' commentLong long comment Long long comment',
-                                id          : '1',
-                                author      : post.author,
-                                creationDate: Date.now(),
-                                redacted    : false,
-                            },
-                            {
-                                comment     : 'Long long comment Long long' +
-                                    ' comment Long long',
-                                id          : '2',
-                                author      : post.author,
-                                creationDate: Date.now(),
-                                redacted    : false,
-                            },
-                        ] }
-                        onSubmitHandler={ async () => {
+                        comments={ post.comments }
+                        onLike={ likePostCommentAction }
+                        onSubmitHandler={ async (comment: string) => {
+                            return sendPostCommentEffect(post.id, comment).then();
                         } }
+                        onUnlike={ unlikePostCommentAction }
                     />
                 }
                 post={ post }