imports cleanup

alexandyrzph · Aug 3, 2022 · fc3c446 · fc3c446
1 parent a93a261
commit fc3c446
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 41 deletions.
diff --git a/pixelplace/src/components/Forms/PostCreateForm.js b/pixelplace/src/components/Forms/PostCreateForm.js
@@ -1,13 +1,13 @@
+import { useUserAuth } from "../../context/UserAuthContext";
 import { Formik, Form, Field } from "formik";
 import { CreateEditPostSchema } from "../../utils/formValidators";
 import { useEffect, useRef, useState } from "react";
 import { AiOutlineCloudUpload } from "react-icons/ai";
+import { BsShieldFillExclamation } from "react-icons/bs";
 import { useNavigate } from "react-router-dom";
 import { db, storage } from "../../firebase";
 import { addDoc, collection, serverTimestamp } from "firebase/firestore";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
-import { useUserAuth } from "../../context/UserAuthContext";
-import { BsShieldFillExclamation } from "react-icons/bs";
 
 const PostCreateForm = () => {
     const [image, setImage] = useState();

diff --git a/pixelplace/src/components/Forms/PostEditForm.js b/pixelplace/src/components/Forms/PostEditForm.js
@@ -1,3 +1,4 @@
+import { useUserAuth } from "../../context/UserAuthContext";
 import { Formik, Form, Field } from "formik";
 import { CreateEditPostSchema } from "../../utils/formValidators";
 import { useEffect, useRef, useState } from "react";
@@ -6,7 +7,6 @@ import { Navigate, useNavigate, useParams } from "react-router-dom";
 import { db, storage } from "../../firebase";
 import { doc, updateDoc } from "firebase/firestore";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
-import { useUserAuth } from "../../context/UserAuthContext";
 import { BsShieldFillExclamation } from "react-icons/bs";
 import { getPostById } from "../../api/PostsAPI";
 
@@ -40,11 +40,10 @@ const PostEditForm = () => {
             .catch((err) => console.log(err));
     }, [postId]);
 
-
     if (post && post?.ownerId !== user.uid) {
         return <Navigate to="/" />;
     }
-    
+
     const uploadImage = async (image) => {
         const imageRef = ref(storage, `${new Date().getTime() + image.name}`);
         try {

diff --git a/pixelplace/src/components/Forms/SignUp.js b/pixelplace/src/components/Forms/SignUp.js
@@ -5,13 +5,13 @@ import { AiOutlineCloudUpload } from "react-icons/ai";
 import { BsShieldFillExclamation } from "react-icons/bs";
 import { Formik, Form, Field } from "formik";
 import { SignUpSchema } from "../../utils/formValidators";
-import { doc, setDoc } from "firebase/firestore";
+import { addDoc, doc } from "firebase/firestore";
 import { db, storage } from "../../firebase";
+import { handleFirebaseError } from "../../utils/firebaseErrorHandler";
 import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
 import { updateProfile } from "firebase/auth";
 import { toastError } from "../../utils/Toast";
 import { ToastContainer } from "react-toastify";
-import { handleFirebaseError } from "../../utils/firebaseErrorHandler";
 
 const SignUp = () => {
     const { user, signUp } = useUserAuth();
@@ -56,7 +56,7 @@ const SignUp = () => {
                 photoURL: url,
                 displayName: username,
             });
-            await setDoc(doc(db, "Users", res.user.uid), {
+            await addDoc(doc(db, "Users", res.user.uid), {
                 username,
                 email,
             });

diff --git a/pixelplace/src/components/Home/Home.js b/pixelplace/src/components/Home/Home.js
@@ -8,7 +8,7 @@ const Home = () => {
             <div className="flex relative z-20 justify-center 2xl:justify-between w-full max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl xl:max-w-3xl overflow-ellipsis 2xl:max-w-7xl mx-auto h-screen pt-[30%] md:pt-[10%]">
                 <div className="relative">
                     <div className="text-center md:text-left mb-12">
-                        <p className="text-5xl md:text-6xl mb-6 font-neu font-light">
+                        <p className="text-5xl text-center 2xl:text-left md:text-6xl mb-6 font-neu font-light">
                             Wonder where <br /> to share
                             <span className="font-extrabold">
                                 {" "}

diff --git a/pixelplace/src/components/PostDetails/PostDetails.js b/pixelplace/src/components/PostDetails/PostDetails.js
@@ -1,22 +1,22 @@
+import { useUserAuth } from "../../context/UserAuthContext";
 import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { BeatLoader } from "react-spinners";
-import { getPostById } from "../../api/PostsAPI";
 import { HiDotsHorizontal } from "react-icons/hi";
-import { useUserAuth } from "../../context/UserAuthContext";
-import { Transition } from "@tailwindui/react";
 import { ToastContainer } from "react-toastify";
+import { getPostById } from "../../api/PostsAPI";
 import { toastError } from "../../utils/Toast";
 import { db } from "../../firebase";
-import { addDoc, collection, deleteDoc, doc, getDocs, onSnapshot } from "firebase/firestore";
-import Comment from "../Comment/Comment";
+import { addDoc, collection, deleteDoc, doc, onSnapshot } from "firebase/firestore";
 import { uuidv4 } from "@firebase/util";
+import Comment from "../Comment/Comment";
+import { Transition } from "@tailwindui/react";
 
 const PostDetails = () => {
     const { user } = useUserAuth();
+    const { postId } = useParams();
     const [comment, setComment] = useState("");
     const [comments, setComments] = useState([]);
-    const { postId } = useParams();
     const [post, setPost] = useState();
     const [isLoading, setIsLoading] = useState(false);
     const [dropdownShow, setDropdownShow] = useState(false);
@@ -60,6 +60,7 @@ const PostDetails = () => {
         addDoc(collection(db, "Posts", postId, `comments`), commentData)
             .then()
             .catch((err) => toastError(err));
+        setComment('');
     };
 
     if (isLoading) {
@@ -106,9 +107,7 @@ const PostDetails = () => {
                                             </Link>
                                             <hr />
                                             <button
-                                                onClick={() => {
-                                                    deletePostHandler();
-                                                }}
+                                                onClick={() => deletePostHandler()}
                                                 className="text-left w-full"
                                             >
                                                 <p className="block px-4 py-2 hover:bg-red-500 hover:text-neu-black duration-75">
@@ -127,7 +126,7 @@ const PostDetails = () => {
                                 <img
                                     className="border-2 border-neu-black cursor-pointer inline-block h-9 w-9 rounded-full ring-2 ring-white"
                                     src={post?.ownerAvatarURL}
-                                    alt=""
+                                    alt="avatarImage"
                                 />
                                 <p className="border-2 px-4 rounded-full text-gray-300 bg-neu-black">
                                     {post?.category}
@@ -138,14 +137,15 @@ const PostDetails = () => {
                         <p className="text-md mt-2 mb-4">
                             Likes: <span className="font-bold">{post?.likes.length}</span>
                         </p>
-
                         <h2 className="mt-5 text-lg">Comments:</h2>
                         <div className="max-h-370 overflow-y-auto">
                             <div className="flex flex-col gap-2 mt-5 bg-white rounded-lg">
                                 {comments.length === 0 ? (
                                     <p>No comments yet</p>
                                 ) : (
-                                    comments.map((comment) => <Comment {...comment} key={uuidv4()} />)
+                                    comments.map((comment) => (
+                                        <Comment {...comment} key={uuidv4()} />
+                                    ))
                                 )}
                             </div>
                         </div>

diff --git a/pixelplace/src/components/PostItem/PostItem.js b/pixelplace/src/components/PostItem/PostItem.js
@@ -1,10 +1,10 @@
+import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import Like from "../Like/Like";
 import { HiDotsHorizontal } from "react-icons/hi";
-import { Transition } from "@tailwindui/react";
-import { useEffect, useRef, useState } from "react";
 import { deleteDoc, doc } from "firebase/firestore";
 import { db } from "../../firebase";
+import { Transition } from "@tailwindui/react";
+import Like from "../Like/Like";
 
 const PostItem = ({
     ownerUsername,

diff --git a/pixelplace/src/components/Posts/Posts.js b/pixelplace/src/components/Posts/Posts.js
@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
 import { useUserAuth } from "../../context/UserAuthContext";
+import { useEffect, useState } from "react";
 import { PostItem } from "..";
 import { BeatLoader } from "react-spinners";
 import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
@@ -27,7 +27,7 @@ const Posts = () => {
         return (
             <div className="relative max-w-md px-1 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full h-screen py-16">
                 <div className="masonry sm:masonry-sm md:masonry-md xl:masonry-lg">
-                    {posts && posts.length > 0 ? (
+                    {posts && posts?.length > 0 ? (
                         posts.map((post) => <PostItem key={post.postId} {...post} user={user} />)
                     ) : (
                         <div>

diff --git a/pixelplace/src/components/Profile/Profile.js b/pixelplace/src/components/Profile/Profile.js
@@ -7,7 +7,6 @@ import PostItem from "../PostItem/PostItem";
 const Profile = () => {
     const { user } = useUserAuth();
     const [posts, setPosts] = useState([]);
-    const likes = 4;
     useEffect(() => {
         const q = query(collection(db, "Posts"), where("ownerId", "==", user.uid));
         onSnapshot(
@@ -22,8 +21,8 @@ const Profile = () => {
 
     return (
         <div>
-            <div className="flex flex-col font-mono gap-4 relative z-20 w-full max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl xl:max-w-3xl 2xl:max-w-7xl mx-auto h-screen pt-[0%] md:pt-[5%]">
-                <div className="flex gap-4">
+            <div className="flex flex-col font-mono gap-4 relative z-20 w-full max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl xl:max-w-3xl 2xl:max-w-7xl mx-auto h-screen pt-[0%] md:pt-[3%]">
+                <div className="flex flex-col justify-center items-center gap-4">
                     <img
                         className="border-2 border-neu-black cursor-pointer inline-block w-[300px] h-[300px] object-cover object-center rounded-xl hover:shadow-neu-shadow duration-75"
                         src={user.photoURL}
@@ -32,15 +31,12 @@ const Profile = () => {
                     <div>
                         <h1 className="text-3xl">Username: {user.displayName}</h1>
                         <h2 className="text-2xl mt-1">Email: {user.email}</h2>
-                        <p className="text-xl mt-4">Total likes: {likes}</p>
                     </div>
                 </div>
-                    <h2 className="text-4xl mb-4 font-bold">Your Posts:</h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 align  gap-4">
+                <h2 className="text-4xl mb-4 mt-4 font-bold">Your Posts:</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
                     {posts.map((post) => (
-                        <div className=" w-full">
-                            <PostItem key={post.postId} {...post} user={user} />
-                        </div>
+                        <PostItem key={post.postId} {...post} user={user} />
                     ))}
                 </div>
             </div>

diff --git a/pixelplace/src/components/index.js b/pixelplace/src/components/index.js
@@ -1,11 +1,13 @@
-export { default as Home } from "./Home/Home";
-export { default as Posts } from "./Posts/Posts";
-export { default as SignUp } from "./Forms/SignUp";
-export { default as SignIn } from "./Forms/SignIn";
-export { default as PostItem } from "./PostItem/PostItem";
-export { default as PostDetails } from "./PostDetails/PostDetails";
+export { default as Comment } from "./Comment/Comment";
 export { default as PostCreate } from "./Forms/PostCreateForm";
 export { default as PostEdit } from "./Forms/PostEditForm";
+export { default as SignIn } from "./Forms/SignIn";
+export { default as SignUp } from "./Forms/SignUp";
+export { default as Home } from "./Home/Home";
+export { default as Like } from "./Like/Like";
 export { default as Navbar } from "./Navbar/Navbar";
+export { default as PostDetails } from "./PostDetails/PostDetails";
+export { default as PostItem } from "./PostItem/PostItem";
+export { default as Posts } from "./Posts/Posts";
 export { default as Profile } from "./Profile/Profile";
 export { default as ProtectedRoute } from "./ProtectedRoute/ProtectedRoute";