Fix: Refresh after api call (#270)

* fix: add router.refresh to api calls

* feat: add `router.refresh()` to create container drawer

* feat: apply `router.refresh()` to rename container form

* feat: apply `router.refresh()` to delete group container

* feat: apply `router.refresh()` to delete container dialog

* feat: apply `router.refresh()` to rename group drawer

* feat: apply `router.refresh()` tp rename user form

* refactor: `router.refresh()` before alert

* fix: `router.refresh()` after navigation in `DeleteGroupDialogContent`

* fix: `router.refresh()` after dialog close in `DeleteContainerDialogContent`

* fix: set `router.refresh()` at the last in `DeleteFoodDialogContent`

* fix: place `router.refresh()` at the last in `AddDrawerContent`

* fix: place `router.refresh` at the last in `FoodEditDrawerContent`

* fix: place `router.refresh()` at the end in `RenameUserForm`

* fix: place `router.refresh()` at the last in `RenameGroupForm`

* fix: place `router.refresh()` at the last in `RenameGroupDrawerContent`

* fix: place `router.refresh()` at the last in `DeleteFoodDialogContent`

* fix: place `router.refresh()` at the last in `DeleteGroupDialogContent`

* fix: place `router.refresh()` at the last in `RenameContainerForm`

* fix: place `router.refresh()` at the last in `DeleteContainerDialogContent`

* fix: place `router.refresh()` at the last in `CreateContainerBottomDrawerContent`

* fix: place `router.refresh()` at the last in `CreateGroupDrawerContent`

* fix: remove unnecessary dialog close from food delete dialog

* fix: add missing `!` to alert message

* fix: add `router.refresh()` to `MemberCardDeleteDialog`

* fix: dialog close on food delete function failure

src/features/foods/components/DeleteFoodDialogContent.tsx

@@ -10,6 +10,8 @@ import {
 import { removeFood } from '@/features/foods/lib/actions';
 import { IContainer, IFood } from '@/types/definition';
 
+import { useRouter } from 'next/navigation';
+
 interface IDeleteFoodDialogContentProps {
   /**
    * If true, close the parent UI component, such as Dialog, DropdownMenu, Drawer, etc., on cancel button click.
@@ -40,6 +42,7 @@ export const DeleteFoodDialogContent = ({
   containerId,
   foodId,
 }: IDeleteFoodDialogContentProps) => {
+  const router = useRouter();
   /**
    * Handle the cancel button click.
    * If the closeParentOnCancel is true, close the parent together with this dialog.
@@ -61,11 +64,14 @@ export const DeleteFoodDialogContent = ({
     const result = await removeFood(containerId, foodId);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
+      onDialogClose();
+      onParentClose?.();
     } else {
       alert('Successfully deleted!');
+      onDialogClose();
       onParentClose?.();
+      router.refresh();
     }
-    onDialogClose();
   };
 
   return (

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

@@ -23,6 +23,7 @@ import {
 } from '@/features/foods/utils/containerMapping';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
@@ -45,6 +46,7 @@ export const AddDrawerContent = ({
   containerIdNameMap,
   groupIdNameMap,
 }: IAddDrawerContentProps) => {
+  const router = useRouter();
   /**
    * Process when the cancel button is clicked
    */
@@ -76,8 +78,8 @@ export const AddDrawerContent = ({
       alert('Something went wrong. Please try again.');
     } else {
       alert('Successfully created');
-      form.reset();
       setIsDrawerOpen(false);
+      router.refresh();
     }
   };
 

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

@@ -12,6 +12,7 @@ import {
 } from '@/features/foods/utils/containerMapping';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
@@ -40,6 +41,7 @@ export const EditDrawerContent = ({
   containerIdNameMap,
   groupIdNameMap,
 }: IEditDrawerContentProps) => {
+  const router = useRouter();
   const form = useForm<UpdateFoodInputs>({
     resolver: zodResolver(updateFoodFormSchema),
   });
@@ -71,8 +73,8 @@ export const EditDrawerContent = ({
       alert('Something went wrong. Please try again.');
     } else {
       alert('Successfully updated');
-      form.reset();
       onDrawerClose();
+      router.refresh();
     }
   };
 

src/features/groups/components/ContainerCardList/ContainerCard/ContainerCardDropdownMenuTriggerButton/ContainerCardDropdownMenuContent/DeleteContainerDialogTriggerButton/DeleteContainerDialogContent.tsx

@@ -10,6 +10,8 @@ import {
 import { removeContainer } from '@/features/groups/lib/actions';
 import { IContainer } from '@/types/definition';
 
+import { useRouter } from 'next/navigation';
+
 interface IDeleteContainerDialogContentProps {
   /**
    * An identifier of a container which a user is willing to delete
@@ -30,12 +32,13 @@ export const DeleteContainerDialogContent = ({
   onParentClose,
   onDialogClose,
 }: IDeleteContainerDialogContentProps) => {
+  const router = useRouter();
   /**
    * Handle the cancel button click.
    * It closes the parent UI component, if specified
    */
   const handleCancel = () => {
-    onParentClose?.();
+    onParentClose();
   };
 
   /**
@@ -47,11 +50,14 @@ export const DeleteContainerDialogContent = ({
     const result = await removeContainer(containerId);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
+      onDialogClose();
+      onParentClose();
     } else {
       alert('Successfully deleted');
+      onDialogClose();
+      onParentClose();
+      router.refresh();
     }
-    onDialogClose();
-    onParentClose?.();
   };
 
   return (

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

@@ -14,6 +14,7 @@ import { renameContainerFormSchema, RenameContainerInputs } from '@/features/gro
 import { IContainer } from '@/types/definition';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { KeyboardEvent, useEffect, useRef } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -43,6 +44,7 @@ export const RenameContainerForm = ({
   isOpen,
   onClose,
 }: IRenameContainerFormProps) => {
+  const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
   const form = useForm<z.infer<typeof renameContainerFormSchema>>({
     resolver: zodResolver(renameContainerFormSchema),
@@ -68,6 +70,7 @@ export const RenameContainerForm = ({
       alert('Successfully renamed the container');
       form.reset();
       onClose();
+      router.refresh();
     }
   };
 

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

@@ -19,6 +19,7 @@ import { createContainerFormSchema, CreateContainerInputs } from '@/features/gro
 import { IGroup } from '@/types/definition';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -43,6 +44,7 @@ export const CreateContainerDrawerContent = ({
   onClose,
   groupId,
 }: ICreateContainerDrawerContentProps) => {
+  const router = useRouter();
   const form = useForm<z.infer<typeof createContainerFormSchema>>({
     resolver: zodResolver(createContainerFormSchema),
     defaultValues: {
@@ -63,6 +65,7 @@ export const CreateContainerDrawerContent = ({
     } else {
       alert('Successfully created');
       onClose();
+      router.refresh();
     }
   };
 

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

@@ -18,6 +18,7 @@ import { createGroup } from '@/features/groups/lib/actions';
 import { createGroupFormSchema, CreateGroupInputs } from '@/features/groups/lib/schemas';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -28,6 +29,7 @@ interface ICreateGroupDrawerContentProps {
 }
 
 export const CreateGroupDrawerContent = ({ isOpen, onClose }: ICreateGroupDrawerContentProps) => {
+  const router = useRouter();
   const form = useForm<z.infer<typeof createGroupFormSchema>>({
     resolver: zodResolver(createGroupFormSchema),
     defaultValues: {
@@ -48,6 +50,7 @@ export const CreateGroupDrawerContent = ({ isOpen, onClose }: ICreateGroupDrawer
       alert('Successfully created the group');
       form.reset();
       onClose();
+      router.refresh();
     }
   };
 

src/features/groups/components/DeleteGroupDialogContent.tsx

@@ -10,6 +10,8 @@ import {
 import { removeGroup } from '@/features/groups/lib/actions';
 import { IGroup } from '@/types/definition';
 
+import { useRouter } from 'next/navigation';
+
 interface IDeleteGroupDialogContentProps {
   /**
    * The ID of the group to delete.
@@ -35,6 +37,7 @@ export const DeleteGroupDialogContent = ({
   onDialogClose,
   navigateOnSuccess,
 }: IDeleteGroupDialogContentProps) => {
+  const router = useRouter();
   /**
    * Handle the cancel button click.
    * It closes the parent UI component, if specified
@@ -52,12 +55,15 @@ export const DeleteGroupDialogContent = ({
     const result = await removeGroup(groupId);
     if (!result.ok) {
       alert('Something went wrong. Please try again.');
+      onDialogClose();
+      onParentClose?.();
     } else {
-      alert('Successfully deleted!');
+      alert('Successfully deleted');
+      onDialogClose();
       navigateOnSuccess?.();
+      onParentClose?.();
+      router.refresh();
     }
-    onParentClose?.();
-    onDialogClose();
   };
 
   return (

src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/RenameGroupForm.tsx

@@ -12,6 +12,7 @@ import { renameGroupFormSchema, RenameGroupInputs } from '@/features/groups/lib/
 import { cn } from '@/lib/tailwind/utils';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import React, { FC, KeyboardEvent, useEffect, useRef } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -32,13 +33,13 @@ export const RenameGroupForm: FC<IRenameGroupFormProps> = ({
   groupId,
   currentGroupName,
   isOpen,
-  onClose,
   containerCount,
   userCount,
+  onClose,
 }) => {
   // input ref
   const inputRef = useRef<HTMLInputElement>(null);
-
+  const router = useRouter();
   const form = useForm<z.infer<typeof renameGroupFormSchema>>({
     resolver: zodResolver(renameGroupFormSchema),
     defaultValues: {
@@ -59,8 +60,8 @@ export const RenameGroupForm: FC<IRenameGroupFormProps> = ({
       alert('Something went wrong. Please try again.');
     } else {
       alert('Successfully renamed the group');
-      form.reset();
       onClose();
+      router.refresh();
     }
   };
 

src/features/groups/components/GroupSingleHeaderDropdownMenu/RenameGroupDrawerContent.tsx

@@ -21,6 +21,7 @@ import { renameGroupFormSchema, RenameGroupInputs } from '@/features/groups/lib/
 import { IGroup } from '@/types/definition';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -55,6 +56,7 @@ export const RenameGroupDrawerContent = ({
   isDrawerOpen,
   onParentClose,
 }: IRenameGroupDrawerContent) => {
+  const router = useRouter();
   const form = useForm<z.infer<typeof renameGroupFormSchema>>({
     resolver: zodResolver(renameGroupFormSchema),
     defaultValues: {
@@ -79,6 +81,7 @@ export const RenameGroupDrawerContent = ({
       form.reset();
       onParentClose?.();
       onClose();
+      router.refresh();
     }
   };
 

src/features/groups/components/MemberCardList/MemberCardDropdownMenuTriggerButton/MemberCardDeleteButton/MemberCardDeleteDialog.tsx

@@ -10,6 +10,8 @@ import {
 import { removeMember } from '@/features/groups/lib/actions';
 import { IGroup, IUser } from '@/types/definition';
 
+import { useRouter } from 'next/navigation';
+
 interface IMemberCardDeleteDialogProps {
   /**
    * The function to close the parent UI component which is dropdown menu
@@ -35,6 +37,7 @@ export const MemberCardDeleteDialog = ({
   userId,
   groupId,
 }: IMemberCardDeleteDialogProps) => {
+  const router = useRouter();
   /**
    * Handle the delete button click.
    * Being successful DELETE request, the success message is shown, and close dialog and dropdown menu.
@@ -46,11 +49,14 @@ export const MemberCardDeleteDialog = ({
     const result = await removeMember(groupId, userId);
     if (!result.ok) {
       alert('Something went wrong, please try again');
+      onDialogClose();
+      onParentClose();
     } else {
       alert('Successfully deleted!');
+      onDialogClose();
+      onParentClose();
+      router.refresh();
     }
-    onDialogClose();
-    onParentClose();
   };
 
   return (

src/features/profile/components/UserProfile/RenameUserForm.tsx

@@ -12,6 +12,7 @@ import { cn } from '@/lib/tailwind/utils';
 import { IUser } from '@/types/definition';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { KeyboardEvent, useEffect, useRef } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -37,6 +38,7 @@ interface IRenameUserFormProps {
 }
 
 export const RenameUserForm = ({ userId, currentName, isOpen, onClose }: IRenameUserFormProps) => {
+  const router = useRouter();
   // input ref
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -60,6 +62,7 @@ export const RenameUserForm = ({ userId, currentName, isOpen, onClose }: IRename
     } else {
       alert('Successfully renamed the user');
       onClose();
+      router.refresh();
     }
   };