From b55eb68813f9467cd6adef51b18abedd59207371 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Thu, 16 Feb 2023 11:52:44 +0100
Subject: [PATCH] (bug) refresh trainings list on delete success

---
 .../components/base/edit-destroy-buttons.tsx  |  6 +++---
 .../machines/configure-packs-button.tsx       |  2 +-
 .../components/trainings/trainings.tsx        | 21 ++++++++++++++++---
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/app/frontend/src/javascript/components/base/edit-destroy-buttons.tsx b/app/frontend/src/javascript/components/base/edit-destroy-buttons.tsx
index e41fbea28..16ca23496 100644
--- a/app/frontend/src/javascript/components/base/edit-destroy-buttons.tsx
+++ b/app/frontend/src/javascript/components/base/edit-destroy-buttons.tsx
@@ -6,7 +6,7 @@ import { FabButton } from './fab-button';
 import { FabModal } from './fab-modal';
 
 interface EditDestroyButtonsProps {
-  onSuccess: (message: string) => void,
+  onDeleteSuccess: (message: string) => void,
   onError: (message: string) => void,
   onEdit: () => void,
   itemId: number,
@@ -22,7 +22,7 @@ interface EditDestroyButtonsProps {
  * Destroy : shows a modal dialog to ask the user for confirmation about the deletion of the provided item.
  * Edit : triggers the provided function.
  */
-export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onSuccess, onError, onEdit, itemId, itemType, apiDestroy, confirmationMessage, className, iconSize = 20 }) => {
+export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onDeleteSuccess, onError, onEdit, itemId, itemType, apiDestroy, confirmationMessage, className, iconSize = 20 }) => {
   const { t } = useTranslation('admin');
 
   const [deletionModal, setDeletionModal] = useState<boolean>(false);
@@ -40,7 +40,7 @@ export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onSucces
    */
   const onDeleteConfirmed = (): void => {
     apiDestroy(itemId).then(() => {
-      onSuccess(t('app.admin.edit_destroy_buttons.deleted', { TYPE: itemType }));
+      onDeleteSuccess(t('app.admin.edit_destroy_buttons.deleted', { TYPE: itemType }));
     }).catch((error) => {
       onError(t('app.admin.edit_destroy_buttons.unable_to_delete', { TYPE: itemType }) + error);
     });
diff --git a/app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx b/app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx
index 59a37ed0f..3637f4117 100644
--- a/app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx
@@ -110,7 +110,7 @@ export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ pack
               {formatDuration(p.minutes)} - {FormatLib.price(p.amount)}
               <EditDestroyButtons className='pack-actions'
                                   onError={onError}
-                                  onSuccess={handleSuccess}
+                                  onDeleteSuccess={handleSuccess}
                                   onEdit={() => handleRequestEdit(p)}
                                   itemId={p.id}
                                   itemType={t('app.admin.configure_packs_button.pack')}
diff --git a/app/frontend/src/javascript/components/trainings/trainings.tsx b/app/frontend/src/javascript/components/trainings/trainings.tsx
index 60d9c2e7f..9fdcef15d 100644
--- a/app/frontend/src/javascript/components/trainings/trainings.tsx
+++ b/app/frontend/src/javascript/components/trainings/trainings.tsx
@@ -53,14 +53,21 @@ export const Trainings: React.FC<TrainingsProps> = ({ onError, onSuccess }) => {
   }, []);
 
   useEffect(() => {
+    fetchTrainings(filter);
+  }, [filter]);
+
+  /**
+   * Fetch the trainings from the API
+   */
+  const fetchTrainings = (filterDisabled?: boolean) => {
     const trainingsFilters = Object.assign(
       { requested_attributes: ['override_settings'] },
-      (typeof filter === 'boolean') ? { disabled: filter } : {}
+      (typeof filterDisabled === 'boolean') ? { disabled: filterDisabled } : {}
     ) as TrainingIndexFilter;
     TrainingAPI.index(trainingsFilters)
       .then(setTrainings)
       .catch(onError);
-  }, [filter]);
+  };
 
   /** Creates filtering options to the react-select format */
   const buildFilterOptions = (): Array<SelectOption<boolean>> => {
@@ -92,6 +99,14 @@ export const Trainings: React.FC<TrainingsProps> = ({ onError, onSuccess }) => {
     return training.machine_ids.filter(id => activesMachines.includes(id)).length > 0;
   };
 
+  /**
+   * Callback triggered when a training was successfully deleted
+   */
+  const handleTrainingDeleted = (message: string): void => {
+    onSuccess(message);
+    fetchTrainings(filter);
+  };
+
   /**
    * Redirect the user to the given training edition page
    */
@@ -177,7 +192,7 @@ export const Trainings: React.FC<TrainingsProps> = ({ onError, onSuccess }) => {
               <div className='actions'>
                 <EditDestroyButtons className='grpBtn'
                                     onError={onError}
-                                    onSuccess={onSuccess}
+                                    onDeleteSuccess={handleTrainingDeleted}
                                     onEdit={() => toTrainingEdit(training)}
                                     itemId={training.id}
                                     itemType={t('app.admin.trainings.training')}