Merge pull request #289 from hngx-org/MEN-18/Feat/Mentor-Session-Forms

Men 18/feat/mentor session forms
hngx-org · Oct 24, 2023 · fc814db · fc814db
2 parents ec10442 + d949683
commit fc814db
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 736 deletions.
diff --git a/app/(mentor)/mentor-session-form-recurring/page.tsx b/app/(mentor)/mentor-session-form-recurring/page.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { RecurringSessionForm } from "@/components/modal/MentorSessionModalForms/SessionForms";
+import RecurringSessionForm from "@/components/modal/MentorSessionModalForms/RecurringSessionForm";
 
 function page() {
   return (

diff --git a/app/(mentor)/mentor-session-onoff/page.tsx b/app/(mentor)/mentor-session-onoff/page.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { OneOffSessionForm } from "@/components/modal/MentorSessionModalForms/SessionForms";
+import OneOffSessionForm from "@/components/modal/MentorSessionModalForms/OneOffSessionForm";
 
 function page() {
   return (

diff --git a/components/modal/MentorSessionModalForms/FreeSessionForm.tsx b/components/modal/MentorSessionModalForms/FreeSessionForm.tsx
@@ -1,11 +1,19 @@
 "use client";
 
-import React, { useState, ChangeEvent, FormEvent, MouseEvent } from "react";
+import React, {
+  useState,
+  useEffect,
+  ChangeEvent,
+  FormEvent,
+  MouseEvent,
+} from "react";
 import Link from "next/link";
+import axios from "axios";
 import SuccessModal from "@/components/modal/SuccessModal";
 import { SelectInputType, TimeInputType } from "./SelectInputType";
 import MentorCalendar from "./MentorCalendar";
 import { Button } from "@/components/buttons/button";
+import useAuth from "@/context/useAuth";
 
 interface FreeFormData {
   sessionName?: string;
@@ -17,6 +25,7 @@ interface FreeFormData {
   relevantTopics?: string;
   sessionUrl?: string;
   tag?: string;
+  mentorId?: string;
 }
 
 function FreeSessionForm({
@@ -100,8 +109,62 @@ function FreeSessionForm({
     setSuccessful(true);
   };
 
+  // const { data } = useAuth();
+  // console.log(data);
+  // const mentorId=data?.id
+  // const email = data?.userDetails?.email;
+  // const userName = data?.userProfile;
+  // console.log(userName);
+  // const jobTitle = data?.mentorship_type;
+
+  // useEffect(() => {
+  // const user = JSON.parse(
+  //   localStorage.getItem("Mentor") || JSON.stringify({ data: { token: null } })
+  // )
+  // const {
+  // data:{token},
+  // } = user
+
+  // const fetchUser = async () => {
+  //   try {
+  //     const response = await fetch(
+  //       "https://mentormee-api.onrender.com/mentors/get-current",
+  //       {
+  //         redirect : "follow",
+  //         headers:{
+  //         Authorization : `Bearer ${token}`,
+  //         "Content-Type": "application/json",
+  //       }
+  //       }
+  //     );
+  //     if (response.ok) {
+  //       const userData = await response.json();
+  //       return userData
+  //       console.log("user fetched,", userData);
+  //     }
+  //   } catch (error) {
+  //     console.error(error);
+  //     throw error;
+  //   }
+  // };
+  // fetchUser();
+  // }, [])
+
+  // const mentorId=userData?.
+
   const openCalendar = async (e: MouseEvent<HTMLButtonElement>) => {
     // e.preventDefault();
+    const user = JSON.parse(
+      localStorage.getItem("Mentor") ||
+        JSON.stringify({ data: { token: null } })
+    );
+    const {
+      data: { _id },
+    } = user;
+    console.log(user?.data?.user?._id);
+    const currentUser = user?.data?.user?._id;
+    console.log(currentUser);
+
     const isFormValid = Object.values(formData).every((value) => value !== "");
 
     if (isFormValid) {
@@ -114,7 +177,7 @@ function FreeSessionForm({
       // console.log("All fields are required");
     }
 
-    const data = { ...formData, tag: "Free session" };
+    const data = { ...formData, tag: "Free session", mentorId: currentUser };
 
     console.log(JSON.stringify(data));
 
@@ -150,16 +213,16 @@ function FreeSessionForm({
       {formVisible && (
         // <div className="p-0 bg-[#1d1c1c57]  bg-opacity-10 sm:py-8 sm:px-10 mx-auto flex flex-col justify-center items-center my-auto ">
         <div className="bg-[#fafafa] min-w-[100%] px-3 sm:min-w-[70%] md:min-w-[60%] py-4 rounded">
-          <div className=" w-[100%] sm:px-8 md:px-12 flex flex-col gap-3 py-3">
+          <div className="sticky bg-[#fafafa] z-10 top-0 w-[100%] sm:px-8 md:px-12 flex flex-col gap-3 py-3 lg:py-4">
             <h1 className="text-left font-bold text-[1.5rem] sm:text-[2rem] text-[#08051e]">
               Create a Free Session
             </h1>
             <p className="text-gray-500">
               Create a session that best suits you!
             </p>
+            <span className="text-Error50 font-bold">{error}</span>
           </div>
           <form className="flex flex-col gap-3 sm:gap-6 py-3 rounded sm:px-12 w-full justify-between">
-            <span className="text-Error50 font-bold">{error}</span>
             <TimeInputType
               labelText="Session name"
               type="text"

diff --git a/components/modal/MentorSessionModalForms/OneOffSessionForm.tsx b/components/modal/MentorSessionModalForms/OneOffSessionForm.tsx
@@ -17,6 +17,7 @@ interface OneOffFormData {
   relevantTopics?: string;
   sessionUrl?: string;
   tag?: string;
+  mentorId?: string;
 }
 
 function OneOffSessionForm({
@@ -82,6 +83,17 @@ function OneOffSessionForm({
 
   const openCalendar = async (e: MouseEvent<HTMLButtonElement>) => {
     // e.preventDefault();
+
+    const user = JSON.parse(
+      localStorage.getItem("Mentor") ||
+        JSON.stringify({ data: { token: null } })
+    );
+    const {
+      data: { _id },
+    } = user;
+    console.log(user?.data?.user?._id);
+    const currentUser = user?.data?.user?._id;
+    console.log(currentUser);
     const isFormValid = Object.values(formData).every((value) => value !== "");
 
     if (isFormValid) {
@@ -97,6 +109,7 @@ function OneOffSessionForm({
     const data = {
       ...formData,
       tag: "Oneoff session",
+      mentorId: currentUser,
     };
     console.log(JSON.stringify(data));
 
@@ -130,16 +143,16 @@ function OneOffSessionForm({
       {formVisible && (
         // <div className="p-0 bg-[#1d1c1c57]  bg-opacity-10 sm:py-8 sm:px-10 mx-auto flex flex-col justify-center items-center my-auto ">
         <div className="bg-[#fafafa] min-w-[100%] px-3 sm:min-w-[70%] md:min-w-[60%] py-4 rounded">
-          <div className=" w-[100%] sm:px-8 md:px-12 flex flex-col gap-3 py-3">
+          <div className="sticky bg-[#fafafa] z-10 top-0 w-[100%] sm:px-8 md:px-12 flex flex-col gap-3 py-3 lg:py-4">
             <h1 className="text-left font-bold text-[1.5rem] sm:text-[2rem] text-[#08051e]">
               Create a OneOff Session
             </h1>
             <p className="text-gray-500">
               Create a session that best suits you!
             </p>
+            <span className="text-Error50 font-bold">{error}</span>
           </div>
           <form className="flex flex-col gap-3 sm:gap-6 py-3 rounded sm:px-12 w-full justify-between">
-            <span className="text-Error50 font-bold">{error}</span>
             <TimeInputType
               labelText="Session name"
               isRequired

diff --git a/components/modal/MentorSessionModalForms/RecurringSessionForm.tsx b/components/modal/MentorSessionModalForms/RecurringSessionForm.tsx
@@ -19,6 +19,7 @@ interface RecurringFormData {
   relevantTopics?: string;
   sessionUrl?: string;
   tag?: string;
+  mentorId?: string;
 }
 
 function RecurringSessionForm({
@@ -83,6 +84,17 @@ function RecurringSessionForm({
   };
   const openCalendar = async (e: MouseEvent<HTMLButtonElement>) => {
     // e.preventDefault();
+    const user = JSON.parse(
+      localStorage.getItem("Mentor") ||
+        JSON.stringify({ data: { token: null } })
+    );
+    const {
+      data: { _id },
+    } = user;
+    console.log(user?.data?.user?._id);
+    const currentUser = user?.data?.user?._id;
+    console.log(currentUser);
+
     const isFormValid = Object.values(formData).every((value) => value !== "");
 
     if (isFormValid) {
@@ -98,6 +110,7 @@ function RecurringSessionForm({
     const data = {
       ...formData,
       tag: "Recurring session",
+      mentorId: currentUser,
     };
     console.log(JSON.stringify(data));
 
@@ -130,27 +143,27 @@ function RecurringSessionForm({
       {formVisible && (
         // <div className="p-0 bg-[#1d1c1c57]  bg-opacity-10 sm:py-8 sm:px-10 mx-auto flex flex-col justify-center items-center my-auto">
         <div className="bg-[#fafafa] min-w-[100%] px-3 sm:min-w-[70%] md:min-w-[60%] py-4 rounded">
-          <div className=" w-[100%] sm:px-8 md:px-12 flex flex-col gap-3 py-3">
+          <div className="sticky bg-[#fafafa] z-10 top-0 w-[100%] sm:px-8 md:px-12 flex flex-col gap-3 py-3 lg:py-4">
             <h1 className="text-left font-bold text-[1.5rem] sm:text-[2rem] text-[#08051e]">
               Create a Recurring Session
             </h1>
             <p className="text-gray-500">
               Create a session that best suits you!
             </p>
+            <span className="text-Error50 font-bold">{error}</span>
           </div>
           <form className="flex flex-col gap-3 sm:gap-6 py-3 rounded sm:px-12 w-full justify-between">
-            <span className="text-Error50 font-bold">{error}</span>
-            <SelectInputType
+            {/* <span className="text-Error50 font-bold">{error}</span> */}
+            <TimeInputType
               labelText="Session name"
               isRequired
-              selectId="sessionName"
-              selectName="sessionName"
+              type="text"
+              InputId="sessionName"
+              InputName="sessionName"
               placeholder="Give this session a name"
               value={formData.sessionName}
-              onChange={handleSelectChange}
-            >
-              <option value="Design principles">Design principles</option>
-            </SelectInputType>
+              onChange={handleInputChange}
+            />
             <TimeInputType
               labelText="Description"
               isRequired

diff --git a/components/modal/MentorSessionModalForms/SelectInputType.tsx b/components/modal/MentorSessionModalForms/SelectInputType.tsx
@@ -1,4 +1,6 @@
-import React, { SelectHTMLAttributes } from "react";
+"use client";
+
+import React, { useState } from "react";
 import Image from "next/image";
 import { MentorCreationArrDown } from "@/public";
 
@@ -37,6 +39,7 @@ export function SelectInputType({
   value,
   children,
 }: SelectInputProps) {
+  const [isSelected, setIsSelected] = useState(false);
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-col justify-between">
@@ -98,7 +101,7 @@ export function TimeInputType({
             name={InputName}
             placeholder={placeholder}
             required={isRequired}
-            className=" first:text-gray-500 border rounded-lg sm:rounded-lg p-2 md:p-4 md:py-5 w-full focus:outline-none focus:border-gray-600 "
+            className="border rounded-lg sm:rounded-lg p-2 md:p-4 md:py-5 w-full focus:outline-none focus:border-gray-600 "
             onChange={onChange}
           />
         </div>