add task solution

src/App.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import classNames from 'classnames';
 
 import 'bulma/css/bulma.css';
@@ -8,53 +9,151 @@ import { PostsList } from './components/PostsList';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
 import { Loader } from './components/Loader';
+import { useEffect, useState } from 'react';
+import { User } from './types/User';
+import { getUserPosts } from './api/ClientFunctions';
+import { Post } from './types/Post';
 
-export const App = () => (
-  <main className="section">
-    <div className="container">
-      <div className="tile is-ancestor">
-        <div className="tile is-parent">
-          <div className="tile is-child box is-success">
-            <div className="block">
-              <UserSelector />
-            </div>
+export const App = () => {
+  // #region states
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+  const [currUser, setCurrUser] = useState<User | null>(null);
+  const [isDdActive, setIsDdActive] = useState(false);
+  const [userPosts, setUserPosts] = useState<Post[]>([]);
+  const [loadingPostsError, setLoadingPostsError] = useState(false);
+  const [arePostsLoading, setArePostsLoading] = useState(false);
+  const [isNoPosts, setIsNoPosts] = useState(false);
+  const [openedPost, setOpenedPost] = useState<Post | null>(null);
+  const [prevUser, setPrevUser] = useState<User | null>(null);
+  const [doesFormExist, setDoesFormExist] = useState(false);
 
-              <Loader />
+  // #endregion
+  // #region handlers
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
-              </div>
+  const sectionOnClickHandler = () => {
+    if (isDdActive) {
+      setIsDdActive(false);
+    }
+  };
+
+  // #endregion
+  // #region useEffects
+
+  useEffect(() => {
+    if (currUser) {
+      const { id } = currUser;
+
+      setArePostsLoading(true);
+
+      getUserPosts(id)
+        .then(posts => {
+          setUserPosts(posts);
+
+          if (loadingPostsError) {
+            setLoadingPostsError(false);
+          }
+        })
+        .catch(() => setLoadingPostsError(true))
+        .finally(() => setArePostsLoading(false));
+    }
+  }, [currUser]);
+
+  useEffect(() => {
+    if (userPosts.length === 0 && currUser) {
+      setIsNoPosts(true);
+    } else if (userPosts.length > 0 && isNoPosts) {
+      setIsNoPosts(false);
+    }
+  }, [currUser, isNoPosts, userPosts]);
+
+  useEffect(() => {
+    if (prevUser?.id !== currUser?.id) {
+      setOpenedPost(null);
+    }
+  }, [prevUser, currUser]);
+
+  useEffect(() => {
+    if (doesFormExist) {
+      setDoesFormExist(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openedPost]);
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+  // #endregion
+  // #region markups
+
+  const loadingPostsErrorMarkup = (
+    <div className="notification is-danger" data-cy="PostsLoadingError">
+      Something went wrong!
+    </div>
+  );
+  const noPostsMarkup = (
+    <div className="notification is-warning" data-cy="NoPostsYet">
+      No posts yet
+    </div>
+  );
+  const postsList = (
+    <PostsList
+      userPosts={userPosts}
+      openedPost={openedPost}
+      setOpenedPost={setOpenedPost}
+    />
+  );
+
+  // #endregion
+
+  return (
+    <main className="section" onClick={sectionOnClickHandler}>
+      <div className="container">
+        <div className="tile is-ancestor">
+          <div className="tile is-parent">
+            <div className="tile is-child box is-success">
+              <div className="block">
+                <UserSelector
+                  isDdActive={isDdActive}
+                  currUser={currUser}
+                  setPrevUser={setPrevUser}
+                  setCurrUser={setCurrUser}
+                  setIsDdActive={setIsDdActive}
+                />
               </div>
 
-              <PostsList />
+              <div className="block" data-cy="MainContent">
+                {!currUser && <p data-cy="NoSelectedUser">No user selected</p>}
+
+                {arePostsLoading ? (
+                  <Loader />
+                ) : (
+                  (loadingPostsError && loadingPostsErrorMarkup) ||
+                  (isNoPosts && noPostsMarkup) ||
+                  (userPosts.length > 0 && postsList)
+                )}
+              </div>
             </div>
           </div>
-        </div>
 
-        <div
-          data-cy="Sidebar"
-          className={classNames(
-            'tile',
-            'is-parent',
-            'is-8-desktop',
-            'Sidebar',
-            'Sidebar--open',
-          )}
-        >
-          <div className="tile is-child box is-success ">
-            <PostDetails />
+          <div
+            data-cy="Sidebar"
+            className={classNames(
+              'tile',
+              'is-parent',
+              'is-8-desktop',
+              'Sidebar',
+              { 'Sidebar--open': openedPost },
+            )}
+          >
+            <div className="tile is-child box is-success ">
+              {openedPost && (
+                <PostDetails
+                  openedPost={openedPost}
+                  doesFormExist={doesFormExist}
+                  setDoesFormExist={setDoesFormExist}
+                />
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};

src/api/ClientFunctions.ts

@@ -0,0 +1,29 @@
+import { client } from '../utils/fetchClient';
+import { User } from '../types/User';
+import { Post } from '../types/Post';
+import { Comment } from '../types/Comment';
+
+export const getUsers = () => {
+  return client.get<User[]>('/users');
+};
+
+export const getUserPosts = (userId: number) => {
+  return client.get<Post[]>(`/posts?userId=${userId}`);
+};
+
+export const getPostComments = (postId: number) => {
+  return client.get<Comment[]>(`/comments?postId=${postId}`);
+};
+
+export const deleteComment = (id: number) => {
+  return client.delete(`/comments/${id}`);
+};
+
+export const postComment = ({
+  postId,
+  name,
+  email,
+  body,
+}: Omit<Comment, 'id'>) => {
+  return client.post<Comment>('/comments', { postId, name, email, body });
+};