Merge remote-tracking branch 'origin/feature/react-query' into feature/react-query

client/src/common/currencies.js

@@ -1,5 +1,5 @@
 export default [
-  { label: 'US Dollar', code: 'USD' },
-  { label: 'Euro', code: 'EUR' },
-  { label: 'Libyan Dinar	', code: 'LYD' },
+  { name: 'US Dollar', code: 'USD' },
+  { name: 'Euro', code: 'EUR' },
+  { name: 'Libyan Dinar	', code: 'LYD' },
 ]

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

@@ -9,7 +9,7 @@ import { transformToForm } from 'utils';
 import {
   CreateItemCategoryFormSchema,
   EditItemCategoryFormSchema,
-} from './ItemCategoryForm.schema';
+} from './itemCategoryForm.schema';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import ItemCategoryFormContent from './ItemCategoryFormContent'

client/src/containers/Preferences/General/General.js

@@ -1,98 +1,15 @@
-import React, { useEffect } from 'react';
-import { Formik } from 'formik';
-import { mapKeys, snakeCase } from 'lodash';
-import { Intent } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { useQuery, queryCache } from 'react-query';
-import { useIntl } from 'react-intl';
-import { CLASSES } from 'common/classes';
+import React from 'react';
 
-import { compose, optionsMapToArray } from 'utils';
-
-import { AppToaster, LoadingIndicator } from 'components';
-import GeneralForm from './GeneralForm';
-import { PreferencesGeneralSchema } from './General.schema';
-
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withSettings from 'containers/Settings/withSettings';
-import withSettingsActions from 'containers/Settings/withSettingsActions';
-
-import 'style/pages/Preferences/GeneralForm.scss';
+import GeneralFormPage from './GeneralFormPage';
+import { GeneralFormProvider } from './GeneralFormProvider';
 
 /**
  * Preferences - General form.
  */
-function GeneralPreferences({
-  // #withSettings
-  organizationSettings,
-
-  //# withDashboardActions
-  changePreferencesPageTitle,
-
-  // #withSettingsActions
-  requestSubmitOptions,
-  requestFetchOptions,
-}) {
-  const { formatMessage } = useIntl();
-
-  const fetchSettings = useQuery(['settings'], () => requestFetchOptions());
-
-  useEffect(() => {
-    changePreferencesPageTitle(formatMessage({ id: 'general' }));
-  }, [changePreferencesPageTitle, formatMessage]);
-
-  function transformGeneralSettings(data) {
-    return mapKeys(data, (value, key) => snakeCase(key));
-  }
-
-  const initialValues = {
-    ...transformGeneralSettings(organizationSettings),
-  };
-
-  const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
-    const options = optionsMapToArray(values).map((option) => {
-      return { key: option.key, ...option, group: 'organization' };
-    });
-    requestSubmitOptions({ options })
-      .then((response) => {
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_options_has_been_created_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        setSubmitting(false);
-        resetForm();
-        queryCache.invalidateQueries('settings');
-      })
-      .catch((error) => {
-        setSubmitting(false);
-      });
-  };
-
+export default function GeneralPreferences() {
   return (
-    <div
-      className={classNames(
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
-      )}
-    >
-      <div className={classNames(CLASSES.CARD)}>
-        <LoadingIndicator loading={fetchSettings.isFetching} spinnerSize={28}>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={PreferencesGeneralSchema}
-            onSubmit={handleFormSubmit}
-            component={GeneralForm}
-          />
-        </LoadingIndicator>
-      </div>
-    </div>
+    <GeneralFormProvider>
+      <GeneralFormPage />
+    </GeneralFormProvider>
   );
 }
-
-export default compose(
-  withSettings(({ organizationSettings }) => ({ organizationSettings })),
-  withSettingsActions,
-  withDashboardActions,
-)(GeneralPreferences);

client/src/containers/Preferences/General/GeneralForm.js

@@ -88,7 +88,7 @@ export default function PreferencesGeneralForm({}) {
     </FastField>
 
     <FastField name={'location'}>
-        {({ field: { value }, meta: { error, touched } }) => (
+      {({ form, field: { value }, meta: { error, touched } }) => (
         <FormGroup
           label={<T id={'business_location'} />}
           className={classNames(
@@ -101,7 +101,9 @@ export default function PreferencesGeneralForm({}) {
         >
           <ListSelect
             items={countriesOptions}
-              onItemSelect={(item) => {}}
+            onItemSelect={({ value }) => {
+              form.setFieldValue('location', value);
+            }}
             selectedItem={value}
             selectedItemProp={'value'}
             defaultText={<T id={'select_business_location'} />}
@@ -130,7 +132,8 @@ export default function PreferencesGeneralForm({}) {
             selectedItem={value}
             selectedItemProp={'code'}
             defaultText={<T id={'select_base_currency'} />}
-              textProp={'label'}
+            textProp={'name'}
+            labelProp={'code'}
             popoverProps={{ minimal: true }}
           />
         </FormGroup>
@@ -149,11 +152,13 @@ export default function PreferencesGeneralForm({}) {
         >
           <ListSelect
             items={fiscalYearOptions}
-              selectedItemProp={'value'}
-              textProp={'name'}
-              defaultText={<T id={'select_fiscal_year'} />}
+            onItemSelect={({ value }) =>
+              form.setFieldValue('fiscal_year', value)
+            }
             selectedItem={value}
-              onItemSelect={(item) => {}}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_fiscal_year'} />}
+            textProp={'name'}
             popoverProps={{ minimal: true }}
           />
         </FormGroup>
@@ -176,7 +181,9 @@ export default function PreferencesGeneralForm({}) {
             textProp={'name'}
             defaultText={<T id={'select_language'} />}
             selectedItem={value}
-              onItemSelect={(item) => {}}
+            onItemSelect={(item) =>
+              form.setFieldValue('language', item.value)
+            }
             popoverProps={{ minimal: true }}
           />
         </FormGroup>
@@ -222,12 +229,13 @@ export default function PreferencesGeneralForm({}) {
           <ListSelect
             items={dateFormatsOptions}
             onItemSelect={(dateFormat) => {
-                form.setFieldValue('date_format', dateFormat);
+              form.setFieldValue('date_format', dateFormat.value);
             }}
             selectedItem={value}
             selectedItemProp={'value'}
             defaultText={<T id={'select_date_format'} />}
             textProp={'name'}
+            labelProp={'label'}
             popoverProps={{ minimal: true }}
           />
         </FormGroup>
@@ -235,10 +243,7 @@ export default function PreferencesGeneralForm({}) {
     </FastField>
 
     <div className={'card__footer'}>
-        <Button
-          intent={Intent.PRIMARY}
-          type="submit"
-        >
+      <Button intent={Intent.PRIMARY} type="submit">
         <T id={'save'} />
       </Button>
       <Button onClick={handleCloseClick}>

client/src/containers/Preferences/General/GeneralFormPage.js

@@ -0,0 +1,87 @@
+import React, { useEffect } from 'react';
+import { Formik } from 'formik';
+import { mapKeys, snakeCase } from 'lodash';
+import { Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { useIntl } from 'react-intl';
+import { CLASSES } from 'common/classes';
+
+import { AppToaster } from 'components';
+import GeneralForm from './GeneralForm';
+import { PreferencesGeneralSchema } from './General.schema';
+import { useGeneralFormContext } from './GeneralFormProvider';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withSettings from 'containers/Settings/withSettings';
+
+import { compose, optionsMapToArray } from 'utils';
+
+import 'style/pages/Preferences/GeneralForm.scss';
+
+/**
+ * Preferences - General form Page.
+ */
+function GeneralFormPage({
+  // #withSettings
+  organizationSettings,
+
+  //# withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  const { formatMessage } = useIntl();
+  const { saveSettingMutate } = useGeneralFormContext();
+
+  useEffect(() => {
+    changePreferencesPageTitle(formatMessage({ id: 'general' }));
+  }, [changePreferencesPageTitle, formatMessage]);
+
+  function transformGeneralSettings(data) {
+    return mapKeys(data, (value, key) => snakeCase(key));
+  }
+
+  const initialValues = {
+    ...transformGeneralSettings(organizationSettings),
+  };
+
+  const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
+    const options = optionsMapToArray(values).map((option) => {
+      return { key: option.key, ...option, group: 'organization' };
+    });
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_options_has_been_created_successfully',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      resetForm();
+    };
+    const onError = (errors) => {
+      setSubmitting(false);
+    };
+    saveSettingMutate({ options }).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={PreferencesGeneralSchema}
+          onSubmit={handleFormSubmit}
+          component={GeneralForm}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ organizationSettings }) => ({ organizationSettings })),
+  withDashboardActions,
+)(GeneralFormPage);

client/src/containers/Preferences/General/GeneralFormProvider.js

@@ -0,0 +1,32 @@
+import React, { createContext } from 'react';
+import { LoadingIndicator } from 'components';
+import { useSaveSettings, useSettings } from 'hooks/query';
+
+const GeneralFormContext = createContext();
+
+/**
+ * General form provider.
+ */
+function GeneralFormProvider({ ...props }) {
+  //Fetches Organization Settings.
+  const { isFetching: isSettingsLoading } = useSettings();
+
+  // Save Organization Settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
+
+  // Provider state.
+  const provider = {
+    isSettingsLoading,
+    saveSettingMutate,
+  };
+
+  return (
+    <LoadingIndicator loading={isSettingsLoading} spinnerSize={28}>
+      <GeneralFormContext.Provider value={provider} {...props} />
+    </LoadingIndicator>
+  );
+}
+
+const useGeneralFormContext = () => React.useContext(GeneralFormContext);
+
+export { GeneralFormProvider, useGeneralFormContext };

client/src/containers/Subscriptions/BillingPlansForm.js

@@ -5,7 +5,7 @@ import 'style/pages/Subscription/BillingPlans.scss'
 
 import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput';
 import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput';
-import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentMethod';
+import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentmethod';
 
 /**
  * Billing plans form.