feat: list of posts provided #876

OKhalanskyi · 2023-08-03T11:56:14Z

olena-ole

Great job, approving! I really liked the way you created custom hooks and divided context providers 💣I left some small fixes for you to consider. Also, I wonder why you used models, types and constants, but maybe it's just an approach I am not familiar with.

olena-ole · 2023-08-06T21:01:17Z

src/App.tsx

+// <div className="tile is-ancestor">
+//   <div className="tile is-parent">
+//     <div className="tile is-child box is-success">
+//       <div className="block">
+//         <UserSelector />
+//       </div>
+//
+//       <div className="block" data-cy="MainContent">
+//         <p data-cy="NoSelectedUser">
+//           No user selected
+//         </p>
+//
+//         <Loader />
+//
+//         <div
+//           className="notification is-danger"
+//           data-cy="PostsLoadingError"
+//         >
+//           Something went wrong!
+//         </div>
+//
+//         <div className="notification is-warning" data-cy="NoPostsYet">
+//           No posts yet
+//         </div>
+//
+//         <PostsList />
+//       </div>
+//     </div>


It's nice not to leave unnecessary comments

olena-ole · 2023-08-06T21:17:32Z

src/components/NewCommentForm.tsx

+  const [emailError, setEmailError] = useState(false);
+  const [textError, setTextError] = useState(false);
+
+  const [loading, setLoading] = useState(false);


Just a reminder, variables with boolean values usually start with is/has

olena-ole · 2023-08-06T21:20:01Z

src/components/NewCommentForm.tsx

+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    try {
+      setLoading(true);
+
+      if (validate() && selectedPost) {
+        await addComment({
+          name: inputName,
+          email: inputEmail,
+          postId: selectedPost?.id,
+          body: inputText,
+        });
+      }
+
+      setInputText('');
+    } catch (error) {
+      setNameError(!inputName.trim());
+      setEmailError(!inputEmail.trim());
+      setTextError(!inputText.trim());
+    } finally {
+      setLoading(false);
+    }
+  };


Maybe it's better to setLoading before the try block, and setInputText in the finally block

juljaVysotska

Good job!

I found some issues, please check and fix them

Best regards

juljaVysotska · 2023-08-07T07:36:43Z

src/hooks/usePost.ts

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+// eslint-disable-next-line import/no-cycle


The code contains a circular dependency as indicated by the eslint-disable-next-line comment. Circular dependencies can lead to unexpected behaviors and should be avoided.

juljaVysotska · 2023-08-07T07:36:44Z

src/App.tsx

      </div>
    </main>
  );
 };
+
+// <div className="tile is-ancestor">


Commented out code should not be left in the production code. It makes the codebase less readable and could potentially introduce confusion for other developers. If you need to save the code for future reference, consider using version control systems like git.

juljaVysotska · 2023-08-07T07:36:47Z

src/api/comment.api.ts

+import { ApiEndpoint } from '../utils/constants';
+
+export const getCommentsByPost = (postId: number) => {
+  return client.get<IComment[]>(ApiEndpoint.GetCommentsByPost + postId);


The concatenation of the postId to the ApiEndpoint.GetCommentsByPost might lead to incorrect URLs if not properly formatted. Consider using template strings for clarity and to avoid potential errors.

juljaVysotska · 2023-08-07T07:36:47Z

src/context/post.context.tsx

+    const loadPosts = async (userId: number) => {
+      setPostsLoading(true);
+      setSelectedPost(null);
+      const postsFromApi = await getPostsByUser(userId);


getPostsByUser asynchronous function execution is not wrapped in a try-catch block. If the function throws an error, it would not be caught and it could break the application.

juljaVysotska · 2023-08-07T07:36:47Z

src/context/post.context.tsx

+  useEffect,
+  useState,
+} from 'react';
+// eslint-disable-next-line import/no-cycle


Import statement has a cyclic dependency, which could lead to issues where one module fails because it's dependent on a second module, which is in turn dependent on the first module.

juljaVysotska · 2023-08-07T07:37:20Z