WIP Fix & last tasks

client/src/containers/Dialogs/ItemCategoryDialog.js

@@ -6,7 +6,7 @@ import {
   InputGroup,
   Intent,
   TextArea,
-  MenuItem
+  MenuItem,
 } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import { pick } from 'lodash';
@@ -16,10 +16,11 @@ import { useFormik } from 'formik';
 import { compose } from 'utils';
 import { useQuery, queryCache } from 'react-query';
 import classNames from 'classnames';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import AppToaster from 'components/AppToaster';
 import ErrorMessage from 'components/ErrorMessage';
+import { ListSelect } from 'components';
 
 import Dialog from 'components/Dialog';
 import DialogConnect from 'connectors/Dialog.connector';
@@ -32,7 +33,6 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
 
 import Icon from 'components/Icon';
 
-
 function ItemCategoryDialog({
   name,
   payload,
@@ -57,23 +57,30 @@ function ItemCategoryDialog({
   const [selectedParentCategory, setParentCategory] = useState(null);
   const { formatMessage } = useIntl();
 
-  const fetchList = useQuery(['items-categories-list'],
-    () => requestFetchItemCategories());
+  const fetchList = useQuery(['items-categories-list'], () =>
+    requestFetchItemCategories(),
+  );
 
   const validationSchema = Yup.object().shape({
-    name: Yup.string().required().label(formatMessage({id:'category_name_'})),
+    name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'category_name_' })),
     parent_category_id: Yup.string().nullable(),
-    description: Yup.string().trim()
+    description: Yup.string().trim(),
   });
 
-  const initialValues = useMemo(() => ({
-    name: '',
-    description: '',
-    parent_category_id: null
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      name: '',
+      description: '',
+      parent_category_id: null,
+    }),
+    [],
+  );
 
   // Formik
   const {
+    values,
     errors,
     touched,
     setFieldValue,
@@ -85,24 +92,28 @@ function ItemCategoryDialog({
     enableReinitialize: true,
     initialValues: {
       ...(payload.action === 'edit' &&
-        pick(itemCategory, Object.keys(initialValues)))
+        pick(itemCategory, Object.keys(initialValues))),
     },
     validationSchema,
     onSubmit: (values, { setSubmitting }) => {
       if (payload.action === 'edit') {
-        requestEditItemCategory(payload.id, values).then(response => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_item_category_has_been_successfully_edited',
-            }),
-            intent: Intent.SUCCESS,
+        requestEditItemCategory(payload.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_item_category_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('items-categories-table', {
+              force: true,
+            });
+          })
+          .catch((error) => {
+            setSubmitting(false);
           });
-          setSubmitting(false);
-          queryCache.refetchQueries('items-categories-table', { force: true });
-        }).catch((error) => {
-          setSubmitting(false);
-        });
       } else {
         requestSubmitItemCategory(values)
           .then((response) => {
@@ -114,60 +125,84 @@ function ItemCategoryDialog({
               intent: Intent.SUCCESS,
             });
             setSubmitting(false);
-            queryCache.refetchQueries('items-categories-table', { force: true });
+            queryCache.refetchQueries('items-categories-table', {
+              force: true,
+            });
           })
           .catch((error) => {
             setSubmitting(false);
           });
       }
-    }
+    },
   });
 
-  const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
-    const normalizedTitle = category.name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
+  const filterItemCategory = useCallback(
+    (query, category, _index, exactMatch) => {
+      const normalizedTitle = category.name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
 
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return normalizedTitle.indexOf(normalizedQuery) >= 0;
-    }
-  }, []);
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return normalizedTitle.indexOf(normalizedQuery) >= 0;
+      }
+    },
+    [],
+  );
 
-  const parentCategoryItem = useCallback((category, { handleClick, modifiers, query }) => {
-    return (
-      <MenuItem text={category.name} key={category.id} onClick={handleClick} />
-    );
-  }, []);
+  const parentCategoryItem = useCallback(
+    (category, { handleClick, modifiers, query }) => {
+      return (
+        <MenuItem
+          text={category.name}
+          key={category.id}
+          onClick={handleClick}
+        />
+      );
+    },
+    [],
+  );
 
   // Handle the dialog closing.
-  const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [name, closeDialog]);
 
   // Handle the dialog opening.
   const onDialogOpening = useCallback(() => {
     fetchList.refetch();
   }, [fetchList]);
 
-  const onChangeParentCategory = useCallback((parentCategory) => {
-    setParentCategory(parentCategory);
-    setFieldValue('parent_category_id', parentCategory.id);
-  }, [setFieldValue]);
+  const onChangeParentCategory = useCallback(
+    (parentCategory) => {
+      setParentCategory(parentCategory);
+      setFieldValue('parent_category_id', parentCategory.id);
+    },
+    [setFieldValue],
+  );
 
   const onDialogClosed = useCallback(() => {
     resetForm();
     closeDialog(name);
   }, [resetForm, closeDialog, name]);
 
-  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
-  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
+  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? <T id={'edit_category'}/> : <T id={'new_category'}/>}
-      className={classNames({
-        'dialog--loading': fetchList.isFetching,
-      },
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_category'} />
+        ) : (
+          <T id={'new_category'} />
+        )
+      }
+      className={classNames(
+        {
+          'dialog--loading': fetchList.isFetching,
+        },
         'dialog--category-form',
       )}
       isOpen={isOpen}
@@ -179,22 +214,22 @@ function ItemCategoryDialog({
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'category_name'}/>}
+            label={<T id={'category_name'} />}
             labelInfo={requiredSpan}
             className={'form-group--category-name'}
-            intent={(errors.name && touched.name) && Intent.DANGER}
-            helperText={(<ErrorMessage name="name" {...{ errors, touched }} />)}
+            intent={errors.name && touched.name && Intent.DANGER}
+            helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.name && touched.name) && Intent.DANGER}
+              intent={errors.name && touched.name && Intent.DANGER}
               {...getFieldProps('name')}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'parent_category'}/>}
+            label={<T id={'parent_category'} />}
             labelInfo={infoIcon}
             className={classNames(
               'form-group--select-list',
@@ -202,29 +237,39 @@ function ItemCategoryDialog({
               Classes.FILL,
             )}
             inline={true}
-            helperText={(<ErrorMessage name="parent_category_id" {...{errors, touched}} />)}
-            intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
+            helperText={
+              <ErrorMessage
+                name="parent_category_id"
+                {...{ errors, touched }}
+              />
+            }
+            intent={
+              errors.parent_category_id &&
+              touched.parent_category_id &&
+              Intent.DANGER
+            }
           >
-            <Select
+            <ListSelect
               items={categoriesList}
-              noResults={<MenuItem disabled={true} text='No results.' />}
+              noResults={<MenuItem disabled={true} text="No results." />}
               itemRenderer={parentCategoryItem}
               itemPredicate={filterItemCategory}
               popoverProps={{ minimal: true }}
               onItemSelect={onChangeParentCategory}
-            >
-              <Button
-                text={selectedParentCategory
-                  ? selectedParentCategory.name : 'Select Parent Category'}
-              />
-            </Select>
+              selectedItem={values.parent_category_id}
+              selectedItemProp={'id'}
+              defaultText={<T id={'select_parent_category'} />}
+              labelProp={'name'}
+            />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'description'}/>}
+            label={<T id={'description'} />}
             className={'form-group--description'}
-            intent={(errors.description && touched.description) && Intent.DANGER}
-            helperText={(<ErrorMessage name="description" {...{errors, touched}} />)}
+            intent={errors.description && touched.description && Intent.DANGER}
+            helperText={
+              <ErrorMessage name="description" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <TextArea
@@ -237,9 +282,19 @@ function ItemCategoryDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
-              {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>
@@ -248,26 +303,25 @@ function ItemCategoryDialog({
   );
 }
 
-
 const mapStateToProps = (state, props) => {
   const dialogPayload = getDialogPayload(state, 'item-category-form');
 
   return {
     name: 'item-category-form',
-    payload: {action: 'new', id: null, ...dialogPayload},
+    payload: { action: 'new', id: null, ...dialogPayload },
     itemCategoryId: dialogPayload?.id || null,
   };
 };
 
 const withItemCategoryDialog = connect(mapStateToProps);
 
-export default compose( 
+export default compose(
   withItemCategoryDialog,
   DialogConnect,
   DialogReduxConnect,
   withItemCategoryDetail,
   withItemCategories(({ categoriesList }) => ({
-    categoriesList
+    categoriesList,
   })),
-  withItemCategoriesActions 
+  withItemCategoriesActions,
 )(ItemCategoryDialog);