Develop

.eslintignore

@@ -1,2 +1,4 @@
 /build
 /node_modules
+/src
+

README.md

@@ -20,4 +20,4 @@ Learn the implemented App and the example and reimplement it with Redux having t
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - This task does not have tests yet!
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_redux-list-of-posts/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://MaksOther.github.io/react_redux-list-of-posts/) and add it to the PR description.

package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.9.12",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 
 import 'bulma/css/bulma.css';
@@ -10,38 +10,47 @@
 import { UserSelector } from './components/UserSelector';
 import { Loader } from './components/Loader';
 import { getUserPosts } from './api/posts';
-import { User } from './types/User';
-import { Post } from './types/Post';
+import { useAppDispatch, useAppSelector } from './app/hooks';
+
+import {
+  setAuthor,
+  setPosts,
+  setPostsLoading,
+  setPostsError,
+  setSelectedPost,
+  clearSelectedPost,
+} from './app/appSlice';
 
 export const App: React.FC = () => {
-  const [posts, setPosts] = useState<Post[]>([]);
-  const [loaded, setLoaded] = useState(false);
-  const [hasError, setError] = useState(false);
+  const dispatch = useAppDispatch();
 
-  const [author, setAuthor] = useState<User | null>(null);
-  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+  const posts = useAppSelector(state => state.app.posts.items);
+  const loaded = useAppSelector(state => state.app.posts.loaded);
+  const hasError = useAppSelector(state => state.app.posts.hasError);
+  const authorId = useAppSelector(state => state.app.author);
+  const selectedPostId = useAppSelector(state => state.app.selectedPost);
 
   function loadUserPosts(userId: number) {
-    setLoaded(false);
+    dispatch(setPostsLoading());
 
     getUserPosts(userId)
-      .then(setPosts)
-      .catch(() => setError(true))
-      // We disable the spinner in any case
-      .finally(() => setLoaded(true));
+      .then(data => {
+        dispatch(setPosts(data));
+      })
+      .catch(() => dispatch(setPostsError()));
   }
 
   useEffect(() => {
-    // we clear the post when an author is changed
-    // not to confuse the user
-    setSelectedPost(null);
+    dispatch(clearSelectedPost());
 
-    if (author) {
-      loadUserPosts(author.id);
+    if (authorId) {
+      loadUserPosts(authorId);
     } else {
-      setPosts([]);
+      dispatch(setPosts([]));
     }
-  }, [author]);
+  }, [authorId, dispatch]);
+
+  const selectedPost = posts.find(post => post.id === selectedPostId);
 
   return (
     <main className="section">
@@ -50,15 +59,18 @@
           <div className="tile is-parent">
             <div className="tile is-child box is-success">
               <div className="block">
-                <UserSelector value={author} onChange={setAuthor} />
+                <UserSelector
+                  value={authorId}
+                  onChange={userID => dispatch(setAuthor(userID))}
+                />
               </div>
 
               <div className="block" data-cy="MainContent">
-                {!author && <p data-cy="NoSelectedUser">No user selected</p>}
+                {!authorId && <p data-cy="NoSelectedUser">No user selected</p>}
 
-                {author && !loaded && <Loader />}
+                {authorId && !loaded && <Loader />}
 
-                {author && loaded && hasError && (
+                {authorId && loaded && hasError && (
                   <div
                     className="notification is-danger"
                     data-cy="PostsLoadingError"
@@ -67,17 +79,23 @@
                   </div>
                 )}
 
-                {author && loaded && !hasError && posts.length === 0 && (
+                {authorId && loaded && !hasError && posts.length === 0 && (
                   <div className="notification is-warning" data-cy="NoPostsYet">
                     No posts yet
                   </div>
                 )}
 
-                {author && loaded && !hasError && posts.length > 0 && (
+                {authorId && loaded && !hasError && posts.length > 0 && (
                   <PostsList
                     posts={posts}
-                    selectedPostId={selectedPost?.id}
-                    onPostSelected={setSelectedPost}
+                    selectedPostId={selectedPostId || undefined}
+                    onPostSelected={post => {
+                      if (post) {
+                        dispatch(setSelectedPost(post.id));
+                      } else {
+                        dispatch(clearSelectedPost());
+                      }
+                    }}
                   />
                 )}
               </div>

src/app/appSlice.ts

@@ -0,0 +1,114 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { User } from '../types/User';
+import { Post } from '../types/Post';
+import { Comment } from '../types/Comment';
+
+export interface AppState {
+  users: User[];
+  author: number | null;
+  posts: {
+    loaded: boolean;
+    hasError: boolean;
+    items: Post[];
+  };
+
+  selectedPost: number | null;
+
+  comments: {
+    loaded: boolean;
+    hasError: boolean;
+    items: Comment[];
+  };
+}
+
+const initialState: AppState = {
+  users: [],
+  author: null,
+  posts: {
+    loaded: false,
+    hasError: false,
+    items: [],
+  },
+
+  selectedPost: null,
+
+  comments: {
+    loaded: false,
+    hasError: false,
+    items: [],
+  },
+};
+
+const appSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    setUsers(state, action: PayloadAction<User[]>) {
+      state.users = action.payload;
+    },
+    setAuthor(state, action: PayloadAction<number>) {
+      state.author = action.payload;
+    },
+    setPosts(state, action: PayloadAction<Post[]>) {
+      state.posts.hasError = false;
+      state.posts.loaded = true;
+      state.posts.items = action.payload;
+    },
+    setSelectedPost(state, action: PayloadAction<number>) {
+      state.selectedPost = action.payload;
+    },
+    clearAuthor(state) {
+      state.author = null;
+    },
+    setPostsLoading(state) {
+      state.posts.loaded = false;
+      state.posts.hasError = false;
+    },
+    setPostsError(state) {
+      state.posts.hasError = true;
+      state.posts.loaded = true;
+    },
+    clearSelectedPost(state) {
+      state.selectedPost = null;
+    },
+    setCommentsLoading(state) {
+      state.comments.loaded = false;
+      state.comments.hasError = false;
+    },
+    setComments(state, action: PayloadAction<Comment[]>) {
+      state.comments.hasError = false;
+      state.comments.loaded = true;
+      state.comments.items = action.payload;
+    },
+    setCommentsError(state) {
+      state.comments.hasError = true;
+      state.comments.loaded = true;
+    },
+    addComment(state, action: PayloadAction<Comment>) {
+      state.comments.items.push(action.payload);
+    },
+    removeComment(state, action: PayloadAction<number>) {
+      state.comments.items = state.comments.items.filter(
+        comment => comment.id !== action.payload,
+      );
+    },
+  },
+});
+
+export const {
+  setUsers,
+  setAuthor,
+  setPosts,
+  setSelectedPost,
+  clearAuthor,
+  setPostsLoading,
+  setPostsError,
+  clearSelectedPost,
+  setCommentsLoading,
+  setComments,
+  setCommentsError,
+  addComment,
+  removeComment,
+} = appSlice.actions;
+
+export default appSlice.reducer;

src/app/store.ts

@@ -1,10 +1,9 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import AppSlice from './appSlice';
 // eslint-disable-next-line import/no-cycle
-import counterReducer from '../features/counter/counterSlice';
-
 export const store = configureStore({
   reducer: {
-    counter: counterReducer,
+    app: AppSlice,
   },
 });
 

src/components/PostDetails.tsx

@@ -1,61 +1,47 @@
 import React, { useEffect, useState } from 'react';
 import { Loader } from './Loader';
 import { NewCommentForm } from './NewCommentForm';
-
 import * as commentsApi from '../api/comments';
-
 import { Post } from '../types/Post';
-import { Comment, CommentData } from '../types/Comment';
+import { CommentData } from '../types/Comment';
+import { useAppDispatch, useAppSelector } from '../app/hooks'; // 👈 Імпортуємо хуки
+import {
+  setComments,
+  setCommentsLoading,
+  setCommentsError,
+  addComment as addCommentAction,
+  removeComment as removeCommentAction,
+} from '../app/appSlice';
 
 type Props = {
   post: Post;
 };
 
 export const PostDetails: React.FC<Props> = ({ post }) => {
-  const [comments, setComments] = useState<Comment[]>([]);
-  const [loaded, setLoaded] = useState(false);
-  const [hasError, setError] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const dispatch = useAppDispatch();
 
-  function loadComments() {
-    setLoaded(false);
-    setError(false);
-    setVisible(false);
-
-    commentsApi
-      .getPostComments(post.id)
-      .then(setComments) // save the loaded comments
-      .catch(() => setError(true)) // show an error when something went wrong
-      .finally(() => setLoaded(true)); // hide the spinner
-  }
+  const {
+    items: comments,
+    loaded,
+    hasError,
+  } = useAppSelector(state => state.app.comments);
 
-  useEffect(loadComments, [post.id]);
+  const [visible, setVisible] = useState(false);
 
-  // The same useEffect with async/await
-  /*
-  async function loadComments() {
-    setLoaded(false);
+  useEffect(() => {
     setVisible(false);
-    setError(false);
 
-    try {
-      const commentsFromServer = await commentsApi.getPostComments(post.id);
+    dispatch(setCommentsLoading());
 
-      setComments(commentsFromServer);
-    } catch (error) {
-      setError(true);
-    } finally {
-      setLoaded(true);
-    }
-  };
-
-  useEffect(() => {
-    loadComments();
-  }, []);
-
-  useEffect(loadComments, [post.id]); // Wrong!
-  // effect can return only a function but not a Promise
-  */
+    commentsApi
+      .getPostComments(post.id)
+      .then(data => {
+        dispatch(setComments(data));
+      })
+      .catch(() => {
+        dispatch(setCommentsError());
+      });
+  }, [post.id, dispatch]);
 
   const addComment = async ({ name, email, body }: CommentData) => {
     try {
@@ -66,27 +52,20 @@ export const PostDetails: React.FC<Props> = ({ post }) => {
         postId: post.id,
       });
 
-      setComments(currentComments => [...currentComments, newComment]);
-
-      // setComments([...comments, newComment]);
-      // works wrong if we wrap `addComment` with `useCallback`
-      // because it takes the `comments` cached during the first render
-      // not the actual ones
+      dispatch(addCommentAction(newComment));
     } catch (error) {
-      // we show an error message in case of any error
-      setError(true);
+      dispatch(setCommentsError());
     }
   };
 
   const deleteComment = async (commentId: number) => {
-    // we delete the comment immediately so as
-    // not to make the user wait long for the actual deletion
-    // eslint-disable-next-line max-len
-    setComments(currentComments =>
-      currentComments.filter(comment => comment.id !== commentId),
-    );
-
-    await commentsApi.deleteComment(commentId);
+    dispatch(removeCommentAction(commentId));
+
+    try {
+      await commentsApi.deleteComment(commentId);
+    } catch {
+      dispatch(setCommentsError());
+    }
   };
 
   return (