likes count added and image preview changed

alexandyrzph · Aug 1, 2022 · 4194bca · 4194bca
1 parent 4455ea1
commit 4194bca
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 20 deletions.
diff --git a/pixelplace/src/App.js b/pixelplace/src/App.js
@@ -1,6 +1,6 @@
 import { Routes, Route } from "react-router-dom";
-import Home from "./pages/Home/Home";
-import Posts from "./pages/Posts/Posts";
+import Home from "./components/Home/Home";
+import Posts from "./components/Posts/Posts";
 import "react-toastify/dist/ReactToastify.css";
 
 import {

diff --git a/pixelplace/src/components/Forms/PostCreateForm.js b/pixelplace/src/components/Forms/PostCreateForm.js
@@ -71,17 +71,17 @@ const PostCreateForm = () => {
             validationSchema={CreatePostSchema}
             onSubmit={(values) => handleSubmit(values)}
         >
-            {({ values, touched, errors, setFieldValue }) => (
+            {({ touched, errors, setFieldValue }) => (
                 <Form className="w-full mx-auto  h-screen pt-[100px] max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl">
                     <h1 className="relative text-[100px] text-5xl -z-10 -mb-[10px] font-logo">
                         Create <span className="text-stroke text-white">Post</span>
                     </h1>
                     <div className="flex flex-wrap">
                         <Field
                             name="title"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_0px] duration-150 rounded-md ${
                                 touched.title && errors.title
-                                    ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
+                                    ? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
                                     : "border-neu-black"
                             } px-2 py-2`}
                             placeholder="Enter post title"
@@ -96,9 +96,9 @@ const PostCreateForm = () => {
                         <Field
                             type="text"
                             name="description"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_0px] duration-150 rounded-md ${
                                 touched.description && errors.description
-                                    ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
+                                    ? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
                                     : "border-neu-black"
                             } px-2 py-2`}
                             placeholder="Enter description"
@@ -112,9 +112,9 @@ const PostCreateForm = () => {
                         <Field
                             type="text"
                             name="category"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_0px] duration-150 rounded-md ${
                                 touched.category && errors.category
-                                    ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
+                                    ? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
                                     : "border-neu-black"
                             } px-2 py-2`}
                             placeholder="Enter category"
@@ -133,7 +133,11 @@ const PostCreateForm = () => {
                                     e.preventDefault();
                                     fileRef.current.click();
                                 }}
-                                className="relative z-[9] flex flex-col justify-center items-center w-full h-64 bg-white rounded-lg border-2 border-neu-black border-dashed cursor-pointer"
+                                className={`relative z-[9] flex flex-col justify-center items-center w-full h-64 bg-white rounded-lg border-2 ${
+                                    touched.image && errors.image
+                                        ? `border-red-600`
+                                        : "border-neu-black"
+                                } border-dashed cursor-pointer`}
                             >
                                 <div className="relative flex flex-col justify-center items-center pt-5 pb-6">
                                     <AiOutlineCloudUpload size={"2rem"} />
@@ -150,7 +154,7 @@ const PostCreateForm = () => {
                                         id="image"
                                         src={preview}
                                         alt="preview"
-                                        className="h-[200px] w-[200px] p-2 z-10 hover:brightness-50 cursor-pointer duration-100"
+                                        className="h-[250px] max-w-sm object-cover object-center p-2 z-10 hover:brightness-50 cursor-pointer duration-100"
                                         onClick={(e) => {
                                             setImage(null);
                                             setFieldValue("image", null);

diff --git a/pixelplace/src/pages/Home/Home.js → pixelplace/src/components/Home/Home.js b/pixelplace/src/pages/Home/Home.js → pixelplace/src/components/Home/Home.js
diff --git a/pixelplace/src/components/Like/Like.js b/pixelplace/src/components/Like/Like.js
@@ -29,7 +29,7 @@ const Like = ({ likes, postId }) => {
             size={"1.7rem"}
             onClick={onLikeHandler}
             color={likes?.includes(user.uid) ? "red" : ""}
-            className="mb-2 mt-4 cursor-pointer duration-100"
+            className="mb-2 cursor-pointer duration-100"
         />
     );
 };

diff --git a/pixelplace/src/components/PostItem/PostItem.js b/pixelplace/src/components/PostItem/PostItem.js
@@ -37,7 +37,12 @@ const PostItem = ({
                         </h5>
                     </Link>
                     <p className="mb-3 font-normal text-gray-700 truncate">{description}</p>
-                    {user && <Like postId={postId} likes={likes} />}
+                    {user && (
+                        <div className="flex items-center gap-1 mb-4 mt-6">
+                            <p>{likes.length}</p>
+                            <Like postId={postId} likes={likes} />
+                        </div>
+                    )}
 
                     <div className="inline-flex items-center">
                         <Link to={postId}>

diff --git a/pixelplace/src/pages/Posts/Posts.js → pixelplace/src/components/Posts/Posts.js b/pixelplace/src/pages/Posts/Posts.js → pixelplace/src/components/Posts/Posts.js
@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import { useUserAuth } from "../../context/UserAuthContext";
-import { PostItem } from "../../components";
+import { PostItem } from "..";
 import { BeatLoader } from "react-spinners";
-import Dots from "../../assets/26432.svg";
 import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
 import { db } from "../../firebase";
+import { Link } from "react-router-dom";
 
 const Posts = () => {
     const { user } = useUserAuth();
@@ -27,17 +27,28 @@ 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 lg:masonry-lg">
-                    {posts.map((post) => (
-                        <PostItem key={post.postId} {...post} user={user} />
-                    ))}
+                    {posts.length > 0 ? (
+                        posts.map((post) => <PostItem key={post.postId} {...post} user={user} />)
+                    ) : (
+                        <div>
+                            <h2 className="text-[40px] text-center font-neu absolute top-[20%] left-0 right-0">
+                                No posts found
+                            </h2>
+                            <Link to="/post-create">
+                                <button className="absolute font-mono top-[30%] left-[10%] right-[10%] sm:left-[30%] sm:right-[30%] hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-lg bg-neu-yellow font-bold">
+                                    Create Post
+                                </button>
+                            </Link>
+                        </div>
+                    )}
                 </div>
                 <img
-                    className="hidden lg:block absolute top-5 -left-20 opacity-10 -z-10 w-[200px]"
+                    className="lg:block absolute top-5 -left-20 opacity-10 -z-10 w-[200px]"
                     src="https://firebasestorage.googleapis.com/v0/b/pixelplace-b8fac.appspot.com/o/26432.svg?alt=media&token=17971521-81ad-4e86-bd5b-f0051d4c5a13"
                     alt="Dots"
                 />
                 <img
-                    className="hidden lg:block absolute top-100 -right-20 opacity-10 -z-10 w-[200px]"
+                    className="lg:block absolute top-100 -right-20 opacity-10 -z-10 w-[200px]"
                     src="https://firebasestorage.googleapis.com/v0/b/pixelplace-b8fac.appspot.com/o/26432.svg?alt=media&token=17971521-81ad-4e86-bd5b-f0051d4c5a13"
                     alt="Dots"
                 />