fix: image popups and comments on other users' pages

rdtabb · Sep 23, 2023 · ed66d83 · ed66d83
1 parent 113f9ab
commit ed66d83
Show file tree

Hide file tree

Showing 17 changed files with 280 additions and 153 deletions.
diff --git a/_redirects b/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,8 +8,6 @@ import Usersearch from "./components/Userlist/Usersearch";
 import Auser from "./components/AnotherUser/Auser";
 import LikedPosts from "./components/LikedPosts/LikedPosts";
 import Chat from "./components/Chat/Chat";
-import { Provider } from "react-redux";
-import { store } from "./store/store";
 
 export const cookies = new Cookies();
 
@@ -31,15 +29,13 @@ const App = () => {
 
   return (
     <ErrorBoundary>
-      <Provider store={store}>
-        <Routes>
-          <Route path="/" element={<Profile />} />
-          <Route path="/usersearch" element={<Usersearch />} />
-          <Route path="/user/:id" element={<Auser />} />
-          <Route path="/likedposts" element={<LikedPosts />} />
-          <Route path="/chat" element={<Chat />} />
-        </Routes>
-      </Provider>
+      <Routes>
+        <Route path="/" element={<Profile />} />
+        <Route path="/usersearch" element={<Usersearch />} />
+        <Route path="/user/:id" element={<Auser />} />
+        <Route path="/likedposts" element={<LikedPosts />} />
+        <Route path="/chat" element={<Chat />} />
+      </Routes>
     </ErrorBoundary>
   );
 };

diff --git a/src/components/AnotherUser/Auser.tsx b/src/components/AnotherUser/Auser.tsx
@@ -7,10 +7,15 @@ import Container from "../Container/Container";
 import useAuserData from "../../hooks/useQueryHooks/useAuserData";
 import LoadingImage from "../LoadingStates/LoadingImage";
 import Loading from "../LoadingStates/LoadingPosts";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store/store";
 
 const Auser = () => {
   const { id } = useParams();
   const auserData = useAuserData(id!);
+  const openPopupType = useSelector(
+    (state: RootState) => state.modal.openPopupType,
+  );
 
   return (
     <Container>
@@ -50,7 +55,7 @@ const Auser = () => {
         <Aposts posts={auserData.data?.newPosts} name={auserData.data?.name} />
       )}
       <Footer />
-      <Auserpopup id={id} />
+      <>{openPopupType === "image" && <Auserpopup id={id} />}</>
     </Container>
   );
 };

diff --git a/src/components/AnotherUser/Auserpopup.tsx b/src/components/AnotherUser/Auserpopup.tsx
@@ -1,57 +1,71 @@
-import { useState } from "react";
-import useGeneralContext from "../../hooks/useContextHooks/useGeneralContext";
+import { useRef, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store/store";
+import Modal from "../Modal/Modal";
+
+import useComments from "../../hooks/useQueryHooks/useComments";
+import CommentsSection from "../Modal/components/Comments";
+import LoadingComments from "../LoadingStates/LoadingComments";
 
 type PropsType = {
   id: string | undefined;
 };
 
 const Auserpopup = ({ id }: PropsType) => {
-  const { handleClose, handleComment, comments } = useGeneralContext();
-  const [currAMessage, setCurrAMessage] = useState<string>("");
+  const post = useSelector((state: RootState) => state.modal.selectedPost);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  const commentsMutation = useComments("mutation");
+  const commentsQuery = useComments("query", id, post?.id);
+
+  const { register, handleSubmit, setFocus, reset } = useForm<{
+    comment: string;
+  }>({
+    mode: "onChange",
+  });
+
+  useEffect(() => {
+    setFocus("comment");
+  }, []);
 
   return (
-    <div data-visible="false" className="popup popup--image">
-      <div className="popup__container popup__container--image">
-        <div className="popup--image__container">
-          <img src="" alt="" className="popup__image" />
-          <div className="textarea">
-            <p className="popup__caption"></p>
-            <ul className="comments">
-              {comments.map((comment) => (
-                <li key={comment.id} className="comment">
-                  <img className="comment__icon" src={comment.img} alt="" />
-                  <article>
-                    <div className="comment__info">
-                      <p className="comment__creator">{comment.creator}</p>
-                      <p className="comment__date">{comment.createdAt}</p>
-                    </div>
-                    <p className="comment__message">{comment.message}</p>
-                  </article>
-                </li>
-              ))}
-            </ul>
-            <form
-              onSubmit={(e) =>
-                handleComment(e, currAMessage, id, setCurrAMessage)
-              }
-            >
-              <input
-                value={currAMessage}
-                onChange={(e) => setCurrAMessage(e.target.value)}
-                placeholder="Leave your comment..."
-                type="text"
-                className="popup__comment"
-              />
-            </form>
-          </div>
+    <Modal
+      ref={popupRef}
+      modalModifier="popup--image"
+      containerModifier="popup__container--image"
+    >
+      <div className="popup--image__container">
+        <img src={post?.imgsrc} alt={post?.city} className="popup__image" />
+        <div className="textarea">
+          <p className="popup__caption"></p>
+          <ul className="comments">
+            {commentsQuery?.isLoading ? (
+              <LoadingComments />
+            ) : (
+              <CommentsSection comments={commentsQuery?.data} />
+            )}
+          </ul>
+          <form
+            onSubmit={handleSubmit((data) => {
+              reset();
+              return commentsMutation.mutate({
+                comment: data.comment,
+                post,
+                id,
+              });
+            })}
+          >
+            <input
+              placeholder="Leave your comment..."
+              type="text"
+              className="popup__comment"
+              {...register("comment")}
+            />
+          </form>
         </div>
-        <button
-          onClick={handleClose}
-          type="button"
-          className="popup__close popup__close--image"
-        ></button>
       </div>
-    </div>
+    </Modal>
   );
 };
 

diff --git a/src/components/Auth.tsx b/src/components/Auth.tsx
@@ -11,6 +11,7 @@ import {
   DocumentReference,
   DocumentData,
 } from "firebase/firestore";
+import MeetsLogoIcon from "../assets/meets-logo.svg";
 import useGeneralContext from "../hooks/useContextHooks/useGeneralContext";
 
 export const Auth = () => {
@@ -59,11 +60,7 @@ export const Auth = () => {
   return (
     <main className="auth">
       <div className="img-container">
-        <img
-          className="auth__logo"
-          src="src/assets/meets-logo.svg"
-          alt="meets-logo"
-        />
+        <img className="auth__logo" src={MeetsLogoIcon} alt="meets-logo" />
       </div>
       <h1 className="auth__header">Sign in with Google</h1>
       <button onClick={signin} className="auth__signin">

diff --git a/src/components/LoadingStates/LoadingComments.tsx b/src/components/LoadingStates/LoadingComments.tsx
@@ -2,16 +2,58 @@ import React from "react";
 
 const LoadingComments = () => {
   return (
-    <li className="comment comment--empty">
-      <img className="comment__icon" src="" alt="" />
-      <article>
-        <div className="comment__info">
-          <p className="comment__creator"></p>
-          <p className="comment__date"></p>
-        </div>
-        <p className="comment__message"></p>
-      </article>
-    </li>
+    <>
+      <li className="comment comment--empty">
+        <img className="comment__icon" alt="" />
+        <article>
+          <div className="comment__info">
+            <p className="comment__creator"></p>
+            <p className="comment__date"></p>
+          </div>
+          <p className="comment__message"></p>
+        </article>
+      </li>
+      <li className="comment comment--empty">
+        <img className="comment__icon" alt="" />
+        <article>
+          <div className="comment__info">
+            <p className="comment__creator"></p>
+            <p className="comment__date"></p>
+          </div>
+          <p className="comment__message"></p>
+        </article>
+      </li>
+      <li className="comment comment--empty">
+        <img className="comment__icon" alt="" />
+        <article>
+          <div className="comment__info">
+            <p className="comment__creator"></p>
+            <p className="comment__date"></p>
+          </div>
+          <p className="comment__message"></p>
+        </article>
+      </li>
+      <li className="comment comment--empty">
+        <img className="comment__icon" alt="" />
+        <article>
+          <div className="comment__info">
+            <p className="comment__creator"></p>
+            <p className="comment__date"></p>
+          </div>
+          <p className="comment__message"></p>
+        </article>
+      </li>
+      <li className="comment comment--empty">
+        <img className="comment__icon" alt="" />
+        <article>
+          <div className="comment__info">
+            <p className="comment__creator"></p>
+            <p className="comment__date"></p>
+          </div>
+          <p className="comment__message"></p>
+        </article>
+      </li>
+    </>
   );
 };
 

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -49,27 +49,23 @@ const Modal = forwardRef(
       };
     }, []);
 
-    return (
-      <>
-        {createPortal(
-          <div
-            ref={popupRef}
-            data-visible="false"
-            onClick={closePopupOnOverlay}
-            className={`popup ${modalModifier}`}
-          >
-            <div className={`popup__container ${containerModifier}`}>
-              {children}
-              <button
-                onClick={closePopup}
-                type="button"
-                className="popup__close"
-              ></button>
-            </div>
-          </div>,
-          document.getElementById("root")!,
-        )}
-      </>
+    return createPortal(
+      <div
+        ref={popupRef}
+        data-visible="false"
+        onClick={closePopupOnOverlay}
+        className={`popup ${modalModifier}`}
+      >
+        <div className={`popup__container ${containerModifier}`}>
+          {children}
+          <button
+            onClick={closePopup}
+            type="button"
+            className="popup__close"
+          ></button>
+        </div>
+      </div>,
+      document.getElementById("root")!,
     );
   },
 );

diff --git a/src/components/Modal/components/Comments.tsx b/src/components/Modal/components/Comments.tsx
@@ -0,0 +1,34 @@
+import { useRef, memo, useEffect } from "react";
+import { Comment } from "../../../types/Types";
+
+type CommentsSectionProps = {
+  comments: Comment[] | undefined;
+};
+
+const CommentsSection = ({ comments }: CommentsSectionProps) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [comments]);
+
+  return (
+    <>
+      {comments?.map((comment) => (
+        <li key={comment.id} className="comment">
+          <img className="comment__icon" src={comment.img} alt="" />
+          <article>
+            <div className="comment__info">
+              <p className="comment__creator">{comment.creator}</p>
+              <p className="comment__date">{comment.createdAt}</p>
+            </div>
+            <p className="comment__message">{comment.message}</p>
+          </article>
+        </li>
+      ))}
+      <div ref={scrollRef}></div>
+    </>
+  );
+};
+
+export default memo(CommentsSection);