From a079f711d4f124a796b8666c22d48f623ee85bca Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Sat, 20 Feb 2021 15:33:20 +0200 Subject: [PATCH] refactoring: authentication with react-query. --- client/package.json | 1 + client/src/components/Authentication.js | 12 +- client/src/components/Dashboard/TopbarUser.js | 79 +++-- client/src/components/Guards/PrivateRoute.js | 14 +- .../Authentication/AuthCopyright.js | 6 +- .../containers/Authentication/AuthInsider.js | 4 +- .../containers/Authentication/InviteAccept.js | 276 +---------------- .../Authentication/InviteAcceptForm.js | 100 +++++++ .../Authentication/InviteAcceptFormContent.js | 122 ++++++++ .../Authentication/InviteAcceptProvider.js | 56 ++++ client/src/containers/Authentication/Login.js | 216 +++----------- .../containers/Authentication/LoginForm.js | 77 +++++ .../src/containers/Authentication/Register.js | 281 +++--------------- .../containers/Authentication/RegisterForm.js | 141 +++++++++ .../Authentication/ResetPassword.js | 150 +++------- .../Authentication/ResetPasswordForm.js | 63 ++++ .../Authentication/SendResetPassword.js | 127 +++----- .../Authentication/SendResetPasswordForm.js | 49 +++ .../containers/Authentication/components.js | 49 +++ client/src/containers/Authentication/utils.js | 145 +++++++++ .../withAuthenticationActions.js | 23 +- .../JournalNumber/ReferenceNumberForm.js | 3 +- .../src/containers/Setup/SetupLeftSection.js | 33 +- .../Subscriptions/BillingPlansForm.js | 2 +- client/src/hooks/query/accounts.js | 29 +- client/src/hooks/query/authentication.js | 63 ++++ client/src/hooks/query/bills.js | 26 +- client/src/hooks/query/currencies.js | 41 +-- client/src/hooks/query/customers.js | 20 +- client/src/hooks/query/estimates.js | 28 +- client/src/hooks/query/expenses.js | 34 ++- client/src/hooks/query/financialReports.js | 26 +- client/src/hooks/query/index.js | 5 +- .../src/hooks/query/inventoryAdjustments.js | 12 +- client/src/hooks/query/invite.js | 31 ++ client/src/hooks/query/invoices.js | 26 +- client/src/hooks/query/items.js | 25 +- client/src/hooks/query/itemsCategories.js | 19 +- client/src/hooks/query/manualJournals.js | 22 +- client/src/hooks/query/paymentMades.js | 19 +- client/src/hooks/query/paymentReceives.js | 23 +- client/src/hooks/query/receipts.js | 22 +- client/src/hooks/query/settings.js | 8 +- client/src/hooks/query/users.js | 21 +- client/src/hooks/query/vendors.js | 19 +- client/src/hooks/query/views.js | 29 +- client/src/hooks/state/authentication.js | 41 +++ client/src/hooks/state/globalErrors.js | 17 ++ client/src/hooks/state/index.js | 4 +- client/src/hooks/useRequest.js | 85 ++++++ client/src/routes/dashboard.js | 20 +- client/src/services/axios.js | 16 +- .../authentication/authentication.actions.js | 114 +------ .../globalErrors/globalErrors.actions.js | 14 +- .../src/style/pages/Authentication/Auth.scss | 2 +- client/src/style/variables.scss | 2 +- client/src/utils.js | 27 +- 57 files changed, 1629 insertions(+), 1290 deletions(-) create mode 100644 client/src/containers/Authentication/InviteAcceptForm.js create mode 100644 client/src/containers/Authentication/InviteAcceptFormContent.js create mode 100644 client/src/containers/Authentication/InviteAcceptProvider.js create mode 100644 client/src/containers/Authentication/LoginForm.js create mode 100644 client/src/containers/Authentication/RegisterForm.js create mode 100644 client/src/containers/Authentication/ResetPasswordForm.js create mode 100644 client/src/containers/Authentication/SendResetPasswordForm.js create mode 100644 client/src/containers/Authentication/components.js create mode 100644 client/src/containers/Authentication/utils.js create mode 100644 client/src/hooks/query/authentication.js create mode 100644 client/src/hooks/query/invite.js create mode 100644 client/src/hooks/state/authentication.js create mode 100644 client/src/hooks/state/globalErrors.js create mode 100644 client/src/hooks/useRequest.js diff --git a/client/package.json b/client/package.json index e5d3a7e97..e5e6ee159 100644 --- a/client/package.json +++ b/client/package.json @@ -66,6 +66,7 @@ "react-albus": "^2.0.0", "react-app-polyfill": "^1.0.6", "react-body-classname": "^1.3.1", + "react-content-loader": "^6.0.1", "react-dev-utils": "^10.2.0", "react-dom": "^16.12.0", "react-dropzone": "^11.0.1", diff --git a/client/src/components/Authentication.js b/client/src/components/Authentication.js index f6352b1a1..aac1b8c83 100644 --- a/client/src/components/Authentication.js +++ b/client/src/components/Authentication.js @@ -4,9 +4,8 @@ import BodyClassName from 'react-body-classname'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import authenticationRoutes from 'routes/authentication'; import { FormattedMessage as T } from 'react-intl'; -import withAuthentication from 'containers/Authentication/withAuthentication'; -import { compose } from 'utils'; import Icon from 'components/Icon'; +import { useIsAuthenticated } from 'hooks/state'; import 'style/pages/Authentication/Auth.scss' @@ -14,14 +13,15 @@ function PageFade(props) { return ; } -function AuthenticationWrapper({ isAuthorized = false, ...rest }) { +export default function AuthenticationWrapper({ ...rest }) { const to = { pathname: '/homepage' }; const location = useLocation(); + const isAuthenticated = useIsAuthenticated(); const locationKey = location.pathname; return ( <> - {isAuthorized ? ( + {isAuthenticated ? ( ) : ( @@ -61,7 +61,3 @@ function AuthenticationWrapper({ isAuthorized = false, ...rest }) { ); } - -export default compose( - withAuthentication(({ isAuthorized }) => ({ isAuthorized })), -)(AuthenticationWrapper); diff --git a/client/src/components/Dashboard/TopbarUser.js b/client/src/components/Dashboard/TopbarUser.js index e14988afb..908bc2f49 100644 --- a/client/src/components/Dashboard/TopbarUser.js +++ b/client/src/components/Dashboard/TopbarUser.js @@ -1,4 +1,4 @@ -import React, { useMemo, useCallback } from 'react'; +import React from 'react'; import { useHistory } from 'react-router-dom'; import { Menu, @@ -10,48 +10,46 @@ import { } from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; -import withAuthentication from 'containers/Authentication/withAuthentication'; -import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions'; +import { firstLettersArgs } from 'utils'; +import { useAuthActions, useAuthUser } from 'hooks/state'; -import { compose, firstLettersArgs } from 'utils'; - -function DashboardTopbarUser({ requestLogout, user }) { +export default function DashboardTopbarUser() { const history = useHistory(); + const { setLogout } = useAuthActions(); + const user = useAuthUser(); - const onClickLogout = useCallback(() => { - requestLogout(); - }, []); - - const userAvatarDropMenu = useMemo( - () => ( - - -
- {user.first_name} {user.last_name} -
-
- : {user.tenant_id} -
- - } - /> - - } - onClick={() => history.push('/preferences')} - /> - } onClick={onClickLogout} /> - - ), - [onClickLogout], - ); + const onClickLogout = () => { + setLogout(); + }; return ( - + + +
+ {user.first_name} {user.last_name} +
+
+ : {user.tenant_id} +
+ + } + /> + + } + onClick={() => history.push('/preferences')} + /> + } onClick={onClickLogout} /> + + } + position={Position.BOTTOM} + > - - - - {inviteMeta.pending && ( -
- -
- )} - + + + ); } - -export default compose(withAuthenticationActions)(Invite); diff --git a/client/src/containers/Authentication/InviteAcceptForm.js b/client/src/containers/Authentication/InviteAcceptForm.js new file mode 100644 index 000000000..2bc11effc --- /dev/null +++ b/client/src/containers/Authentication/InviteAcceptForm.js @@ -0,0 +1,100 @@ +import React from 'react'; +import { Intent, Position } from '@blueprintjs/core'; +import { Formik } from 'formik'; +import { useHistory } from 'react-router-dom'; +import { FormattedMessage as T, useIntl } from 'react-intl'; +import { isEmpty } from 'lodash'; + +import { useInviteAcceptContext } from './InviteAcceptProvider'; +import { AppToaster } from 'components'; +import { InviteAcceptSchema } from './utils'; +import InviteAcceptFormContent from './InviteAcceptFormContent'; + +export default function InviteAcceptForm() { + const history = useHistory(); + const { formatMessage } = useIntl(); + + // Invite accept context. + const { + inviteAcceptMutate, + inviteMeta, + token, + } = useInviteAcceptContext(); + + // Invite value. + const inviteValue = { + organization_name: '', + invited_email: '', + ...(!isEmpty(inviteMeta) + ? { + invited_email: inviteMeta.email, + organization_name: inviteMeta.organizationName, + } + : {}), + }; + + // Handle form submitting. + const handleSubmit = (values, { setSubmitting, setErrors }) => { + inviteAcceptMutate([values, token]) + .then((response) => { + AppToaster.show({ + message: `Congrats! Your account has been created and invited to + ${inviteValue.organization_name} organization successfully.`, + intent: Intent.SUCCESS, + }); + history.push('/auth/login'); + setSubmitting(false); + }) + .catch( + ({ + response: { + data: { errors }, + }, + }) => { + if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) { + AppToaster.show({ + message: formatMessage({ id: 'an_unexpected_error_occurred' }), + intent: Intent.DANGER, + position: Position.BOTTOM, + }); + history.push('/auth/login'); + } + if (errors.find((e) => e.type === 'PHONE_MUMNER.ALREADY.EXISTS')) { + setErrors({ + phone_number: 'This phone number is used in another account.', + }); + } + if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) { + AppToaster.show({ + message: 'An unexpected error occurred', + intent: Intent.DANGER, + position: Position.BOTTOM, + }); + history.push('/auth/login'); + } + setSubmitting(false); + }, + ); + }; + + return ( +
+
+

+ +

+

+ {' '} + {inviteValue.organization_name} +

+
+ + +
+ ); +} diff --git a/client/src/containers/Authentication/InviteAcceptFormContent.js b/client/src/containers/Authentication/InviteAcceptFormContent.js new file mode 100644 index 000000000..993d028e9 --- /dev/null +++ b/client/src/containers/Authentication/InviteAcceptFormContent.js @@ -0,0 +1,122 @@ +import React from 'react'; +import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core'; +import { Form, ErrorMessage, FastField, useFormikContext } from 'formik'; +import { Link } from 'react-router-dom'; +import { FormattedMessage as T } from 'react-intl'; +import { inputIntent } from 'utils'; +import { Col, Row } from 'components'; +import { useInviteAcceptContext } from './InviteAcceptProvider'; +import { PasswordRevealer } from './components'; +/** + * Invite user form. + */ +export default function InviteUserFormContent() { + // Invite accept context. + const { inviteMeta } = useInviteAcceptContext(); + + // Formik context. + const { isSubmitting } = useFormikContext(); + + return ( +
+ + + + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--first_name'} + intent={inputIntent({ error, touched })} + helperText={} + > + + + )} + + + + + + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--last_name'} + intent={inputIntent({ error, touched })} + helperText={} + > + + + )} + + + + + + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--phone_number'} + intent={inputIntent({ error, touched })} + helperText={} + > + + + )} + + + + {({ form, field, meta: { error, touched } }) => ( + } + labelInfo={} + className={'form-group--password has-password-revealer'} + intent={inputIntent({ error, touched })} + helperText={} + > + + + )} + + +
+

+ {inviteMeta.email},
+ +

+

+
+ + + {' '} + + + {' '} + + +

+
+ +
+ +
+
+ ); +} diff --git a/client/src/containers/Authentication/InviteAcceptProvider.js b/client/src/containers/Authentication/InviteAcceptProvider.js new file mode 100644 index 000000000..6077cd8d0 --- /dev/null +++ b/client/src/containers/Authentication/InviteAcceptProvider.js @@ -0,0 +1,56 @@ +import React, { createContext, useContext } from 'react'; +import { useInviteMetaByToken, useAuthInviteAccept } from 'hooks/query'; +import { InviteAcceptLoading } from './components'; +import { useHistory } from 'react-router-dom'; + +const InviteAcceptContext = createContext(); + +/** + * Invite accept provider. + */ +function InviteAcceptProvider({ token, ...props }) { + // Invite meta by token. + const { + data: inviteMeta, + error: inviteMetaError, + isError: isInviteMetaError, + isFetching: isInviteMetaLoading, + } = useInviteMetaByToken(token, { retry: false }); + + // Invite accept mutate. + const { mutateAsync: inviteAcceptMutate } = useAuthInviteAccept({ + retry: false, + }); + + // History context. + const history = useHistory(); + + React.useEffect(() => { + if (inviteMetaError) { history.push('/auth/login'); } + }, [history, inviteMetaError]); + + // Provider payload. + const provider = { + token, + inviteMeta, + inviteMetaError, + isInviteMetaError, + isInviteMetaLoading, + inviteAcceptMutate + }; + + if (inviteMetaError) { + return null; + } + + return ( + + { isInviteMetaError } + + + ); +} + +const useInviteAcceptContext = () => useContext(InviteAcceptContext); + +export { InviteAcceptProvider, useInviteAcceptContext }; diff --git a/client/src/containers/Authentication/Login.js b/client/src/containers/Authentication/Login.js index 3fe43f534..c5f23e726 100644 --- a/client/src/containers/Authentication/Login.js +++ b/client/src/containers/Authentication/Login.js @@ -1,132 +1,38 @@ -import React, { useMemo, useState } from 'react'; -import { Link, useHistory } from 'react-router-dom'; -import * as Yup from 'yup'; -import { useFormik } from 'formik'; -import { FormattedMessage as T, useIntl } from 'react-intl'; -import { - Button, - InputGroup, - Intent, - FormGroup, - Checkbox, -} from '@blueprintjs/core'; +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Formik } from 'formik'; +import { FormattedMessage as T } from 'react-intl'; import Toaster from 'components/AppToaster'; -import ErrorMessage from 'components/ErrorMessage'; import AuthInsider from 'containers/Authentication/AuthInsider'; +import { useAuthLogin } from 'hooks/query'; -import Icon from 'components/Icon'; -import { If } from 'components'; +import LoginForm from './LoginForm'; +import { LoginSchema, transformLoginErrorsToToasts } from './utils'; -import withAuthenticationActions from './withAuthenticationActions'; - -import { compose } from 'utils'; - -const ERRORS_TYPES = { - INVALID_DETAILS: 'INVALID_DETAILS', - USER_INACTIVE: 'USER_INACTIVE', - LOGIN_TO_MANY_ATTEMPTS: 'LOGIN_TO_MANY_ATTEMPTS', -}; -function Login({ requestLogin }) { - const { formatMessage } = useIntl(); - const history = useHistory(); - const [shown, setShown] = useState(false); - const passwordRevealer = () => { - setShown(!shown); - }; - - // Validation schema. - const loginValidationSchema = Yup.object().shape({ - crediential: Yup.string() - .required() - .email() - .label(formatMessage({ id: 'email' })), - password: Yup.string() - .required() - .min(4) - .label(formatMessage({ id: 'password' })), - }); - - // Formik validation schema and submit handler. - const { - touched, - errors, - handleSubmit, - getFieldProps, - isSubmitting, - } = useFormik({ - initialValues: { - crediential: '', - password: '', - }, - validationSchema: loginValidationSchema, - onSubmit: (values, { setSubmitting }) => { - requestLogin({ - crediential: values.crediential, - password: values.password, +/** + * Login page. + */ +export default function Login() { + const { mutateAsync: loginMutate } = useAuthLogin(); + + const handleSubmit = (values, { setSubmitting }) => { + loginMutate({ + crediential: values.crediential, + password: values.password, + }) + .then(() => { + setSubmitting(false); }) - .then(() => { - setSubmitting(false); - }) - .catch((errors) => { - const toastBuilders = []; - if (errors.find((e) => e.type === ERRORS_TYPES.INVALID_DETAILS)) { - toastBuilders.push({ - message: formatMessage({ - id: 'email_and_password_entered_did_not_match', - }), - intent: Intent.DANGER, - }); - } - if (errors.find((e) => e.type === ERRORS_TYPES.USER_INACTIVE)) { - toastBuilders.push({ - message: formatMessage({ - id: 'the_user_has_been_suspended_from_admin', - }), - intent: Intent.DANGER, - }); - } - if ( - errors.find((e) => e.type === ERRORS_TYPES.LOGIN_TO_MANY_ATTEMPTS) - ) { - toastBuilders.push({ - message: formatMessage({ - id: 'your_account_has_been_locked', - }), - intent: Intent.DANGER, - }); - } - toastBuilders.forEach((builder) => { - Toaster.show(builder); - }); - setSubmitting(false); - }); - }, - }); + .catch(({ response: { data: { errors } } }) => { + const toastBuilders = transformLoginErrorsToToasts(errors); - const passwordRevealerTmp = useMemo( - () => ( - passwordRevealer()}> - - <> - {' '} - - - - - - - <> - {' '} - - - - - - - ), - [shown, passwordRevealer], - ); + toastBuilders.forEach((builder) => { + Toaster.show(builder); + }); + setSubmitting(false); + }); + }; return ( @@ -142,59 +48,15 @@ function Login({ requestLogin }) { -
- } - intent={errors.crediential && touched.crediential && Intent.DANGER} - helperText={ - - } - className={'form-group--crediential'} - > - - - - } - labelInfo={passwordRevealerTmp} - intent={errors.password && touched.password && Intent.DANGER} - helperText={ - - } - className={'form-group--password has-password-revealer'} - > - - - -
- - - -
- -
- -
-
+
@@ -204,6 +66,4 @@ function Login({ requestLogin }) {
); -} - -export default compose(withAuthenticationActions)(Login); +} \ No newline at end of file diff --git a/client/src/containers/Authentication/LoginForm.js b/client/src/containers/Authentication/LoginForm.js new file mode 100644 index 000000000..45fb79f44 --- /dev/null +++ b/client/src/containers/Authentication/LoginForm.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { + Button, + InputGroup, + Intent, + FormGroup, + Checkbox, +} from '@blueprintjs/core'; +import { Form, ErrorMessage, FastField } from 'formik'; +import { FormattedMessage as T } from 'react-intl'; +import { inputIntent } from 'utils'; +import { PasswordRevealer } from './components'; + +/** + * Login form. + */ +export default function LoginForm({ + isSubmitting +}) { + return ( +
+ + {({ form, field, meta: { error, touched } }) => ( + } + intent={inputIntent({ error, touched })} + helperText={} + className={'form-group--crediential'} + > + + + )} + + + + {({ form, field, meta: { error, touched } }) => ( + } + labelInfo={} + intent={inputIntent({ error, touched })} + helperText={} + className={'form-group--password has-password-revealer'} + > + + + )} + + +
+ + + +
+ +
+ +
+
+ ); +} diff --git a/client/src/containers/Authentication/Register.js b/client/src/containers/Authentication/Register.js index c34cc82ba..973208228 100644 --- a/client/src/containers/Authentication/Register.js +++ b/client/src/containers/Authentication/Register.js @@ -1,56 +1,28 @@ -import React, { useMemo, useState, useCallback } from 'react'; -import * as Yup from 'yup'; -import { useFormik } from 'formik'; -import { Row, Col } from 'react-grid-system'; +import React, { useMemo } from 'react'; +import { Formik } from 'formik'; import { Link, useHistory } from 'react-router-dom'; import { - Button, - InputGroup, Intent, - FormGroup, - Spinner, } from '@blueprintjs/core'; import { FormattedMessage as T, useIntl } from 'react-intl'; import AppToaster from 'components/AppToaster'; import AuthInsider from 'containers/Authentication/AuthInsider'; +import { useAuthLogin, useAuthRegister } from '../../hooks/query/authentication'; -import ErrorMessage from 'components/ErrorMessage'; -import Icon from 'components/Icon'; -import { If } from 'components'; -import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions'; +import RegisterForm from './RegisterForm'; +import { RegisterSchema, transformRegisterErrorsToForm } from './utils'; -import { compose } from 'utils'; - -function RegisterUserForm({ requestRegister, requestLogin }) { +/** + * Register form. + */ +export default function RegisterUserForm() { const { formatMessage } = useIntl(); const history = useHistory(); - const [shown, setShown] = useState(false); - const passwordRevealer = useCallback(() => { - setShown(!shown); - }, [shown]); - - const ValidationSchema = Yup.object().shape({ - first_name: Yup.string() - .required() - .label(formatMessage({ id: 'first_name_' })), - last_name: Yup.string() - .required() - .label(formatMessage({ id: 'last_name_' })), - email: Yup.string() - .email() - .required() - .label(formatMessage({ id: 'email' })), - phone_number: Yup.string() - .matches() - .required() - .label(formatMessage({ id: 'phone_number_' })), - password: Yup.string() - .min(4) - .required() - .label(formatMessage({ id: 'password' })), - }); + const { mutateAsync: authLoginMutate } = useAuthLogin(); + const { mutateAsync: authRegisterMutate } = useAuthRegister(); + const initialValues = useMemo( () => ({ first_name: '', @@ -58,85 +30,37 @@ function RegisterUserForm({ requestRegister, requestLogin }) { email: '', phone_number: '', password: '', + country: 'LY', }), [], ); - const { - errors, - touched, - handleSubmit, - getFieldProps, - isSubmitting, - } = useFormik({ - enableReinitialize: true, - validationSchema: ValidationSchema, - initialValues: { - ...initialValues, - country: 'LY', - }, - onSubmit: (values, { setSubmitting, setErrors }) => { - requestRegister(values) - .then((response) => { - requestLogin({ - crediential: values.email, - password: values.password, - }) - .then(() => { - history.push('/register/subscription'); - setSubmitting(false); - }) - .catch((errors) => { - AppToaster.show({ - message: formatMessage({ id: 'something_wentwrong' }), - intent: Intent.SUCCESS, - }); - }); + const handleSubmit = (values, { setSubmitting, setErrors }) => { + authRegisterMutate(values) + .then((response) => { + authLoginMutate({ + crediential: values.email, + password: values.password, }) - .catch((errors) => { - if (errors.some((e) => e.type === 'PHONE_NUMBER_EXISTS')) { - setErrors({ - phone_number: formatMessage({ - id: 'the_phone_number_already_used_in_another_account', - }), + .then(() => { + history.push('/register/subscription'); + setSubmitting(false); + }) + .catch(({ response: { data: { errors } } }) => { + AppToaster.show({ + message: formatMessage({ id: 'something_wentwrong' }), + intent: Intent.SUCCESS, }); - } - if (errors.some((e) => e.type === 'EMAIL.EXISTS')) { - setErrors({ - email: formatMessage({ - id: 'the_email_already_used_in_another_account', - }), - }); - } - setSubmitting(false); - }); - }, - }); - - const passwordRevealerTmp = useMemo( - () => ( - passwordRevealer()}> - - <> - {' '} - - - - - - - <> - {' '} - - - - - - - ), - [shown, passwordRevealer], - ); + }); + }) + .catch(({ response: { data: { errors } } }) => { + const formErrors = transformRegisterErrorsToForm(errors); + setErrors(formErrors); + setSubmitting(false); + }); + }; + return (
@@ -146,136 +70,17 @@ function RegisterUserForm({ requestRegister, requestLogin }) { - {' '}
-
- - - } - intent={ - errors.first_name && touched.first_name && Intent.DANGER - } - helperText={ - - } - className={'form-group--first-name'} - > - - - - - - } - intent={errors.last_name && touched.last_name && Intent.DANGER} - helperText={ - - } - className={'form-group--last-name'} - > - - - - - - } - intent={ - errors.phone_number && touched.phone_number && Intent.DANGER - } - helperText={ - - } - className={'form-group--phone-number'} - > - - - - } - intent={errors.email && touched.email && Intent.DANGER} - helperText={ - - } - className={'form-group--email'} - > - - - - } - labelInfo={passwordRevealerTmp} - intent={errors.password && touched.password && Intent.DANGER} - helperText={ - - } - className={'form-group--password has-password-revealer'} - > - - - -
-

-
- - - {' '} - - - {' '} - - -

-
- -
- -
-
- - -
- -
- + ); -} - -export default compose(withAuthenticationActions)(RegisterUserForm); +} \ No newline at end of file diff --git a/client/src/containers/Authentication/RegisterForm.js b/client/src/containers/Authentication/RegisterForm.js new file mode 100644 index 000000000..194652b53 --- /dev/null +++ b/client/src/containers/Authentication/RegisterForm.js @@ -0,0 +1,141 @@ +import React from 'react'; +import { + Button, + InputGroup, + Intent, + FormGroup, + Spinner +} from '@blueprintjs/core'; +import { ErrorMessage, FastField, Form } from 'formik'; +import { FormattedMessage as T } from 'react-intl'; +import { Link } from 'react-router-dom'; +import { Row, Col, If } from 'components'; + +import { inputIntent } from 'utils'; + +/** + * Register form. + */ +export default function RegisterForm({ + isSubmitting, +}) { + return ( +
+ + + + {({ form, field, meta: { error, touched } }) => ( + } + intent={inputIntent({ error, touched })} + helperText={} + className={'form-group--first-name'} + > + + + )} + + + + + + {({ form, field, meta: { error, touched } }) => ( + } + intent={inputIntent({ error, touched })} + helperText={} + className={'form-group--last-name'} + > + + + )} + + + + + + {({ form, field, meta: { error, touched } }) => ( + } + intent={inputIntent({ error, touched })} + helperText={} + className={'form-group--phone-number'} + > + + + )} + + + {({ form, field, meta: { error, touched } }) => ( + } + intent={inputIntent({ error, touched })} + helperText={} + className={'form-group--email'} + > + + + )} + + + + {({ form, field, meta: { error, touched } }) => ( + } + // labelInfo={passwordRevealerTmp} + intent={inputIntent({ error, touched })} + helperText={ + + } + className={'form-group--password has-password-revealer'} + > + + + )} + + +
+

+
+ + + {' '} + + + {' '} + + +

+
+ +
+ +
+ + +
+ +
+ +
+ ); +} diff --git a/client/src/containers/Authentication/ResetPassword.js b/client/src/containers/Authentication/ResetPassword.js index c57a1863d..8116e60bb 100644 --- a/client/src/containers/Authentication/ResetPassword.js +++ b/client/src/containers/Authentication/ResetPassword.js @@ -1,40 +1,31 @@ import React, { useMemo } from 'react'; -import * as Yup from 'yup'; -import { useFormik } from 'formik'; - +import { Formik } from 'formik'; import { - Button, - InputGroup, Intent, - FormGroup, Position, } from '@blueprintjs/core'; import { Link, useParams, useHistory } from 'react-router-dom'; import { FormattedMessage as T, useIntl } from 'react-intl'; +import { useAuthResetPassword } from 'hooks/query'; + import AppToaster from 'components/AppToaster'; -import ErrorMessage from 'components/ErrorMessage'; import AuthInsider from 'containers/Authentication/AuthInsider'; -import withAuthenticationActions from './withAuthenticationActions'; -import { compose } from 'utils'; - -function ResetPassword({ requestResetPassword }) { +import ResetPasswordForm from './ResetPasswordForm'; +import { ResetPasswordSchema } from './utils'; +/** + * Reset password page. + */ +export default function ResetPassword() { const { formatMessage } = useIntl(); const { token } = useParams(); const history = useHistory(); - const ValidationSchema = Yup.object().shape({ - password: Yup.string() - .min(4) - .required() - .label(formatMessage({ id: 'password' })), - confirm_password: Yup.string() - .oneOf([Yup.ref('password'), null]) - .required() - .label(formatMessage({ id: 'confirm_password' })), - }); + // Authentication reset password. + const { mutateAsync: authResetPasswordMutate } = useAuthResetPassword(); + // Initial values of the form. const initialValues = useMemo( () => ({ password: '', @@ -43,42 +34,30 @@ function ResetPassword({ requestResetPassword }) { [], ); - const { - touched, - errors, - handleSubmit, - getFieldProps, - isSubmitting, - } = useFormik({ - enableReinitialize: true, - validationSchema: ValidationSchema, - initialValues: { - ...initialValues, - }, - onSubmit: (values, { setSubmitting }) => { - requestResetPassword(values, token) - .then((response) => { + // Handle the form submitting. + const handleSubmit = (values, { setSubmitting }) => { + authResetPasswordMutate([token, values]) + .then((response) => { + AppToaster.show({ + message: formatMessage('password_successfully_updated'), + intent: Intent.DANGER, + position: Position.BOTTOM, + }); + history.push('/auth/login'); + setSubmitting(false); + }) + .catch(({ response: { data: { errors } } }) => { + if (errors.find((e) => e.type === 'TOKEN_INVALID')) { AppToaster.show({ - message: formatMessage('password_successfully_updated'), + message: formatMessage({ id: 'an_unexpected_error_occurred' }), intent: Intent.DANGER, position: Position.BOTTOM, }); history.push('/auth/login'); - setSubmitting(false); - }) - .catch((errors) => { - if (errors.find((e) => e.type === 'TOKEN_INVALID')) { - AppToaster.show({ - message: formatMessage('an_unexpected_error_occurred'), - intent: Intent.DANGER, - position: Position.BOTTOM, - }); - history.push('/auth/login'); - } - setSubmitting(false); - }); - }, - }); + } + setSubmitting(false); + }); + }; return ( @@ -93,66 +72,13 @@ function ResetPassword({ requestResetPassword }) { -
- } - intent={errors.password && touched.password && Intent.DANGER} - helperText={ - - } - className={'form-group--password'} - > - - - - } - labelInfo={'(again):'} - intent={ - errors.confirm_password && - touched.confirm_password && - Intent.DANGER - } - helperText={ - - } - className={'form-group--confirm-password'} - > - - - -
- -
-
+ ); -} - -export default compose(withAuthenticationActions)(ResetPassword); +} \ No newline at end of file diff --git a/client/src/containers/Authentication/ResetPasswordForm.js b/client/src/containers/Authentication/ResetPasswordForm.js new file mode 100644 index 000000000..30a7bb446 --- /dev/null +++ b/client/src/containers/Authentication/ResetPasswordForm.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core'; +import { Form, ErrorMessage, FastField } from 'formik'; +import { FormattedMessage as T } from 'react-intl'; +import { inputIntent } from 'utils'; + +/** + * Reset password form. + */ +export default function ResetPasswordForm({ isSubmitting }) { + return ( +
+ + {({ form, field, meta: { error, touched } }) => ( + } + intent={inputIntent({ error, touched })} + helperText={} + className={'form-group--password'} + > + + + )} + + + + {({ form, field, meta: { error, touched } }) => ( + } + labelInfo={'(again):'} + intent={inputIntent({ error, touched })} + helperText={} + className={'form-group--confirm-password'} + > + + + )} + + +
+ +
+
+ ); +} diff --git a/client/src/containers/Authentication/SendResetPassword.js b/client/src/containers/Authentication/SendResetPassword.js index 637304e29..b467e3cc5 100644 --- a/client/src/containers/Authentication/SendResetPassword.js +++ b/client/src/containers/Authentication/SendResetPassword.js @@ -1,75 +1,60 @@ import React, { useMemo } from 'react'; -import * as Yup from 'yup'; -import { useFormik } from 'formik'; +import { Formik } from 'formik'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { Link, useHistory } from 'react-router-dom'; -import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core'; +import { Intent } from '@blueprintjs/core'; -import { compose } from 'utils'; +import { useAuthSendResetPassword } from 'hooks/query'; +import Toaster from 'components/AppToaster'; +import SendResetPasswordForm from './SendResetPasswordForm'; +import { SendResetPasswordSchema, transformSendResetPassErrorsToToasts } from './utils'; import AppToaster from 'components/AppToaster'; -import ErrorMessage from 'components/ErrorMessage'; - import AuthInsider from 'containers/Authentication/AuthInsider'; -import withAuthenticationActions from './withAuthenticationActions'; - -function SendResetPassword({ requestSendResetPassword }) { +/** + * Send reset password page. + */ +export default function SendResetPassword({ requestSendResetPassword }) { const { formatMessage } = useIntl(); const history = useHistory(); - // Validation schema. - const ValidationSchema = Yup.object().shape({ - crediential: Yup.string() - .required() - .email().label(formatMessage({ id: 'email' })), - }); + const { mutateAsync: sendResetPasswordMutate } = useAuthSendResetPassword(); + // Initial values. const initialValues = useMemo( () => ({ crediential: '', }), - [] + [], ); - // Formik validation - const { - errors, - touched, - handleSubmit, - getFieldProps, - isSubmitting, - } = useFormik({ - enableReinitialize: true, - validationSchema: ValidationSchema, - initialValues: { - ...initialValues, - }, - onSubmit: (values, { setSubmitting }) => { - requestSendResetPassword(values.crediential) - .then((response) => { - AppToaster.show({ - message: formatMessage({id:'check_your_email_for_a_link_to_reset'}), - intent: Intent.SUCCESS, - }); - history.push('/auth/login'); - setSubmitting(false); - }) - .catch((errors) => { - if (errors.find((e) => e.type === 'EMAIL.NOT.REGISTERED')) { - AppToaster.show({ - message: formatMessage({id:'we_couldn_t_find_your_account_with_that_email'}), - intent: Intent.DANGER, - }); - } - setSubmitting(false); + // Handle form submitting. + const handleSubmit = (values, { setSubmitting }) => { + sendResetPasswordMutate({ email: values.crediential }) + .then((response) => { + AppToaster.show({ + message: formatMessage({ + id: 'check_your_email_for_a_link_to_reset', + }), + intent: Intent.SUCCESS, }); - }, - }); + history.push('/auth/login'); + setSubmitting(false); + }) + .catch(({ response: { data: { errors } } }) => { + const toastBuilders = transformSendResetPassErrorsToToasts(errors); + + toastBuilders.forEach((builder) => { + Toaster.show(builder); + }); + setSubmitting(false); + }); + }; return ( -
+

@@ -79,38 +64,14 @@ function SendResetPassword({ requestSendResetPassword }) {

-
- - } - className={'form-group--crediential'} - > - - - -
- -
-
- -
- + +
+
@@ -118,5 +79,3 @@ function SendResetPassword({ requestSendResetPassword }) { ); } - -export default compose(withAuthenticationActions)(SendResetPassword); diff --git a/client/src/containers/Authentication/SendResetPasswordForm.js b/client/src/containers/Authentication/SendResetPasswordForm.js new file mode 100644 index 000000000..5107c045d --- /dev/null +++ b/client/src/containers/Authentication/SendResetPasswordForm.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { + Button, + InputGroup, + Intent, + FormGroup, +} from '@blueprintjs/core'; +import { Form, ErrorMessage, FastField } from 'formik'; +import { FormattedMessage as T } from 'react-intl'; +import { inputIntent } from 'utils'; + +/** + * Send reset password form. + */ +export default function SendResetPasswordForm({ + isSubmitting +}) { + return ( +
+ + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--crediential'} + > + + + )} + + +
+ +
+
+ ); +} diff --git a/client/src/containers/Authentication/components.js b/client/src/containers/Authentication/components.js new file mode 100644 index 000000000..afa369ea4 --- /dev/null +++ b/client/src/containers/Authentication/components.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { FormattedMessage as T } from 'react-intl'; +import ContentLoader from 'react-content-loader'; +import { If, Icon } from 'components'; + +export function PasswordRevealer({ shown, onClick }) { + return ( + + + {' '} + + + + + + {' '} + + + + + + ); +} + +/** + * Invite accept loading space. + */ +export function InviteAcceptLoading({ isLoading, children, ...props }) { + return isLoading ? ( + + + + + + + + + ) : ( + children + ); +} diff --git a/client/src/containers/Authentication/utils.js b/client/src/containers/Authentication/utils.js new file mode 100644 index 000000000..c0f8f441d --- /dev/null +++ b/client/src/containers/Authentication/utils.js @@ -0,0 +1,145 @@ +import * as Yup from 'yup'; +import { Intent } from '@blueprintjs/core'; +import { formatMessage } from 'services/intl'; + +export const LOGIN_ERRORS = { + INVALID_DETAILS: 'INVALID_DETAILS', + USER_INACTIVE: 'USER_INACTIVE', + LOGIN_TO_MANY_ATTEMPTS: 'LOGIN_TO_MANY_ATTEMPTS', +}; + +const REGISTER_ERRORS = { + PHONE_NUMBER_EXISTS: 'PHONE_NUMBER_EXISTS', + EMAIL_EXISTS: 'EMAIL.EXISTS', +}; + + +export const LoginSchema = Yup.object().shape({ + crediential: Yup.string() + .required() + .email() + .label(formatMessage({ id: 'email' })), + password: Yup.string() + .required() + .min(4) + .label(formatMessage({ id: 'password' })), +}); + +export const RegisterSchema = Yup.object().shape({ + first_name: Yup.string() + .required() + .label(formatMessage({ id: 'first_name_' })), + last_name: Yup.string() + .required() + .label(formatMessage({ id: 'last_name_' })), + email: Yup.string() + .email() + .required() + .label(formatMessage({ id: 'email' })), + phone_number: Yup.string() + .matches() + .required() + .label(formatMessage({ id: 'phone_number_' })), + password: Yup.string() + .min(4) + .required() + .label(formatMessage({ id: 'password' })), +}); + +export const ResetPasswordSchema = Yup.object().shape({ + password: Yup.string() + .min(4) + .required() + .label(formatMessage({ id: 'password' })), + confirm_password: Yup.string() + .oneOf([Yup.ref('password'), null]) + .required() + .label(formatMessage({ id: 'confirm_password' })), +}); + +// Validation schema. +export const SendResetPasswordSchema = Yup.object().shape({ + crediential: Yup.string() + .required() + .email() + .label(formatMessage({ id: 'email' })), +}); + +export const InviteAcceptSchema = Yup.object().shape({ + first_name: Yup.string() + .required() + .label(formatMessage({ id: 'first_name_' })), + last_name: Yup.string() + .required() + .label(formatMessage({ id: 'last_name_' })), + phone_number: Yup.string() + .matches() + .required() + .label(formatMessage({ id: 'phone_number' })), + password: Yup.string() + .min(4) + .required() + .label(formatMessage({ id: 'password' })), +}); + +export const transformSendResetPassErrorsToToasts = (errors) => { + const toastBuilders = []; + + if (errors.find((e) => e.type === 'EMAIL.NOT.REGISTERED')) { + toastBuilders.push({ + message: formatMessage({ + id: 'we_couldn_t_find_your_account_with_that_email', + }), + intent: Intent.DANGER, + }); + } + return toastBuilders; +} + +export const transformLoginErrorsToToasts = (errors) => { + const toastBuilders = []; + + if (errors.find((e) => e.type === LOGIN_ERRORS.INVALID_DETAILS)) { + toastBuilders.push({ + message: formatMessage({ + id: 'email_and_password_entered_did_not_match', + }), + intent: Intent.DANGER, + }); + } + if (errors.find((e) => e.type === LOGIN_ERRORS.USER_INACTIVE)) { + toastBuilders.push({ + message: formatMessage({ + id: 'the_user_has_been_suspended_from_admin', + }), + intent: Intent.DANGER, + }); + } + if ( + errors.find((e) => e.type === LOGIN_ERRORS.LOGIN_TO_MANY_ATTEMPTS) + ) { + toastBuilders.push({ + message: formatMessage({ + id: 'your_account_has_been_locked', + }), + intent: Intent.DANGER, + }); + } + return toastBuilders; +} + +export const transformRegisterErrorsToForm = (errors) => { + const formErrors = {}; + + if (errors.some((e) => e.type === REGISTER_ERRORS.PHONE_NUMBER_EXISTS)) { + formErrors.phone_number = formatMessage({ + id: 'the_phone_number_already_used_in_another_account', + }); + } + if (errors.some((e) => e.type === REGISTER_ERRORS.EMAIL_EXISTS)) { + formErrors.email = formatMessage({ + id: 'the_email_already_used_in_another_account', + }); + } + return formErrors; +} \ No newline at end of file diff --git a/client/src/containers/Authentication/withAuthenticationActions.js b/client/src/containers/Authentication/withAuthenticationActions.js index 46837eee0..a07c3eeb1 100644 --- a/client/src/containers/Authentication/withAuthenticationActions.js +++ b/client/src/containers/Authentication/withAuthenticationActions.js @@ -1,22 +1,13 @@ -import { - login, - resetPassword, - sendResetPassword, - inviteAccept, - register, - inviteMetaByToken, -} from 'store/authentication/authentication.actions'; import { connect } from 'react-redux'; -import t from 'store/types'; const mapDispatchToProps = (dispatch) => ({ - requestLogin: (form) => dispatch(login({ form })), - requestLogout: () => dispatch({ type: t.LOGOUT }), - requestRegister: (form) => dispatch(register({ form })), - requestSendResetPassword: (email) => dispatch(sendResetPassword({ email })), - requestResetPassword: (form, token) => dispatch(resetPassword({ form, token })), - requestInviteAccept: (form, token) => dispatch(inviteAccept({ form, token })), - requestInviteMetaByToken: (token) => dispatch(inviteMetaByToken({ token })), + // requestLogin: (form) => dispatch(login({ form })), + // requestLogout: () => dispatch({ type: t.LOGOUT }), + // requestRegister: (form) => dispatch(register({ form })), + // requestSendResetPassword: (email) => dispatch(sendResetPassword({ email })), + // requestResetPassword: (form, token) => dispatch(resetPassword({ form, token })), + // requestInviteAccept: (form, token) => dispatch(inviteAccept({ form, token })), + // requestInviteMetaByToken: (token) => dispatch(inviteMetaByToken({ token })), }); export default connect(null, mapDispatchToProps); \ No newline at end of file diff --git a/client/src/containers/JournalNumber/ReferenceNumberForm.js b/client/src/containers/JournalNumber/ReferenceNumberForm.js index 0617eae12..7249c62d9 100644 --- a/client/src/containers/JournalNumber/ReferenceNumberForm.js +++ b/client/src/containers/JournalNumber/ReferenceNumberForm.js @@ -1,9 +1,8 @@ import React, { useMemo } from 'react'; import * as Yup from 'yup'; import { useFormik } from 'formik'; -import { Row, Col } from 'react-grid-system'; +import { Row, Col, ErrorMessage } from 'components'; import { FormattedMessage as T } from 'react-intl'; -import { ErrorMessage } from 'components'; import { Button, Classes, diff --git a/client/src/containers/Setup/SetupLeftSection.js b/client/src/containers/Setup/SetupLeftSection.js index 329e76ff3..82c69e816 100644 --- a/client/src/containers/Setup/SetupLeftSection.js +++ b/client/src/containers/Setup/SetupLeftSection.js @@ -1,14 +1,9 @@ -import React, { useCallback } from 'react'; +import React from 'react'; import { Icon, For } from 'components'; import { FormattedMessage as T } from 'react-intl'; -import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions'; -import withAuthentication from 'containers/Authentication/withAuthentication'; - import footerLinks from 'config/footerLinks'; - -import { compose } from 'utils'; - +import { useAuthActions, useAuthOrganizationId } from 'hooks/state'; function FooterLinkItem({ title, link }) { return ( @@ -21,16 +16,13 @@ function FooterLinkItem({ title, link }) { /** * Wizard setup left section. */ -function SetupLeftSection({ - // #withAuthenticationActions - requestLogout, +export default function SetupLeftSection() { + const { setLogout } = useAuthActions(); + const organizationId = useAuthOrganizationId(); - // #withAuthentication - currentOrganizationId -}) { - const onClickLogout = useCallback(() => { - requestLogout(); - }, [requestLogout]); + const onClickLogout = () => { + setLogout(); + }; return (
@@ -50,7 +42,7 @@ function SetupLeftSection({
- Oragnization ID: { currentOrganizationId }, + Oragnization ID: { organizationId },
@@ -70,9 +62,4 @@ function SetupLeftSection({
) -} - -export default compose( - withAuthenticationActions, - withAuthentication(({ currentOrganizationId }) => ({ currentOrganizationId })), -)(SetupLeftSection); +} \ No newline at end of file diff --git a/client/src/containers/Subscriptions/BillingPlansForm.js b/client/src/containers/Subscriptions/BillingPlansForm.js index 44dd01a6b..789bba008 100644 --- a/client/src/containers/Subscriptions/BillingPlansForm.js +++ b/client/src/containers/Subscriptions/BillingPlansForm.js @@ -14,7 +14,7 @@ export default function BillingPlansForm() { return (
} + title={} description={} /> { @@ -11,9 +11,11 @@ const transformAccount = (response) => { * Retrieve accounts list. */ export function useAccounts(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['ACCOUNTS', query], - () => ApiService.get('accounts', { params: query }), + () => apiRequest.get('accounts', { params: query }), { select: (response) => { return response.data.accounts; @@ -32,9 +34,11 @@ export function useAccounts(query, props) { * @param {number} id - */ export function useAccount(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['ACCOUNT', id], - () => ApiService.get(`accounts/${id}`).then(transformAccount), + () => apiRequest.get(`accounts/${id}`).then(transformAccount), props, ); return { @@ -47,9 +51,11 @@ export function useAccount(id, props) { * Retrieve accounts types list. */ export function useAccountsTypes(props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['ACCOUNTS_TYPES'], - () => ApiService.get('account_types'), + () => apiRequest.get('account_types'), { select: (res) => res.data.account_types, ...props, @@ -66,8 +72,9 @@ export function useAccountsTypes(props) { */ export function useCreateAccount(props) { const client = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((values) => ApiService.post('accounts', values), { + return useMutation((values) => apiRequest.post('accounts', values), { onSuccess: () => { client.invalidateQueries('ACCOUNTS'); }, @@ -80,9 +87,10 @@ export function useCreateAccount(props) { */ export function useEditAccount(props) { const query = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id,values]) => ApiService.post(`accounts/${id}`, values), + ([id, values]) => apiRequest.post(`accounts/${id}`, values), { onSuccess: () => { query.invalidateQueries('ACCOUNTS'); @@ -97,8 +105,9 @@ export function useEditAccount(props) { */ export function useDeleteAccount(props) { const query = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.delete(`accounts/${id}`), { + return useMutation((id) => apiRequest.delete(`accounts/${id}`), { onSuccess: () => { query.invalidateQueries('ACCOUNTS'); }, @@ -111,8 +120,9 @@ export function useDeleteAccount(props) { */ export function useActivateAccount(props) { const query = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.post(`accounts/${id}/activate`), { + return useMutation((id) => apiRequest.post(`accounts/${id}/activate`), { onSuccess: () => { query.invalidateQueries('ACCOUNTS'); }, @@ -125,8 +135,9 @@ export function useActivateAccount(props) { */ export function useInactivateAccount(props) { const query = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.post(`accounts/${id}/inactivate`), { + return useMutation((id) => apiRequest.post(`accounts/${id}/inactivate`), { onSuccess: () => { query.invalidateQueries('ACCOUNTS'); }, diff --git a/client/src/hooks/query/authentication.js b/client/src/hooks/query/authentication.js new file mode 100644 index 000000000..8a780b210 --- /dev/null +++ b/client/src/hooks/query/authentication.js @@ -0,0 +1,63 @@ +import { useEffect } from 'react'; +import { useMutation } from 'react-query'; +import useApiRequest from '../useRequest'; +import { useAuthActions } from '../state'; + +/** + * Authentication login. + */ +export const useAuthLogin = (props) => { + const { setLogin } = useAuthActions(); + const apiRequest = useApiRequest(); + + const states = useMutation( + (values) => apiRequest.post('auth/login', values), + { + select: (res) => res.data, + ...props + } + ); + const { isSuccess, data: response } = states; + + useEffect(() => { + if (isSuccess) { setLogin(response.data); } + }, [isSuccess, response, setLogin]); + + return states; +}; + +/** + * Authentication register. + */ +export const useAuthRegister = (props) => { + const apiRequest = useApiRequest(); + + return useMutation( + (values) => apiRequest.post('auth/register', values), + props, + ) +}; + +/** + * Authentication send reset password. + */ +export const useAuthSendResetPassword = (props) => { + const apiRequest = useApiRequest(); + + return useMutation( + (email) => apiRequest.post('auth/send_reset_password', email), + props + ); +} + +/** + * Authentication reset password. + */ +export const useAuthResetPassword = (props) => { + const apiRequest = useApiRequest(); + + return useMutation( + ([token, values]) => apiRequest.post(`auth/reset/${token}`, values), + props, + ) +} diff --git a/client/src/hooks/query/bills.js b/client/src/hooks/query/bills.js index 3697eeb00..809ffd285 100644 --- a/client/src/hooks/query/bills.js +++ b/client/src/hooks/query/bills.js @@ -1,15 +1,16 @@ import { useQueryClient, useQuery, useMutation } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; import { transformPagination } from 'utils'; +import useApiRequest from '../useRequest'; /** * Creates a new sale invoice. */ export function useCreateBill(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((values) => ApiService.post('purchases/bills', values), { + return useMutation((values) => apiRequest.post('purchases/bills', values), { onSuccess: () => { queryClient.invalidateQueries('BILLS'); queryClient.invalidateQueries('BILL'); @@ -23,9 +24,10 @@ export function useCreateBill(props) { */ export function useEditBill(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`purchases/bills/${id}`, values), + ([id, values]) => apiRequest.post(`purchases/bills/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('BILLS'); @@ -41,8 +43,9 @@ export function useEditBill(props) { */ export function useDeleteBill(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.delete(`purchases/bills/${id}`), { + return useMutation((id) => apiRequest.delete(`purchases/bills/${id}`), { onSuccess: () => { queryClient.invalidateQueries('BILLS'); queryClient.invalidateQueries('BILL'); @@ -55,10 +58,12 @@ export function useDeleteBill(props) { * Retrieve sale invoices list with pagination meta. */ export function useBills(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['BILLS', query], () => - ApiService.get('purchases/bills', { params: query }), + apiRequest.get('purchases/bills', { params: query }), { select: (response) => ({ bills: response.data.bills, @@ -88,9 +93,11 @@ export function useBills(query, props) { * @param {number} id - Bill id. */ export function useBill(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['BILL', id], - () => ApiService.get(`/purchases/bills/${id}`), + () => apiRequest.get(`/purchases/bills/${id}`), { select: (res) => res.data.bill, ...props, @@ -108,9 +115,10 @@ export function useBill(id, props) { */ export function useOpenBill(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.delete(`purchases/bills/${id}/open`), + (id) => apiRequest.delete(`purchases/bills/${id}/open`), { onSuccess: () => { queryClient.invalidateQueries('BILLS'); @@ -125,10 +133,12 @@ export function useOpenBill(props) { * @param {number} vendorId - */ export function useDueBills(vendorId, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['BILLS_DUE', vendorId], () => - ApiService.get(`purchases/bills/due`, { + apiRequest.get(`purchases/bills/due`, { params: { vendor_id: vendorId }, }), { diff --git a/client/src/hooks/query/currencies.js b/client/src/hooks/query/currencies.js index 4dc2cac46..426918fd1 100644 --- a/client/src/hooks/query/currencies.js +++ b/client/src/hooks/query/currencies.js @@ -1,22 +1,20 @@ import { useMutation, useQueryClient, useQuery } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; +import useApiRequest from '../useRequest'; /** * Create a new currency. */ export function useCreateCurrency(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation( - (values) => ApiService.post('currencies', values), - { - onSuccess: () => { - queryClient.invalidateQueries('CURRENCIES'); - }, - ...props, - } - ); + return useMutation((values) => apiRequest.post('currencies', values), { + onSuccess: () => { + queryClient.invalidateQueries('CURRENCIES'); + }, + ...props, + }); } /** @@ -24,15 +22,17 @@ export function useCreateCurrency(props) { */ export function useEditCurrency(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation(([currencyCode, values]) => - ApiService.post(`currencies/${currencyCode}`, values), + return useMutation( + ([currencyCode, values]) => + apiRequest.post(`currencies/${currencyCode}`, values), { onSuccess: () => { queryClient.invalidateQueries('CURRENCIES'); }, ...props, - } + }, ); } @@ -41,15 +41,16 @@ export function useEditCurrency(props) { */ export function useDeleteCurrency(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((currencyCode) => - ApiService.delete(`currencies/${currencyCode}`), + return useMutation( + (currencyCode) => apiRequest.delete(`currencies/${currencyCode}`), { onSuccess: () => { queryClient.invalidateQueries('CURRENCIES'); }, - ...props - } + ...props, + }, ); } @@ -57,14 +58,16 @@ export function useDeleteCurrency(props) { * Retrieve the currencies list. */ export function useCurrencies(props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['CURRENCIES'], - () => ApiService.get('currencies').then(res => res.data.currencies), + () => apiRequest.get('currencies').then((res) => res.data.currencies), props, ); return { ...states, data: defaultTo(states.data, []), - } + }; } diff --git a/client/src/hooks/query/customers.js b/client/src/hooks/query/customers.js index 967ee7e4c..30c2acf85 100644 --- a/client/src/hooks/query/customers.js +++ b/client/src/hooks/query/customers.js @@ -1,7 +1,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; import { transformPagination } from 'utils'; +import useApiRequest from '../useRequest'; const defaultPagination = { pageSize: 12, @@ -13,9 +13,11 @@ const defaultPagination = { * Retrieve customers list with pagination meta. */ export function useCustomers(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['CUSTOMERS', query], - () => ApiService.get(`customers`, { params: query }), + () => apiRequest.get(`customers`, { params: query }), { select: (response) => ({ customers: response.data.customers, @@ -42,9 +44,10 @@ export function useCustomers(query, props) { */ export function useEditCustomer(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`customers/${id}`, values), + ([id, values]) => apiRequest.post(`customers/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('CUSTOMERS'); @@ -60,9 +63,10 @@ export function useEditCustomer(props) { */ export function useDeleteCustomer(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.delete(`customers/${id}`), + (id) => apiRequest.delete(`customers/${id}`), { onSuccess: () => { queryClient.invalidateQueries('CUSTOMERS'); @@ -78,9 +82,10 @@ export function useDeleteCustomer(props) { */ export function useCreateCustomer(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (values) => ApiService.post('customers', values), + (values) => apiRequest.post('customers', values), { onSuccess: () => { queryClient.invalidateQueries('CUSTOMERS'); @@ -94,9 +99,12 @@ export function useCreateCustomer(props) { * Retrieve the customer details. */ export function useCustomer(id, props) { + const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); + return useQuery( ['CUSTOMER', id], - () => ApiService.get(`customers/${id}`), + () => apiRequest.get(`customers/${id}`), { select: (res) => res.data.customer, ...props diff --git a/client/src/hooks/query/estimates.js b/client/src/hooks/query/estimates.js index 5e8139f99..b35162687 100644 --- a/client/src/hooks/query/estimates.js +++ b/client/src/hooks/query/estimates.js @@ -1,6 +1,6 @@ import { useQueryClient, useQuery, useMutation } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; +import useApiRequest from '../useRequest'; import { transformPagination } from 'utils'; /** @@ -8,8 +8,9 @@ import { transformPagination } from 'utils'; */ export function useCreateEstimate(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((values) => ApiService.post('sales/estimates', values), { + return useMutation((values) => apiRequest.post('sales/estimates', values), { onSuccess: () => { queryClient.invalidateQueries('SALE_ESTIMATES'); }, @@ -22,9 +23,10 @@ export function useCreateEstimate(props) { */ export function useEditEstimate(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`sales/estimates/${id}`, values), + ([id, values]) => apiRequest.post(`sales/estimates/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('SALE_ESTIMATES'); @@ -38,9 +40,11 @@ export function useEditEstimate(props) { * Retrieve sale estimate details. */ export function useEstimate(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['SALE_ESTIMATE', id], - () => ApiService.get(`sales/estimates/${id}`), + () => apiRequest.get(`sales/estimates/${id}`), { select: (res) => res.data.estimate, ...props, @@ -57,9 +61,11 @@ export function useEstimate(id, props) { * Retrieve sale invoices list with pagination meta. */ export function useEstimates(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['SALE_ESTIMATES', query], - () => ApiService.get('sales/estimates', { params: query }), + () => apiRequest.get('sales/estimates', { params: query }), { select: (res) => ({ estimates: res.data.sales_estimates, @@ -89,8 +95,9 @@ export function useEstimates(query, props) { */ export function useDeleteEstimate(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.delete(`sales/estimates/${id}`), { + return useMutation((id) => apiRequest.delete(`sales/estimates/${id}`), { onSuccess: () => { queryClient.invalidateQueries('SALE_ESTIMATES'); }, @@ -103,9 +110,10 @@ export function useDeleteEstimate(props) { */ export function useDeliverEstimate(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.post(`sales/estimates/${id}/deliver`), + (id) => apiRequest.post(`sales/estimates/${id}/deliver`), { onSuccess: () => { queryClient.invalidateQueries('SALE_ESTIMATES'); @@ -120,9 +128,10 @@ export function useDeliverEstimate(props) { */ export function useApproveEstimate(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.post(`sales/estimates/${id}/approve`), + (id) => apiRequest.post(`sales/estimates/${id}/approve`), { onSuccess: () => { queryClient.invalidateQueries('SALE_ESTIMATES'); @@ -137,9 +146,10 @@ export function useApproveEstimate(props) { */ export function useRejectEstimate(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.post(`sales/estimates/${id}/reject`), + (id) => apiRequest.post(`sales/estimates/${id}/reject`), { onSuccess: () => { queryClient.invalidateQueries('SALE_ESTIMATES'); diff --git a/client/src/hooks/query/expenses.js b/client/src/hooks/query/expenses.js index d9cc4f52f..28dd3d8bc 100644 --- a/client/src/hooks/query/expenses.js +++ b/client/src/hooks/query/expenses.js @@ -1,6 +1,6 @@ import { useQuery, useMutation, useQueryClient } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; +import useApiRequest from '../useRequest'; import { transformPagination } from 'utils'; const defaultPagination = { @@ -13,9 +13,11 @@ const defaultPagination = { * Retrieve the expenses list. */ export function useExpenses(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['EXPENSES', query], - () => ApiService.get(`expenses`, { params: { ...query } }), + () => apiRequest.get(`expenses`, { params: { ...query } }), { select: (response) => ({ expenses: response.data.expenses, @@ -41,10 +43,16 @@ export function useExpenses(query, props) { * @param {number} id - Expense id. */ export function useExpense(id, props) { - const states = useQuery(['EXPENSE', id], () => ApiService.get(`expenses/${id}`), { - select: (res) => res.data.expense, - ...props, - }); + const apiRequest = useApiRequest(); + + const states = useQuery( + ['EXPENSE', id], + () => apiRequest.get(`expenses/${id}`), + { + select: (res) => res.data.expense, + ...props, + }, + ); return { ...states, @@ -56,9 +64,10 @@ export function useExpense(id, props) { * Deletes the given expense. */ export function useDeleteExpense(props) { + const apiRequest = useApiRequest(); const queryClient = useQueryClient(); - return useMutation((id) => ApiService.delete(`expenses/${id}`), { + return useMutation((id) => apiRequest.delete(`expenses/${id}`), { onSuccess: () => { queryClient.invalidateQueries('EXPENSES'); queryClient.invalidateQueries('EXPENSE'); @@ -72,9 +81,10 @@ export function useDeleteExpense(props) { */ export function useEditExpense(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`expenses/${id}`, values), + ([id, values]) => apiRequest.post(`expenses/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('EXPENSES'); @@ -90,8 +100,9 @@ export function useEditExpense(props) { */ export function useCreateExpense(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((values) => ApiService.post('expenses', values), { + return useMutation((values) => apiRequest.post('expenses', values), { onSuccess: () => { queryClient.invalidateQueries('EXPENSES'); queryClient.invalidateQueries('EXPENSE'); @@ -105,12 +116,13 @@ export function useCreateExpense(props) { */ export function usePublishExpense(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.post(`expenses/${id}/publish`), { + return useMutation((id) => apiRequest.post(`expenses/${id}/publish`), { onSuccess: () => { queryClient.invalidateQueries('EXPENSES'); queryClient.invalidateQueries('EXPENSE'); }, ...props, }); -} \ No newline at end of file +} diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js index 34f988a69..54558157c 100644 --- a/client/src/hooks/query/financialReports.js +++ b/client/src/hooks/query/financialReports.js @@ -1,6 +1,5 @@ import { useQuery } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; import { trialBalanceSheetReducer, balanceSheetRowsReducer, @@ -8,15 +7,18 @@ import { generalLedgerTableRowsReducer, journalTableRowsReducer, } from 'containers/FinancialStatements/reducers'; +import useApiRequest from '../useRequest'; /** * Retrieve balance sheet. */ export function useBalanceSheet(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['FINANCIAL-REPORT', 'BALANCE-SHEET', query], () => - ApiService.get('/financial_statements/balance_sheet', { + apiRequest.get('/financial_statements/balance_sheet', { params: query, }), { @@ -43,10 +45,12 @@ export function useBalanceSheet(query, props) { * Retrieve trial balance sheet. */ export function useTrialBalanceSheet(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['FINANCIAL-REPORT', 'TRIAL-BALANCE-SHEET', query], () => - ApiService.get('/financial_statements/trial_balance_sheet', { + apiRequest.get('/financial_statements/trial_balance_sheet', { params: query, }), { @@ -72,10 +76,12 @@ export function useTrialBalanceSheet(query, props) { * Retrieve profit/loss (P&L) sheet. */ export function useProfitLossSheet(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['FINANCIAL-REPORT', 'PROFIT-LOSS-SHEET', query], () => - ApiService.get('/financial_statements/profit_loss_sheet', { + apiRequest.get('/financial_statements/profit_loss_sheet', { params: query, }), { @@ -101,10 +107,12 @@ export function useProfitLossSheet(query, props) { * Retrieve general ledger (GL) sheet. */ export function useGeneralLedgerSheet(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['FINANCIAL-REPORT', 'GENERAL-LEDGER', query], () => - ApiService.get('/financial_statements/general_ledger', { + apiRequest.get('/financial_statements/general_ledger', { params: query, }), { @@ -130,10 +138,12 @@ export function useGeneralLedgerSheet(query, props) { * Retrieve journal sheet. */ export function useJournalSheet(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['FINANCIAL-REPORT', 'JOURNAL', query], () => - ApiService.get('/financial_statements/journal', { params: query }), + apiRequest.get('/financial_statements/journal', { params: query }), { select: (res) => ({ tableRows: journalTableRowsReducer(res.data.data), @@ -157,10 +167,12 @@ export function useJournalSheet(query, props) { * Retrieve AR aging summary report. */ export function useARAgingSummaryReport(query, props) { + const apiRequest = useApiRequest(); + return useQuery( ['FINANCIAL-REPORT', 'AR-AGING-SUMMARY', query], () => - ApiService.get('/financial_statements/receivable_aging_summary', { + apiRequest.get('/financial_statements/receivable_aging_summary', { params: query, }), props, diff --git a/client/src/hooks/query/index.js b/client/src/hooks/query/index.js index 640214bfd..8dae21b77 100644 --- a/client/src/hooks/query/index.js +++ b/client/src/hooks/query/index.js @@ -1,4 +1,4 @@ - +export * from './authentication'; export * from './accounts'; export * from './views'; export * from './items'; @@ -17,4 +17,5 @@ export * from './receipts'; export * from './paymentReceives'; export * from './paymentMades'; export * from './settings'; -export * from './users'; \ No newline at end of file +export * from './users'; +export * from './invite'; \ No newline at end of file diff --git a/client/src/hooks/query/inventoryAdjustments.js b/client/src/hooks/query/inventoryAdjustments.js index 079ee9ae8..47d8bd726 100644 --- a/client/src/hooks/query/inventoryAdjustments.js +++ b/client/src/hooks/query/inventoryAdjustments.js @@ -1,7 +1,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; import { transformPagination } from 'utils'; +import useApiRequest from '../useRequest'; const invalidateQueries = (queryClient) => { queryClient.invalidateQueries('INVENTORY_ADJUSTMENTS'); @@ -15,9 +15,10 @@ const invalidateQueries = (queryClient) => { */ export function useCreateInventoryAdjustment(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (values) => ApiService.post('inventory_adjustments/quick', values), + (values) => apiRequest.post('inventory_adjustments/quick', values), { onSuccess: () => { invalidateQueries(queryClient) @@ -32,9 +33,10 @@ export function useCreateInventoryAdjustment(props) { */ export function useDeleteInventoryAdjustment(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.delete(`inventory_adjustments/${id}`), + (id) => apiRequest.delete(`inventory_adjustments/${id}`), { onSuccess: () => { invalidateQueries(queryClient) @@ -55,9 +57,11 @@ const inventoryAdjustmentsTransformer = (response) => { * Retrieve inventory adjustment list with pagination meta. */ export function useInventoryAdjustments(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['INVENTORY_ADJUSTMENTS', query], - () => ApiService.get('inventory_adjustments', { params: query }) + () => apiRequest.get('inventory_adjustments', { params: query }) .then(inventoryAdjustmentsTransformer), props, ); diff --git a/client/src/hooks/query/invite.js b/client/src/hooks/query/invite.js new file mode 100644 index 000000000..f547fff0c --- /dev/null +++ b/client/src/hooks/query/invite.js @@ -0,0 +1,31 @@ +import { useMutation, useQuery } from 'react-query'; +import useApiRequest from '../useRequest'; + +/** + * Authentication invite accept. + */ +export const useAuthInviteAccept = (props) => { + const apiRequest = useApiRequest(); + + return useMutation( + ([values, token]) => apiRequest.post(`invite/accept/${token}`, values), + props, + ) +} + +/** + * Retrieve the invite meta by the given token. + * @param {string} token - Token. + */ +export const useInviteMetaByToken = (token, props) => { + const apiRequest = useApiRequest(); + + return useQuery( + ['INVITE_META', token], + () => apiRequest.get(`invite/invited/${token}`), + { + select: (res) => res.data, + ...props + } + ); +} \ No newline at end of file diff --git a/client/src/hooks/query/invoices.js b/client/src/hooks/query/invoices.js index 75200b557..0ab447626 100644 --- a/client/src/hooks/query/invoices.js +++ b/client/src/hooks/query/invoices.js @@ -1,15 +1,16 @@ import { defaultTo } from 'lodash'; import { useQueryClient, useQuery, useMutation } from 'react-query'; -import ApiService from 'services/ApiService'; import { transformPagination } from 'utils'; +import useApiRequest from '../useRequest'; /** * Creates a new sale invoice. */ export function useCreateInvoice(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((values) => ApiService.post('sales/invoices', values), { + return useMutation((values) => apiRequest.post('sales/invoices', values), { onSuccess: () => { queryClient.invalidateQueries('SALE_INVOICES'); }, @@ -22,9 +23,10 @@ export function useCreateInvoice(props) { */ export function useEditInvoice(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`sales/invoices/${id}`, values), + ([id, values]) => apiRequest.post(`sales/invoices/${id}`, values), { onSuccess: (res, id) => { queryClient.invalidateQueries('SALE_INVOICES'); @@ -40,8 +42,9 @@ export function useEditInvoice(props) { */ export function useDeleteInvoice(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.delete(`sales/invoices/${id}`), { + return useMutation((id) => apiRequest.delete(`sales/invoices/${id}`), { onSuccess: (res, id) => { queryClient.invalidateQueries('SALE_INVOICES'); queryClient.invalidateQueries(['SALE_INVOICE', id]); @@ -54,9 +57,11 @@ export function useDeleteInvoice(props) { * Retrieve sale invoices list with pagination meta. */ export function useInvoices(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['SALE_INVOICES', query], - () => ApiService.get('sales/invoices', { params: query }), + () => apiRequest.get('sales/invoices', { params: query }), { select: (res) => ({ invoices: res.data.sales_invoices, @@ -86,8 +91,9 @@ export function useInvoices(query, props) { */ export function useDeliverInvoice(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.post(`sales/invoices/${id}/deliver`), { + return useMutation((id) => apiRequest.post(`sales/invoices/${id}/deliver`), { onSuccess: (res, id) => { queryClient.invalidateQueries('SALE_INVOICES'); queryClient.invalidateQueries(['SALE_INVOICE', id]); @@ -100,9 +106,11 @@ export function useDeliverInvoice(props) { * Retrieve the sale invoice details. */ export function useInvoice(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['SALE_INVOICE', id], - () => ApiService.get(`sales/invoices/${id}`), + () => apiRequest.get(`sales/invoices/${id}`), { select: (res) => res.data.sale_invoice, ...props, @@ -120,10 +128,12 @@ export function useInvoice(id, props) { * @param {number} customerId - Customer id. */ export function useDueInvoices(customerId, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['SALE_INVOICE_DUE', customerId], () => - ApiService.get(`sales/invoices/payable`, { + apiRequest.get(`sales/invoices/payable`, { params: { customer_id: customerId }, }), { diff --git a/client/src/hooks/query/items.js b/client/src/hooks/query/items.js index 90786a7df..82e4feaf8 100644 --- a/client/src/hooks/query/items.js +++ b/client/src/hooks/query/items.js @@ -1,7 +1,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; import { transformPagination, transformResponse } from 'utils'; +import useApiRequest from '../useRequest'; const defaultPagination = { pageSize: 12, @@ -14,8 +14,9 @@ const defaultPagination = { */ export function useCreateItem(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((values) => ApiService.post('items', values), { + return useMutation((values) => apiRequest.post('items', values), { onSuccess: () => { queryClient.invalidateQueries('ITEMS'); queryClient.invalidateQueries('ITEMS_CATEGORIES'); @@ -29,8 +30,9 @@ export function useCreateItem(props) { */ export function useEditItem(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation(([id, values]) => ApiService.post(`items/${id}`, values), { + return useMutation(([id, values]) => apiRequest.post(`items/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('ITEMS'); queryClient.invalidateQueries('ITEM'); @@ -45,8 +47,9 @@ export function useEditItem(props) { */ export function useDeleteItem(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.delete(`items/${id}`), { + return useMutation((id) => apiRequest.delete(`items/${id}`), { onSuccess: () => { queryClient.invalidateQueries('ITEMS'); queryClient.invalidateQueries('ITEM'); @@ -71,10 +74,12 @@ const transformItemsResponse = (response) => { * Retrieves items list. */ export function useItems(query, props) { + const apiRequest = useApiRequest(); + const result = useQuery( ['ITEMS', query], () => - ApiService.get(`items`, { params: query }).then(transformItemsResponse), + apiRequest.get(`items`, { params: query }).then(transformItemsResponse), props, ); @@ -93,9 +98,11 @@ export function useItems(query, props) { * @param {number} id - Item id. */ export function useItem(id, props) { + const apiRequest = useApiRequest(); + return useQuery( ['ITEM', id], - () => ApiService.get(`items/${id}`).then((response) => response.data.item), + () => apiRequest.get(`items/${id}`).then((response) => response.data.item), props, ); } @@ -105,8 +112,9 @@ export function useItem(id, props) { */ export function useActivateItem(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.post(`items/${id}/activate`), { + return useMutation((id) => apiRequest.post(`items/${id}/activate`), { onSuccess: () => { queryClient.invalidateQueries('ITEMS'); queryClient.invalidateQueries('ITEM'); @@ -120,8 +128,9 @@ export function useActivateItem(props) { */ export function useInactivateItem(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.post(`items/${id}/inactivate`), { + return useMutation((id) => apiRequest.post(`items/${id}/inactivate`), { onSuccess: () => { queryClient.invalidateQueries('ITEMS'); queryClient.invalidateQueries('ITEM'); diff --git a/client/src/hooks/query/itemsCategories.js b/client/src/hooks/query/itemsCategories.js index 3453ef4c7..9a9c68766 100644 --- a/client/src/hooks/query/itemsCategories.js +++ b/client/src/hooks/query/itemsCategories.js @@ -1,14 +1,15 @@ import { useQuery, useMutation, useQueryClient } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; +import useApiRequest from '../useRequest'; /** * Creates a new item category. */ export function useCreateItemCategory(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((values) => ApiService.post('item_categories', values), { + return useMutation((values) => apiRequest.post('item_categories', values), { onSuccess: () => { queryClient.invalidateQueries('ITEMS_CATEGORIES'); }, @@ -21,9 +22,10 @@ export function useCreateItemCategory(props) { */ export function useEditItemCategory(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`item_categories/${id}`, values), + ([id, values]) => apiRequest.post(`item_categories/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('ITEMS_CATEGORIES'); @@ -39,8 +41,9 @@ export function useEditItemCategory(props) { */ export function useDeleteItemCategory(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.delete(`item_categories/${id}`), { + return useMutation((id) => apiRequest.delete(`item_categories/${id}`), { onSuccess: () => { queryClient.invalidateQueries('ITEMS_CATEGORIES'); queryClient.invalidateQueries('ITEMS'); @@ -61,10 +64,12 @@ const transformItemsCategories = (response) => { * Retrieve the items categories. */ export function useItemsCategories(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['ITEMS_CATEGORIES', query], () => - ApiService.get(`item_categories`, { params: query }).then( + apiRequest.get(`item_categories`, { params: query }).then( transformItemsCategories, ), props, @@ -84,10 +89,12 @@ export function useItemsCategories(query, props) { * @param {number} id - Item category. */ export function useItemCategory(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['ITEMS_CATEGORY', id], () => - ApiService.get(`item_categories/${id}`).then((res) => res.data.category), + apiRequest.get(`item_categories/${id}`).then((res) => res.data.category), props, ); diff --git a/client/src/hooks/query/manualJournals.js b/client/src/hooks/query/manualJournals.js index f98aafc21..1184019cb 100644 --- a/client/src/hooks/query/manualJournals.js +++ b/client/src/hooks/query/manualJournals.js @@ -1,16 +1,17 @@ import { defaultTo } from 'lodash'; import { useMutation, useQuery, useQueryClient } from 'react-query'; -import ApiService from 'services/ApiService'; import { transformPagination } from 'utils'; +import useApiRequest from '../useRequest'; /** * Creates a new manual journal. */ export function useCreateJournal(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (values) => ApiService.post('manual-journals', values), + (values) => apiRequest.post('manual-journals', values), { onSuccess: () => { queryClient.invalidateQueries('JOURNALS'); @@ -25,9 +26,10 @@ export function useCreateJournal(props) { */ export function useEditJournal(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`manual-journals/${id}`, values), + ([id, values]) => apiRequest.post(`manual-journals/${id}`, values), { onSuccess: (res, [id]) => { queryClient.invalidateQueries('JOURNALS'); @@ -43,9 +45,10 @@ export function useEditJournal(props) { */ export function useDeleteJournal(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.delete(`manual-journals/${id}`), + (id) => apiRequest.delete(`manual-journals/${id}`), { onSuccess: (res, id) => { queryClient.invalidateQueries('JOURNALS'); @@ -61,9 +64,10 @@ export function useDeleteJournal(props) { */ export function usePublishJournal(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.post(`manual-journals/${id}/publish`), + (id) => apiRequest.post(`manual-journals/${id}/publish`), { onSuccess: (res, id) => { queryClient.invalidateQueries('JOURNALS'); @@ -78,9 +82,11 @@ export function usePublishJournal(props) { * Retrieve the manual journals with pagination meta. */ export function useJournals(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['JOURNALS', query], - () => ApiService.get('manual-journals', { params: query }), + () => apiRequest.get('manual-journals', { params: query }), { select: (response) => ({ manualJournals: response.data.manual_journals, @@ -105,9 +111,11 @@ export function useJournals(query, props) { * Retrieve the manual journal details. */ export function useJournal(id, props) { + const apiRequest = useApiRequest(); + return useQuery( ['JOURNAL', id], - () => ApiService.get(`manual-journals/${id}`), + () => apiRequest.get(`manual-journals/${id}`), { select: (res) => res.data.manual_journal, ...props, diff --git a/client/src/hooks/query/paymentMades.js b/client/src/hooks/query/paymentMades.js index acb681548..994c7ed4b 100644 --- a/client/src/hooks/query/paymentMades.js +++ b/client/src/hooks/query/paymentMades.js @@ -1,15 +1,17 @@ import { defaultTo } from 'lodash'; import { useMutation, useQuery, useQueryClient } from 'react-query'; -import ApiService from 'services/ApiService'; import { transformPagination } from 'utils'; +import useApiRequest from '../useRequest'; /** * Retrieve payment mades list. */ export function usePaymentMades(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['PAYMENT_MADES', query], - () => ApiService.get('purchases/bill_payments', { params: query }), + () => apiRequest.get('purchases/bill_payments', { params: query }), { select: (res) => ({ paymentMades: res.data.bill_payments, @@ -35,9 +37,10 @@ export function usePaymentMades(query, props) { */ export function useCreatePaymentMade(props) { const client = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (values) => ApiService.post('purchases/bill_payments', values), + (values) => apiRequest.post('purchases/bill_payments', values), { onSuccess: () => { client.invalidateQueries('PAYMENT_MADES'); @@ -52,9 +55,10 @@ export function useCreatePaymentMade(props) { */ export function useEditPaymentMade(props) { const client = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`purchases/bill_payments/${id}`, values), + ([id, values]) => apiRequest.post(`purchases/bill_payments/${id}`, values), { onSuccess: (res, [id, values]) => { client.invalidateQueries('PAYMENT_MADES'); @@ -70,9 +74,10 @@ export function useEditPaymentMade(props) { */ export function useDeletePaymentMade(props) { const client = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.delete(`purchases/bill_payments/${id}`), + (id) => apiRequest.delete(`purchases/bill_payments/${id}`), { onSuccess: (res, id) => { client.invalidateQueries('PAYMENT_MADES'); @@ -87,9 +92,11 @@ export function useDeletePaymentMade(props) { * Retrieve specific payment made. */ export function usePaymentMade(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['PAYMENT_MADE', id], - () => ApiService.get(`purchases/bill_payments/${id}`), + () => apiRequest.get(`purchases/bill_payments/${id}`), { select: res => ({ paymentMade: res.data.bill_payment, diff --git a/client/src/hooks/query/paymentReceives.js b/client/src/hooks/query/paymentReceives.js index eb42d0c6f..ee243fc4d 100644 --- a/client/src/hooks/query/paymentReceives.js +++ b/client/src/hooks/query/paymentReceives.js @@ -1,15 +1,17 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; +import useApiRequest from '../useRequest'; import { transformPagination, saveInvoke } from 'utils'; /** * Retrieve accounts list. */ export function usePaymentReceives(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['PAYMENT_RECEIVES', query], - () => ApiService.get('sales/payment_receives', { params: query }), + () => apiRequest.get('sales/payment_receives', { params: query }), { select: (res) => ({ paymentReceives: res.data.payment_receives, @@ -39,9 +41,10 @@ export function usePaymentReceives(query, props) { */ export function useCreatePaymentReceive(props) { const client = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (values) => ApiService.post('sales/payment_receives', values), + (values) => apiRequest.post('sales/payment_receives', values), { onSuccess: (data, values) => { client.invalidateQueries('PAYMENT_RECEIVES'); @@ -61,9 +64,10 @@ export function useCreatePaymentReceive(props) { */ export function useEditPaymentReceive(props) { const client = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`sales/payment_receives/${id}`, values), + ([id, values]) => apiRequest.post(`sales/payment_receives/${id}`, values), { onSuccess: (data) => { client.invalidateQueries('PAYMENT_RECEIVES'); @@ -83,9 +87,10 @@ export function useEditPaymentReceive(props) { */ export function useDeletePaymentReceive(props) { const client = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.delete(`sales/payment_receives/${id}`), + (id) => apiRequest.delete(`sales/payment_receives/${id}`), { onSuccess: (data, [id]) => { client.invalidateQueries('PAYMENT_RECEIVES'); @@ -105,9 +110,11 @@ export function useDeletePaymentReceive(props) { * @param {number} id - Payment receive. */ export function usePaymentReceive(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['PAYMENT_RECEIVE', id], - () => ApiService.get(`sales/payment_receives/${id}`), + () => apiRequest.get(`sales/payment_receives/${id}`), { select: (res) => ({ paymentReceive: res.data.payment_receive, @@ -132,9 +139,11 @@ export function usePaymentReceive(id, props) { * @param {number} id - Payment receive id. */ export function usePaymentReceiveEditPage(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['PAYMENT_RECEIVE_EDIT_PAGE', id], - () => ApiService.get(`sales/payment_receives/${id}/edit-page`), + () => apiRequest.get(`sales/payment_receives/${id}/edit-page`), { select: (res) => ({ paymentReceive: res.data.payment_receive, diff --git a/client/src/hooks/query/receipts.js b/client/src/hooks/query/receipts.js index 1273277d8..192a1db36 100644 --- a/client/src/hooks/query/receipts.js +++ b/client/src/hooks/query/receipts.js @@ -1,6 +1,6 @@ import { useQueryClient, useQuery, useMutation } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; +import useApiRequest from '../useRequest'; import { transformPagination } from 'utils'; /** @@ -8,8 +8,9 @@ import { transformPagination } from 'utils'; */ export function useCreateReceipt(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((values) => ApiService.post('sales/receipts', values), { + return useMutation((values) => apiRequest.post('sales/receipts', values), { onSuccess: () => { queryClient.invalidateQueries('SALE_RECEIPTS'); }, @@ -22,9 +23,10 @@ export function useCreateReceipt(props) { */ export function useEditReceipt(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`sales/receipts/${id}`, values), + ([id, values]) => apiRequest.post(`sales/receipts/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('SALE_RECEIPTS'); @@ -39,8 +41,9 @@ export function useEditReceipt(props) { */ export function useDeleteReceipt(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.delete(`sales/receipts/${id}`), { + return useMutation((id) => apiRequest.delete(`sales/receipts/${id}`), { onSuccess: () => { queryClient.invalidateQueries('SALE_RECEIPTS'); }, @@ -53,8 +56,9 @@ export function useDeleteReceipt(props) { */ export function useCloseReceipt(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.post(`sales/receipts/${id}/close`), { + return useMutation((id) => apiRequest.post(`sales/receipts/${id}/close`), { onSuccess: () => { queryClient.invalidateQueries('SALE_RECEIPTS'); }, @@ -66,9 +70,11 @@ export function useCloseReceipt(props) { * Retrieve sale invoices list with pagination meta. */ export function useReceipts(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['SALE_RECEIPTS', query], - () => ApiService.get('sales/receipts', { params: query }), + () => apiRequest.get('sales/receipts', { params: query }), { select: (response) => ({ receipts: response.data.sale_receipts, @@ -97,9 +103,11 @@ export function useReceipts(query, props) { * Retrieve sale invoices list with pagination meta. */ export function useReceipt(id, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['SALE_RECEIPT', id], - () => ApiService.get(`sales/receipts/${id}`), + () => apiRequest.get(`sales/receipts/${id}`), { select: (res) => res.data.sale_receipt, ...props, diff --git a/client/src/hooks/query/settings.js b/client/src/hooks/query/settings.js index 64301e12d..447c3f67f 100644 --- a/client/src/hooks/query/settings.js +++ b/client/src/hooks/query/settings.js @@ -1,6 +1,6 @@ import { useQuery, useMutation, useQueryClient } from 'react-query'; import { useDispatch } from 'react-redux'; -import ApiService from 'services/ApiService'; +import useApiRequest from '../useRequest'; import t from 'store/types'; /** @@ -8,13 +8,14 @@ import t from 'store/types'; */ export function useSettings(query, props) { const dispatch = useDispatch(); + const apiRequest = useApiRequest(); const settings = useQuery( ['SETTINGS', query], async () => { const { data: { settings }, - } = await ApiService.get('settings', { params: query }); + } = await apiRequest.get('settings', { params: query }); return settings; }, @@ -35,8 +36,9 @@ export function useSettings(query, props) { */ export function useSaveSettings(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((settings) => ApiService.post('settings', settings), { + return useMutation((settings) => apiRequest.post('settings', settings), { onSuccess: () => { queryClient.invalidateQueries('SETTINGS'); }, diff --git a/client/src/hooks/query/users.js b/client/src/hooks/query/users.js index 875cdf507..5651a9d9b 100644 --- a/client/src/hooks/query/users.js +++ b/client/src/hooks/query/users.js @@ -1,13 +1,16 @@ import { useMutation, useQueryClient, useQuery } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; +import useApiRequest from '../useRequest'; + /** * Create a new invite user. */ export function useCreateInviteUser(props) { const queryClient = useQueryClient(); - return useMutation((values) => ApiService.post('invite/send', values), { + const apiRequest = useApiRequest(); + + return useMutation((values) => apiRequest.post('invite/send', values), { onSuccess: () => { queryClient.invalidateQueries('USERS'); }, @@ -21,8 +24,9 @@ export function useCreateInviteUser(props) { */ export function useEditUser(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation(([id, values]) => ApiService.post(`users/${id}`, values), { + return useMutation(([id, values]) => apiRequest.post(`users/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('USERS'); }, @@ -35,8 +39,9 @@ export function useEditUser(props) { */ export function useDeleteUser(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); - return useMutation((id) => ApiService.delete(`users/${id}`), { + return useMutation((id) => apiRequest.delete(`users/${id}`), { onSuccess: () => { queryClient.invalidateQueries('USERS'); queryClient.invalidateQueries('USER'); @@ -49,9 +54,11 @@ export function useDeleteUser(props) { * Retrieves users list. */ export function useUsers(props) { + const apiRequest = useApiRequest(); + const result = useQuery( ['USERS'], - () => ApiService.get(`USERS`).then((response) => response.data.users), + () => apiRequest.get(`USERS`).then((response) => response.data.users), props, ); @@ -65,9 +72,11 @@ export function useUsers(props) { * Retrieve details of the given user. */ export function useUser(id, props) { + const apiRequest = useApiRequest(); + return useQuery( ['USER', id], - () => ApiService.get(`users/${id}`).then((response) => response.data.item), + () => apiRequest.get(`users/${id}`).then((response) => response.data.item), props, ); } diff --git a/client/src/hooks/query/vendors.js b/client/src/hooks/query/vendors.js index 5e479a477..f5297462a 100644 --- a/client/src/hooks/query/vendors.js +++ b/client/src/hooks/query/vendors.js @@ -1,15 +1,17 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from 'services/ApiService'; import { transformPagination } from 'utils'; +import useApiRequest from '../useRequest'; /** * Retrieve vendors list. */ export function useVendors(query, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['VENDORS', query], - () => ApiService.get(`vendors`, { params: query }), + () => apiRequest.get(`vendors`, { params: query }), { select: (res) => ({ vendors: res.data.vendors, @@ -35,9 +37,10 @@ export function useVendors(query, props) { */ export function useEditVendor(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - ([id, values]) => ApiService.post(`vendors/${id}`, values), + ([id, values]) => apiRequest.post(`vendors/${id}`, values), { onSuccess: () => { queryClient.invalidateQueries('VENDORS'); @@ -53,9 +56,10 @@ export function useEditVendor(props) { */ export function useDeleteVendor(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (id) => ApiService.delete(`vendors/${id}`), + (id) => apiRequest.delete(`vendors/${id}`), { onSuccess: () => { queryClient.invalidateQueries('VENDORS'); @@ -70,9 +74,10 @@ export function useDeleteVendor(props) { */ export function useCreateVendor(props) { const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); return useMutation( - (values) => ApiService.post('vendors', values), + (values) => apiRequest.post('vendors', values), { onSuccess: () => { queryClient.invalidateQueries('VENDORS'); @@ -86,9 +91,11 @@ export function useCreateVendor(props) { * Retrieve vendor details. */ export function useVendor(id, props) { + const apiRequest = useApiRequest(); + return useQuery( ['VENDOR', id], - () => ApiService.get(`vendors/${id}`), + () => apiRequest.get(`vendors/${id}`), { select: (res) => res.data.vendor, ...props diff --git a/client/src/hooks/query/views.js b/client/src/hooks/query/views.js index 4d1509668..81f4de439 100644 --- a/client/src/hooks/query/views.js +++ b/client/src/hooks/query/views.js @@ -1,26 +1,13 @@ import { useQuery } from 'react-query'; import { defaultTo } from 'lodash'; -import ApiService from "services/ApiService"; -// export function useSaveView(values) { -// return ApiService.post('views', form); -// } - -// export function useEditView(values, id) { -// return ApiService.post(`views/${id}`, values); -// } - -// export function useDeleteView(id) { -// return ApiService.delete(`views/${id}`); -// } - -// export function useView(id) { -// return useQuery(['VIEW', id], () => ApiService.get(`views/${id}`) -// } +import useApiRequest from '../useRequest'; export function useResourceViews(resourceSlug) { + const apiRequest = useApiRequest(); + const states = useQuery( ['RESOURCE_VIEW', resourceSlug], - () => ApiService.get(`views/resource/${resourceSlug}`) + () => apiRequest.get(`views/resource/${resourceSlug}`) .then((response) => response.data.views), ); @@ -32,9 +19,11 @@ export function useResourceViews(resourceSlug) { export function useResourceColumns(resourceSlug) { + const apiRequest = useApiRequest(); + return useQuery( ['RESOURCE_COLUMNS', resourceSlug], - () => ApiService.get(`resources/${resourceSlug}/columns`), + () => apiRequest.get(`resources/${resourceSlug}/columns`), { initialData: [], }, @@ -42,9 +31,11 @@ export function useResourceColumns(resourceSlug) { } export function useResourceFields(resourceSlug, props) { + const apiRequest = useApiRequest(); + const states = useQuery( ['RESOURCE_FIELDS', resourceSlug], - () => ApiService.get(`resources/${resourceSlug}/fields`) + () => apiRequest.get(`resources/${resourceSlug}/fields`) .then((res) => res.data.resource_fields), props ); diff --git a/client/src/hooks/state/authentication.js b/client/src/hooks/state/authentication.js new file mode 100644 index 000000000..bb74b8d94 --- /dev/null +++ b/client/src/hooks/state/authentication.js @@ -0,0 +1,41 @@ +import { useDispatch, useSelector } from 'react-redux'; +import { useCallback } from 'react'; +import { isAuthenticated } from 'store/authentication/authentication.reducer'; +import { setLogin, setLogout } from 'store/authentication/authentication.actions'; + +export const useAuthActions = () => { + const dispatch = useDispatch(); + + return { + setLogin: useCallback((login) => dispatch(setLogin(login)), [dispatch]), + setLogout: useCallback(() => dispatch(setLogout()), [dispatch]), + }; +}; + +/** + * Retrieve whether the user is authenticated. + */ +export const useIsAuthenticated = () => { + return useSelector(isAuthenticated); +}; + +/** + * Retrieve the authentication token. + */ +export const useAuthToken = () => { + return useSelector((state) => state.authentication.token); +}; + +/** + * Retrieve the authentication user. + */ +export const useAuthUser = () => { + return useSelector((state) => state.authentication.user); +}; + +/** + * Retrieve the authenticated organization id. + */ +export const useAuthOrganizationId = () => { + return useSelector((state) => state.authentication.organization); +}; diff --git a/client/src/hooks/state/globalErrors.js b/client/src/hooks/state/globalErrors.js new file mode 100644 index 000000000..0760dcec1 --- /dev/null +++ b/client/src/hooks/state/globalErrors.js @@ -0,0 +1,17 @@ +import { useCallback } from 'react'; +import { useSelector, useDispatch } from "react-redux"; +import { setGlobalErrors } from 'store/globalErrors/globalErrors.actions'; + +export const useSetGlobalErrors = () => { + const dispatch = useDispatch(); + + return useCallback((errors) => { + dispatch(setGlobalErrors(errors)); + }, [dispatch]); +}; + +export const useGlobalErrors = () => { + const globalErrors = useSelector(state => state.globalErrors.data); + + return { globalErrors }; +} \ No newline at end of file diff --git a/client/src/hooks/state/index.js b/client/src/hooks/state/index.js index b69182297..4208d88aa 100644 --- a/client/src/hooks/state/index.js +++ b/client/src/hooks/state/index.js @@ -1 +1,3 @@ -export * from './dashboard'; \ No newline at end of file +export * from './dashboard'; +export * from './authentication'; +export * from './globalErrors'; \ No newline at end of file diff --git a/client/src/hooks/useRequest.js b/client/src/hooks/useRequest.js new file mode 100644 index 000000000..cc53c4436 --- /dev/null +++ b/client/src/hooks/useRequest.js @@ -0,0 +1,85 @@ +import React from 'react'; +import axios from 'axios'; +import { + useAuthActions, + useAuthOrganizationId, + useSetGlobalErrors, + useAuthToken, +} from './state'; + +export default function useApiRequest() { + const setGlobalErrors = useSetGlobalErrors(); + const { setLogout } = useAuthActions(); + + // Authentication token. + const token = useAuthToken(); + + // Authentication organization id. + const organizationId = useAuthOrganizationId(); + + const http = React.useMemo(() => { + axios.create(); + + // Request interceptors. + axios.interceptors.request.use( + (request) => { + const locale = 'en'; + + if (token) { + request.headers.common['x-access-token'] = token; + } + if (organizationId) { + request.headers.common['organization-id'] = organizationId; + } + if (locale) { + request.headers.common['Accept-Language'] = locale; + } + return request; + }, + (error) => { + return Promise.reject(error); + }, + ); + + // Response interceptors. + axios.interceptors.response.use( + (response) => response, + (error) => { + const { status } = error.response; + + if (status >= 500) { + setGlobalErrors({ something_wrong: true }); + } + if (status === 401) { + setGlobalErrors({ session_expired: true }); + setLogout(); + } + return Promise.reject(error); + }, + ); + + return axios; + }, [token, organizationId, setGlobalErrors, setLogout]); + + return { + get(resource, params) { + return http.get(`/api/${resource}`, params); + }, + + post(resource, params, config) { + return http.post(`/api/${resource}`, params, config); + }, + + update(resource, slug, params) { + return http.put(`/api/${resource}/${slug}`, params); + }, + + put(resource, params) { + return http.put(`/api/${resource}`, params); + }, + + delete(resource, params) { + return http.delete(`/api/${resource}`, params); + }, + }; +} diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js index f2362089c..6bda59bfd 100644 --- a/client/src/routes/dashboard.js +++ b/client/src/routes/dashboard.js @@ -20,16 +20,16 @@ export default [ pageTitle: 'Accounts Chart', }, // Custom views. - { - path: `/custom_views/:resource_slug/new`, - component: lazy(() => import('containers/Views/ViewFormPage')), - breadcrumb: 'New', - }, - { - path: `/custom_views/:view_id/edit`, - component: lazy(() => import('containers/Views/ViewFormPage')), - breadcrumb: 'Edit', - }, + // { + // path: `/custom_views/:resource_slug/new`, + // component: lazy(() => import('containers/Views/ViewFormPage')), + // breadcrumb: 'New', + // }, + // { + // path: `/custom_views/:view_id/edit`, + // component: lazy(() => import('containers/Views/ViewFormPage')), + // breadcrumb: 'Edit', + // }, // Accounting. { path: `/make-journal-entry`, diff --git a/client/src/services/axios.js b/client/src/services/axios.js index 2b11da88a..5c8761bfb 100644 --- a/client/src/services/axios.js +++ b/client/src/services/axios.js @@ -1,7 +1,5 @@ import axios from 'axios'; import { store } from 'store/createStore'; -import { logout } from 'store/authentication/authentication.actions'; -import { setGlobalErrors } from 'store/globalErrors/globalErrors.actions'; const http = axios.create(); @@ -27,13 +25,13 @@ http.interceptors.request.use((request) => { http.interceptors.response.use((response) => response, (error) => { const { status } = error.response; - if (status >= 500) { - store.dispatch(setGlobalErrors({ something_wrong: true })); - } - if (status === 401) { - store.dispatch(setGlobalErrors({ session_expired: true })); - store.dispatch(logout()); - } + // if (status >= 500) { + // store.dispatch(setGlobalErrors({ something_wrong: true })); + // } + // if (status === 401) { + // // store.dispatch(setGlobalErrors({ session_expired: true })); + // // store.dispatch(logout()); + // } return Promise.reject(error); }); diff --git a/client/src/store/authentication/authentication.actions.js b/client/src/store/authentication/authentication.actions.js index 361146cb0..9e6682b87 100644 --- a/client/src/store/authentication/authentication.actions.js +++ b/client/src/store/authentication/authentication.actions.js @@ -1,106 +1,14 @@ -import ApiService from 'services/ApiService'; import t from 'store/types'; -export function login({ form }) { - return (dispatch) => - new Promise((resolve, reject) => { - ApiService.post('auth/login', form) - .then((response) => { - const { data } = response; +export const setLogin = ({ user, token, tenant }) => ({ + type: t.LOGIN_SUCCESS, + payload: { + user, + token, + tenant, + }, +}); - if (data.token && data.user) { - dispatch({ - type: t.LOGIN_SUCCESS, - payload: { - user: data.user, - token: data.token, - tenant: data.tenant, - }, - }); - } - resolve(response); - }) - .catch((error) => { - const { response } = error; - const { data } = response; - const { errors = [] } = data; - - reject(errors); - }); - }); -} - -export const logout = () => { - return (dispatch) => - dispatch({ - type: t.LOGOUT, - }); -}; - -export const register = ({ form }) => { - return (dispatch) => { - return new Promise((resolve, reject) => { - ApiService.post('auth/register', form) - .then((response) => { - resolve(response); - }) - .catch((error) => { - reject(error.response.data.errors || []); - }); - }); - }; -}; - -export const resetPassword = ({ form, token }) => { - return (dispatch) => { - return new Promise((resolve, reject) => { - ApiService.post(`auth/reset/${token}`, form) - .then((response) => { - resolve(response); - }) - .catch((error) => { - reject(error.response.data.errors || []); - }); - }); - }; -}; - -export const sendResetPassword = (email) => { - return (dispatch) => { - return new Promise((resolve, reject) => { - ApiService.post('auth/send_reset_password', email) - .then((response) => { - resolve(response); - }) - .catch((error) => { - reject(error.response.data.errors || []); - }); - }); - }; -}; - -export const inviteAccept = ({ form, token }) => { - return (dispatch) => - new Promise((resolve, reject) => { - ApiService.post(`invite/accept/${token}`, { ...form }) - .then((response) => { - resolve(response); - }) - .catch((error) => { - reject(error.response.data.errors || []); - }); - }); -}; - -export const inviteMetaByToken = ({ token }) => { - return (dispatch) => - new Promise((resolve, reject) => { - ApiService.get(`invite/invited/${token}`) - .then((response) => { - resolve(response); - }) - .catch((error) => { - reject(error.response.data.errors || []); - }); - }); -}; +export const setLogout = () => ({ + type: t.LOGOUT, +}); diff --git a/client/src/store/globalErrors/globalErrors.actions.js b/client/src/store/globalErrors/globalErrors.actions.js index c4c7e6c55..829a6b185 100644 --- a/client/src/store/globalErrors/globalErrors.actions.js +++ b/client/src/store/globalErrors/globalErrors.actions.js @@ -1,12 +1,10 @@ export const setGlobalErrors = (errors) => { - return dispatch => { - dispatch({ - type: 'GLOBAL_ERRORS_SET', - payload: { - errors, - }, - }); - } + return { + type: 'GLOBAL_ERRORS_SET', + payload: { + errors, + }, + }; } \ No newline at end of file diff --git a/client/src/style/pages/Authentication/Auth.scss b/client/src/style/pages/Authentication/Auth.scss index 624fe18df..7a5a376d2 100644 --- a/client/src/style/pages/Authentication/Auth.scss +++ b/client/src/style/pages/Authentication/Auth.scss @@ -211,7 +211,7 @@ body.authentication { margin-top: -10px; p { - font-size: 13px; + font-size: 14px; margin-bottom: 20px; line-height: 1.65; } diff --git a/client/src/style/variables.scss b/client/src/style/variables.scss index e95b8ebae..b9144e1d8 100644 --- a/client/src/style/variables.scss +++ b/client/src/style/variables.scss @@ -35,7 +35,7 @@ $sidebar-menu-item-color: rgb(255, 255, 255); $sidebar-menu-item-color-active: rgb(255, 255, 255); $sidebar-popover-submenu-bg: rgb(1, 20, 62); $sidebar-menu-label-color: rgba(255, 255, 255, 0.45); -$sidebar-submenu-item-color: rgba(255, 255, 255, 0.7); +$sidebar-submenu-item-color: rgba(255, 255, 255, 0.85); $sidebar-submenu-item-hover-color: rgb(255, 255, 255); $sidebar-logo-opacity: 0.5; $sidebar-submenu-item-bg-color: rgba(255, 255, 255, 0.2); diff --git a/client/src/utils.js b/client/src/utils.js index 48b0a4307..7a595ba06 100644 --- a/client/src/utils.js +++ b/client/src/utils.js @@ -2,7 +2,6 @@ import moment from 'moment'; import _ from 'lodash'; import { Intent } from '@blueprintjs/core'; import Currency from 'js-money/lib/currency'; -import PProgress from 'p-progress'; import accounting from 'accounting'; import deepMapKeys from 'deep-map-keys'; import { createSelectorCreator, defaultMemoize } from 'reselect'; @@ -207,20 +206,20 @@ export const saveFilesInAsync = (files, actionCb, extraTasks) => { files.forEach((file) => { const formData = new FormData(); formData.append('attachment', file.file); - const oper = new PProgress((resolve, reject, progress) => { - actionCb(formData, file, (requestProgress) => { - progress(requestProgress); - }) - .then((data) => { - resolve(data); - }) - .catch((error) => { - reject(error); - }); - }); - opers.push(oper); + // const oper = new PProgress((resolve, reject, progress) => { + // actionCb(formData, file, (requestProgress) => { + // progress(requestProgress); + // }) + // .then((data) => { + // resolve(data); + // }) + // .catch((error) => { + // reject(error); + // }); + // }); + // opers.push(oper); }); - return PProgress.all(opers); + // return PProgress.all(opers); }; export const firstLettersArgs = (...args) => {