Features instructor profile

client/src/App.tsx

@@ -6,9 +6,9 @@ import AdminLoginPage from "./components/pages/admin/AdminLoginPage";
 import { Sidenav } from "./components/pages/admin/widgets/layout";
 import { routes } from "./components/pages/admin/AdminDashBoardPage";
 import { useSelector, useDispatch } from "react-redux";
-import InstructorSideNav from "./components/partials/SideNav";
+import InstructorSideNav from "./components/pages/instructors/InstructorSideNav";
 import { selectIsAdminLoggedIn } from "./redux/reducers/adminAuthSlice";
-import InstructorHeader from "./components/partials/InstructorHeader";
+import InstructorHeader from "./components/pages/instructors/InstructorHeader";
 import useIsOnline from "./hooks/useOnline";
 import YouAreOffline from "./components/common/YouAreOffline";
 import StudentFooter from "./components/partials/StudentFooter";

client/src/api/endpoints/instructor.ts

@@ -0,0 +1,20 @@
+import {
+  updateProfileService,
+  changePasswordService,
+} from "../services/instructor";
+import { PasswordInfo } from "../types/student/student";
+import END_POINTS from "../../constants/endpoints";
+
+export const changePassword = (passwordInfo: PasswordInfo) => {
+  return changePasswordService(
+    END_POINTS.INSTRUCTOR_CHANGE_PASSWORD,
+    passwordInfo
+  );
+};
+
+export const updateProfile = (profileInfo: FormData) => {
+  return updateProfileService(
+    END_POINTS.INSTRUCTOR_UPDATE_PROFILE,
+    profileInfo
+  );
+};

client/src/api/services/instructor.ts

@@ -0,0 +1,28 @@
+import CONSTANTS_COMMON from "../../constants/common";
+import api from "../middlewares/protectedInterceptor";
+import { PasswordInfo} from "../types/student/student";
+
+export const changePasswordService = async (
+  endpoint: string,
+  passwordInfo: PasswordInfo
+) => {
+  const response = await api.patch(
+    `${CONSTANTS_COMMON.API_BASE_URL}/${endpoint}`,
+    passwordInfo
+  );
+  return response;    
+};
+
+export const updateProfileService = async (
+  endpoint: string,
+  profileInfo: FormData
+) => {
+  const response = await api.put(
+    `${CONSTANTS_COMMON.API_BASE_URL}/${endpoint}`,
+    profileInfo
+  );
+  return response;
+};
+
+
+

client/src/api/types/apiResponses/apiResponseInstructors.ts

@@ -19,7 +19,8 @@ export interface InstructorApiResponse {
     dateJoined: string
     __v: number
     rejected: boolean
-    rejectedReason: string
+    rejectedReason: string,
+    profileUrl:string;
 }
 
 interface Certificate {

client/src/api/types/instructor/instructor.ts

@@ -0,0 +1,18 @@
+export interface PasswordInfo {
+    currentPassword: string;
+    newPassword: string;
+  }
+  export interface UpdateProfileInfo {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    mobile?: string;
+    profilePic?: File | null;
+    qualification?:string;
+    subjects?:string;
+    experience?:string;
+    skills?:string;
+    about?:string;
+
+  }
+

client/src/components/pages/instructors/InsructorProfile.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import ProfileForm from "./ProfileForm";
+import ChangePasswordForm from "./PasswordForm";
+import { fetchStudentData } from "../../../redux/reducers/studentSlice";
+import { useDispatch } from "react-redux";
+import { FiEdit } from "react-icons/fi";
+
+type Props = {};
+
+const InstructorProfile: React.FC = (props: Props) => {
+  const dispatch = useDispatch();
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    dispatch(fetchStudentData());
+  }, [dispatch]);
+
+  const handleEditClick = () => {
+    setEditMode(true);  
+  };
+
+  return (
+    <div className='w-full flex justify-center items-center'>
+      <div className='w-11/12'>
+        <div>
+          <div className='pt-5 pb-6 w-full'>
+            <h2 className='text-3xl font-semibold text-customFontColorBlack'>
+              Edit profile info
+            </h2>
+          </div>  
+        </div>
+        <div className='flex flex-col md:flex-row gap-x-10 h-full pb-20'>
+          <div className='border md:w-7/12 w-full h-full rounded-md bg-white border-gray-300'>
+            <div className='flex justify-between'>
+              <h3 className='pl-5 pt-5 text-lg text-customFontColorBlack font-semibold'>
+                Account Info
+              </h3>
+              <div>
+                <button className='p-5' onClick={handleEditClick}>
+                  <FiEdit className='text-customFontColorBlack text-lg' />
+                </button>
+              </div>  
+            </div>
+            <div className='p-6'>
+              <ProfileForm editMode={editMode} setEditMode={setEditMode} />
+            </div>  
+          </div>   
+          <div className='border my-7 md:mt-0 pt-5 pb-10 md:w-5/12 w-full h-full rounded-md bg-white border-gray-300'>
+            <h3 className='pl-5 text-lg text-customFontColorBlack font-semibold'>
+              Change password
+            </h3>
+            <div className='p-6'>
+              <ChangePasswordForm />
+            </div>
+          </div>
+        </div>
+      </div>    
+    </div>        
+  );
+};
+
+export default InstructorProfile;

client/src/components/partials/SideNav.tsx → client/src/components/pages/instructors/InstructorSideNav.tsx

@@ -10,6 +10,8 @@ import { Square3Stack3DIcon } from "@heroicons/react/24/outline";
 import { useLocation } from "react-router-dom";
 import {IoMdChatboxes} from 'react-icons/io'
 import { FaUserGraduate } from "react-icons/fa";
+import {UserCircleIcon} from "@heroicons/react/24/outline";
+
 
 const icon = {
   className: "w-5 h-5 text-inherit",
@@ -22,28 +24,36 @@ const routes = [
     path:'/instructors/'
   },
   {
-    title: "View course",
+    title: "View courses",
     icon: <Square3Stack3DIcon {...icon} />,
     value: "view-course",
     path:'/instructors/view-course'
   },
   {
-    title: "Add course",
+    title: "Add courses",
     icon: <MdLibraryAdd {...icon} />,
     value: "add-course",
     path:'/instructors/add-course'
-  },{
-    title:"Channels",
-    icon:<IoMdChatboxes {...icon}/>,
-    value:"view-channels",
-    path:'/instructors/view-channels'
   },
   {
-    title:"Students",
+    title:"My students",
     icon:<FaUserGraduate {...icon}/>,
     value:"view-students",
     path:"/instructors/view-students"
-  }
+  },
+  {
+    title:"My Profile",
+    icon:<UserCircleIcon {...icon}/>,
+    value:"view-profile",
+    path:"/instructors/view-profile"
+  },
+  {
+    title:"Channels",
+    icon:<IoMdChatboxes {...icon}/>,
+    value:"view-channels",
+    path:'/instructors/view-channels'
+  },
+
 ];
 
 const InstructorSideNav: React.FC = () => {