change PostList

mate-academy · Feb 24, 2025 · 415cdb7 · 415cdb7
1 parent 1eb61de
commit 415cdb7
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 141 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,79 +5,38 @@ import './App.scss';
 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 { getPosts, getUsers } from './api/posts';
-import { Post } from './types/Post';
+import { getUsers } from './api/posts';
 
 export const App = () => {
   const [usersList, setUsersList] = useState<User[]>([]);
-  const [postsList, setPostsList] = useState<Post[]>([]);
   const [user, setUser] = useState<User>();
-  const [isLoading, setIsLoading] = useState(false);
-  const [isError, setIsError] = useState(false);
-  //const [isHadPost, setIsHadPost] = useState(false)
-
-  const filteredPostsList = () => {
-    return postsList.filter(post => post.userId === user?.id);
-  };
+  const selectedUserId = user?.id;
 
   useEffect(() => {
     getUsers().then(setUsersList);
   }, []);
 
-  const getPostList = (id: number) => {
-    setIsLoading(true);
-
-    getPosts(id)
-      .then(posts => setPostsList(posts))
-      .catch(() => setIsError(true))
-      .finally(() => {
-        setIsLoading(false);
-      });
-  };
-
   return (
     <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
-                  usersList={usersList}
-                  setUser={setUser}
-                  getPostList={getPostList}
-                />
+                <UserSelector usersList={usersList} setUser={setUser} />
               </div>
 
               <div className="block" data-cy="MainContent">
-                {filteredPostsList().length && !isError && !isLoading ? (
-                  <PostsList filteredPostsList={filteredPostsList()} />
-                ) : (
+                {!selectedUserId ? (
                   <p data-cy="NoSelectedUser">No user selected</p>
+                ) : (
+                  <PostsList selectedUserId={selectedUserId} />
                 )}
-
-                {isLoading && <Loader />}
-
-                {isError && (
-                  <div
-                    className="notification is-danger"
-                    data-cy="PostsLoadingError"
-                  >
-                    Something went wrong!
-                  </div>
-                )}
-
-                {!filteredPostsList().length && user && !isError && (
-                  <div className="notification is-warning" data-cy="NoPostsYet">
-                    No posts yet
-                  </div>
-                )}
-
-                {/*    */}
               </div>
+
+              {/*    */}
             </div>
           </div>
 

diff --git a/src/api/posts.ts b/src/api/posts.ts
@@ -2,10 +2,14 @@ import { client } from '../../src/utils/fetchClient';
 import { Post } from '../types/Post';
 import { User } from '../types/User';
 
-export const getUsers = () => {
-  return client.get<User[]>('/users');
+export const getUsers = async () => {
+  const users = await client.get<User[]>('/users');
+
+  return users;
 };
 
-export const getPosts = (id: number | undefined) => {
-  return client.get<Post[]>(`/posts?userId=${id}`);
+export const getPosts = async (id: number | undefined) => {
+  const posts = await client.get<Post[]>(`/posts?userId=${id}`);
+
+  return posts;
 };
diff --git a/src/components/PostsList.tsx b/src/components/PostsList.tsx
@@ -1,94 +1,95 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { Post } from '../types/Post';
+import { getPosts } from '../api/posts';
+import { Loader } from './Loader';
 
 interface Props {
-  filteredPostsList: Post[];
+  selectedUserId: number | undefined;
 }
-export const PostsList: React.FC<Props> = ({ filteredPostsList }) => {
-  return (
-    <div data-cy="PostsList">
-      <p className="title">Posts:</p>
+export const PostsList: React.FC<Props> = ({ selectedUserId }) => {
+  const [postsList, setPostsList] = useState<Post[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const filteredPostsList = () => {
+    return postsList.filter(post => post.userId === selectedUserId);
+  };
 
-      <table className="table is-fullwidth is-striped is-hoverable is-narrow">
-        <thead>
-          <tr className="has-background-link-light">
-            <th>#</th>
-            <th>Title</th>
-            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-            <th> </th>
-          </tr>
-        </thead>
+  const isHasPostsList = filteredPostsList().length;
 
-        <tbody>
-          {filteredPostsList.map(post => (
-            <tr key={post.id} data-cy="Post">
-              <td data-cy="PostId">{post.id}</td>
+  useEffect(() => {
+    if (selectedUserId !== undefined) {
+      const fetchPosts = async () => {
+        setIsLoading(true);
+        try {
+          const posts = await getPosts(selectedUserId);
 
-              <td data-cy="PostTitle">{post.title}</td>
+          setPostsList(posts);
+        } catch (error) {
+          setIsError(true);
+        } finally {
+          setIsLoading(false);
+        }
+      };
 
-              <td className="has-text-right is-vcentered">
-                <button
-                  type="button"
-                  data-cy="PostButton"
-                  className="button is-link is-light"
-                >
-                  Open
-                </button>
-              </td>
-            </tr>
-          ))}
+      fetchPosts();
+    }
+  }, [selectedUserId]);
 
-          {/* <tr data-cy="Post">
-            <td data-cy="PostId">18</td>
+  return (
+    <>
+      {!isLoading && isHasPostsList > 0 && (
+        <div data-cy="PostsList">
+          <p className="title">Posts:</p>
 
-            <td data-cy="PostTitle">
-              voluptate et itaque vero tempora molestiae
-            </td>
+          <table
+            className="table
+          is-fullwidth is-striped is-hoverable is-narrow"
+          >
+            <thead>
+              <tr className="has-background-link-light">
+                <th>#</th>
+                <th>Title</th>
+                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+                <th> </th>
+              </tr>
+            </thead>
 
-            <td className="has-text-right is-vcentered">
-              <button
-                type="button"
-                data-cy="PostButton"
-                className="button is-link"
-              >
-                Close
-              </button>
-            </td>
-          </tr> */}
+            <tbody>
+              {filteredPostsList().map(post => (
+                <tr key={post.id} data-cy="Post">
+                  <td data-cy="PostId">{post.id}</td>
 
-          {/* <tr data-cy="Post">
-            <td data-cy="PostId">19</td>
-            <td data-cy="PostTitle">
-              adipisci placeat illum aut reiciendis qui
-            </td>
+                  <td data-cy="PostTitle">{post.title}</td>
 
-            <td className="has-text-right is-vcentered">
-              <button
-                type="button"
-                data-cy="PostButton"
-                className="button is-link is-light"
-              >
-                Open
-              </button>
-            </td>
-          </tr>
+                  <td className="has-text-right is-vcentered">
+                    <button
+                      type="button"
+                      data-cy="PostButton"
+                      className="button is-link is-light"
+                    >
+                      Open
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {isLoading && <Loader />}
 
-          <tr data-cy="Post">
-            <td data-cy="PostId">20</td>
-            <td data-cy="PostTitle">doloribus ad provident suscipit at</td>
+      {isError && (
+        <div className="notification is-danger" data-cy="PostsLoadingError">
+          Something went wrong!
+        </div>
+      )}
 
-            <td className="has-text-right is-vcentered">
-              <button
-                type="button"
-                data-cy="PostButton"
-                className="button is-link is-light"
-              >
-                Open
-              </button>
-            </td>
-          </tr> */}
-        </tbody>
-      </table>
-    </div>
+      {!isHasPostsList && selectedUserId && !isError && !isLoading && (
+        <div className="notification is-warning" data-cy="NoPostsYet">
+          No posts yet
+        </div>
+      )}
+    </>
   );
 };
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
@@ -5,20 +5,11 @@ import { User } from '../types/User';
 interface Props {
   usersList: User[];
   setUser: (user: User) => void;
-  getPostList: (id: number) => void;
 }
 
-export const UserSelector: React.FC<Props> = ({
-  usersList,
-  setUser,
-  getPostList,
-}) => {
+export const UserSelector: React.FC<Props> = ({ usersList, setUser }) => {
   const [dropdownIsActive, setDropdowmIsActive] = useState(false);
 
-  // const getUserById = async (id: string) => {
-  //   return getUser(id).then(setUser);
-  // };
-
   return (
     <div
       data-cy="UserSelector"
@@ -54,7 +45,6 @@ export const UserSelector: React.FC<Props> = ({
               className="dropdown-item"
               onMouseDown={() => {
                 setUser(user);
-                getPostList(user.id);
               }}
             >
               {user.name}