From e5edd0a1c95c8933d6d2dbcc014c266f07921da1 Mon Sep 17 00:00:00 2001
From: Marvin Frachet <marvin.frachet@strapi.io>
Date: Tue, 16 Feb 2021 12:00:05 +0100
Subject: [PATCH] [i18n] delete a locale (#9404)

---
 .../admin/src/components/ModalDelete/index.js |  6 +-
 .../SettingsPage/tests/SettingsPage.test.js   | 59 +++++++++++++++++++
 .../admin/src/hooks/useDeleteLocale/index.js  | 52 +++++++++-------
 3 files changed, 95 insertions(+), 22 deletions(-)

diff --git a/packages/strapi-plugin-i18n/admin/src/components/ModalDelete/index.js b/packages/strapi-plugin-i18n/admin/src/components/ModalDelete/index.js
index ebbf87330a..1d2359b1f2 100644
--- a/packages/strapi-plugin-i18n/admin/src/components/ModalDelete/index.js
+++ b/packages/strapi-plugin-i18n/admin/src/components/ModalDelete/index.js
@@ -11,7 +11,7 @@ const ModalDelete = ({ localeToDelete, onClose }) => {
   const { formatMessage } = useIntl();
   const isOpened = Boolean(localeToDelete);
 
-  const handleDelete = () => deleteLocale(localeToDelete).then(onClose);
+  const handleDelete = () => deleteLocale(localeToDelete.id).then(onClose);
 
   return (
     <ModalConfirm
@@ -40,7 +40,9 @@ ModalDelete.defaultProps = {
 };
 
 ModalDelete.propTypes = {
-  localeToDelete: PropTypes.shape({}),
+  localeToDelete: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+  }),
   onClose: PropTypes.func.isRequired,
 };
 
diff --git a/packages/strapi-plugin-i18n/admin/src/containers/SettingsPage/tests/SettingsPage.test.js b/packages/strapi-plugin-i18n/admin/src/containers/SettingsPage/tests/SettingsPage.test.js
index 586ca81403..8de49d75d5 100644
--- a/packages/strapi-plugin-i18n/admin/src/containers/SettingsPage/tests/SettingsPage.test.js
+++ b/packages/strapi-plugin-i18n/admin/src/containers/SettingsPage/tests/SettingsPage.test.js
@@ -130,6 +130,25 @@ describe('i18n settings page', () => {
 
   describe('delete', () => {
     it('removes the locale when clicking the confirmation button', async () => {
+      request.mockImplementation((_, opts) =>
+        opts.method === 'DELETE'
+          ? Promise.resolve({ id: 1 })
+          : Promise.resolve([
+              {
+                id: 1,
+                name: 'French',
+                code: 'fr-FR',
+                isDefault: false,
+              },
+              {
+                id: 2,
+                name: 'English',
+                code: 'en-US',
+                isDefault: true,
+              },
+            ])
+      );
+
       render(
         <TestWrapper>
           <LocaleSettingsPage />
@@ -149,6 +168,46 @@ describe('i18n settings page', () => {
         })
       );
     });
+
+    it('shows an error when something went wrong when deleting', async () => {
+      request.mockImplementation((_, opts) =>
+        opts.method === 'DELETE'
+          ? Promise.reject(new Error('An error'))
+          : Promise.resolve([
+              {
+                id: 1,
+                name: 'French',
+                code: 'fr-FR',
+                isDefault: false,
+              },
+              {
+                id: 2,
+                name: 'English',
+                code: 'en-US',
+                isDefault: true,
+              },
+            ])
+      );
+
+      render(
+        <TestWrapper>
+          <LocaleSettingsPage />
+        </TestWrapper>
+      );
+
+      const row = await waitFor(() => screen.getByText('French').closest('tr'));
+      const rowUtils = within(row);
+
+      fireEvent.click(rowUtils.getByLabelText('Settings.list.actions.delete'));
+      fireEvent.click(screen.getByText('Confirm'));
+
+      await waitFor(() =>
+        expect(strapi.notification.toggle).toBeCalledWith({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        })
+      );
+    });
   });
 
   describe('edit', () => {
diff --git a/packages/strapi-plugin-i18n/admin/src/hooks/useDeleteLocale/index.js b/packages/strapi-plugin-i18n/admin/src/hooks/useDeleteLocale/index.js
index 24e83cfb78..0243188c1a 100644
--- a/packages/strapi-plugin-i18n/admin/src/hooks/useDeleteLocale/index.js
+++ b/packages/strapi-plugin-i18n/admin/src/hooks/useDeleteLocale/index.js
@@ -1,28 +1,40 @@
-import { useState } from 'react';
+import { request } from 'strapi-helper-plugin';
+import { useMutation, useQueryClient } from 'react-query';
 import { getTrad } from '../../utils';
 
+const deleteLocale = async id => {
+  try {
+    const data = await request(`/i18n/locales/${id}`, {
+      method: 'DELETE',
+    });
+
+    strapi.notification.toggle({
+      type: 'success',
+      message: { id: getTrad('Settings.locales.modal.delete.success') },
+    });
+
+    return data;
+  } catch (e) {
+    strapi.notification.toggle({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return e;
+  }
+};
+
 const useDeleteLocale = () => {
-  const [isDeleting, setIsDeleting] = useState(false);
+  const queryClient = useQueryClient();
 
-  const deleteLocale = localeToDelete => {
-    console.log(`About to delete`, localeToDelete);
-    setIsDeleting(true);
+  const { isLoading, mutateAsync } = useMutation(deleteLocale, {
+    onSuccess: (_, id) =>
+      queryClient.setQueryData('locales', oldLocales =>
+        oldLocales.filter(locale => locale.id !== id)
+      ),
+  });
 
-    return new Promise(resolve =>
-      setTimeout(() => {
-        setIsDeleting(false);
-
-        strapi.notification.toggle({
-          type: 'success',
-          message: { id: getTrad('Settings.locales.modal.delete.success') },
-        });
-
-        resolve();
-      }, 1000)
-    );
-  };
-
-  return { isDeleting, deleteLocale };
+  return { isDeleting: isLoading, deleteLocale: mutateAsync };
 };
 
 export default useDeleteLocale;