import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import { Controller, useForm } from "react-hook-form"; // services import { FileService } from "services/file.service"; import { UserService } from "services/user.service"; // hooks import useUserAuth from "hooks/use-user-auth"; import useToast from "hooks/use-toast"; // layouts import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy"; // components import { ImagePickerPopover, ImageUploadModal } from "components/core"; import { SettingsSidebar } from "components/project"; // ui import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "@plane/ui"; import { CustomSearchSelect, CustomSelect } from "components/ui"; // icons import { User2, UserCircle2 } from "lucide-react"; // types import type { NextPage } from "next"; import type { IUser } from "types"; // constants import { USER_ROLES } from "constants/workspace"; import { TIME_ZONES } from "constants/timezones"; const defaultValues: Partial = { avatar: "", cover_image: "", first_name: "", last_name: "", email: "", role: "Product / Project Manager", user_timezone: "Asia/Kolkata", }; const fileService = new FileService(); const userService = new UserService(); const Profile: NextPage = () => { const [isRemoving, setIsRemoving] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); // router const router = useRouter(); const { workspaceSlug } = router.query; // form info const { handleSubmit, reset, watch, setValue, control, formState: { errors, isSubmitting }, } = useForm({ defaultValues }); const { setToastAlert } = useToast(); const { user: myProfile, mutateUser } = useUserAuth(); useEffect(() => { reset({ ...defaultValues, ...myProfile }); }, [myProfile, reset]); const onSubmit = async (formData: IUser) => { if (formData.first_name === "" || formData.last_name === "") { setToastAlert({ type: "error", title: "Error!", message: "First and last names are required.", }); return; } const payload: Partial = { first_name: formData.first_name, last_name: formData.last_name, avatar: formData.avatar, cover_image: formData.cover_image, role: formData.role, display_name: formData.display_name, user_timezone: formData.user_timezone, }; await userService .updateUser(payload) .then((res) => { mutateUser((prevData: any) => { if (!prevData) return prevData; return { ...prevData, ...res }; }, 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); fileService.deleteUserFile(url).then(() => { if (updateUser) userService .updateUser({ avatar: "" }) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Profile picture removed successfully.", }); mutateUser((prevData: any) => { if (!prevData) return prevData; return { ...prevData, avatar: "" }; }, false); setIsRemoving(false); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "There was some error in deleting your profile picture. Please try again.", }); }) .finally(() => setIsRemoving(false)); }); }; const timeZoneOptions = TIME_ZONES.map((timeZone) => ({ value: timeZone.value, query: timeZone.label + " " + timeZone.value, content: timeZone.label, })); return ( router.back()}> } > setIsImageUploadModalOpen(false)} isRemoving={isRemoving} handleDelete={() => handleDelete(myProfile?.avatar, true)} onSuccess={(url) => { setValue("avatar", url); handleSubmit(onSubmit)(); setIsImageUploadModalOpen(false); }} value={watch("avatar") !== "" ? watch("avatar") : undefined} userImage /> {myProfile ? (
{myProfile?.first_name
( { setValue("cover_image", imageUrl); }} control={control} value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"} /> )} />
{`${watch("first_name")} ${watch("last_name")}`}
{watch("email")}
View Profile

First Name

( )} />

Last Name

( )} />

Email

( )} />

Role

( {USER_ROLES.map((item) => ( {item.label} ))} )} /> {errors.role && Please select a role}

Display name

{ if (value.trim().length < 1) return "Display name can't be empty."; if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces."; if (value.replace(/\s/g, "").length < 1) return "Display name must be at least 1 characters long."; if (value.replace(/\s/g, "").length > 20) return "Display name must be less than 20 characters long."; return true; }, }} render={({ field: { value, onChange, ref } }) => ( )} />

Timezone

( t.value === value)?.label ?? value : "Select a timezone"} options={timeZoneOptions} onChange={onChange} optionsClassName="w-full" input /> )} /> {errors.role && Please select a role}
) : (
)}
); }; export default Profile;