Recruiter view

src/app/(routes)/recruiter/profile/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import RecruiterProfile from "@/components/Recruiters/profile";
+import { fetchProfile } from "@/helpers/recruiter/api";
+import Cookies from "js-cookie";
+import loadingImg from "@/../public/loadingSpinner.svg";
+import { ProfileFC } from "@/helpers/recruiter/api";
+
+const Profile = ({ params }: { params: { RecruiterId: string } }) => {
+  const [data, setData] = useState<ProfileFC>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const profileData = async () => {
+      const jsonData = await fetchProfile(Cookies.get("accessToken"));
+      setData(jsonData);
+      setLoading(false);
+    };
+    profileData();
+  }, []);
+
+  return (
+    <div className="h-screen grid justify-center items-center">
+      {loading && <img src={loadingImg.src} />}
+      {data && <RecruiterProfile profile={data} />}
+    </div>
+  );
+};
+
+export default Profile;

src/components/Faculty/Profile.tsx

@@ -28,8 +28,12 @@ const EditForm = (params: { profile: ProfileFC }) => {
         contact: contact,
       },
     };
-    patchProfile(Cookies.get("accessToken"), data);
-    window.location.reload();
+
+    const triggerUpdate = async () => {
+      await patchProfile(Cookies.get("accessToken"), data);
+      window.location.reload();
+    };
+    triggerUpdate();
   };
 
   return (

src/components/NavButtonGroup.tsx

@@ -8,6 +8,7 @@ import Link, { LinkProps } from "next/link";
 import { usePathname } from "next/navigation";
 import { ToggleContext } from "@/contextProviders/ToggleProvider";
 import { motion } from "framer-motion";
+import Cookies from "js-cookie";
 
 const NavLink = ({ href }: LinkProps) => {
   const path = usePathname();
@@ -88,49 +89,65 @@ const NavLink = ({ href }: LinkProps) => {
   );
 };
 
-const NavButtonGroup = () => {
+const LogoutButton = () => {
+  const context = useContext(ToggleContext);
+
+  const logOut = () => {
+    Cookies.remove("user");
+    window.location.reload();
+  };
+
+  return (
+    <div
+      className="hover:bg-gray-900 rounded-md mb-[1vh] py-[1vh] px-[1vw]"
+      onClick={logOut}
+    >
+      <div className="flex justify-start gap-[1rem]">
+        <div className="w-[2rem]">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="#fff"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+            <polyline points="16 17 21 12 16 7"></polyline>
+            <line x1="21" y1="12" x2="9" y2="12"></line>
+          </svg>
+        </div>
+        <motion.div
+          initial={{ opacity: 1 }}
+          animate={context.isOpen ? "open" : "closed"}
+          transition={{ duration: 0.1 }}
+          variants={{
+            closed: { opacity: 0 },
+            open: { opacity: 1 },
+          }}
+          className="w-[13vw]"
+        >
+          Logout
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+const NavButtonGroup = (params: { loggedIn: boolean }) => {
   const context = useContext(ToggleContext);
 
   return (
     <div className="">
       <div className="flex flex-col">
-        <NavLink href="/login" />
-        <div className="hover:bg-gray-900 rounded-md mb-[1vh] py-[1vh] px-[1vw]">
-          <div className="flex justify-start gap-[1rem]">
-            <div className="w-[2rem]">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="#fff"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-                <polyline points="16 17 21 12 16 7"></polyline>
-                <line x1="21" y1="12" x2="9" y2="12"></line>
-              </svg>
-            </div>
-            <motion.div
-              initial={{ opacity: 1 }}
-              animate={context.isOpen ? "open" : "closed"}
-              transition={{ duration: 0.1 }}
-              variants={{
-                closed: { opacity: 0 },
-                open: { opacity: 1 },
-              }}
-              className="w-[13vw]"
-            >
-              Logout
-            </motion.div>
-          </div>
-        </div>
+        {!params.loggedIn && <NavLink href="/login" />}
+        {params.loggedIn && <LogoutButton />}
       </div>
     </div>
   );
 };
 
-export default NavButtonGroup;
+export default NavButtonGroup;

src/components/Recruiters/profile.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from "react";
+import profileImg from "@/../public/profile-icon.svg";
+import { ProfileFC, updateProfileFC } from "@/helpers/recruiter/api";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogTrigger,
+  DialogTitle,
+  DialogContent,
+} from "../ui/dialog";
+import { patchProfile } from "@/helpers/recruiter/api";
+import Cookies from "js-cookie";
+
+const EditForm = (params: { profile: ProfileFC }) => {
+  const { profile } = params;
+  const [email, updateEmail] = useState<string>(
+    profile.user.email ? profile.user.email : ""
+  );
+  const [contact, updateContact] = useState<string>(
+    profile.user.contact ? profile.user.contact : ""
+  );
+  const [name, updateName] = useState<string>(
+    profile.user.name ? profile.user.name : ""
+  );
+  const [designation, setDesignation] = useState<string>(
+    profile.designation ? profile.designation : ""
+  );
+  const [landline, setlandline] = useState<string>(
+    profile.landline ? profile.landline : ""
+  );
+
+  const updateProfile = () => {
+    const data: updateProfileFC = {
+      designation: designation,
+      landline: landline,
+      user: {
+        name: name,
+        email: email,
+        contact: contact,
+      },
+    };
+    const triggerUpdate = async () => {
+      const res = await patchProfile(Cookies.get("accessToken"), data);
+      window.location.reload();
+    };
+    triggerUpdate();
+  };
+
+  return (
+    <div className="text-black">
+      <div className="mt-8 p-4 rounded-lg bg-gray-100 leading-10">
+        <div>
+          <span className="font-semibold">Name: </span>
+          <input
+            className="rounded"
+            type="text"
+            value={name}
+            onChange={(e) => {
+              updateName(e.target.value);
+            }}
+          />
+        </div>
+        <div>
+          <span className="font-semibold">Designation: </span>
+          <input
+            className="rounded"
+            type="text"
+            value={designation}
+            onChange={(e) => {
+              setDesignation(e.target.value);
+            }}
+          />
+        </div>
+        <div>
+          <span className="font-semibold">Landline: </span>
+          <input
+            className="rounded"
+            type="text"
+            value={landline}
+            onChange={(e) => {
+              setlandline(e.target.value);
+            }}
+          />
+        </div>
+        <div className="flex gap-8 mb-2">
+          <span className="font-semibold">Email: </span>
+          <input
+            className="rounded"
+            type="email"
+            value={email}
+            onChange={(e) => {
+              updateEmail(e.target.value);
+            }}
+          />
+        </div>
+        <div className="flex gap-8">
+          <span className="font-semibold">Contact: </span>
+          <input
+            type="text"
+            value={contact}
+            onChange={(e) => {
+              updateContact(e.target.value);
+            }}
+          />
+        </div>
+
+        <div className="mt-4">
+          <Button
+            className="w-full"
+            onClick={() => {
+              updateProfile();
+            }}
+          >
+            Update
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const RecruiterProfile = (params: { profile: ProfileFC }) => {
+  return (
+    <div>
+      <div className="grid justify-center border-4 border-black hover:border-gray-800 rounded-lg px-12 py-8">
+        <div className="flex justify-between items-center">
+          <img src={profileImg.src} width="100px" alt="" />
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button>Edit Details</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <EditForm profile={params.profile} />
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        <div className="mt-8 p-4 rounded-lg bg-gray-100">
+          <div>
+            <span className="font-semibold">Name: </span>
+            {params.profile.user.name}
+          </div>
+          <div>
+            <span className="font-semibold">Designation: </span>
+            {params.profile.designation}
+          </div>
+          <div>
+            <span className="font-semibold">Landline: </span>
+            {params.profile.landline}
+          </div>
+          <div>
+            <span className="font-semibold">Email: </span>
+            {params.profile.user.email}
+          </div>
+          <div>
+            <span className="font-semibold">Contact: </span>
+            {params.profile.user.contact}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecruiterProfile;