From 821023d540fb5131d0d1a0455b5a960a98e5b301 Mon Sep 17 00:00:00 2001
From: code-par-learn <uthra0864@gmail.com>
Date: Thu, 22 Aug 2024 21:18:53 +0530
Subject: [PATCH 1/6] fix(ui): modify ProfileImageInput component

---
 components/basic/ProfileImageInput.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/basic/ProfileImageInput.js b/components/basic/ProfileImageInput.js
index c07b98bc..44df11aa 100644
--- a/components/basic/ProfileImageInput.js
+++ b/components/basic/ProfileImageInput.js
@@ -79,7 +79,6 @@ function ProfileImageInput({ image, setImage, className }) {
         <div>
           <label
             htmlFor="mentorProfile"
-            className="mentorFormButton theme-button-color !tw-font-medium"
           >
             {!image ? "Upload Image" : "Change Image"}
           </label>
@@ -90,7 +89,6 @@ function ProfileImageInput({ image, setImage, className }) {
             className="mentorFormInput"
             name="mentorProfileImage"
             onChange={(e) => handleImageChange(e)}
-            hidden
             required
             aria-label="Upload your image"
             aria-required="true"

From 95482937e9e4924b1fc8b3d6fd01ec0022164c4d Mon Sep 17 00:00:00 2001
From: code-par-learn <uthra0864@gmail.com>
Date: Thu, 22 Aug 2024 21:23:58 +0530
Subject: [PATCH 2/6] fix(ui): run prettier ProfileImageInput component

---
 components/basic/ProfileImageInput.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/basic/ProfileImageInput.js b/components/basic/ProfileImageInput.js
index 44df11aa..dd450bad 100644
--- a/components/basic/ProfileImageInput.js
+++ b/components/basic/ProfileImageInput.js
@@ -77,9 +77,7 @@ function ProfileImageInput({ image, setImage, className }) {
         />
         {/* image input with label */}
         <div>
-          <label
-            htmlFor="mentorProfile"
-          >
+          <label htmlFor="mentorProfile">
             {!image ? "Upload Image" : "Change Image"}
           </label>
           <input

From 59730e36a27939d12452c5c6f23dfc9e6fbdd123 Mon Sep 17 00:00:00 2001
From: code-par-learn <uthra0864@gmail.com>
Date: Tue, 27 Aug 2024 12:14:10 +0530
Subject: [PATCH 3/6] fix(ui): debug ProfileImageInput component

---
 components/basic/ProfileImageInput.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/basic/ProfileImageInput.js b/components/basic/ProfileImageInput.js
index dd450bad..8b5dd325 100644
--- a/components/basic/ProfileImageInput.js
+++ b/components/basic/ProfileImageInput.js
@@ -77,15 +77,19 @@ function ProfileImageInput({ image, setImage, className }) {
         />
         {/* image input with label */}
         <div>
-          <label htmlFor="mentorProfile">
+          <label
+            htmlFor="mentorProfileone"
+            className="mentorFormButton theme-button-color !tw-font-medium"
+          >
             {!image ? "Upload Image" : "Change Image"}
           </label>
           <input
             type="file"
             accept="image/*"
-            id="mentorProfile"
+            id="mentorProfileone"
             className="mentorFormInput"
             name="mentorProfileImage"
+            hidden
             onChange={(e) => handleImageChange(e)}
             required
             aria-label="Upload your image"

From 404147af51665a4d6c1f01c1f04d954453fcb78e Mon Sep 17 00:00:00 2001
From: code-par-learn <uthra0864@gmail.com>
Date: Tue, 27 Aug 2024 12:18:53 +0530
Subject: [PATCH 4/6] fix(ui): change id ProfileImageInput component

---
 components/basic/ProfileImageInput.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/basic/ProfileImageInput.js b/components/basic/ProfileImageInput.js
index 8b5dd325..44636e81 100644
--- a/components/basic/ProfileImageInput.js
+++ b/components/basic/ProfileImageInput.js
@@ -78,7 +78,7 @@ function ProfileImageInput({ image, setImage, className }) {
         {/* image input with label */}
         <div>
           <label
-            htmlFor="mentorProfileone"
+            htmlFor="mentorProfileOne"
             className="mentorFormButton theme-button-color !tw-font-medium"
           >
             {!image ? "Upload Image" : "Change Image"}
@@ -86,7 +86,7 @@ function ProfileImageInput({ image, setImage, className }) {
           <input
             type="file"
             accept="image/*"
-            id="mentorProfileone"
+            id="mentorProfileOne"
             className="mentorFormInput"
             name="mentorProfileImage"
             hidden

From 64862b764def277d01144ea099a04498e72dec5a Mon Sep 17 00:00:00 2001
From: code-par-learn <uthra0864@gmail.com>
Date: Tue, 27 Aug 2024 12:45:35 +0530
Subject: [PATCH 5/6] feat(ui): add 'View Profile' button for mentors to access
 their own profile

---
 components/mentorDashboard/ViewProfile.js | 192 ++++++++++++++++++++++
 components/mentorDashboard/home.js        |  47 ++++--
 pages/dashboard/mentor.page.js            |   9 +
 3 files changed, 230 insertions(+), 18 deletions(-)
 create mode 100644 components/mentorDashboard/ViewProfile.js

diff --git a/components/mentorDashboard/ViewProfile.js b/components/mentorDashboard/ViewProfile.js
new file mode 100644
index 00000000..fd7f26dd
--- /dev/null
+++ b/components/mentorDashboard/ViewProfile.js
@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+const Header = React.lazy(() => import("../layout/Header"));
+import axios from "axios";
+import Head from "next/head";
+import SessionCard from "../newMentorProfile/SessionCard";
+import SharePageModal from "../mentorProfile/components/SharePageModal";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { Testimonial } from "../homePage";
+import MentorAbout from "../newMentorProfile/mentorAbout";
+import { Section } from "../UI";
+
+const OwlCarousel = dynamic(import("react-owl-carousel"), {
+  ssr: false,
+});
+import "owl.carousel/dist/assets/owl.carousel.min.css";
+import "owl.carousel/dist/assets/owl.theme.default.min.css";
+
+const testimonialOptions = {
+  margin: 40,
+  items: 4,
+  nav: true,
+  loop: true,
+  responsive: {
+    0: {
+      items: 1,
+    },
+    600: {
+      items: 2,
+    },
+    900: {
+      items: 2,
+    },
+    1170: {
+      items: 3,
+    },
+  },
+};
+
+function Index({ mentorDetail }) {
+  const [showModal, setShowModal] = useState(false);
+  const [carousel, setCarousel] = useState(true);
+
+  return (
+    <>
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <h1 className="tw-text-2xl tw-mt-6 font-semibold tw-p-0">
+          Preview of your profile
+        </h1>
+        {/* Mentor Page */}
+        <main className="tw-pt-4">
+          <div className="align-div">
+            <div className="btn-div tw-flex tw-justify-end">
+              <button className="tw-flex tw-justify-center tw-gap-2 tw-bg-primary-100 hover:tw-bg-primary-200 tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-p-2 tw-rounded-md tw-items-center">
+                <a
+                  href="/dashboard/mentor?tab=profile"
+                  className="tw-font-semibold tw-text-white"
+                >
+                  Edit About
+                </a>
+              </button>
+            </div>
+            <MentorAbout
+              mentorDetail={mentorDetail}
+              onShare={() => setShowModal(false)}
+            />
+          </div>
+
+          {/* session section */}
+          <div>
+            <div className="btn-div tw-flex tw-justify-end">
+              <button className="tw-flex tw-justify-center tw-gap-2 tw-bg-primary-100 hover:tw-bg-primary-200 tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-p-2 tw-rounded-md tw-items-center">
+                <a
+                  href="/dashboard/mentor?tab=sessions"
+                  className="tw-font-semibold tw-text-white"
+                >
+                  Edit Session
+                </a>
+              </button>
+            </div>
+            <Section
+              kicker="mentor schedule"
+              heading="Available Sessions"
+              subheading="Ignite your inner fire, embrace personalized guidance, and 
+            unlock your true potential through transformative mentor sessions."
+              align="center"
+            >
+              <div className="tw-grid tw-gap-6 md:tw-grid-cols-2 lg:tw-grid-cols-3">
+                {/* Session Cards for every session */}
+                {mentorDetail?.sessions?.length !== 0 &&
+                  mentorDetail?.sessions?.map((session, index) => (
+                    <SessionCard
+                      key={index}
+                      type={session.type}
+                      name={session.name}
+                      description={session.description}
+                      duration={session.duration}
+                      price={session.price}
+                    />
+                  ))}
+              </div>
+            </Section>
+          </div>
+
+          {/* Share Mentor Page Modal */}
+          {showModal && (
+            <SharePageModal
+              handleClose={() => setShowModal(false)}
+              username={mentorDetail?.username}
+            />
+          )}
+          {/* Error Display */}
+          {/* {error && <div style={{ color: "red" }}>{error}</div>} */}
+          {/* Book Session Modal */}
+          {/* {!error && modalPopup && (
+            <BookSessionModal
+              handleClose={() => setModalPopup(false)}
+              handleCancel={() => setModalPopup(false)}
+              handleConfirm={() => handleClick(selectedSession)}
+            />
+          )} */}
+          {/* Successful Alert Message */}
+          {/* {emailSent && (
+          <div style={{ color: "green" }}>
+            Your session has been booked! Check your inbox for payment details.
+          </div>
+        )} */}
+        </main>
+        {/* {isLoading && (
+          <>
+            <div className={styles.overlay}></div>
+            <div
+              style={{
+                position: "fixed",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                zIndex: 9999,
+              }}
+            >
+              <div className={styles.loader}></div>
+            </div>
+          </>
+        )} */}
+        <ToastContainer />
+      </React.Suspense>
+    </>
+  );
+}
+function ViewProfile({ isSidebarOpen, setLoadingState, setErrorState }) {
+  const [mentorData, setMentorData] = useState(null);
+
+  useEffect(() => {
+    const fetchMentorData = async () => {
+      try {
+        const storedMentorData = JSON.parse(localStorage.getItem("mentorData"));
+        if (!storedMentorData || !storedMentorData["mentor_name"]) {
+          setErrorState("No mentor data found in local storage");
+          return;
+        }
+
+        const url = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/mentors/mentorDetail/${storedMentorData["mentor_name"]}`;
+        setLoadingState(true);
+
+        const { data: res } = await axios.get(url);
+
+        if (res.message === "Invalid link") {
+          setErrorState("Invalid mentor name");
+        } else {
+          setMentorData(res);
+        }
+      } catch (error) {
+        setErrorState("An error occurred while fetching mentor data");
+        console.error(error);
+      } finally {
+        setLoadingState(false);
+      }
+    };
+
+    fetchMentorData();
+  }, [setLoadingState, setErrorState]);
+
+  if (!mentorData) {
+    return <p>Loading...</p>;
+  }
+  console.log(mentorData);
+  console.log(mentorData.mentorDetail.username);
+  return <Index mentorDetail={mentorData.mentorDetail} />;
+}
+
+export default ViewProfile;
diff --git a/components/mentorDashboard/home.js b/components/mentorDashboard/home.js
index ac01773a..a4c0d9af 100644
--- a/components/mentorDashboard/home.js
+++ b/components/mentorDashboard/home.js
@@ -165,24 +165,35 @@ const Home = ({
             }`}
           >
             {mentor ? (
-              <p
-                className="tw-flex tw-justify-center tw-gap-2 tw-bg-primary-100 hover:tw-bg-primary-200 tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-p-2 tw-rounded-md tw-items-center"
-                onClick={handleLogout}
-                id="mentorLogout"
-              >
-                <h2 className="tw-font-semibold tw-text-white">Log out</h2>
-                <Image
-                  src={
-                    !mentor?.image
-                      ? "/assets/img/icon/no-profile-picture.webp"
-                      : mentor.image
-                  }
-                  alt="Picture of the mentor"
-                  width={30}
-                  height={30}
-                  className="tw-rounded-full"
-                />
-              </p>
+              /* view profile  */
+              <>
+                <button className="tw-flex tw-justify-center tw-gap-2 tw-bg-primary-100 hover:tw-bg-primary-200 tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-p-2 tw-rounded-md tw-items-center">
+                  <a
+                    href="/dashboard/mentor?tab=view-profile"
+                    className="tw-font-semibold tw-text-white"
+                  >
+                    View profile
+                  </a>
+                </button>
+                <p
+                  className="tw-flex tw-justify-center tw-gap-2 tw-bg-primary-100 hover:tw-bg-primary-200 tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-p-2 tw-rounded-md tw-items-center"
+                  onClick={handleLogout}
+                  id="mentorLogout"
+                >
+                  <h2 className="tw-font-semibold tw-text-white">Log out</h2>
+                  <Image
+                    src={
+                      !mentor?.image
+                        ? "/assets/img/icon/no-profile-picture.webp"
+                        : mentor.image
+                    }
+                    alt="Picture of the mentor"
+                    width={30}
+                    height={30}
+                    className="tw-rounded-full"
+                  />
+                </p>
+              </>
             ) : (
               <p
                 className="tw-flex tw-justify-center tw-gap-2 tw-bg-primary-100 hover:tw-bg-primary-200 tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-p-2 tw-rounded-md tw-items-center"
diff --git a/pages/dashboard/mentor.page.js b/pages/dashboard/mentor.page.js
index 44f37d0d..e9688e91 100644
--- a/pages/dashboard/mentor.page.js
+++ b/pages/dashboard/mentor.page.js
@@ -8,6 +8,7 @@ import Queries from "../../components/mentorDashboard/queries";
 import Home from "../../components/mentorDashboard/home";
 import Bookings from "../../components/mentorDashboard/Bookings";
 import Payments from "../../components/mentorDashboard/Payment";
+import ViewProfile from "../../components/mentorDashboard/ViewProfile";
 import ComingSoon from "../../components/basic/ComingSoon";
 import { useAuth } from "../../context/AuthContext";
 import { useRouter } from "next/router";
@@ -136,6 +137,14 @@ function MentorDashboard() {
               setErrorState={setErrorState}
             />
           )}
+
+          {component === "view-profile" && (
+            <ViewProfile
+              isSidebarOpen={isSidebarOpen}
+              setLoadingState={setLoadingState}
+              setErrorState={setErrorState}
+            />
+          )}
           {component === "calendar" && (
             <Calendar
               isSidebarOpen={isSidebarOpen}

From a3dce93d7f56f607d815ac3b1602ac65ab31ef35 Mon Sep 17 00:00:00 2001
From: code-par-learn <uthra0864@gmail.com>
Date: Sat, 31 Aug 2024 21:46:23 +0530
Subject: [PATCH 6/6] feat(ui): add publish button

---
 components/mentorDashboard/ViewProfile.js | 24 ++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/components/mentorDashboard/ViewProfile.js b/components/mentorDashboard/ViewProfile.js
index fd7f26dd..99f646b6 100644
--- a/components/mentorDashboard/ViewProfile.js
+++ b/components/mentorDashboard/ViewProfile.js
@@ -10,6 +10,7 @@ import "react-toastify/dist/ReactToastify.css";
 import { Testimonial } from "../homePage";
 import MentorAbout from "../newMentorProfile/mentorAbout";
 import { Section } from "../UI";
+import PublishProfile from "./SideBarComponent/PublishProfile";
 
 const OwlCarousel = dynamic(import("react-owl-carousel"), {
   ssr: false,
@@ -41,13 +42,34 @@ const testimonialOptions = {
 function Index({ mentorDetail }) {
   const [showModal, setShowModal] = useState(false);
   const [carousel, setCarousel] = useState(true);
-
+  console.log(mentorDetail.username);
   return (
     <>
       <React.Suspense fallback={<div>Loading...</div>}>
         <h1 className="tw-text-2xl tw-mt-6 font-semibold tw-p-0">
           Preview of your profile
         </h1>
+        <div className="tw-flex tw-gap-3 tw-w-full">
+          <input
+            type="text"
+            name="username"
+            style={{
+              width: "300px",
+              padding: "5px",
+              marginLeft: "20px",
+
+              backgroundColor: "#f0f0f0",
+              color: "#999999",
+              border: "1px solid #cccccc",
+              opacity: 0.9,
+            }}
+            placeholder="http:www.grabtern.com"
+            value={`http://localhost:3000/${mentorDetail.username}`}
+            readOnly
+            title="This field is not editable"
+          />
+          <PublishProfile isSidebarOpen={true} className="!tw-mt-0 " />
+        </div>
         {/* Mentor Page */}
         <main className="tw-pt-4">
           <div className="align-div">