Fixed: Optimized the codes

Author: PrathameshDhande22

frontend/index.html

@@ -16,12 +16,16 @@
     content="https://ucarecdn.com/f2d6b4b8-83f0-4c3c-abc3-39d15fe894cd/-/preview/700x700/-/quality/smart/-/format/auto/img1.png">
   <meta property="og:url" content="https://bloogo.vercel.app">
   <meta property="og:type" content="website">
+  <meta property=”og:site_name” content="Bloogo">
 
   <!-- Canonical URL -->
   <link rel="canonical" href="https://bloogo.vercel.app">
 
   <!-- Robots Meta Tag -->
   <meta name="robots" content="index, follow">
+  <meta name=“robots” content=noindex, nofollow”>
+  <meta name=“robots” content=noindex, follow”>
+  <meta name=“robots” content=index, nofollow”>
 
   <title>Bloogo</title>
 </head>

frontend/package-lock.json

@@ -10,21 +10,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@cloudinary/react": "^1.11.2",
     "@cloudinary/url-gen": "^1.11.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.4",
     "@mui/x-date-pickers": "^6.11.0",
     "@reduxjs/toolkit": "^1.9.5",
+    "@uiw/react-markdown-editor": "^6.0.0",
+    "@uiw/react-markdown-preview": "^5.0.7",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
     "formik": "^2.4.3",
-    "html-react-parser": "^4.2.0",
-    "jodit": "^4.0.0-beta.61",
-    "jodit-react": "^1.3.39",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -37,16 +35,19 @@
     "react-select": "^5.7.4",
     "react-share": "^4.4.1",
     "react-toastify": "^9.1.3",
-    "react-tooltip": "^5.20.0",
     "reading-time-estimator": "^1.9.0",
     "redux": "^4.2.1",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-images": "^4.0.0",
     "yup": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8.46.0",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -55,4 +56,4 @@
     "tailwindcss": "^3.3.3",
     "vite": "^4.4.5"
   }
-}
+}

frontend/package.json

@@ -4,6 +4,8 @@ import Header from "./components/Header";
 import Footer from "./components/Footer";
 import { BrowserRouter } from "react-router-dom";
 import { DetectSignLogin } from "./components/DetectSignLogin";
+import { ToastContainer} from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const theme = createTheme({
   palette: {
@@ -25,8 +27,20 @@ const theme = createTheme({
 
 function App() {
   return (
-    <>
+    <main>
       <BrowserRouter basename="/">
+      <ToastContainer
+        position="top-center"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover={false}
+        theme="colored"
+      />
         <ThemeProvider theme={theme}>
           <DetectSignLogin>
             <Header />
@@ -37,7 +51,7 @@ function App() {
           </DetectSignLogin>
         </ThemeProvider>
       </BrowserRouter>
-    </>
+    </main>
   );
 }
 

frontend/src/App.jsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ProfileData } from "../components/ProfileContext";
+
+const useProfile = () => {
+  const profiledata = useContext(ProfileData);
+  return profiledata;
+};
+export default useProfile;

frontend/src/Hooks/useProfile.jsx

@@ -4,47 +4,43 @@ import { AboutData } from "../../data";
 const About = () => {
   useTitle("About");
   return (
-    <main>
-      <div className="my-10 space-y-14">
-        <div className="mx-10 lg:mx-72 flex flex-col gap-5 justify-center  text-justify items-center">
-          <span className="text-2xl md:text-4xl font-gara font-bold self-start">
-            About
-          </span>
-          <div className="space-y-5 self-start">
-            <p className="text-xl md:text-2xl">
-              Bloogo is the easiest way to share your writing on the web.
-            </p>
-            <p className="text-base md:text-lg leading-relaxed">
-              Create a space for your thoughts. Reach people with your ideas,
-              and form new connections. Keep loved ones in the loop, free from
-              social media. Bloogo is a simple, modern, and ad-free web
-              pub­lish­ing platform.
-            </p>
-          </div>
-          <img
-            src={
-              "https://ucarecdn.com/f2d6b4b8-83f0-4c3c-abc3-39d15fe894cd/-/preview/700x700/-/quality/smart/-/format/auto/img1.png"
-            }
-            className="w-[600px] border-2 border-gray-400 rounded-lg shadow-2xl shadow-gray-500"
-          />
-        </div>
-        <div className="flex flex-row flex-wrap justify-evenly items-center font-raj gap-9">
-          {AboutData.map((value, index) => {
-            return (
-              <div
-                key={index}
-                className="flex flex-col justify-between gap-7 content-center h-36"
-              >
-                <span className="text-xl font-extrabold">{value.title}</span>
-                <span className="text-lg w-64 text-justify">
-                  {value.content}
-                </span>
-              </div>
-            );
-          })}
+    <div className="my-10 space-y-14">
+      <div className="mx-10 lg:mx-72 flex flex-col gap-5 justify-center  text-justify items-center">
+        <span className="text-2xl md:text-4xl font-gara font-bold self-start">
+          About
+        </span>
+        <div className="space-y-5 self-start">
+          <p className="text-xl md:text-2xl">
+            Bloogo is the easiest way to share your writing on the web.
+          </p>
+          <p className="text-base md:text-lg leading-relaxed">
+            Create a space for your thoughts. Reach people with your ideas, and
+            form new connections. Keep loved ones in the loop, free from social
+            media. Bloogo is a simple, modern, and ad-free web pub­lish­ing
+            platform.
+          </p>
         </div>
+        <img
+          src={
+            "https://ucarecdn.com/f2d6b4b8-83f0-4c3c-abc3-39d15fe894cd/-/preview/700x700/-/quality/smart/-/format/auto/img1.png"
+          }
+          className="w-[600px] border-2 border-gray-400 rounded-lg shadow-2xl shadow-gray-500"
+        />
+      </div>
+      <div className="flex flex-row flex-wrap justify-evenly items-center font-raj gap-9">
+        {AboutData.map((value, index) => {
+          return (
+            <div
+              key={index}
+              className="flex flex-col justify-between gap-7 content-center h-36"
+            >
+              <span className="text-xl font-extrabold">{value.title}</span>
+              <span className="text-lg w-64 text-justify">{value.content}</span>
+            </div>
+          );
+        })}
       </div>
-    </main>
+    </div>
   );
 };
 export default About;

frontend/src/Pages/About/index.jsx

@@ -7,13 +7,15 @@ import { useToken } from "../../Hooks/useToken";
 import { useFormik } from "formik";
 import { change_Schema } from "../../Schemas/scheme";
 import { changePassword } from "../../api/api";
-import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
+import { PleaseWait } from "../../components/PleaseWait";
 
 export const ChangePassword = () => {
   useTitle("Change Password");
   const [showCurrent, setCurrent] = useState(false);
   const [showNew, setNew] = useState(false);
   const [showRe, setRe] = useState(false);
+  const [isChanging, setChanging] = useState(false);
 
   const handlestate = (fun, state) => {
     fun(!state);
@@ -34,19 +36,19 @@ export const ChangePassword = () => {
     validationSchema: change_Schema,
     onSubmit: (value) => {
       const formdata = new FormData();
+      setChanging(true);
       formdata.append("password", value.newpassword);
       formdata.append("current", value.oldpassword);
       changePassword(formdata, token)
         .then((res) => {
+          setChanging(false);
           if (res.status === 200) {
             toast.success("Password Changed Successfully.");
-            setTimeout(() => {
-              navi(-1);
-            }, 2500);
+            navi(-1);
           }
         })
         .catch((res) => {
-          console.log(res);
+          setChanging(false);
           if (res?.response?.status === 406) {
             toast.error("Old Password and New Password are Same");
           } else if (res?.response?.status === 401) {
@@ -64,18 +66,6 @@ export const ChangePassword = () => {
   });
   return (
     <>
-      <ToastContainer
-        position="top-center"
-        autoClose={2000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover={false}
-        theme="colored"
-      />
       <div className="my-4 w-full flex flex-col justify-center items-center">
         <div className="w-[95%] sm:w-96 mx-2 rounded-xl px-2 py-10  border-2 border-indigo-500">
           <form
@@ -192,13 +182,17 @@ export const ChangePassword = () => {
               />
             </div>
             <div className="flex flex-row justify-center items-center gap-2 flex-wrap">
-              <button
-                type="submit"
-                name="submit"
-                className="border-2 border-indigo-500 px-11 mt-2 rounded-lg py-2 font-meri text-sm hover:bg-indigo-500 hover:text-white transition-{bg} ease-in duration-150"
-              >
-                Change
-              </button>
+              {isChanging ? (
+                <PleaseWait />
+              ) : (
+                <button
+                  type="submit"
+                  name="submit"
+                  className="border-2 border-indigo-500 px-11 mt-2 rounded-lg py-2 font-meri text-sm hover:bg-indigo-500 hover:text-white transition-{bg} ease-in duration-150"
+                >
+                  Change
+                </button>
+              )}
               <button
                 type="button"
                 onClick={() => {

frontend/src/Pages/ChangePassword/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTitle } from "../../Hooks/useTitle";
 import { useNavigate } from "react-router-dom";
 import { useToken } from "../../Hooks/useToken";
@@ -20,9 +20,9 @@ export const Dashboard = () => {
   const token = useToken();
   const navi = useNavigate();
 
-  useEffect(() => {
-    setLoading(true);
-    const Per_Page = 6;
+  const Per_Page = 6;
+
+  const getBlogs = useCallback(() => {
     getUserBlogs(token)
       .then((res) => {
         if (res.status === 200) {
@@ -38,7 +38,11 @@ export const Dashboard = () => {
       .catch(() => {
         setLoading(false);
       });
-  }, [token, page]);
+  }, [page, token]);
+
+  useEffect(() => {
+    getBlogs();
+  }, [getBlogs]);
 
   const handleChange = (e, val) => {
     setPage(val);
@@ -77,7 +81,7 @@ export const Dashboard = () => {
               Your Blogs :{" "}
             </span>
             <div className="flex flex-col w-full gap-3 flex-wrap">
-              <BlogCards blogs={blogs} showbuttons />
+              <BlogCards blogs={blogs} showbuttons getBlogs={getBlogs} />
             </div>
             <Pagination
               page={page}