fix: BIG-148 items entries ordered by index.

src/containers/Items/ItemForm.js

@@ -14,7 +14,10 @@ import ItemFormBody from './ItemFormBody';
 import ItemFormFloatingActions from './ItemFormFloatingActions';
 import ItemFormInventorySection from './ItemFormInventorySection';
 
-import { useItemFormInitialValues } from './utils';
+import {
+  transformSubmitRequestErrors,
+  useItemFormInitialValues,
+} from './utils';
 import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
 
 import { useItemFormContext } from './ItemFormProvider';
@@ -40,27 +43,6 @@ export default function ItemForm() {
   // Initial values in create and edit mode.
   const initialValues = useItemFormInitialValues(item);
 
-  // Transform API errors.
-  const transformApiErrors = (error) => {
-    const {
-      response: {
-        data: { errors },
-      },
-    } = error;
-    const fields = {};
-
-    if (errors.find((e) => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
-      fields.name = intl.get('the_name_used_before');
-    }
-    if (errors.find((e) => e.type === 'INVENTORY_ACCOUNT_CANNOT_MODIFIED')) {
-      AppToaster.show({
-        message: intl.get('cannot_change_item_inventory_account'),
-        intent: Intent.DANGER,
-      });
-    }
-    return fields;
-  };
-
   // Handles the form submit.
   const handleFormSubmit = (
     values,
@@ -94,7 +76,7 @@ export default function ItemForm() {
     const onError = (errors) => {
       setSubmitting(false);
       if (errors) {
-        const _errors = transformApiErrors(errors);
+        const _errors = transformSubmitRequestErrors(errors);
         setErrors({ ..._errors });
       }
     };

src/containers/Items/ItemFormProvider.js

@@ -1,6 +1,7 @@
 import React, { useEffect, createContext, useState } from 'react';
 import intl from 'react-intl-universal';
 import { useLocation } from 'react-router-dom';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useItem,
@@ -11,6 +12,7 @@ import {
   useAccounts,
 } from 'hooks/query';
 import { useDashboardPageTitle } from 'hooks/state';
+import { useWatchItemError } from './utils';
 
 const ItemFormContext = createContext();
 
@@ -32,12 +34,14 @@ function ItemFormProvider({ itemId, ...props }) {
   } = useItemsCategories();
 
   // Fetches the given item details.
-  const { isLoading: isItemLoading, data: item } = useItem(
-    itemId || duplicateId,
-    {
-      enabled: !!itemId || !!duplicateId,
-    },
-  );
+  const itemQuery = useItem(itemId || duplicateId, {
+    enabled: !!itemId || !!duplicateId,
+  });
+
+  const { isLoading: isItemLoading, data: item } = itemQuery;
+
+  // Watches and handles item not found response error.
+  useWatchItemError(itemQuery);
 
   // Fetches item settings.
   const {

src/containers/Items/utils.js

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
-import { defaultTo } from 'lodash';
+import { defaultTo, includes } from 'lodash';
+import { useHistory } from 'react-router-dom';
 import { AppToaster } from 'components';
 import {
   transformTableStateToQuery,
@@ -10,6 +11,7 @@ import {
 import { transformToForm } from 'utils';
 import { useSettingsSelector } from '../../hooks/state';
 import { transformItemFormData } from './ItemForm.schema';
+import { useWatch } from 'hooks/utils';
 
 const defaultInitialValues = {
   active: 1,
@@ -182,3 +184,59 @@ export function transformItemsTableState(tableState) {
     inactive_mode: tableState.inactiveMode,
   };
 }
+
+/**
+ * Transform API errors.
+ */
+export const transformSubmitRequestErrors = (error) => {
+  const {
+    response: {
+      data: { errors },
+    },
+  } = error;
+  const fields = {};
+
+  if (errors.find((e) => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
+    fields.name = intl.get('the_name_used_before');
+  }
+  if (errors.find((e) => e.type === 'INVENTORY_ACCOUNT_CANNOT_MODIFIED')) {
+    AppToaster.show({
+      message: intl.get('cannot_change_item_inventory_account'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find(
+      (e) => e.type === 'TYPE_CANNOT_CHANGE_WITH_ITEM_HAS_TRANSACTIONS',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'item.error.type_cannot_change_with_item_has_transactions',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+  return fields;
+};
+
+/**
+ * Watches and handles item response not found error.
+ * @param {*} itemQuery
+ */
+export function useWatchItemError(itemQuery) {
+  const { error, isError } = itemQuery;
+
+  // History context.
+  const history = useHistory();
+
+  useWatch(() => {
+    if (isError && includes([400, 404], error.response.status)) {
+      AppToaster.show({
+        message: 'The given item not found.',
+        intent: Intent.DANGER,
+      });
+      history.push('/items');
+    }
+  }, isError);
+}