fix: dashboard landing ui

src/components/shared/navbar/Navbar.scss

@@ -32,8 +32,8 @@
 
     .navbar_link {
       color: #8c321b;
-      font-weight: 600;
-      font-family: "Poppins", sans-serif;
+      font-weight: 500;
+      font-family: var(--outfit);
       text-decoration: none;
       font-size: 17px;
       line-height: 1;

src/components/shared/profileCompletion/ProfileCompletion.jsx

@@ -1,18 +1,18 @@
 /* eslint-disable no-unused-vars */
-import { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-
-import { selectUser, updateUserData } from "@redux/slice/userSlice";
+import { selectUser } from "@redux/slice/userSlice";
 import { UpdateUser } from "@service/MilanApi";
 import { useMutation } from "@tanstack/react-query";
+import getProfileFields from "@utils/getProfileFields";
 import { showErrorToast, showSuccessToast } from "@utils/Toasts";
 import _ from "lodash";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { Button } from "..";
-import getProfileFields from "../../../utils/getProfileFields";
 import "./ProfileCompletion.scss";
 
 const ProfileCompletion = () => {
   const [credentials, setCredentials] = useState({});
+  const [errors, setErrors] = useState({});
   const user = useSelector(selectUser);
   const fields = getProfileFields(user);
   const dispatch = useDispatch();
@@ -24,17 +24,45 @@ const ProfileCompletion = () => {
     });
   };
 
-  const { mutate: handleUpdateDetails } = useMutation({
+  const { mutate: mutate_UpdateDetails } = useMutation({
     mutationFn: UpdateUser,
     onSuccess: (data) => {
-      dispatch(updateUserData(credentials));
       showSuccessToast(data?.message);
     },
     onError: (error) => {
       showErrorToast(error?.message);
     },
   });
 
+  const handleUpdateDetails = () => {
+    const newErrors = {};
+
+    if (
+      credentials?.tagLine?.length < 20 ||
+      credentials?.tagLine?.length > 100
+    ) {
+      newErrors.tagLine = "Tagline must be between 20 and 100 characters";
+    }
+
+    if (
+      credentials?.description?.length < 100 ||
+      credentials?.description?.length > 500
+    ) {
+      newErrors.description =
+        "Description must be between 100 and 500 characters";
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+    } else {
+      // Clear errors if there are none
+      setErrors({});
+      mutate_UpdateDetails({
+        credentials: credentials,
+      });
+    }
+  };
+
   return (
     <div className="profilecompletion_overlay">
       <div className="profilecompletion_modal">
@@ -74,6 +102,9 @@ const ProfileCompletion = () => {
                   placeholder={`Enter your ${field}`}
                 />
               )}
+              {errors[field] && (
+                <span className="profilecompletion_error">{errors[field]}</span>
+              )}
             </div>
           ))}
 

src/components/shared/profileCompletion/ProfileCompletion.scss

@@ -8,7 +8,7 @@
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(6px);
-  z-index: 20;
+  z-index: 101;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -123,6 +123,12 @@
             font-size: 10px !important;
           }
         }
+
+        .profilecompletion_error {
+          color: red;
+          font-size: 15px;
+          margin-top: 5px;
+        }
       }
     }
 

src/hooks/useAuth.js

@@ -47,7 +47,13 @@ export function useAuth(authType) {
 
     if (response?.status === 201 || response?.status === 200) {
       showSuccessToast(response?.data?.message);
-      dispatch(updateUserData({ ...response.data.user, isLoggedIn: true }));
+      dispatch(
+        updateUserData({
+          isLoggedIn: true,
+          email: response.data.user.email,
+          userName: response.data.user.userName,
+        }),
+      );
 
       setTimeout(() => {
         navigate("/");

src/pages/dashboard/Dashboard.jsx

@@ -9,13 +9,9 @@ import "swiper/css";
 import "swiper/css/autoplay";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
-import useSWR from "swr";
-import EventsMarqueeCards from "../../components/private/events/marquee/EventsMarqueeCards";
 import { Button, Navbar, ProfileCompletion } from "../../components/shared";
-import { eventEndpoints } from "../../integrations/ApiEndpoints";
 import { fetchDashboard } from "../../service/MilanApi";
 import { defaults } from "../../static/Constants";
-import fetcher from "../../utils/Fetcher";
 import convertToBase64 from "../../utils/convertToBase64";
 import "./Dashboard.scss";
 
@@ -24,11 +20,13 @@ const Dashboard = () => {
   const [coverImage, setCoverImage] = useState("");
   const [logo, setLogo] = useState("");
   const user = useSelector(selectUser);
-  const { data } = useQuery({
-    queryKey: ["dashboardData"],
+
+  const { data: dashboardData } = useQuery({
+    queryKey: ["dashboard"],
     queryFn: fetchDashboard,
-    refetchOnMount: false,
-    retry: 2,
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+    retry: 0,
   });
 
   const toggleExpand = () => {
@@ -48,7 +46,7 @@ const Dashboard = () => {
     }
   };
 
-  const { data: events } = useSWR(eventEndpoints.all, fetcher);
+  // const { data: events } = useSWR(eventEndpoints.all, fetcher);
 
   const handleUpdateProfile = () => {
     console.log("Update Profile");
@@ -112,18 +110,11 @@ const Dashboard = () => {
               <div className="header">
                 <div className="name">
                   <h1 className="profile_header_name dashboard_heading">
-                    {data?.name}{" "}
+                    {dashboardData?.name}{" "}
                   </h1>
-                  {data?.tagline ? (
-                    <h2 className="profile_header_tagline">{data?.tagline}</h2>
-                  ) : (
-                    <h2
-                      className="profile_header_tagline"
-                      style={{ opacity: 0 }}
-                    >
-                      {" "}
-                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                      Impedit cum laudantium
+                  {dashboardData?.tagline && (
+                    <h2 className="profile_header_tagline">
+                      {dashboardData?.tagline}
                     </h2>
                   )}
                 </div>
@@ -150,14 +141,10 @@ const Dashboard = () => {
 
           <div className="header_mobile">
             <div className="name">
-              <h1 className="profile_header_name">{data?.name} </h1>
-              {data?.tagline ? (
-                <h2 className="profile_header_tagline">{data?.tagline}</h2>
-              ) : (
-                <h2 className="profile_header_tagline" style={{ opacity: 0 }}>
-                  {" "}
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                  Impedit cum laudantium
+              <h1 className="profile_header_name">{dashboardData?.name} </h1>
+              {dashboardData?.tagline && (
+                <h2 className="profile_header_tagline">
+                  {dashboardData?.tagline}
                 </h2>
               )}
             </div>
@@ -172,7 +159,7 @@ const Dashboard = () => {
           </div>
 
           <div className="dashboard_body">
-            {data?.description && (
+            {dashboardData?.description && (
               <div className="about">
                 <h1 className="dashboard_heading">About Us</h1>
                 <div className="about_content">
@@ -181,7 +168,7 @@ const Dashboard = () => {
                       isExpanded ? "expanded" : ""
                     }`}
                   >
-                    {data?.description}
+                    {dashboardData?.description}
                   </p>
                   <div className="readmore_div">
                     {!isExpanded && (
@@ -197,7 +184,7 @@ const Dashboard = () => {
               </div>
             )}
 
-            {data?.events && (
+            {/* {data?.events && (
               <div className="events">
                 <h1 className="dashboard_heading">Events Hosted</h1>
 
@@ -207,7 +194,7 @@ const Dashboard = () => {
                   ))}
                 </div>
               </div>
-            )}
+            )} */}
           </div>
         </div>
       </div>