fix: likes and comments

SySagar · Jul 26, 2024 · a78e1fb · a78e1fb
1 parent 15345c1
commit a78e1fb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 48 deletions.
diff --git a/src/app/auth/Login.tsx b/src/app/auth/Login.tsx
@@ -14,7 +14,7 @@ import { useFormik } from "formik";
 import APIMethods from "../../lib/axios/api";
 import { loginSchema } from "./validation";
 import { useState } from "react";
-import { VisibilityOff } from "@mui/icons-material";
+import { VisibilityOff, VisibilityRounded } from "@mui/icons-material";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import AnimatePage from "../../layout/AnimatePage";
@@ -76,9 +76,9 @@ export default function Login() {
   });
 
   const togglePasswordVisibility = () => {
-    setShowPassword((v) => !v);
+    setShowPassword((showPassword) => !showPassword);
   };
-
+  console.log("formik", showPassword);
   return (
     <Stack
       minHeight={"100vh"}
@@ -157,6 +157,7 @@ export default function Login() {
                   name="password"
                   label=""
                   variant="outlined"
+                  type={showPassword ? "text" : "password"}
                   fullWidth
                   value={formik.values.password}
                   onChange={formik.handleChange}
@@ -171,7 +172,11 @@ export default function Login() {
                   InputProps={{
                     endAdornment: (
                       <IconButton onClick={() => togglePasswordVisibility()}>
-                        {showPassword ? <VisibilityOff /> : <VisibilityOff />}
+                        {showPassword ? (
+                          <VisibilityRounded />
+                        ) : (
+                          <VisibilityOff />
+                        )}
                       </IconButton>
                     ),
                   }}
@@ -180,32 +185,13 @@ export default function Login() {
 
               <Button
                 variant="contained"
-                color="secondary"
+                color="primary"
                 fullWidth
                 onClick={() => formik.handleSubmit()}
                 sx={{ marginTop: "20px" }}
               >
                 Sign in
               </Button>
-              <Button
-                sx={{
-                  "&:hover": {
-                    background: "#fff",
-                  },
-                }}
-                startIcon={
-                  <Avatar
-                    src={"/png/google.png"}
-                    sx={{ width: 24, height: 24 }}
-                  />
-                }
-                variant="outlined"
-                color="primary"
-                fullWidth
-              >
-                <img src="./png/google.png" alt="" />
-                Sign in with Google
-              </Button>
 
               <Stack width={"100%"} alignItems={"center"}>
                 <Typography variant="caption" color={"grey"}>
@@ -214,7 +200,7 @@ export default function Login() {
                     href="/auth/register"
                     style={{
                       textDecoration: "none",
-                      fontWeight: "550",
+                      fontWeight: "700",
                       color: "#478585",
                     }}
                   >

diff --git a/src/app/blog/ShowBlog.tsx b/src/app/blog/ShowBlog.tsx
@@ -36,6 +36,7 @@ import UserProfile from "../user/UserProfile";
 import AnimatePage from "../../layout/AnimatePage";
 import { Skeleton } from "@mui/material";
 import ImageWithLoading from "./components/ImageWitLoading";
+import { toast } from "react-hot-toast";
 
 let authorid = "";
 export default function ShowBlog() {
@@ -54,6 +55,7 @@ export default function ShowBlog() {
   ]);
 
   const fetchBlog = async () => {
+    console.log("fetching blog");
     setIsLoading(true);
     await APIMethods.blog
       .getSingleBlog({ blogId })
@@ -82,8 +84,7 @@ export default function ShowBlog() {
 
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
-  // const toggleSidebar = () => {
-  // };
+  console.log("likes", likes);
   const showProfile = () => {
     setIsSidebarOpen(!isSidebarOpen);
   };
@@ -138,41 +139,43 @@ export default function ShowBlog() {
     const user = JSON.parse(
       localStorage.getItem("user") as string,
     ) as unknown as LikeBlogTypes;
+    if (!user || user == null) {
+      toast.error("Please login to like the blog");
+    }
+
     const userId = user._id;
+    if (userId == authorid) {
+      toast.error("You can't like your own blog");
+      return;
+    }
     await APIMethods.blog
       .likeBlog({ userId, blogId })
       .then(async (res: any) => {
         console.log(res);
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         if (res.data.status == 400) {
           window.location.href = "/auth/login";
         }
         const data = {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           userId: JSON.parse(localStorage.getItem("user") as string)
             ._id as string,
           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
           message: `👏 ${
             JSON.parse(localStorage.getItem("user") as string).displayName
           } clapped to your post!`,
         };
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-        await APIMethods.user
-          .addNotification(data)
-          .then((res: any) => {
-            console.log(res);
-          })
-          .catch((e: any) => {
-            console.log(e);
-          });
-
-        fetchBlog()
-          .then((res) => {
-            console.log(res);
-          })
-          .catch((e) => {
-            console.log(e);
-          });
+        // await APIMethods.user
+        //   .addNotification(data)
+        //   .then((res: any) => {
+        //     console.log(res);
+        //   })
+        //   .catch((e: any) => {
+        //     console.log(e);
+        //   })
+      })
+      .then(() => {
+        fetchBlog().then((res) => {
+          console.log(res);
+        });
       })
       .catch((e) => {
         console.log(e);
@@ -219,6 +222,7 @@ export default function ShowBlog() {
 
   return (
     <Stack
+      className="showblog"
       minHeight={"100vh"}
       justifyContent={"start"}
       alignItems={"center"}
@@ -264,7 +268,7 @@ export default function ShowBlog() {
                   height={"400px"}
                   style={{
                     width: "900px",
-                    maxHeight: "500px",
+                    height: "500px",
                     objectFit: "cover",
                   }}
                 />

diff --git a/src/app/blog/preview.css b/src/app/blog/preview.css
@@ -1,5 +1,14 @@
 
 /*For rich text editor*/
+
+.showblog::selection {
+  color: green; 
+}
+
+.showblog *::selection {
+  color: green; 
+}
+
 .ProseMirror {
     padding: 20px;
     background: #EFECDC;

diff --git a/src/index.css b/src/index.css
@@ -8,5 +8,5 @@ body{
 }
 
 ::selection {
-  color: green; 
+  background-color: #f5f5f5;
 }