feat(core): add wishlist details

core/app/[locale]/(default)/account/(tabs)/_components/modal.tsx

@@ -9,7 +9,7 @@ import { Button } from '~/components/ui/button';
 interface Props extends PropsWithChildren {
   actionHandler?: MouseEventHandler<HTMLButtonElement>;
   title: string;
-  trigger: React.ReactNode;
+  trigger?: React.ReactNode;
   descriptionText?: string;
   confirmationText?: string;
   abortText?: string;

core/app/[locale]/(default)/account/(tabs)/wishlists/_components/delete-wishlist-form/_actions/delete-wishlists.ts

@@ -9,7 +9,7 @@ const DeleteWishlistSchema = z.object({
   entityIds: z.array(z.number()),
 });
 
-export const deleteWishlists = async (formData: FormData) => {
+export const deleteWishlists = async (formData: FormData, revalidate: boolean) => {
   const parsedData = DeleteWishlistSchema.parse({
     entityIds: [Number(formData.get('id'))],
   });
@@ -21,7 +21,9 @@ export const deleteWishlists = async (formData: FormData) => {
   try {
     const result = await deleteWishlistsMutation({ input });
 
-    revalidatePath('/account/wishlists', 'page');
+    if (revalidate) {
+      revalidatePath('/account/wishlists', 'page');
+    }
 
     if (result === 'success') {
       return {

core/app/[locale]/(default)/account/(tabs)/wishlists/_components/delete-wishlist-form/index.tsx

@@ -26,17 +26,23 @@ const SubmitButton = () => {
 interface DeleteWishlistFormProps {
   id: number;
   name: string;
-  onWishistDeleted: (id: number, name: string) => void;
+  onWishlistDeleted: (id: number, name: string) => void;
+  revalidate?: boolean;
 }
 
-export const DeleteWishlistForm = ({ onWishistDeleted, id, name }: DeleteWishlistFormProps) => {
+export const DeleteWishlistForm = ({
+  onWishlistDeleted,
+  id,
+  name,
+  revalidate = true,
+}: DeleteWishlistFormProps) => {
   const t = useTranslations('Account.Wishlist');
 
   const onSubmit = async (formData: FormData) => {
-    const submit = await deleteWishlists(formData);
+    const submit = await deleteWishlists(formData, revalidate);
 
     if (submit.status === 'success') {
-      onWishistDeleted(id, name);
+      onWishlistDeleted(id, name);
     }
   };
 

core/app/[locale]/(default)/account/(tabs)/wishlists/_components/update-wishlist-form/_actions/update-wishlist.ts

@@ -0,0 +1,44 @@
+'use server';
+
+import { z } from 'zod';
+
+import { updateWishlist as updateWishlistMutation } from '~/client/mutations/update-wishlist';
+
+const UpdateWishlistSchema = z.object({
+  entityId: z.string(),
+  name: z.string(),
+});
+
+export const updateWishlist = async (formData: FormData) => {
+  const { entityId, name } = UpdateWishlistSchema.parse({
+    entityId: formData.get('entityId'),
+    name: formData.get('name'),
+  });
+
+  const input = {
+    data: {
+      name,
+    },
+    entityId: +entityId,
+  };
+
+  try {
+    const updatedWishlist = await updateWishlistMutation({ input });
+
+    if (updatedWishlist) {
+      return {
+        status: 'success' as const,
+        data: updatedWishlist,
+      };
+    }
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return {
+        status: 'error' as const,
+        message: error.message,
+      };
+    }
+  }
+
+  return { status: 'error' as const, message: 'Unknown error.' };
+};

core/app/[locale]/(default)/account/(tabs)/wishlists/_components/update-wishlist-form/index.tsx

@@ -0,0 +1,119 @@
+import * as DialogPrimitive from '@radix-ui/react-alert-dialog';
+import { useTranslations } from 'next-intl';
+import { ChangeEvent, useState } from 'react';
+import { useFormStatus } from 'react-dom';
+
+import { createWishlist as createWishlistMutation } from '~/client/mutations/create-wishlist';
+import { Button } from '~/components/ui/button';
+import {
+  Field,
+  FieldControl,
+  FieldLabel,
+  FieldMessage,
+  Form,
+  FormSubmit,
+  Input,
+} from '~/components/ui/form';
+
+import { updateWishlist } from './_actions/update-wishlist';
+
+type Wishlist = NonNullable<Awaited<ReturnType<typeof createWishlistMutation>>>;
+
+interface UpdateWishlistFormProps {
+  entityId: number;
+  name: string;
+  onWishlistUpdated: (updatedWishlist: Wishlist) => void;
+}
+
+const SubmitButton = () => {
+  const { pending } = useFormStatus();
+  const t = useTranslations('Account.Wishlist');
+
+  return (
+    <Button
+      className="relative w-full items-center px-8 py-2 lg:w-fit"
+      loading={pending}
+      loadingText={t('onSubmitText')}
+      variant="primary"
+    >
+      {t('update')}
+    </Button>
+  );
+};
+
+export const UpdateWishlistForm = ({
+  entityId,
+  name,
+  onWishlistUpdated,
+}: UpdateWishlistFormProps) => {
+  const [isInputValid, setInputValidation] = useState(true);
+
+  const t = useTranslations('Account.Wishlist');
+
+  const handleInputValidation = (e: ChangeEvent<HTMLInputElement>) => {
+    const validationStatus = e.target.validity.valueMissing;
+
+    setInputValidation(!validationStatus);
+  };
+
+  const onSubmit = async (formData: FormData) => {
+    const submit = await updateWishlist(formData);
+
+    if (submit.status === 'success') {
+      onWishlistUpdated(submit.data);
+    }
+  };
+
+  return (
+    <Form action={onSubmit} className="w-full" onSubmit={(e) => e.stopPropagation()}>
+      <Field className="relative space-y-2 pb-7" name="name">
+        <FieldLabel htmlFor="wishlist-name">{t('inputLabel')}</FieldLabel>
+        <FieldControl asChild>
+          <Input
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+            error={!isInputValid}
+            id="wishlist-name"
+            onChange={handleInputValidation}
+            onInvalid={handleInputValidation}
+            required
+            type="text"
+          />
+        </FieldControl>
+        <FieldMessage
+          className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error"
+          match="valueMissing"
+        >
+          {t('emptyName')}
+        </FieldMessage>
+        <FieldMessage
+          className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error"
+          match={(value) => {
+            const isValid = value !== name;
+
+            setInputValidation(isValid);
+
+            return !isValid;
+          }}
+        >
+          {t('differentName')}
+        </FieldMessage>
+      </Field>
+      <Field name="entityId">
+        <FieldControl asChild>
+          <Input id="entityId" type="hidden" value={entityId} />
+        </FieldControl>
+      </Field>
+      <div className="mt-3 flex flex-col lg:flex-row">
+        <FormSubmit asChild>
+          <SubmitButton />
+        </FormSubmit>
+        <DialogPrimitive.Cancel asChild>
+          <Button className="mt-2 w-full border-0 lg:ms-2 lg:mt-0 lg:w-fit" variant="secondary">
+            {t('cancel')}
+          </Button>
+        </DialogPrimitive.Cancel>
+      </div>
+    </Form>
+  );
+};

core/app/[locale]/(default)/account/(tabs)/wishlists/_components/wishlist-book.tsx

@@ -109,7 +109,9 @@ const Wishlist = ({ setWishlistBook, wishlist }: WishlistProps) => {
 
   return (
     <>
-      <h3 className="mb-2 text-lg font-bold">{name}</h3>
+      <h3 className="mb-2 text-lg font-bold">
+        <Link href={`?wishlistId=${entityId}`}>{name}</Link>
+      </h3>
       <div className="flex w-full flex-col items-start justify-between lg:flex-row">
         {items.length === 0 ? (
           <p className="flex-1 py-4 text-center">{t('noItems')}</p>
@@ -239,7 +241,7 @@ const Wishlist = ({ setWishlistBook, wishlist }: WishlistProps) => {
               <DeleteWishlistForm
                 id={entityId}
                 name={name}
-                onWishistDeleted={handleWishlistDeleted}
+                onWishlistDeleted={handleWishlistDeleted}
               />
             </Modal>
           </div>