import React, { useEffect, useState } from "react"; // next import Link from "next/link"; import Image from "next/image"; import type { NextPage } from "next"; // swr import useSWR from "swr"; // react hook form import { useForm } from "react-hook-form"; // react dropzone import Dropzone from "react-dropzone"; // hooks import useUser from "lib/hooks/useUser"; import useToast from "lib/hooks/useToast"; // hoc import withAuth from "lib/hoc/withAuthWrapper"; // layouts import AppLayout from "layouts/AppLayout"; // constants import { USER_ISSUE, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys"; // services import userService from "lib/services/user.service"; import fileServices from "lib/services/file.service"; import workspaceService from "lib/services/workspace.service"; // ui import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "ui"; // icons import { ChevronRightIcon, ClipboardDocumentListIcon, PencilIcon, RectangleStackIcon, UserIcon, UserPlusIcon, XMarkIcon, } from "@heroicons/react/24/outline"; // types import type { IIssue, IUser } from "types"; const defaultValues: Partial = { avatar: "", first_name: "", last_name: "", email: "", }; const Profile: NextPage = () => { const [image, setImage] = useState(null); const [isImageUploading, setIsImageUploading] = useState(false); const [isEditing, setIsEditing] = useState(false); const { user: myProfile, mutateUser, projects, activeWorkspace } = useUser(); const { setToastAlert } = useToast(); const onSubmit = (formData: IUser) => { const payload: Partial = { id: formData.id, first_name: formData.first_name, last_name: formData.last_name, avatar: formData.avatar, }; userService .updateUser(payload) .then((response) => { mutateUser(response, false); setIsEditing(false); setToastAlert({ title: "Success", type: "success", message: "Profile updated successfully", }); }) .catch((error) => { console.log(error); }); }; const { register, handleSubmit, reset, watch, setValue, formState: { errors, isSubmitting }, } = useForm({ defaultValues }); const { data: myIssues } = useSWR( myProfile && activeWorkspace ? USER_ISSUE(activeWorkspace.slug) : null, myProfile && activeWorkspace ? () => userService.userIssues(activeWorkspace.slug) : null ); const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations() ); useEffect(() => { reset({ ...defaultValues, ...myProfile }); }, [myProfile, reset]); const quickLinks = [ { icon: RectangleStackIcon, title: "My Issues", number: myIssues?.length ?? 0, description: "View the list of issues assigned to you for this workspace.", href: "/me/my-issues", }, { icon: ClipboardDocumentListIcon, title: "My Projects", number: projects?.length ?? 0, description: "View the list of projects of the workspace.", href: "/projects", }, { icon: UserPlusIcon, title: "Workspace Invitations", number: invitations?.length ?? 0, description: "View your workspace invitations.", href: "/invitations", }, ]; return (
{myProfile ? ( <>
{ setImage(files[0]); }} > {({ getRootProps, getInputProps, open }) => (
{(!watch("avatar") || watch("avatar") === "") && (!image || image === null) ? ( ) : (
{myProfile.first_name}
)}

Max file size is 500kb.
Supported file types are .jpg and .png.

)}

First Name

{isEditing ? ( ) : (

{myProfile.first_name}

)}

Last Name

{isEditing ? ( ) : (

{myProfile.last_name}

)}

Email ID

{myProfile.email}

{isEditing && (
)}

Quick Links

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

{item.title}

{item.number}

{item.description}

))}
) : (
)}
); }; export default withAuth(Profile);