import React, { useEffect, useState } from "react"; import Image from "next/image"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // 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 { WorkspaceAuthorizationLayout } from "layouts/auth-layout"; // components import { ImageUploadModal } from "components/core"; // ui import { CustomSelect, DangerButton, Input, SecondaryButton, Spinner } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons import { UserIcon } from "@heroicons/react/24/outline"; // types import type { NextPage } from "next"; import type { IUser } from "types"; // constants import { USER_ROLES } from "constants/workspace"; import SettingsNavbar from "layouts/settings-navbar"; const defaultValues: Partial = { avatar: "", first_name: "", last_name: "", email: "", role: "", }; const Profile: NextPage = () => { const [isEditing, setIsEditing] = useState(false); const [isRemoving, setIsRemoving] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); const { register, handleSubmit, reset, watch, setValue, control, formState: { errors, isSubmitting }, } = useForm({ defaultValues }); const { setToastAlert } = useToast(); const { user: myProfile, mutateUser } = useUser(); useEffect(() => { reset({ ...defaultValues, ...myProfile }); }, [myProfile, reset]); const onSubmit = async (formData: IUser) => { const payload: Partial = { first_name: formData.first_name, last_name: formData.last_name, avatar: formData.avatar, role: formData.role, }; await 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) => { setToastAlert({ type: "success", title: "Success!", message: "Profile picture removed successfully.", }); mutateUser((prevData) => { if (!prevData) return prevData; return { ...prevData, user: res }; }, false); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "There was some error in deleting your profile picture. Please try again.", }); }) .finally(() => setIsRemoving(false)); }); }; return ( } > setIsImageUploadModalOpen(false)} onSuccess={(url) => { setValue("avatar", url); handleSubmit(onSubmit)(); setIsImageUploadModalOpen(false); }} value={watch("avatar") !== "" ? watch("avatar") : undefined} userImage /> {myProfile ? (

Profile Settings

This information will be visible to only you.

Profile Picture

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

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

Full Name

This name will be reflected on all the projects you are working on.

Email

The email address that you are using.

Role

Add your role.

( {USER_ROLES.map((item) => ( {item.label} ))} )} />
{isSubmitting ? "Updating..." : "Update profile"}
) : (
)}
); }; export default Profile;