fixing more bugs

nishantsaini2331 · Jan 6, 2025 · 928b262 · 928b262
1 parent 41dcca0
commit 928b262
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 61 deletions.
diff --git a/backend/controllers/blogController.js b/backend/controllers/blogController.js
@@ -435,7 +435,11 @@ async function searchBlogs(req, res) {
     const blogs = await Blog.find(query, { draft: false })
       .sort({ createdAt: -1 })
       .skip(skip)
-      .limit(limit);
+      .limit(limit)
+      .populate({
+        path: "creator",
+        select: "name email followers username profilePic",
+      });
     if (blogs.length === 0) {
       return res.status(400).json({
         success: false,

diff --git a/backend/controllers/userController.js b/backend/controllers/userController.js
@@ -397,7 +397,14 @@ async function getUserById(req, res) {
       .populate("blogs following likeBlogs saveBlogs")
       .populate({
         path: "followers following",
-        select: "name username",
+        select: "name username profilePic",
+      })
+      .populate({
+        path: "blogs likeBlogs saveBlogs",
+        populate: {
+          path: "creator",
+          select: "name username profilePic",
+        },
       })
       .select("-password -isVerify -__v -email -googleAuth");
 

diff --git a/frontend/src/components/Comment.jsx b/frontend/src/components/Comment.jsx
@@ -238,7 +238,7 @@ function DisplayComments({
                     className="flex gap-2"
                   >
                     <div className="flex gap-2">
-                      <div className="w-10 h-10">
+                      <div className="w-10 h-10 aspect-square rounded-full overflow-hidden">
                         <img
                           //   src={`https://api.dicebear.com/9.x/initials/svg?seed=${comment.user.name}`}
                           src={
@@ -247,7 +247,7 @@ function DisplayComments({
                               : `https://api.dicebear.com/9.x/initials/svg?seed=${comment?.user?.name}`
                           }
                           alt=""
-                          className="rounded-full"
+                          className="rounded-full w-full h-full object-cover"
                         />
                       </div>
                       <div>

diff --git a/frontend/src/components/DisplayBlogs.jsx b/frontend/src/components/DisplayBlogs.jsx
@@ -4,17 +4,32 @@ import { formatDate } from "../utils/formatDate";
 import { useSelector } from "react-redux";
 
 function DisplayBlogs({ blogs }) {
+    console.log(blogs);
   const { token, id: userId } = useSelector((state) => state.user);
   return (
     <div>
       {blogs.length > 0 ? (
         blogs.map((blog) => (
           <Link key={blog._id} to={"/blog/" + blog.blogId}>
-            <div key={blog._id} className="w-full my-10 flex justify-between ">
-              <div className="w-[60%] flex flex-col gap-2">
-                <div>
-                  <img src="" alt="" />
-                  <p className="">{blog?.creator?.name}</p>
+            <div key={blog._id} className="w-full my-10 flex justify-between max-xsm:flex-col ">
+              <div className="w-[60%] flex flex-col gap-2 max-xsm:w-full">
+                <div className="flex items-center gap-2">
+                  <Link to={`/@${blog.creator.username}`}>
+                    <div>
+                      <div className="w-6 h-6 cursor-pointer aspect-square rounded-full overflow-hidden">
+                        <img
+                          src={
+                            blog?.creator?.profilePic
+                              ? blog?.creator?.profilePic
+                              : `https://api.dicebear.com/9.x/initials/svg?seed=${blog?.creator?.name}`
+                          }
+                          alt=""
+                          className="rounded-full w-full h-full object-cover"
+                        />
+                      </div>
+                    </div>
+                  </Link>
+                  <p className=" hover:underline ">{blog?.creator?.name}</p>
                 </div>
                 <h2 className="font-bold text-xl sm:text-2xl">{blog?.title}</h2>
                 <h4 className="line-clamp-2">{blog?.description}</h4>
@@ -46,7 +61,7 @@ function DisplayBlogs({ blogs }) {
                   </div>
                 </div>
               </div>
-              <div className="w-[40%] sm:w-[30%] ">
+              <div className="w-[40%] sm:w-[30%] max-xsm:w-full">
                 <img
                   src={blog?.image}
                   alt=""

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -84,7 +84,7 @@ function Navbar() {
           {token ? (
             // <div className="text-xl capitalize">{name}</div>
             <div
-              className="w-10 h-10 cursor-pointer"
+              className="w-10 h-10 cursor-pointer aspect-square rounded-full overflow-hidden"
               onClick={() => setShowPopup((prev) => !prev)}
             >
               <img
@@ -94,7 +94,7 @@ function Navbar() {
                     : `https://api.dicebear.com/9.x/initials/svg?seed=${name}`
                 }
                 alt=""
-                className="rounded-full w-full h-full object-contain"
+                className="rounded-full w-full h-full object-cover"
               />
             </div>
           ) : (

diff --git a/frontend/src/pages/AddBlog.jsx b/frontend/src/pages/AddBlog.jsx
@@ -371,12 +371,24 @@ function AddBlog() {
       </div>
 
       {!isLoading ? (
-        <button
-          className="bg-blue-500 text-lg py-4 px-7 rounded-full  font-semibold text-white my-6 "
-          onClick={id ? handleUpdateBlog : handlePostBlog}
-        >
-          {blogData.draft ? "Save as Draft" : id ? "Update blog" : "Post blog"}
-        </button>
+        <div>
+          <button
+            className="bg-blue-500 px-7 py-3 rounded-full  font-semibold text-white my-6 "
+            onClick={id ? handleUpdateBlog : handlePostBlog}
+          >
+            {blogData.draft
+              ? "Save as Draft"
+              : id
+              ? "Update blog"
+              : "Post blog"}
+          </button>
+          <button
+            className={` mx-4 px-7 py-3 rounded-full text-white my-3 bg-black`}
+            onClick={() => navigate(-1)}
+          >
+            Back
+          </button>
+        </div>
       ) : (
         <div className="flex justify-center items-center w-full h-[calc(100vh-500px)]">
           <span className="loader"></span>
@@ -386,4 +398,4 @@ function AddBlog() {
   );
 }
 
-export default AddBlog;
+export default AddBlog;
diff --git a/frontend/src/pages/BlogPage.jsx b/frontend/src/pages/BlogPage.jsx
@@ -142,15 +142,15 @@ function BlogPage() {
           <div className="flex items-center my-5 gap-3">
             <Link to={`/@${blogData.creator.username}`}>
               <div>
-                <div className="w-10 h-10 cursor-pointer">
+                <div className="w-10 h-10 cursor-pointer aspect-square rounded-full overflow-hidden">
                   <img
                     src={
                       blogData?.creator?.profilePic
                         ? blogData?.creator?.profilePic
                         : `https://api.dicebear.com/9.x/initials/svg?seed=${blogData.creator.name}`
                     }
                     alt=""
-                    className="rounded-full w-full h-full object-contain"
+                    className="rounded-full w-full h-full object-cover"
                   />
                 </div>
               </div>

diff --git a/frontend/src/pages/EditProfile.jsx b/frontend/src/pages/EditProfile.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useDispatch, useSelector } from "react-redux";
 import { login } from "../utils/userSilce";
-import { Navigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
 import useLoader from "../hooks/useLoader";
 
 function EditProfile() {
@@ -18,6 +18,7 @@ function EditProfile() {
   } = useSelector((state) => state.user);
 
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const [isLoading, startLoading, stopLoading] = useLoader();
 
   const [userData, setUserData] = useState({
@@ -92,23 +93,25 @@ function EditProfile() {
           <div className="">
             <h2 className="text-2xl font-semibold my-2">Photo</h2>
             <div className="flex items-center flex-col gap-3">
-              <label htmlFor="image" className=" ">
-                {userData?.profilePic ? (
-                  <img
-                    src={
-                      typeof userData?.profilePic == "string"
-                        ? userData?.profilePic
-                        : URL.createObjectURL(userData?.profilePic)
-                    }
-                    alt=""
-                    className="aspect-square w-[150px] h-[150px] object-cover border rounded-full"
-                  />
-                ) : (
-                  <div className=" w-[150px] h-[150px] bg-white border-2 border-dashed rounded-full aspect-square  flex justify-center items-center text-xl">
-                    Select Image
-                  </div>
-                )}
-              </label>
+              <div className="w-[150px] h-[150px] cursor-pointer aspect-square rounded-full overflow-hidden">
+                <label htmlFor="image" className=" ">
+                  {userData?.profilePic ? (
+                    <img
+                      src={
+                        typeof userData?.profilePic == "string"
+                          ? userData?.profilePic
+                          : URL.createObjectURL(userData?.profilePic)
+                      }
+                      alt=""
+                      className="rounded-full w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div className=" w-[150px] h-[150px] bg-white border-2 border-dashed rounded-full aspect-square  flex justify-center items-center text-xl">
+                      Select Image
+                    </div>
+                  )}
+                </label>
+              </div>
               <h2
                 className="text-lg text-red-500 font-medium cursor-pointer"
                 onClick={() => {
@@ -167,15 +170,23 @@ function EditProfile() {
           </div>
 
           {!isLoading ? (
-            <button
-              disabled={isButtonDisabled}
-              className={` px-7 py-3 rounded-full text-white my-3  ${
-                isButtonDisabled ? " bg-green-300 " : " bg-green-600 "
-              } `}
-              onClick={handleUpdateProfile}
-            >
-              Update
-            </button>
+            <div>
+              <button
+                disabled={isButtonDisabled}
+                className={` px-7 py-3 rounded-full text-white my-3  ${
+                  isButtonDisabled ? " bg-green-300 " : " bg-green-600 "
+                } `}
+                onClick={handleUpdateProfile}
+              >
+                Update
+              </button>
+              <button
+                className={` mx-4 px-7 py-3 rounded-full text-white my-3 bg-black`}
+                onClick={() => navigate(-1)}
+              >
+                Back
+              </button>
+            </div>
           ) : (
             <span className="loader"></span>
           )}

diff --git a/frontend/src/pages/ProfilePage.jsx b/frontend/src/pages/ProfilePage.jsx
@@ -142,11 +142,15 @@ function ProfilePage() {
 
           <div className=" max-lg:w-full w-[20%]   lg:border-l max-lg:flex lg:pl-10 lg:min-h-[calc(100vh_-_70px)] ">
             <div className="my-10">
-              <div className="w-20 h-20">
+              <div className="w-20 h-20 aspect-square rounded-full overflow-hidden">
                 <img
-                  src={`https://api.dicebear.com/9.x/initials/svg?seed=${userData.name}`}
-                  alt=""
-                  className="rounded-full"
+                  src={
+                    userData.profilePic
+                      ? userData.profilePic
+                      : `https://api.dicebear.com/9.x/initials/svg?seed=${userData.name}`
+                  }
+                  alt={userData.name}
+                  className="rounded-full w-full h-full object-cover"
                 />
               </div>
               <p className="text-base max-md:text-lg font-medium my-3">
@@ -182,11 +186,15 @@ function ProfilePage() {
                       <div className="flex justify-between items-center">
                         <Link to={`/@${user.username}`}>
                           <div className="flex gap-2 items-center hover:underline cursor-pointer">
-                            <div className="w-4 h-4">
+                            <div className="w-4 h-4 aspect-square rounded-full overflow-hidden">
                               <img
-                                src={`https://api.dicebear.com/9.x/initials/svg?seed=${user.name}`}
+                                src={
+                                  user?.profilePic
+                                    ? user?.profilePic
+                                    : `https://api.dicebear.com/9.x/initials/svg?seed=${user.name}`
+                                }
                                 alt=""
-                                className="rounded-full"
+                                className="rounded-full w-full h-full object-cover"
                               />
                             </div>
                             <p className="text-base font-medium my-3">

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -1,11 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xsm: "500px",
+      },
+    },
   },
   plugins: [],
-}
+};