Added comment form in article page; profiles pages

json-server/db.json

@@ -24,7 +24,9 @@
       "img": "https://teknotower.com/wp-content/uploads/2020/11/js.png",
       "views": 1022,
       "createdAt": "26.02.2022",
-      "type": ["IT"],
+      "type": [
+        "IT"
+      ],
       "blocks": [
         {
           "id": "1",
@@ -105,30 +107,104 @@
       "text": "Nice!",
       "articleId": "1",
       "userId": "1"
+    },
+    {
+      "articleId": "1",
+      "userId": 1,
+      "text": "123",
+      "id": "QmJ2O6c"
+    },
+    {
+      "articleId": "1",
+      "userId": 1,
+      "text": "123",
+      "id": "VK5kSxS"
+    },
+    {
+      "articleId": "1",
+      "userId": 1,
+      "text": "123",
+      "id": "uIdCILo"
+    },
+    {
+      "articleId": "1",
+      "userId": 1,
+      "text": "123",
+      "id": "yVoqeh7"
+    },
+    {
+      "articleId": "1",
+      "userId": 1,
+      "text": "123",
+      "id": "l0qyiBv"
+    },
+    {
+      "articleId": "1",
+      "userId": 1,
+      "text": "Good!",
+      "id": "a9mKkdo"
+    },
+    {
+      "articleId": "1",
+      "userId": 1,
+      "text": "Hello",
+      "id": "YS-aKA4"
+    },
+    {
+      "articleId": "1",
+      "userId": "1",
+      "text": "Hola",
+      "id": "opUOR2P"
+    },
+    {
+      "articleId": "1",
+      "userId": "1",
+      "text": "123",
+      "id": "SCBQgF6"
+    },
+    {
+      "articleId": "1",
+      "userId": "1",
+      "text": "321",
+      "id": "NOPTofp"
     }
   ],
   "users": [
     {
-      "id": 1,
+      "id": "1",
       "username": "admin",
       "password": "123",
       "avatar": "https://www.computerhope.com/jargon/g/guest-user.png"
     },
     {
-      "id": 2,
+      "id": "2",
       "username": "nico",
       "password": "123",
-      "avatar": "https://www.computerhope.com/jargon/g/guest-user.png"
+      "avatar": "https://wallpaperaccess.com/full/4595689.jpg"
     }
   ],
-  "profile": {
-    "firstname": "Russkiy",
-    "lastname": "Luka",
-    "age": 22,
-    "currency": "EUR",
-    "country": "CL",
-    "city": "Saint-Petersburg",
-    "username": "Karotish",
-    "avatar": "https://www.computerhope.com/jargon/g/guest-user.png"
-  }
-}
+  "profile": [
+    {
+      "id": "1",
+      "firstname": "Rus",
+      "lastname": "Luka",
+      "age": 22,
+      "currency": "EUR",
+      "country": "CL",
+      "city": "Saint-Petersburg",
+      "username": "Karotish",
+      "avatar": "https://www.computerhope.com/jargon/g/guest-user.png"
+    },
+    {
+      "id": "2",
+      "username": "Hassan",
+      "avatar": "https://wallpaperaccess.com/full/4595689.jpg",
+      "city": "Boston",
+      "currency": "USD",
+      "country": "USA",
+      "age": 23,
+      "firstname": "Ellie",
+      "lastname": "Heisenberg"
+    }
+  ]
+}

public/locales/en/translation.json

@@ -16,5 +16,7 @@
   "Авторизация": "Authorization",
   "Выйти": "Logout",
   "Ошибка": "Error",
-  "Статьи": "Articles"
+  "Статьи": "Articles",
+  "Ваш комментарий": "Your comment",
+  "Отправить": "Send"
 }

public/locales/ru/translation.json

@@ -16,7 +16,8 @@
   "Авторизация": "Авторизация",
   "Выйти": "Выйти",
   "Ошибка": "Ошибка",
-  "Статьи": "Статьи"
-
+  "Статьи": "Статьи",
+  "Ваш комментарий": "Ваш комментарий",
+  "Отправить": "Отправить"
 }
 

src/app/providers/StoreProvider/config/StateSchema.ts

@@ -10,6 +10,7 @@ import { NavigateOptions } from 'react-router';
 import { To } from 'history';
 import { ArticleDetailsSchema } from 'entities/Article';
 import { ArticleDetailsCommentsSchema } from 'pages/ArticleDetailsPage';
+import { AddCommentFormSchema } from 'features/AddCommentForm';
 
 export interface StateSchema {
     counter: CounterSchema;
@@ -20,6 +21,7 @@ export interface StateSchema {
     profile?: ProfileSchema;
     articleDetails?: ArticleDetailsSchema;
     articleDetailsComments?: ArticleDetailsCommentsSchema;
+    addCommentForm?: AddCommentFormSchema;
 }
 
 export type StateSchemaKeys = keyof StateSchema;

src/entities/Article/index.ts

@@ -4,3 +4,4 @@ export { ArticleDetailsSchema } from './model/types/articleDetailsSchema';
 export { ArticleImageBlockComponent } from './ui/ArticleImageBlockComponent/ArticleImageBlockComponent';
 export { ArticleTextBlockComponent } from './ui/ArticleTextBlockComponent/ArticleTextBlockComponent';
 export { ArticleCodeBlockComponent } from './ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent';
+export { getArticleDetailsData } from './model/selectors/articleDetailsSelectors';

src/entities/Comment/ui/CommentItem/CommentItem.tsx

@@ -3,6 +3,8 @@ import { memo } from 'react';
 import { Avatar } from 'shared/ui/Avatar/Avatar';
 import { Text } from 'shared/ui/Text/ui/Text';
 import { Skeleton } from 'shared/ui/Skeleton/Skeleton';
+import { AppLink } from 'shared/ui/AppLink/AppLink';
+import { RoutePath } from 'shared/config/routeConfig/routeConfig';
 import cls from './CommentItem.module.scss';
 import { Comment } from '../../model/types/comment';
 
@@ -33,14 +35,17 @@ export const CommentItem = memo((props: CommentItemProps) => {
 
     return (
         <div className={classNames(cls.CommentItem, {}, [className])}>
-            <div className={cls.header}>
-                {
-                    comment.user.avatar
-                        ? <Avatar src={comment.user.avatar} className={cls.avatar} size="40px" />
-                        : <Avatar className={cls.avatar} size="40px" />
-                }
-                <Text title={comment.user.username} />
-            </div>
+            <AppLink to={`${RoutePath.profile}${comment.user.id}`}>
+                <div className={cls.header}>
+                    {
+                        comment.user.avatar
+                            ? <Avatar src={comment.user.avatar} className={cls.avatar} size="40px" />
+                            : <Avatar className={cls.avatar} size="40px" />
+                    }
+                    <Text title={comment.user.username} />
+                </div>
+            </AppLink>
+
             <Text text={comment.text} />
         </div>
     );

src/entities/Comment/ui/CommentList/CommentList.tsx

@@ -25,7 +25,7 @@ export const CommentList = memo((props: CommentListProps) => {
         <div className={classNames(cls.CommentList, {}, [className])}>
             {
                 comments?.length
-                    ? comments.map((comment) => (
+                    ? comments.reverse().map((comment) => (
                         <CommentItem
                             className={cls.comment}
                             isLoading={isLoading}

src/entities/Profile/model/services/fetchProfileData/fetchProfileData.test.ts

@@ -31,7 +31,7 @@ describe('fetchProfileData.test', () => {
     test('success login', async () => {
         const thunk = new TestAsyncThunk(fetchProfileData);
         thunk.api.get.mockReturnValue(Promise.resolve({ data }));
-        const result = await thunk.callThunk();
+        const result = await thunk.callThunk('1');
 
         expect(thunk.api.get).toHaveBeenCalled();
         expect(result.meta.requestStatus).toEqual('fulfilled');
@@ -41,7 +41,7 @@ describe('fetchProfileData.test', () => {
     test('rejected login', async () => {
         const thunk = new TestAsyncThunk(fetchProfileData);
         thunk.api.get.mockReturnValue(Promise.resolve({ status: 403 }));
-        const result = await thunk.callThunk();
+        const result = await thunk.callThunk('1');
 
         expect(result.meta.requestStatus).toEqual('rejected');
     });

src/entities/Profile/model/services/fetchProfileData/fetchProfileData.ts

@@ -2,12 +2,12 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import { ThunkConfig } from 'app/providers/StoreProvider';
 import { ProfileType } from '../../types/profile';
 
-export const fetchProfileData = createAsyncThunk<ProfileType, void, ThunkConfig<string>>(
+export const fetchProfileData = createAsyncThunk<ProfileType, string, ThunkConfig<string>>(
     'profile/fetch ProfileData',
-    async (_, thunkAPI) => {
+    async (id, thunkAPI) => {
         const { extra, rejectWithValue } = thunkAPI;
         try {
-            const response = await extra.api.get<ProfileType>('/profile');
+            const response = await extra.api.get<ProfileType>(`/profile/${id}`);
 
             if (!response.data) {
                 throw new Error();

src/entities/Profile/model/services/updateProfileData/updateProfileData.test.ts

@@ -18,6 +18,7 @@ const data = {
     age: 23,
     firstname: 'Ellie',
     lastname: 'Heisenberg',
+    id: '1',
 };
 
 describe('updateProfileData.test', () => {

src/entities/Profile/model/services/updateProfileData/updateProfileData.ts

@@ -22,7 +22,7 @@ export const updateProfileData = createAsyncThunk<
         }
 
         try {
-            const response = await extra.api.put<ProfileType>('/profile', formData);
+            const response = await extra.api.put<ProfileType>(`/profile/${formData?.id}`, formData);
 
             if (!response.data) {
                 throw new Error();

src/entities/Profile/model/types/profile.ts

@@ -22,6 +22,7 @@ export interface ProfileType {
     city?: string;
     username?: string;
     avatar?: string;
+    id?: string
 }
 
 export interface ProfileSchema {

src/features/AddCommentForm/index.ts

@@ -0,0 +1,2 @@
+export { AddCommentFormSchema } from './model/types/addCommentForm';
+export { AddCommentFormAsync as AddCommentForm } from './ui/AddCommentForm/AddCommentForm.async';

src/features/AddCommentForm/model/selectors/addCommentFormSelectors.ts

@@ -0,0 +1,4 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+
+export const getAddCommentFormText = (state: StateSchema) => state.addCommentForm?.text;
+export const getAddCommentFormError = (state: StateSchema) => state.addCommentForm?.error;

src/features/AddCommentForm/model/slice/addCommentFormSlice.ts

@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { AddCommentFormSchema } from '../types/addCommentForm';
+
+const initialState: AddCommentFormSchema = {
+    error: '',
+    text: '',
+};
+
+export const addCommentFormSlice = createSlice({
+    name: 'addCommentForm',
+    initialState,
+    reducers: {
+        setText: (state, action: PayloadAction<string>) => {
+            state.text = action.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        // builder.addCase(_.pending, (state) => {
+        //     state.error = undefined;
+        // })
+        //     .addCase(_.fulfilled, (state) => {
+        //
+        //     })
+        //     .addCase(_.rejected, (state, action) => {
+        //         state.error = action.payload;
+        //     });
+    },
+});
+
+export const { actions: addCommentFormActions } = addCommentFormSlice;
+export const { reducer: addCommentFormReducer } = addCommentFormSlice;

src/features/AddCommentForm/model/types/addCommentForm.ts

@@ -0,0 +1,4 @@
+export interface AddCommentFormSchema {
+    text?: string;
+    error?: string;
+}

src/features/AddCommentForm/ui/AddCommentForm/AddCommentForm.async.ts

@@ -0,0 +1,7 @@
+import { FC, lazy } from 'react';
+import { AddCommentFormProps } from './AddCommentForm';
+
+// eslint-disable-next-line no-return-await
+export const AddCommentFormAsync = lazy<FC<AddCommentFormProps>>(async () => await new Promise((resolve) => {
+    setTimeout(() => { resolve(import('./AddCommentForm')); }, 1500);
+}));

src/features/AddCommentForm/ui/AddCommentForm/AddCommentForm.module.scss

@@ -0,0 +1,7 @@
+.AddCommentForm {
+    border: 1px solid var(--primary-color);
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

src/features/AddCommentForm/ui/AddCommentForm/AddCommentForm.tsx

@@ -0,0 +1,53 @@
+import { classNames } from 'shared/lib/classNames/classNames';
+import { memo, useCallback } from 'react';
+import { Input } from 'shared/ui/Input/Input';
+import { Button, ButtonTheme } from 'shared/ui/Button/Button';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from 'shared/lib/hooks/useAppDispatch/useAppDispatch';
+import { DynamicModuleLoader, ReducersList } from 'shared/lib/components/DynamicModuleLoader/DynamicModuleLoader';
+import { addCommentFormActions, addCommentFormReducer } from '../../model/slice/addCommentFormSlice';
+import {
+    getAddCommentFormError,
+    getAddCommentFormText,
+} from '../../model/selectors/addCommentFormSelectors';
+import cls from './AddCommentForm.module.scss';
+
+const reducers: ReducersList = {
+    addCommentForm: addCommentFormReducer,
+};
+export interface AddCommentFormProps {
+    className?: string;
+    onSendComment: (text: string) => void
+}
+
+const AddCommentForm = memo((props: AddCommentFormProps) => {
+    const {
+        className,
+        onSendComment,
+    } = props;
+
+    const { t } = useTranslation();
+    const text = useSelector(getAddCommentFormText);
+    const dispatch = useAppDispatch();
+
+    const onCommentTextChange = useCallback((text: string) => {
+        dispatch(addCommentFormActions.setText(text));
+    }, [dispatch]);
+
+    const onSendHandler = useCallback(() => {
+        onSendComment(text || '');
+        onCommentTextChange('');
+    }, [onCommentTextChange, onSendComment, text]);
+
+    return (
+        <DynamicModuleLoader reducers={reducers}>
+            <div className={classNames(cls.AddCommentForm, {}, [className])}>
+                <Input value={text} onChange={onCommentTextChange} placeholder={t('Ваш комментарий')} />
+                <Button onClick={onSendHandler} className={className} theme={ButtonTheme.SUBMIT}>{t('Отправить')}</Button>
+            </div>
+        </DynamicModuleLoader>
+    );
+});
+
+export default AddCommentForm;

src/features/AuthByUsername/model/slice/loginSlice.ts

@@ -1,5 +1,4 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { actions } from '@storybook/addon-actions';
 import { loginByUsername } from 'features/AuthByUsername/model/services/loginByUsername/loginByUsername';
 import { LoginSchema } from '../types/loginSchema';