newCommentForm logic done

mate-academy · Dec 29, 2024 · a0cdbb3 · a0cdbb3
1 parent f17da9f
commit a0cdbb3
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 25 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -49,7 +49,10 @@ export const App = () => {
                 <UserSelector
                   users={users}
                   activeUser={activeUser}
-                  setActiveUser={setActiveUser}
+                  setActiveUser={user => {
+                    setActiveUser(user);
+                    setActivePost(null);
+                  }}
                 />
               </div>
 
@@ -73,32 +76,33 @@ export const App = () => {
                     No posts yet
                   </div>
                 )}
-
-                <PostsList
-                  isPostsList={isPostsList}
-                  posts={posts}
-                  setActivePost={setActivePost}
-                  activePost={activePost}
-                />
+                {!isLoading && posts.length > 0 && (
+                  <PostsList
+                    isPostsList={isPostsList}
+                    posts={posts}
+                    setActivePost={setActivePost}
+                    activePost={activePost}
+                  />
+                )}
               </div>
             </div>
           </div>
-          {activePost && (
-            <div
-              data-cy="Sidebar"
-              className={classNames(
-                'tile',
-                'is-parent',
-                'is-8-desktop',
-                'Sidebar',
-                'Sidebar--open',
-              )}
-            >
+          <div
+            data-cy="Sidebar"
+            className={classNames(
+              'tile',
+              'is-parent',
+              'is-8-desktop',
+              'Sidebar',
+              { 'Sidebar--open': activePost !== null },
+            )}
+          >
+            {activePost && (
               <div className="tile is-child box is-success ">
                 <PostDetails activePost={activePost} />
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </main>

diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
@@ -56,11 +56,15 @@ export const NewCommentForm: React.FC<Props> = ({
 
     onAddComment(formData);
 
-    setFormData({ name: '', email: '', body: '' });
+    setFormData(prevFormData => ({
+      ...prevFormData,
+      body: '',
+    }));
   };
 
   const handleClearComment = (evnt: React.FormEvent<HTMLFormElement>) => {
     evnt.preventDefault();
+    setIsError({ name: false, email: false, body: false });
 
     setFormData({ name: '', email: '', body: '' });
   };

diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
@@ -99,12 +99,11 @@ export const PostDetails: React.FC<Props> = ({ activePost }) => {
               ))}
             </>
           )}
-          {!isLoadingComments && (
+          {!isLoadingComments && !isCommentFormVisible && !isError && (
             <button
               data-cy="WriteCommentButton"
               type="button"
               className="button is-link"
-              style={{ display: isCommentFormVisible ? 'none' : 'block' }}
               onClick={() => setIsCommentFormVisible(true)}
             >
               Write a comment

diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { User } from '../types/User';
 import classNames from 'classnames';
 
@@ -14,6 +14,24 @@ export const UserSelector: React.FC<Props> = ({
   setActiveUser,
 }) => {
   const [isDropDownVisible, setIsDropDownVisible] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const onOutsideClick = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !(dropdownRef.current as HTMLElement).contains(event.target as Node)
+    ) {
+      setIsDropDownVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', onOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', onOutsideClick);
+    };
+  }, []);
 
   const toggleDropDown = () => {
     setIsDropDownVisible(!isDropDownVisible);
@@ -22,6 +40,7 @@ export const UserSelector: React.FC<Props> = ({
   return (
     <div
       data-cy="UserSelector"
+      ref={dropdownRef}
       className={classNames('dropdown', {
         'is-active': users.length > 0 && isDropDownVisible,
       })}