chrone: sperate client and server to different repos.

src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.js

@@ -0,0 +1,105 @@
+import React, { useMemo } from 'react';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { AppToaster } from 'components';
+import CurrencyFormContent from './CurrencyFormContent';
+
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+import {
+  CreateCurrencyFormSchema,
+  EditCurrencyFormSchema,
+} from './CurrencyForm.schema';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  currency_name: '',
+  currency_code: '',
+  currency_sign: '',
+};
+
+/**
+ * Currency form.
+ */
+function CurrencyForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    createCurrencyMutate,
+    editCurrencyMutate,
+    dialogName,
+    currency,
+    isEditMode,
+  } = useCurrencyFormContext();
+
+  // Form validation schema in create and edit mode.
+  const validationSchema = isEditMode
+    ? EditCurrencyFormSchema
+    : CreateCurrencyFormSchema;
+
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      // ...(isEditMode && pick(currency, Object.keys(defaultInitialValues))),
+      ...transformToForm(currency, defaultInitialValues),
+    }),
+    [],
+  );
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    // Handle the request success.
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get(
+          isEditMode
+            ? 'the_currency_has_been_edited_successfully'
+            : 'the_currency_has_been_created_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+    // Handle the response error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors.find((e) => e.type === 'CURRENCY_CODE_EXISTS')) {
+        AppToaster.show({
+          message: 'The given currency code is already exists.',
+          intent: Intent.DANGER,
+        });
+      }
+      setSubmitting(false);
+    };
+    if (isEditMode) {
+      editCurrencyMutate([currency.id, values]).then(onSuccess).catch(onError);
+    } else {
+      createCurrencyMutate(values).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <CurrencyFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(CurrencyForm);

src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.schema.js

@@ -0,0 +1,17 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  currency_name: Yup.string()
+    .required()
+    .label(intl.get('currency_name_')),
+  currency_code: Yup.string()
+    .max(4)
+    .required()
+    .label(intl.get('currency_code_')),
+  currency_sign: Yup.string().required(),
+});
+
+export const CreateCurrencyFormSchema = Schema;
+export const EditCurrencyFormSchema = Schema;

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormContent.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import CurrencyFormFields from './CurrencyFormFields';
+import CurrencyFormFooter from './CurrencyFormFooter';
+
+export default function CurrencyFormContent() {
+  return (
+    <Form>
+      <CurrencyFormFields />
+      <CurrencyFormFooter />
+    </Form>
+  );
+}

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormDialogContent.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { CurrencyFormProvider } from './CurrencyFormProvider';
+
+import CurrencyForm from './CurrencyForm';
+import withCurrencyDetail from 'containers/Currencies/withCurrencyDetail';
+
+import { compose } from 'utils';
+import 'style/pages/Currency/CurrencyFormDialog.scss';
+
+function CurrencyFormDialogContent({
+  // #ownProp
+  action,
+  currencyCode,
+  dialogName,
+}) {
+  return (
+    <CurrencyFormProvider
+      isEditMode={action}
+      currency={currencyCode}
+      dialogName={dialogName}
+    >
+      <CurrencyForm />
+    </CurrencyFormProvider>
+  );
+}
+
+export default compose(withCurrencyDetail)(CurrencyFormDialogContent);

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Classes, FormGroup, InputGroup } from '@blueprintjs/core';
+import { FastField } from 'formik';
+import { FormattedMessage as T } from 'components';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+import { ErrorMessage, FieldRequiredHint, ListSelect } from 'components';
+
+import { useAutofocus } from 'hooks';
+import { inputIntent, currenciesOptions } from 'utils';
+
+/**
+ * Currency form fields.
+ */
+export default function CurrencyFormFields() {
+  const currencyNameFieldRef = useAutofocus();
+
+  const { isEditMode } = useCurrencyFormContext();
+
+  // Filter currency code
+  const filterCurrencyCode = (query, currency, _index, exactMatch) => {
+    const normalizedTitle = currency.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <FastField name={'currency_code'}>
+        {({
+          form: { setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'currency_code'} />}
+            className={classNames(CLASSES.FILL, 'form-group--type')}
+          >
+            <ListSelect
+              items={currenciesOptions}
+              selectedItemProp={'currency_code'}
+              selectedItem={value}
+              textProp={'formatted_name'}
+              defaultText={<T id={'select_currency_code'} />}
+              onItemSelect={(currency) => {
+                setFieldValue('currency_code', currency.currency_code);
+                setFieldValue('currency_name', currency.name);
+                setFieldValue('currency_sign', currency.symbol);
+              }}
+              itemPredicate={filterCurrencyCode}
+              disabled={isEditMode}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Currency name ----------- */}
+      <FastField name={'currency_name'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--currency-name'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="currency_name" />}
+            // inline={true}
+          >
+            <InputGroup
+              inputRef={(ref) => (currencyNameFieldRef.current = ref)}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Currency Code ----------- */}
+      <FastField name={'currency_sign'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency_sign'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--currency-sign'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="currency_sign" />}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFooter.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Currency dialog form footer action.
+ */
+function CurrencyFormFooter({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName, isEditMode } = useCurrencyFormContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleClose} disabled={isSubmitting}>
+          <T id={'cancel'} />
+        </Button>
+        <Button intent={Intent.PRIMARY} type="submit" loading={isSubmitting}>
+          {!isEditMode ? <T id={'submit'} /> : <T id={'edit'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(CurrencyFormFooter);

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormProvider.js

@@ -0,0 +1,33 @@
+import React, { createContext } from 'react';
+import { useEditCurrency, useCreateCurrency } from 'hooks/query';
+import { DialogContent } from 'components';
+
+const CurrencyFormContext = createContext();
+
+/**
+ * Currency Form page provider.
+ */
+function CurrencyFormProvider({ isEditMode, currency, dialogName, ...props }) {
+  // Create and edit item currency mutations.
+  const { mutateAsync: createCurrencyMutate } = useCreateCurrency();
+  const { mutateAsync: editCurrencyMutate } = useEditCurrency();
+
+  // Provider state.
+  const provider = {
+    createCurrencyMutate,
+    editCurrencyMutate,
+    dialogName,
+    currency,
+    isEditMode,
+  };
+
+  return (
+    <DialogContent name={'currency-form'}>
+      <CurrencyFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useCurrencyFormContext = () => React.useContext(CurrencyFormContext);
+
+export { CurrencyFormProvider, useCurrencyFormContext };

src/containers/Dialogs/CurrencyFormDialog/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 CurrencyFormDialogContent = lazy(() =>
+  import('./CurrencyFormDialogContent'),
+);
+
+/**
+ * Currency form dialog.
+ */
+function CurrencyFormDialog({
+  dialogName,
+  payload = { action: '', id: null, currency: '' },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_currency'} />
+        ) : (
+          <T id={'new_currency'} />
+        )
+      }
+      className={'dialog--currency-form'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '400px' }}
+    >
+      <DialogSuspense>
+        <CurrencyFormDialogContent
+          dialogName={dialogName}
+          currencyCode={payload.currency}
+          action={payload.action}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(CurrencyFormDialog);