fixes

mate-academy · Oct 16, 2024 · 341ee70 · 341ee70
1 parent dec4411
commit 341ee70
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 45 deletions.
diff --git a/cypress/integration/page.spec.js b/cypress/integration/page.spec.js
@@ -287,7 +287,7 @@ describe('', () => {
         page.waitForRequest('@usersRequest');
       });
 
-      it('should should empty text by default', () => {
+      it('should show empty text by default', () => {
         button().should('have.text', 'Choose a user');
       });
 
@@ -861,7 +861,7 @@ describe('', () => {
       describe('', () => {
         beforeEach(() => {
           cy.clock();
-          page.spyOn('**/comments?postId=2', 'post2Coments', { fixture: 'post2Comments' });
+          page.spyOn('**/comments?postId=2', 'post2Comments', { fixture: 'post2Comments' });
           page.postButton(1).click();
         });
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';

diff --git a/src/components/MainContent/PostList/PostItem.tsx b/src/components/MainContent/PostList/PostItem.tsx
@@ -22,7 +22,7 @@ export const PostItem: React.FC<PostItemProps> = ({ post }) => {
   const { setIsError } = useContext(ErrorsContext);
   const { setIsActiveForm } = useContext(CommentFormContext);
 
-  function handleOpenButton() {
+  function handleOpenButtonClick() {
     if (activePost?.id !== post.id) {
       setActivePost(post);
     } else {
@@ -57,7 +57,7 @@ export const PostItem: React.FC<PostItemProps> = ({ post }) => {
           className={classNames('button is-link', {
             'is-light': activePost?.id !== post.id,
           })}
-          onClick={() => handleOpenButton()}
+          onClick={() => handleOpenButtonClick()}
         >
           {activePost?.id === post.id ? 'Close' : 'Open'}
         </button>

diff --git a/src/components/Sidebar/CommentList/CommentItem.tsx b/src/components/Sidebar/CommentList/CommentItem.tsx
@@ -10,17 +10,19 @@ interface CommentItemProps {
 export const CommentItem: React.FC<CommentItemProps> = ({ comment }) => {
   const { comments, setComments } = useContext(CommentListContext);
 
-  function handleDeleteButton() {
+  async function handleDelete() {
     const newList = comments.filter(item => item.id !== comment.id);
     const copy = [...comments];
 
     setComments(newList);
 
-    deleteComment(comment.id).catch(() => {
+    try {
+      await deleteComment(comment.id);
+    } catch (error) {
       alert('Failed to delete comment, please try again!');
 
       setComments(copy);
-    });
+    }
   }
 
   return (
@@ -34,7 +36,7 @@ export const CommentItem: React.FC<CommentItemProps> = ({ comment }) => {
           type="button"
           className="delete is-small"
           aria-label="delete"
-          onClick={handleDeleteButton}
+          onClick={handleDelete}
         >
           delete button
         </button>

diff --git a/src/components/Sidebar/CommentList/CommentList.tsx b/src/components/Sidebar/CommentList/CommentList.tsx
@@ -38,8 +38,8 @@ export const CommentList: React.FC<CommentListProps> = ({ comments }) => {
             <>
               <p className="title is-4">Comments:</p>
 
-              {comments?.map(item => (
-                <CommentItem key={item.id} comment={item} />
+              {comments?.map(comment => (
+                <CommentItem key={comment.id} comment={comment} />
               ))}
             </>
           )}

diff --git a/src/components/Sidebar/PostDetails/NewCommentForm.tsx b/src/components/Sidebar/PostDetails/NewCommentForm.tsx
@@ -58,7 +58,7 @@ export const NewCommentForm: React.FC = () => {
     });
   }
 
-  function handleAdd(event: React.FormEvent<HTMLFormElement>) {
+  const handleAdd = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     const newError = { ...isErrorField };
@@ -100,10 +100,10 @@ export const NewCommentForm: React.FC = () => {
           setIsProcessing(false);
         });
     }
-  }
+  };
 
   return (
-    <form data-cy="NewCommentForm" onSubmit={event => handleAdd(event)}>
+    <form data-cy="NewCommentForm" onSubmit={handleAdd}>
       <div className="field" data-cy="NameField">
         <label className="label" htmlFor="comment-author-name">
           Author Name
@@ -119,8 +119,8 @@ export const NewCommentForm: React.FC = () => {
             className={classNames('input', {
               'is-danger': isErrorField.nameField,
             })}
-            onChange={e =>
-              onChangeHandler(Keys.nameField, e.target.value.trimStart())
+            onChange={event =>
+              onChangeHandler(Keys.nameField, event.target.value.trimStart())
             }
           />
 
@@ -160,8 +160,8 @@ export const NewCommentForm: React.FC = () => {
             className={classNames('input', {
               'is-danger': isErrorField.emailField,
             })}
-            onChange={e =>
-              onChangeHandler(Keys.emailField, e.target.value.trimStart())
+            onChange={event =>
+              onChangeHandler(Keys.emailField, event.target.value.trimStart())
             }
           />
 
@@ -200,8 +200,8 @@ export const NewCommentForm: React.FC = () => {
             className={classNames('textarea', {
               'is-danger': isErrorField.textArea,
             })}
-            onChange={e =>
-              onChangeHandler(Keys.textArea, e.target.value.trimStart())
+            onChange={event =>
+              onChangeHandler(Keys.textArea, event.target.value.trimStart())
             }
           />
         </div>
@@ -220,6 +220,7 @@ export const NewCommentForm: React.FC = () => {
             className={classNames('button is-link', {
               'is-loading': isProcessing,
             })}
+            disabled={isProcessing}
           >
             Add
           </button>

diff --git a/src/components/Sidebar/PostDetails/PostDetails.tsx b/src/components/Sidebar/PostDetails/PostDetails.tsx
@@ -14,17 +14,15 @@ export const PostDetails: React.FC = () => {
 
   return (
     <div className="content" data-cy="PostDetails">
-      <div className="content" data-cy="PostDetails">
-        <div className="block">
-          <h2 data-cy="PostTitle">{`#${activePost?.id}: ${activePost?.title}`}</h2>
+      <div className="block">
+        <h2 data-cy="PostTitle">{`#${activePost?.id}: ${activePost?.title}`}</h2>
 
-          <p data-cy="PostBody">{activePost?.body}</p>
-        </div>
+        <p data-cy="PostBody">{activePost?.body}</p>
+      </div>
 
-        {activePost && <CommentList comments={comments} />}
+      {activePost && <CommentList comments={comments} />}
 
-        {isActiveForm && <NewCommentForm />}
-      </div>
+      {isActiveForm && <NewCommentForm />}
     </div>
   );
 };
diff --git a/src/components/UserSelector/DropdownMenu/DropdownItem/DropdownItem.tsx b/src/components/UserSelector/DropdownMenu/DropdownItem/DropdownItem.tsx
@@ -26,7 +26,7 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
   const { setIsError } = useContext(ErrorsContext);
   const { setActivePost } = useContext(ActivePostContext);
 
-  function handleMouseDown(
+  function handleMouseDownEvent(
     event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
   ) {
     event.preventDefault();
@@ -54,7 +54,7 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
       className={classNames('dropdown-item', {
         'is-active': activeUser?.id === user.id,
       })}
-      onMouseDown={event => handleMouseDown(event)}
+      onMouseDown={handleMouseDownEvent}
     >
       {user.name}
     </a>

diff --git a/src/components/UserSelector/DropdownMenu/DropdownMenu.tsx b/src/components/UserSelector/DropdownMenu/DropdownMenu.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { DropdownItem } from './DropdownItem';
 import { User } from '../../../types/User';
 
@@ -7,14 +7,31 @@ interface DropdownMenuProps {
   setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+interface UserWithKey extends User {
+  key: string;
+}
+
 export const DropdownMenu: React.FC<DropdownMenuProps> = ({
   users,
   setIsActive,
 }) => {
+  const [usersWithKeys, setUsersWithKeys] = useState<UserWithKey[]>([]);
+
+  useEffect(() => {
+    const generateUniqueKeys = (userList: User[]): UserWithKey[] => {
+      return userList.map(user => ({
+        ...user,
+        key: `${user.id}-${Math.random().toString(36).substr(2, 9)}`,
+      }));
+    };
+
+    setUsersWithKeys(generateUniqueKeys(users));
+  }, [users]);
+
   return (
     <div tabIndex={1} className="dropdown-menu" id="dropdown-menu" role="menu">
       <div className="dropdown-content">
-        {users.map(user => (
+        {usersWithKeys.map(user => (
           <DropdownItem key={user.id} user={user} setIsActive={setIsActive} />
         ))}
       </div>

diff --git a/src/utils/Store.tsx b/src/utils/Store.tsx
@@ -12,12 +12,12 @@ type ActiveUser = User | null;
 
 interface ActiveUserContextType {
   activeUser: ActiveUser;
-  setActiveUser: React.Dispatch<SetStateAction<ActiveUser>>;
+  setActiveUser: React.Dispatch<SetStateAction<ActiveUser>> | undefined;
 }
 
 export const ActiveUserContext = createContext<ActiveUserContextType>({
   activeUser: null,
-  setActiveUser: () => {},
+  setActiveUser: undefined,
 });
 
 export const ActiveUserProvider: React.FC<Children> = ({ children }) => {
@@ -34,12 +34,12 @@ export const ActiveUserProvider: React.FC<Children> = ({ children }) => {
 
 interface Loader {
   isLoading: boolean;
-  setIsLoading: React.Dispatch<SetStateAction<boolean>>;
+  setIsLoading: React.Dispatch<SetStateAction<boolean>> | undefined;
 }
 
 export const LoaderContext = createContext<Loader>({
   isLoading: false,
-  setIsLoading: () => {},
+  setIsLoading: undefined,
 });
 
 export const LoaderProvider: React.FC<Children> = ({ children }) => {
@@ -59,12 +59,12 @@ type PostsType = Post[] | null;
 
 interface Posts {
   posts: PostsType;
-  setPosts: React.Dispatch<SetStateAction<PostsType>>;
+  setPosts: React.Dispatch<SetStateAction<PostsType>> | undefined;
 }
 
 export const PostsContext = createContext<Posts>({
   posts: null,
-  setPosts: () => {},
+  setPosts: undefined,
 });
 
 export const PostsProvider: React.FC<Children> = ({ children }) => {
@@ -81,12 +81,12 @@ type Error = ErrorTypes | null;
 
 interface Errors {
   isError: Error;
-  setIsError: React.Dispatch<SetStateAction<Error>>;
+  setIsError: React.Dispatch<SetStateAction<Error>> | undefined;
 }
 
 export const ErrorsContext = createContext<Errors>({
   isError: null,
-  setIsError: () => {},
+  setIsError: undefined,
 });
 
 export const ErrorsProvider: React.FC<Children> = ({ children }) => {
@@ -128,12 +128,12 @@ export const ActivePostProvider: React.FC<Children> = ({ children }) => {
 
 interface CommentList {
   comments: Comment[];
-  setComments: React.Dispatch<SetStateAction<Comment[]>>;
+  setComments: React.Dispatch<SetStateAction<Comment[]>> | undefined;
 }
 
 export const CommentListContext = createContext<CommentList>({
   comments: [],
-  setComments: () => {},
+  setComments: undefined,
 });
 
 export const CommentListProvider: React.FC<Children> = ({ children }) => {
@@ -153,12 +153,12 @@ export const CommentListProvider: React.FC<Children> = ({ children }) => {
 
 interface Form {
   isActiveForm: boolean;
-  setIsActiveForm: React.Dispatch<SetStateAction<boolean>>;
+  setIsActiveForm: React.Dispatch<SetStateAction<boolean>> | undefined;
 }
 
 export const CommentFormContext = createContext<Form>({
   isActiveForm: false,
-  setIsActiveForm: () => {},
+  setIsActiveForm: undefined,
 });
 
 export const CommentFormProvider: React.FC<Children> = ({ children }) => {

diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts
@@ -31,7 +31,9 @@ function request<T>(
     .then(() => fetch(BASE_URL + url, options))
     .then(response => {
       if (!response.ok) {
-        throw new Error();
+        throw new Error(
+          `Request failed with status ${response.status}: ${response.statusText}`,
+        );
       }
 
       return response.json();