import React, { useEffect, useState } from "react"; import Link from "next/link"; import Image from "next/image"; // react-hook-form import { useForm } from "react-hook-form"; // lib import { requiredAuth } from "lib/auth"; // services import fileService from "services/file.service"; import userService from "services/user.service"; // hooks import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; // layouts import AppLayout from "layouts/app-layout"; // components import { ImageUploadModal } from "components/core"; // ui import { DangerButton, Input, SecondaryButton, Spinner } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons import { ChevronRightIcon, PencilIcon, RectangleStackIcon, UserIcon, UserPlusIcon, XMarkIcon, } from "@heroicons/react/24/outline"; // types import type { NextPage, GetServerSidePropsContext } from "next"; import type { IUser } from "types"; import { useRouter } from "next/dist/client/router"; const defaultValues: Partial = { avatar: "", first_name: "", last_name: "", email: "", }; const Profile: NextPage = () => { const [isEditing, setIsEditing] = useState(false); const [isRemoving, setIsRemoving] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { register, handleSubmit, reset, watch, setValue, formState: { errors, isSubmitting }, } = useForm({ defaultValues }); const { setToastAlert } = useToast(); const { user: myProfile, mutateUser, assignedIssuesLength, workspaceInvitesLength } = useUser(); useEffect(() => { reset({ ...defaultValues, ...myProfile }); }, [myProfile, reset]); const onSubmit = (formData: IUser) => { const payload: Partial = { first_name: formData.first_name, last_name: formData.last_name, avatar: formData.avatar, }; userService .updateUser(payload) .then((res) => { mutateUser((prevData) => { if (!prevData) return prevData; return { ...prevData, user: { ...payload, ...res } }; }, false); setIsEditing(false); setToastAlert({ type: "success", title: "Success!", message: "Profile updated successfully.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "There was some error in updating your profile. Please try again.", }); }); }; const handleDelete = (url: string | null | undefined, updateUser: boolean = false) => { if (!url) return; setIsRemoving(true); const index = url.indexOf(".com"); const asset = url.substring(index + 5); fileService.deleteUserFile(asset).then(() => { if (updateUser) userService .updateUser({ avatar: "" }) .then((res) => { setIsRemoving(false); setToastAlert({ type: "success", title: "Success!", message: "Profile picture removed successfully.", }); mutateUser((prevData) => { if (!prevData) return prevData; return { ...prevData, user: res }; }, false); }) .catch(() => { setIsRemoving(false); setToastAlert({ type: "error", title: "Error!", message: "There was some error in deleting your profile picture. Please try again.", }); }); }); }; const quickLinks = [ { icon: RectangleStackIcon, title: "Assigned Issues", number: assignedIssuesLength, description: "View issues assigned to you.", href: `/${workspaceSlug}/me/my-issues`, }, { icon: UserPlusIcon, title: "Workspace Invitations", number: workspaceInvitesLength, description: "View your workspace invitations.", href: "/invitations", }, ]; return ( } > setIsImageUploadModalOpen(false)} onSuccess={(url) => { handleDelete(myProfile?.avatar); setValue("avatar", url); handleSubmit(onSubmit)(); setIsImageUploadModalOpen(false); }} value={watch("avatar") !== "" ? watch("avatar") : undefined} userImage />
{myProfile ? ( <>
{!watch("avatar") || watch("avatar") === "" ? ( ) : (
{myProfile.first_name} setIsImageUploadModalOpen(true)} />
)}

Max file size is 5MB.
Supported file types are .jpg and .png.

setIsImageUploadModalOpen(true)}> Upload new {myProfile.avatar && myProfile.avatar !== "" && ( handleDelete(myProfile.avatar, true)} loading={isRemoving} > {isRemoving ? "Removing..." : "Remove"} )}

First Name

{isEditing ? ( ) : (

{myProfile.first_name}

)}

Last Name

{isEditing ? ( ) : (

{myProfile.last_name}

)}

Email ID

{myProfile.email}

{isEditing && (
{isSubmitting ? "Updating Profile..." : "Update Profile"}
)}

Quick Links

{quickLinks.map((item, index) => (

{item.title}

{item.number}

{item.description}

))}
) : (
)}
); }; export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { const user = await requiredAuth(ctx.req?.headers.cookie); const redirectAfterSignIn = ctx.resolvedUrl; if (!user) { return { redirect: { destination: `/signin?next=${redirectAfterSignIn}`, permanent: false, }, }; } return { props: { user, }, }; }; export default Profile;