Release v1.0.2

src/app/layout.tsx

@@ -31,7 +31,7 @@ export const metadata: Metadata = {
     url: APP_CONST.BASE_URL,
     images: [
       {
-        url: `${APP_CONST.BASE_URL}/images/og.png?v=0`,
+        url: `${APP_CONST.BASE_URL}/images/og.jpg?v=0`,
         width: 1200,
         height: 630,
         alt: APP_CONST.NAME,

src/features/foods/components/DeleteFoodDialogContent.tsx

@@ -11,6 +11,7 @@ import { removeFood } from '@/features/foods/lib/actions';
 import { IContainer, IFood } from '@/types/definition';
 
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 interface IDeleteFoodDialogContentProps {
   /**
@@ -42,6 +43,7 @@ export const DeleteFoodDialogContent = ({
   containerId,
   foodId,
 }: IDeleteFoodDialogContentProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
   /**
    * Handle the cancel button click.
@@ -60,16 +62,20 @@ export const DeleteFoodDialogContent = ({
    * @returns void
    */
   const handleDelete = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
     if (!containerId || !foodId) return;
     const result = await removeFood(containerId, foodId);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
       onDialogClose();
       onParentClose?.();
+      setIsLoading(false);
     } else {
       alert('Successfully deleted!');
       onDialogClose();
       onParentClose?.();
+      setIsLoading(false);
       router.refresh();
     }
   };
@@ -88,7 +94,7 @@ export const DeleteFoodDialogContent = ({
             Cancel
           </Button>
         </DialogClose>
-        <Button variant="danger" size="sm" onClick={handleDelete}>
+        <Button variant="danger" size="sm" onClick={handleDelete} disabled={isLoading}>
           Delete
         </Button>
       </DialogFooter>

src/features/foods/components/Form/AddDrawerContent/index.tsx

@@ -24,7 +24,7 @@ import {
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
 import { AddDrawerBody } from './AddDrawerBody';
@@ -46,6 +46,7 @@ export const AddDrawerContent = ({
   containerIdNameMap,
   groupIdNameMap,
 }: IAddDrawerContentProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
   /**
    * Process when the cancel button is clicked
@@ -73,12 +74,16 @@ export const AddDrawerContent = ({
    * @param values The form values
    */
   const processSubmit: SubmitHandler<CreateFoodInputs> = async (values: CreateFoodInputs) => {
+    if (isLoading) return;
+    setIsLoading(true);
     const result = await createFood(values);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
+      setIsLoading(false);
     } else {
       alert('Successfully created');
       setIsDrawerOpen(false);
+      setIsLoading(false);
       router.refresh();
     }
   };
@@ -103,7 +108,7 @@ export const AddDrawerContent = ({
                 Cancel
               </Button>
             </DrawerClose>
-            <Button type="submit" variant="primary" size="sm">
+            <Button type="submit" variant="primary" size="sm" disabled={isLoading}>
               Add food
             </Button>
           </DrawerFooter>

src/features/foods/components/Form/EditDrawerContent/EditDrawerFooter.tsx

@@ -21,12 +21,17 @@ interface IEditDrawerFooterProps {
    * The ID of the food this drawer is for.
    */
   foodId?: IFood['id'];
+  /**
+   * Loading state of the form submission.
+   */
+  isLoading: boolean;
 }
 
 export const EditDrawerFooter = ({
   onDrawerClose,
   containerId,
   foodId,
+  isLoading,
 }: IEditDrawerFooterProps) => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
@@ -49,7 +54,7 @@ export const EditDrawerFooter = ({
           foodId={foodId}
         />
       </DialogRoot>
-      <Button type="submit" variant="primary" size="sm">
+      <Button type="submit" variant="primary" size="sm" disabled={isLoading}>
         Update
       </Button>
     </DrawerFooter>

src/features/foods/components/Form/EditDrawerContent/index.tsx

@@ -13,7 +13,7 @@ import {
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
 import { EditDrawerBody } from './EditDrawerBody';
@@ -41,7 +41,9 @@ export const EditDrawerContent = ({
   containerIdNameMap,
   groupIdNameMap,
 }: IEditDrawerContentProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
+
   const form = useForm<UpdateFoodInputs>({
     resolver: zodResolver(updateFoodFormSchema),
   });
@@ -68,12 +70,16 @@ export const EditDrawerContent = ({
    * @param values The form values
    */
   const processSubmit: SubmitHandler<UpdateFoodInputs> = async (values: UpdateFoodInputs) => {
+    if (isLoading) return;
+    setIsLoading(true);
     const result = await updateFood(values);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
+      setIsLoading(false);
     } else {
       alert('Successfully updated');
       onDrawerClose();
+      setIsLoading(false);
       router.refresh();
     }
   };
@@ -111,6 +117,7 @@ export const EditDrawerContent = ({
             onDrawerClose={onDrawerClose}
             containerId={food?.containerId}
             foodId={food?.id}
+            isLoading={isLoading}
           />
         </form>
       </Form>

src/features/groups/components/ContainerCardList/ContainerCard/ContainerCardDropdownMenu/DeleteContainerDialogContent.tsx

@@ -11,6 +11,7 @@ import { removeContainer } from '@/features/groups/lib/actions';
 import { IContainer } from '@/types/definition';
 
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 interface IDeleteContainerDialogContentProps {
   /**
@@ -32,6 +33,7 @@ export const DeleteContainerDialogContent = ({
   onParentClose,
   onDialogClose,
 }: IDeleteContainerDialogContentProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
   /**
    * Handle the cancel button click.
@@ -47,15 +49,19 @@ export const DeleteContainerDialogContent = ({
    * the dialog and dropdown menu will be disappeared after processing either case
    */
   const handleDelete = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
     const result = await removeContainer(containerId);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
       onDialogClose();
       onParentClose();
+      setIsLoading(false);
     } else {
       alert('Successfully deleted');
       onDialogClose();
       onParentClose();
+      setIsLoading(false);
       router.refresh();
     }
   };
@@ -74,7 +80,7 @@ export const DeleteContainerDialogContent = ({
             Cancel
           </Button>
         </DialogClose>
-        <Button variant="danger" size="sm" onClick={handleDelete}>
+        <Button variant="danger" size="sm" onClick={handleDelete} disabled={isLoading}>
           Delete
         </Button>
       </DialogFooter>

src/features/groups/components/ContainerCardList/ContainerCard/RenameContainerForm.tsx

@@ -15,7 +15,7 @@ import { IContainer } from '@/types/definition';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
-import { KeyboardEvent, useEffect, useRef } from 'react';
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -46,6 +46,8 @@ export const RenameContainerForm = ({
 }: IRenameContainerFormProps) => {
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
   const form = useForm<z.infer<typeof renameContainerFormSchema>>({
     resolver: zodResolver(renameContainerFormSchema),
     defaultValues: {
@@ -60,6 +62,8 @@ export const RenameContainerForm = ({
   const processSubmit: SubmitHandler<RenameContainerInputs> = async (
     values: RenameContainerInputs,
   ) => {
+    if (isLoading) return;
+    setIsLoading(true);
     const { containerName } = values;
     if (containerName === currentContainerName) {
       onClose();
@@ -69,10 +73,12 @@ export const RenameContainerForm = ({
     const result = await renameContainer(containerId, values);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
+      setIsLoading(false);
     } else {
       alert('Successfully renamed the container');
       form.reset();
       onClose();
+      setIsLoading(false);
       router.refresh();
     }
   };

src/features/groups/components/ContainerCardList/CreateContainerButton/CreateContainerBottomDrawerContent.tsx

@@ -20,7 +20,7 @@ import { IGroup } from '@/types/definition';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -44,6 +44,7 @@ export const CreateContainerDrawerContent = ({
   onClose,
   groupId,
 }: ICreateContainerDrawerContentProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
   const form = useForm<z.infer<typeof createContainerFormSchema>>({
     resolver: zodResolver(createContainerFormSchema),
@@ -59,12 +60,16 @@ export const CreateContainerDrawerContent = ({
   const processSubmit: SubmitHandler<CreateContainerInputs> = async (
     values: CreateContainerInputs,
   ) => {
+    if (isLoading) return;
+    setIsLoading(true);
     const result = await createContainer(values, groupId);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
+      setIsLoading(false);
     } else {
       alert('Successfully created');
       onClose();
+      setIsLoading(false);
       router.refresh();
     }
   };
@@ -104,7 +109,7 @@ export const CreateContainerDrawerContent = ({
                 Cancel
               </Button>
             </DrawerClose>
-            <Button type="submit" variant="primary" size="md">
+            <Button type="submit" variant="primary" size="md" disabled={isLoading}>
               Create
             </Button>
           </DrawerFooter>

src/features/groups/components/CreateGroupButton/CreateGroupDrawerContent.tsx

@@ -19,7 +19,7 @@ import { createGroupFormSchema, CreateGroupInputs } from '@/features/groups/lib/
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -29,6 +29,7 @@ interface ICreateGroupDrawerContentProps {
 }
 
 export const CreateGroupDrawerContent = ({ isOpen, onClose }: ICreateGroupDrawerContentProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
   const form = useForm<z.infer<typeof createGroupFormSchema>>({
     resolver: zodResolver(createGroupFormSchema),
@@ -42,14 +43,18 @@ export const CreateGroupDrawerContent = ({ isOpen, onClose }: ICreateGroupDrawer
    * @param values - The form values
    */
   const processSubmit: SubmitHandler<CreateGroupInputs> = async (values: CreateGroupInputs) => {
+    if (isLoading) return;
+    setIsLoading(true);
     const { groupName } = values;
     const result = await createGroup({ groupName });
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
+      setIsLoading(false);
     } else {
       alert('Successfully created the group');
       form.reset();
       onClose();
+      setIsLoading(false);
       router.refresh();
     }
   };
@@ -89,7 +94,7 @@ export const CreateGroupDrawerContent = ({ isOpen, onClose }: ICreateGroupDrawer
                 Cancel
               </Button>
             </DrawerClose>
-            <Button type="submit" variant="primary" size="md">
+            <Button type="submit" variant="primary" size="md" disabled={isLoading}>
               Create
             </Button>
           </DrawerFooter>

src/features/groups/components/DeleteGroupDialogContent.tsx

@@ -11,6 +11,7 @@ import { removeGroup } from '@/features/groups/lib/actions';
 import { IGroup } from '@/types/definition';
 
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 interface IDeleteGroupDialogContentProps {
   /**
@@ -37,6 +38,7 @@ export const DeleteGroupDialogContent = ({
   onDialogClose,
   navigateOnSuccess,
 }: IDeleteGroupDialogContentProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
   /**
    * Handle the cancel button click.
@@ -52,16 +54,20 @@ export const DeleteGroupDialogContent = ({
    * @returns void
    */
   const handleDelete = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
     const result = await removeGroup(groupId);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
       onDialogClose();
       onParentClose?.();
+      setIsLoading(false);
     } else {
       alert('Successfully deleted');
       onDialogClose();
-      navigateOnSuccess?.();
       onParentClose?.();
+      setIsLoading(false);
+      navigateOnSuccess?.();
       router.refresh();
     }
   };
@@ -80,7 +86,7 @@ export const DeleteGroupDialogContent = ({
             Cancel
           </Button>
         </DialogClose>
-        <Button variant="danger" size="sm" onClick={handleDelete}>
+        <Button variant="danger" size="sm" onClick={handleDelete} disabled={isLoading}>
           Delete
         </Button>
       </DialogFooter>