anmode · anmode · Jan 6, 2024 · Jan 1, 2024 · Jan 6, 2024
diff --git a/.env b/.env
@@ -12,6 +12,4 @@ NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
 
 ## To use production one please uncomment this one( this is for OSS community)
 # NEXT_PUBLIC_BACKEND_URL=https://grabtern-backend-demo.vercel.app
-
-
 NEXT_PUBLIC_FORNTEND_URL=http://localhost:3000
diff --git a/components/basic/TableComponent.jsx b/components/basic/TableComponent.jsx
@@ -1,16 +1,15 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useTable } from "react-table";
 
-const TableComponent = ({ sessions, activeTab }) => {
+const TableComponent = ({ isMentor, sessions, activeTab }) => {
   const [data, setData] = useState([]);
 
   useEffect(() => {
-    let filteredSessions = [];
-    if (activeTab?.toLocaleLowerCase() === "pending") {
-      filteredSessions = sessions.filter((session) => session.isbooked);
-    } else {
-      filteredSessions = sessions.filter((session) => !session.isbooked);
-    }
+    const filteredSessions = sessions.filter(
+      (session) =>
+        (activeTab?.toLocaleLowerCase() === "pending" && session.isbooked) ||
+        (activeTab?.toLocaleLowerCase() !== "pending" && !session.isbooked),
+    );
     setData(filteredSessions);
   }, [activeTab, sessions]);
 
@@ -21,8 +20,8 @@ const TableComponent = ({ sessions, activeTab }) => {
         accessor: "sessionName",
       },
       {
-        Header: "Mentee",
-        accessor: "userName",
+        Header: isMentor ? "Mentee" : "Mentor",
+        accessor: isMentor ? "userName" : "mentorName",
       },
       {
         Header: "Date",
@@ -33,7 +32,7 @@ const TableComponent = ({ sessions, activeTab }) => {
         accessor: "sessionTime",
       },
     ],
-    [], // Empty dependency array, as columns won't change during the component lifecycle
+    [isMentor],
   );
 
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =

diff --git a/components/mentorDashboard/Bookings.js b/components/mentorDashboard/Bookings.js
@@ -72,7 +72,11 @@ const Bookings = ({ setLoadingState, setErrorState }) => {
       {/* sessions list */}
       <div className="tw-mt-8">
         {sessions ? (
-          <TableComponent sessions={sessions} activeTab={activeTab} />
+          <TableComponent
+            sessions={sessions}
+            activeTab={activeTab}
+            isMentor={true}
+          />
         ) : (
           <Spinner />
         )}

diff --git a/components/userDashboard/Bookings.js b/components/userDashboard/Bookings.js
@@ -9,8 +9,6 @@ const Bookings = () => {
 
   const tabs = ["Pending", "Completed"];
 
-  const tableHeadings = ["Topic", "Mentor", "Day", "Time"];
-
   // session state
   const [sessions, setSessions] = useState([]);
 
@@ -27,6 +25,7 @@ const Bookings = () => {
           withCredentials: true,
         },
       );
+      console.log(response.data);
       setSessions(response.data);
     } catch (error) {
       setError(error.response.data.message);
@@ -55,7 +54,7 @@ const Bookings = () => {
       </div>
 
       {/* pending and completed tab */}
-      <nav className="tw-mb-6">
+      <nav>
         <ul className="tw-flex tw-gap-8 tw-border-b-2">
           {tabs.map((tab, index) => (
             <li
@@ -82,64 +81,13 @@ const Bookings = () => {
 
       {sessions ? (
         <TableComponent
-          tableHeadings={tableHeadings}
           sessions={sessions}
           activeTab={activeTab}
+          isMentor={false}
         />
       ) : (
         <Spinner />
       )}
-
-      {/* <div className="tw-mt-8 tw-w-full">
-        <ul className="tw-bg-primary-100 tw-text-white tw-flex tw-gap-8 tw-items-center tw-w-full tw-py-4 tw-px-8">
-          <li className="tw-hidden min-[540px]:tw-inline">Topic</li>
-          <li className="min-[540px]:tw-hidden">Session List</li>
-          <li className="tw-hidden sm:tw-inline">Mentor</li>
-          <div className="tw-hidden md:tw-grid md:tw-justify-between md:tw-grid-cols-[5rem_5rem]">
-            <li>Day</li>
-            <li className="tw-text-right">Time</li>
-          </div>
-          <li className="tw-hidden min-[540px]:tw-inline tw-text-right md:tw-hidden">
-            Mentoring On
-          </li>
-        </ul>
-        <ul className="tw-bg-white tw-border tw-rounded-b">
-          {sessions
-            .filter((session) =>
-              activeTab.toLocaleLowerCase() === "pending"
-                ? session.isbooked
-                : !session.isbooked,
-            )
-            .map((session, index) => (
-              <li
-                key={index}
-                className="min-[540px]:tw-grid min-[540px]:tw-grid-cols-[auto_7rem] min-[540px]:tw-justify-between sm:tw-justify-normal tw-p-4 sm:tw-grid-cols-[auto_8rem] md:tw-grid-cols-[auto_13rem] tw-text-base-400 tw-border-b last:tw-border-b-0 tw-gap-6"
-              >
-                <div className="sm:tw-grid min-[540px]:tw-grid-cols-[auto_8rem] sm:tw-grid-cols-[auto_8rem] tw-gap-6">
-                  <p className="tw-font-medium">{session.sessionName}</p>
-                  <p className="tw-capitalize sm:tw-hidden">
-                    Mentor • {session.userName}
-                  </p>
-                  <p className="tw-capitalize tw-hidden sm:tw-block">
-                    {session.userName}
-                  </p>
-                </div>
-                <div>
-                  <div className="md:tw-grid tw-hidden md:tw-grid-cols-[5rem_5rem] md:tw-justify-between">
-                    <p className="tw-capitalize">{session.sessionDay}</p>
-                    <p className="tw-uppercase tw-text-right">
-                      {session.sessionTime}
-                    </p>
-                  </div>
-                  <p className="tw-capitalize min-[540px]:tw-text-right md:tw-hidden">
-                    {session.sessionDay.substring(0, 3)},&nbsp;
-                    {session.sessionTime}
-                  </p>
-                </div>
-              </li>
-            ))}
-        </ul>
-      </div> */}
     </div>
   );
 };

diff --git a/components/userDashboard/profile.js b/components/userDashboard/profile.js
@@ -165,7 +165,7 @@ function Profile({ setLoadingState, setErrorState, user, setUser }) {
                       border: "2px solid var(--base-300)",
                       background: "white",
                       paddingLeft: "35px",
-                      backgroundColor: "var(--base-400)",
+                      backgroundColor: "#f1f1f1",
                     }}
                     placeholder={user?.email}
                     readOnly

diff --git a/pages/dashboard/dashboardTour.js b/pages/dashboard/dashboardTour.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import axios from "axios";
 import { useTour } from "@reactour/tour";
 import Image from "next/image";
 import logo from "../../public/logo.png";
@@ -131,17 +132,48 @@ function UserDashboardTour() {
 
   const { setIsOpen, setSteps, setCurrentStep } = useTour();
   useEffect(() => {
-    setCurrentStep(0);
-    const userTour = localStorage.getItem("userTour");
-    if (userTour) return;
-    setIsOpen(true);
-    if (window.innerWidth > 768) {
-      setSteps(desktopSteps);
-    } else {
-      setSteps(mobileSteps);
-    }
-    localStorage.setItem("userTour", "true");
+    const fetchVisitedStatus = async () => {
+      try {
+        const response = await axios.get(
+          `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/dashboard/flags/isVisitedDashboard`,
+          {
+            withCredentials: true,
+          },
+        );
+        const isVisitedDashboard = response.data.isVisitedDashboard;
+        console.log(isVisitedDashboard);
+
+        if (!isVisitedDashboard) {
+          // User has not visited the dashboard, show the tour
+          setCurrentStep(0);
+          setIsOpen(true);
+
+          if (window.innerWidth > 768) {
+            setSteps(desktopSteps);
+          } else {
+            setSteps(mobileSteps);
+          }
+
+          // Set the status to visited in the backend
+          await axios.put(
+            `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/dashboard/flags/setIsVisitedDashboard`,
+            {
+              isVisitedDashboard: true,
+            },
+            {
+              withCredentials: true,
+            },
+          );
+        }
+      } catch (error) {
+        console.error("Error fetching or updating visited status:", error);
+      }
+    };
+
+    fetchVisitedStatus();
   }, []);
+
+  return null;
 }
 
 function MentorDashboardTour() {
@@ -313,16 +345,45 @@ function MentorDashboardTour() {
   ];
 
   useEffect(() => {
-    setCurrentStep(0);
-    const mentorTour = localStorage.getItem("mentorTour");
-    if (mentorTour) return;
-    setIsOpen(true);
-    if (window.innerWidth > 768) {
-      setSteps(desktopSteps);
-    } else {
-      setSteps(mobileSteps);
-    }
-    localStorage.setItem("mentorTour", true);
+    const fetchVisitedStatus = async () => {
+      try {
+        const response = await axios.get(
+          `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/dashboard/flags/isVisitedDashboard`,
+          {
+            withCredentials: true,
+          },
+        );
+        const isVisitedDashboard = response.data.isVisitedDashboard;
+        console.log(isVisitedDashboard);
+
+        if (!isVisitedDashboard) {
+          // User has not visited the dashboard, show the tour
+          setCurrentStep(0);
+          setIsOpen(true);
+
+          if (window.innerWidth > 768) {
+            setSteps(desktopSteps);
+          } else {
+            setSteps(mobileSteps);
+          }
+
+          // Set the status to visited in the backend
+          await axios.put(
+            `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/dashboard/flags/setIsVisitedDashboard`,
+            {
+              isVisitedDashboard: true,
+            },
+            {
+              withCredentials: true,
+            },
+          );
+        }
+      } catch (error) {
+        console.error("Error fetching or updating visited status:", error);
+      }
+    };
+
+    fetchVisitedStatus();
   }, []);
 }