profile-update.tsx

import React, { useEffect } from "react";

import { useOne, useResourceParams, useInvalidate, HttpError, useCustomMutation } from "@refinedev/core";

import { SheetHeader, SheetTitle } from "@app/components/sheet";

import { Sheet, SheetContent } from "@app/components/sheet";
import type { CreateOrUpdateProfileRequest, ErrorResponseDto, ProfileEntity } from "@app/api";
import { Button } from "@app/@shadcn/ui/button";

import ProfileEditForm from "@app/components/profiles/form";
import { ArrowLeft } from "lucide-react";
import { AxiosError } from "axios";
import { combineErrorMessages } from "@app/lib/string";

type ProfileEditPropsTypes = {
  profileId?: string;
  onClose: () => void;
};

const ProfileEdit: React.FC<ProfileEditPropsTypes> = ({ profileId, onClose }) => {
  const invalidate = useInvalidate();

  const { data: profileData, isSuccess: profileIsSuccess } = useOne<ProfileEntity>({
    resource: "dashboard/profiles",
    id: profileId,
    queryOptions: {
      enabled: !!profileId,
    },
  });

  const { mutate: updateProfileMutate, isLoading: updateProfileMutateIsLoading } = useCustomMutation<
    ProfileEntity,
    HttpError,
    CreateOrUpdateProfileRequest
  >({
    mutationOptions: {
      onSettled(data, error) {
        if (!error) {
          invalidate({
            resource: "dashboard/profiles",
            invalidates: ["detail", "list"],
            id: profileId,
          });
        }
      },
    },
  });

  function onSubmit(values: ProfileFormType) {
    if (profileData?.data.ownerId) {
      updateProfileMutate({
        method: "patch",
        url: `v1/dashboard/profiles/${profileId}`,
        values: {
          name: values.name,
          birthDate: values.birthDate,
          gender: values.gender,
          imageUrl: values.imageUrl,
          ownerId: profileData?.data.ownerId,
        },
        errorNotification: (error) => {
          const axiosError = error as unknown as AxiosError<ErrorResponseDto>;

          return {
            type: "error",
            message: combineErrorMessages(axiosError.response?.data?.message, "An error occurred"),
          };
        },
        successNotification: () => {
          onClose();

          return {
            message: "Prompt created successfully",
            type: "success",
          };
        },
      });
    }
  }

  if (!profileData?.data) {
    return null;
  }

  return (
    <Sheet open={profileIsSuccess} onOpenChange={() => onClose()}>
      <SheetContent side="right" className="overflow-y-auto flex flex-col w-full pt-0 md:w-96">
        <SheetHeader className="sticky top-0 pt-6 pb-2 bg-white z-10">
          <div className="flex items-center -ml-4 gap-2">
            <Button variant="ghost" size="icon" onClick={onClose}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <SheetTitle>Edit Profile</SheetTitle>
          </div>
        </SheetHeader>
        <ProfileEditForm
          onSubmit={onSubmit}
          isLoading={updateProfileMutateIsLoading}
          defaultValues={{
            name: profileData.data.name,
            gender: profileData.data.gender,
            imageUrl: profileData.data.imageUrl,
            birthDate: profileData.data.birthDate,
            ownerId: profileData.data.ownerId,
          }}
          isEdit
        />
      </SheetContent>
    </Sheet>
  );
};

export default ProfileEdit;