Skip to content

Commit

Permalink
Recruiter profile design change (#149)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Princekumarofficial
Princekumarofficial authored Aug 10, 2024
1 parent 3780463 commit c797716
Show file tree
Hide file tree
Showing 9 changed files with 611 additions and 455 deletions.
22 changes: 2 additions & 20 deletions src/app/(routes)/faculty/profile/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,14 @@

import React, { useEffect, useState } from "react";
import FacultyProfile from "@/components/Faculty/Profile";
import { fetchProfile } from "@/helpers/faculty/api";
import loadingImg from "@/components/Faculty/loadingSpinner.svg";
import { ProfileFC } from "@/helpers/faculty/types";
import Loader from "@/components/Loader/loader";

const Profile = ({ params }: { params: { facultyId: string } }) => {
const [data, setData] = useState<ProfileFC>();
const [loading, setLoading] = useState(true);

useEffect(() => {
const profileData = async () => {
const jsonData = await fetchProfile();
setData(jsonData);
setLoading(false);
};
profileData();
}, []);

return (
<div className="h-screen grid justify-center items-center">
{loading && (
<div className="h-screen w-full flex justify-center items-center">
<Loader />
</div>
)}
{data && <FacultyProfile profile={data} />}
<div className="h-screen">
<FacultyProfile />
</div>
);
};
Expand Down
35 changes: 2 additions & 33 deletions src/app/(routes)/recruiter/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,12 @@
"use client";

import React, { useEffect, useState } from "react";
import React from "react";
import RecruiterProfile from "@/components/Recruiters/profile";
import { fetchProfile } from "@/helpers/recruiter/api";
import loadingImg from "@/../public/loadingSpinner.svg";
import { ProfileFC } from "@/helpers/recruiter/types";
import EditProfilePage from "@/components/Recruiters/editProfile";
import Loader from "@/components/Loader/loader";

const Profile = () => {
const [data, setData] = useState<ProfileFC>();
const [loading, setLoading] = useState(true);
const [editMode, setEditMode] = useState(false);

useEffect(() => {
const profileData = async () => {
const jsonData = await fetchProfile();
setData(jsonData);
setLoading(false);
};
profileData();
}, []);

return (
<div className="h-screen flex justify-center">
{loading && (
<div className="h-screen w-full flex justify-center items-center">
<Loader />
</div>
)}
{data &&
(editMode ? (
<EditProfilePage data={data} />
) : (
<RecruiterProfile
profile={data}
setEdit={() => setEditMode(!editMode)}
/>
))}
<RecruiterProfile />
</div>
);
};
Expand Down
35 changes: 2 additions & 33 deletions src/app/(routes)/recruiter/profile/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,11 @@
"use client";

import React, { useEffect, useState } from "react";
import React from "react";
import RecruiterProfile from "@/components/Recruiters/profile";
import { fetchProfile } from "@/helpers/recruiter/api";
import loadingImg from "@/../public/loadingSpinner.svg";
import { ProfileFC } from "@/helpers/recruiter/types";
import EditProfilePage from "@/components/Recruiters/editProfile";
import Loader from "@/components/Loader/loader";
const Profile = () => {
const [data, setData] = useState<ProfileFC>();
const [loading, setLoading] = useState(true);
const [editMode, setEditMode] = useState(false);

useEffect(() => {
const profileData = async () => {
const jsonData = await fetchProfile();
setData(jsonData);
setLoading(false);
};
profileData();
}, []);

return (
<div className="h-screen flex justify-center">
{loading && (
<div className="h-screen w-full flex justify-center items-center">
<Loader />
</div>
)}
{data &&
(editMode ? (
<EditProfilePage data={data} />
) : (
<RecruiterProfile
profile={data}
setEdit={() => setEditMode(!editMode)}
/>
))}
<RecruiterProfile />
</div>
);
};
Expand Down
69 changes: 41 additions & 28 deletions src/components/Admin/Profile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
"use client";
import React, { useEffect, useState } from "react";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import Cookies from "js-cookie";
import { getUserById } from "@/helpers/api";
import Loader from "../Loader/loader";
import { ProfileLoader, ProfileNavLoader } from "../Loader/loaders";
import PersonIcon from "@mui/icons-material/Person";

interface ProfileProps {
name: string;
Expand All @@ -14,47 +14,60 @@ interface ProfileProps {

const AdminProfile = () => {
const [profile, setProfile] = useState<ProfileProps>();
const [loading, setLoading] = useState(true);

useEffect(() => {
const setData = async () => {
const user = Cookies.get("user");
const userId = JSON.parse(user).id;
const data = await getUserById(userId);
setProfile(data[0]);
setLoading(false);
};
setData();
}, []);

return (
<div>
<div className="grid justify-center border-4 border-black rounded-lg px-12 py-8 md:w-max w-[95vw]">
<div className="flex w-full justify-between items-center">
<AccountCircleIcon sx={{ fontSize: "5rem" }} />
</div>
{profile ? (
<div className="mt-8 p-8 rounded-lg bg-gray-100 flex flex-col flex-wrap">
<div>
<span className="font-semibold">Name: </span>
{profile.name}
</div>
<div>
<span className="font-semibold">Email: </span>
{profile.email}
</div>
<div>
<span className="font-semibold">Role: </span>
{profile.role}
<div className="w-full flex justify-center mt-16">
<div className="w-full lg:w-2/3 md:w-3/4">
<div className="bg-white shadow-md rounded-lg overflow-hidden w-full">
<div className="flex">
<div className="w-1/3 bg-gradient-to-br from-gray-400 to-gray-900 text-center text-white py-5">
<div className="mb-6">
<PersonIcon sx={{ fontSize: "6rem" }} />
</div>
{loading ? (
<ProfileNavLoader />
) : (
<>
<h6 className="text-lg font-semibold">{profile.name}</h6>
<p>{profile.role}</p>
</>
)}
</div>
<div>
<span className="font-semibold">Contact: </span>
{profile.contact}
<div className="w-2/3">
<div className="p-5">
<div className="flex justify-between items-center mb-5 pb-2 border-b border-gray-300">
Self Details
</div>
{loading ? (
<ProfileLoader />
) : (
<div className="mb-4 overflow-x-auto">
<div>
<span className="font-semibold">Email: </span>
<span>{profile.email}</span>
</div>
<div>
<span className="font-semibold">Contact: </span>
<span>{profile.contact}</span>
</div>
</div>
)}
</div>
</div>
</div>
) : (
<div className="p-12">
<Loader />
</div>
)}
</div>
</div>
</div>
);
Expand Down
102 changes: 68 additions & 34 deletions src/components/Faculty/Profile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React, { useState } from "react";
import profileImg from "@/../public/profile-icon.svg";
import React, { useState, useEffect } from "react";
import { Button } from "../ui/button";
import { Dialog, DialogTrigger, DialogContent } from "../ui/dialog";
import { patchProfile } from "@/helpers/faculty/api";
import toast from "react-hot-toast";
import { ProfileFC, updateProfileFC } from "@/helpers/faculty/types";
import PersonIcon from "@mui/icons-material/Person";
import { fetchProfile } from "@/helpers/faculty/api";
import { ProfileLoader, ProfileNavLoader } from "../Loader/loaders";

const EditForm = (params: { profile: ProfileFC }) => {
const [email, updateEmail] = useState<string>(params.profile.user.email);
Expand All @@ -27,7 +29,7 @@ const EditForm = (params: { profile: ProfileFC }) => {
if (res) {
window.location.reload();
} else {
toast.error("Some Error Occured");
toast.error("Some Error Occurred");
}
};
triggerUpdate();
Expand Down Expand Up @@ -88,38 +90,70 @@ const EditForm = (params: { profile: ProfileFC }) => {
);
};

const FacultyProfile = (params: { profile: ProfileFC }) => {
return (
<div>
<div className="grid justify-center border-4 border-black 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>
const FacultyProfile = () => {
const [data, setData] = useState<ProfileFC>();
const [loading, setLoading] = useState(true);

<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">Department: </span>
{params.profile.department}
</div>
<div>
<span className="font-semibold">Email: </span>
{params.profile.user.email}
</div>
<div>
<span className="font-semibold">Contact: </span>
{params.profile.user.contact}
useEffect(() => {
const profileData = async () => {
const jsonData = await fetchProfile();
setData(jsonData);
setLoading(false);
};
profileData();
}, []);

return (
<div className="w-full flex justify-center mt-16">
<div className="w-full lg:w-2/3 md:w-3/4">
<div className="bg-white shadow-md rounded-lg overflow-hidden w-full">
<div className="flex">
<div className="w-1/3 bg-gradient-to-br from-gray-400 to-gray-900 text-center text-white py-5">
<div className="mb-6">
<PersonIcon sx={{ fontSize: "6rem" }} />
</div>
{loading ? (
<ProfileNavLoader />
) : (
<>
<h6 className="text-lg font-semibold">{data.user.name}</h6>
<p>{data.department}</p>
</>
)}
</div>
<div className="w-2/3">
<div className="p-5">
<div className="flex justify-between items-center mb-5 pb-2 border-b border-gray-300">
Faculty Details
{loading || (
<Dialog>
<DialogTrigger asChild>
<Button>Edit Details</Button>
</DialogTrigger>
<DialogContent>
<EditForm profile={data} />
</DialogContent>
</Dialog>
)}
</div>
<div className="mb-4">
{loading ? (
<ProfileLoader />
) : (
<>
<div>
<span className="font-semibold">Email: </span>
<span>{data.user.email}</span>
</div>
<div>
<span className="font-semibold">Contact: </span>
<span>{data.user.contact}</span>
</div>
</>
)}
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit c797716

Please sign in to comment.