[i18n] delete a locale (#9404)

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,
 };
 

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', () => {

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 useDeleteLocale = () => {
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const deleteLocale = localeToDelete => {
-    console.log(`About to delete`, localeToDelete);
-    setIsDeleting(true);
-
-    return new Promise(resolve =>
-      setTimeout(() => {
-        setIsDeleting(false);
+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') },
     });
 
-        resolve();
-      }, 1000)
-    );
+    return data;
+  } catch (e) {
+    strapi.notification.toggle({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return e;
+  }
 };
 
-  return { isDeleting, deleteLocale };
+const useDeleteLocale = () => {
+  const queryClient = useQueryClient();
+
+  const { isLoading, mutateAsync } = useMutation(deleteLocale, {
+    onSuccess: (_, id) =>
+      queryClient.setQueryData('locales', oldLocales =>
+        oldLocales.filter(locale => locale.id !== id)
+      ),
+  });
+
+  return { isDeleting: isLoading, deleteLocale: mutateAsync };
 };
 
 export default useDeleteLocale;