(quality) use EditDestroyButtons in product list

app/frontend/src/javascript/components/store/product-item.tsx

@@ -1,22 +1,23 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { FabButton } from '../base/fab-button';
 import { Product } from '../../models/product';
-import { PencilSimple, Trash } from 'phosphor-react';
 import noImage from '../../../../images/no_image.png';
 import { FabStateLabel } from '../base/fab-state-label';
 import { ProductPrice } from './product-price';
+import { EditDestroyButtons } from '../base/edit-destroy-buttons';
+import ProductAPI from '../../api/product';
 
 interface ProductItemProps {
   product: Product,
   onEdit: (product: Product) => void,
-  onDelete: (productId: number) => void,
+  onDelete: (message: string) => void,
+  onError: (message: string) => void,
 }
 
 /**
  * This component shows a product item in the admin view
  */
-export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDelete }) => {
+export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDelete, onError }) => {
   const { t } = useTranslation('admin');
 
   /**
@@ -34,15 +35,6 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
     };
   };
 
-  /**
-   * Init the process of delete the given product
-   */
-  const deleteProduct = (productId: number): () => void => {
-    return (): void => {
-      onDelete(productId);
-    };
-  };
-
   /**
    * Returns CSS class from stock status
    */
@@ -80,14 +72,13 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
         <ProductPrice product={product} className="price" />
       </div>
       <div className='actions'>
-        <div className='manage'>
-          <FabButton className='edit-btn' onClick={editProduct(product)}>
-            <PencilSimple size={20} weight="fill" />
-          </FabButton>
-          <FabButton className='delete-btn' onClick={deleteProduct(product.id)}>
-            <Trash size={20} weight="fill" />
-          </FabButton>
-        </div>
+        <EditDestroyButtons onDeleteSuccess={onDelete}
+                            className="manage"
+                            onError={onError}
+                            onEdit={editProduct(product)}
+                            itemId={product.id}
+                            itemType={t('app.admin.store.product_item.product')}
+                            apiDestroy={ProductAPI.destroy} />
       </div>
     </div>
   );

app/frontend/src/javascript/components/store/products.tsx

@@ -111,14 +111,9 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError, uiRouter }) =>
   };
 
   /** Delete a product */
-  const deleteProduct = async (productId: number): Promise<void> => {
-    try {
-      await ProductAPI.destroy(productId);
+  const deleteProduct = async (message: string): Promise<void> => {
     await fetchProducts();
-      onSuccess(t('app.admin.store.products.successfully_deleted'));
-    } catch (e) {
-      onError(t('app.admin.store.products.unable_to_delete') + e);
-    }
+    onSuccess(message);
   };
 
   /** Goto new product page */
@@ -244,6 +239,7 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError, uiRouter }) =>
             <ProductItem
               key={product.id}
               product={product}
+              onError={onError}
               onEdit={editProduct}
               onDelete={deleteProduct}
             />

config/locales/app.admin.en.yml

@@ -2244,8 +2244,6 @@ en:
           unexpected_error_occurred: "An unexpected error occurred. Please try again later."
           all_products: "All products"
           create_a_product: "Create a product"
-          successfully_deleted: "The product has been successfully deleted"
-          unable_to_delete: "Unable to delete the product: "
           filter: "Filter"
           filter_clear: "Clear all"
           filter_apply: "Apply"
@@ -2267,6 +2265,7 @@ en:
           sort: "Sort:"
           visible_only: "Visible products only"
         product_item:
+          product: "product"
           visible: "visible"
           hidden: "hidden"
           stock: