chrone: sperate client and server to different repos.

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+
+import { AppToaster } from 'components';
+import { useItemCategoryContext } from './ItemCategoryProvider';
+import { transformToForm } from 'utils';
+import {
+  CreateItemCategoryFormSchema,
+  EditItemCategoryFormSchema,
+} from './itemCategoryForm.schema';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import ItemCategoryFormContent from './ItemCategoryFormContent';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  name: '',
+  description: '',
+  cost_account_id: '',
+  sell_account_id: '',
+  inventory_account_id: '',
+};
+
+/**
+ * Item category form.
+ */
+function ItemCategoryForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    isNewMode,
+    itemCategory,
+    itemCategoryId,
+    dialogName,
+    createItemCategoryMutate,
+    editItemCategoryMutate,
+  } = useItemCategoryContext();
+
+  // Initial values.
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      ...transformToForm(itemCategory, defaultInitialValues),
+    }),
+    [itemCategory],
+  );
+
+  // Transformes response errors.
+  const transformErrors = (errors, { setErrors }) => {
+    if (errors.find((error) => error.type === 'CATEGORY_NAME_EXISTS')) {
+      setErrors({
+        name: intl.get('category_name_exists'),
+      });
+    }
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+    const form = { ...values };
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    // Handle the response success.
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_item_category_has_been_created_successfully'
+            : 'the_item_category_has_been_edited_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+    // Handle the response error.
+    const onError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      transformErrors(errors, { setErrors });
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createItemCategoryMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editItemCategoryMutate([itemCategoryId, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={
+        isNewMode ? CreateItemCategoryFormSchema : EditItemCategoryFormSchema
+      }
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <ItemCategoryFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(ItemCategoryForm);

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormContent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Form } from 'formik';
+import ItemCategoryFormFields from './ItemCategoryFormFields';
+import ItemCategoryFormFooter from './ItemCategoryFormFooter';
+
+export default function ItemCategoryForm() {
+  return (
+    <Form>
+      <ItemCategoryFormFields />
+      <ItemCategoryFormFooter />
+    </Form>
+  );
+}

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ItemCategoryProvider } from './ItemCategoryProvider';
+import ItemCategoryForm from './ItemCategoryForm';
+
+import 'style/pages/ItemCategory/ItemCategoryDialog.scss';
+
+/**
+ * Item Category form dialog content.
+ */
+export default function ItemCategoryFormDialogContent({
+  // #ownProp
+  itemCategoryId,
+  dialogName,
+}) {
+  return (
+    <ItemCategoryProvider
+      itemCategoryId={itemCategoryId}
+      dialogName={dialogName}
+    >
+      <ItemCategoryForm />
+    </ItemCategoryProvider>
+  );
+}

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Classes, FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { ErrorMessage, FastField } from 'formik';
+
+import { useAutofocus } from 'hooks';
+import { FieldRequiredHint } from 'components';
+import { inputIntent } from 'utils';
+
+/**
+ * Item category form fields.
+ */
+export default function ItemCategoryFormFields() {
+  const categoryNameFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/* ----------- Category name ----------- */}
+      <FastField name={'name'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'category_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--category-name'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="name" />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              inputRef={(ref) => (categoryNameFieldRef.current = ref)}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Description ----------- */}
+      <FastField name={'description'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="description" />}
+            inline={true}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFooter.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Classes, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useFormikContext } from 'formik';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { useItemCategoryContext } from './ItemCategoryProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Item category form footer.
+ */
+function ItemCategoryFormFooter({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Item category context.
+  const { isNewMode, dialogName } = useItemCategoryContext();
+
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Handle close button click.
+  const handleCloseBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button disabled={isSubmitting} onClick={handleCloseBtnClick}>
+          <T id={'close'} />
+        </Button>
+
+        <Button intent={Intent.PRIMARY} type="submit" loading={isSubmitting}>
+          {isNewMode ? <T id={'submit'} /> : <T id={'edit'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(ItemCategoryFormFooter);

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryProvider.js

@@ -0,0 +1,57 @@
+import React, { createContext } from 'react';
+import { DialogContent } from 'components';
+import {
+  useItemCategory,
+  useEditItemCategory,
+  useCreateItemCategory,
+} from 'hooks/query';
+
+const ItemCategoryContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function ItemCategoryProvider({ itemCategoryId, dialogName, ...props }) {
+  const { data: itemCategory, isFetching: isItemCategoryLoading } = useItemCategory(
+    itemCategoryId,
+    {
+      enabled: !!itemCategoryId,
+    },
+  );
+  // Create and edit item category mutations.
+  const { mutateAsync: createItemCategoryMutate } = useCreateItemCategory();
+  const { mutateAsync: editItemCategoryMutate } = useEditItemCategory();
+
+  // Detarmines whether the new mode form.
+  const isNewMode = !itemCategoryId;
+  const isEditMode = !isNewMode;
+
+  // Provider state.
+  const provider = {
+    itemCategoryId,
+    dialogName,
+
+    itemCategory,
+    isItemCategoryLoading,
+
+    createItemCategoryMutate,
+    editItemCategoryMutate,
+
+    isNewMode,
+    isEditMode
+  };
+
+  return (
+    <DialogContent
+      isLoading={isItemCategoryLoading}
+      name={'item-category-form'}
+    >
+      <ItemCategoryContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useItemCategoryContext = () =>
+  React.useContext(ItemCategoryContext);
+
+export { ItemCategoryProvider, useItemCategoryContext };

src/containers/Dialogs/ItemCategoryDialog/index.js

@@ -0,0 +1,46 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ItemCategoryFormDialogContent = lazy(() =>
+  import('./ItemCategoryFormDialogContent'),
+);
+
+/**
+ * Item Category form dialog.
+ */
+function ItemCategoryFormDialog({
+  dialogName,
+  payload = { action: '', id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_category'} />
+        ) : (
+          <T id={'new_category'} />
+        )
+      }
+      className={'dialog--category-form'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+    >
+      <DialogSuspense>
+        <ItemCategoryFormDialogContent
+          dialogName={dialogName}
+          action={payload.action}
+          itemCategoryId={payload.id}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ItemCategoryFormDialog);

src/containers/Dialogs/ItemCategoryDialog/itemCategoryForm.schema.js

@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  name: Yup.string()
+    .required()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('category_name_')),
+  description: Yup.string().trim().max(DATATYPES_LENGTH.TEXT).nullable(),
+});
+
+export const CreateItemCategoryFormSchema = Schema;
+export const EditItemCategoryFormSchema = Schema;