Added use query to the project and removed sagas

.eslintrc.js

@@ -39,6 +39,7 @@ module.exports = {
     'consistent-return': 0,
     'default-case': 0,
     'jsx-a11y/no-noninteractive-element-interactions': 0,
+    'react/jsx-props-no-spreading': 0,
     radix: 1,
     'no-plusplus': 0,
     'jsx-a11y/aria-props': 2,

components/auth/ForgotPasswordForm.js

@@ -6,12 +6,9 @@ import { forgotPasswordValidationRules } from '../../validation/auth';
 import { useTranslation } from '../../i18n';
 import { TextInputWithLabel } from '../shared/formFields/TextInputWithLabel';
 import LoaderWrapper from '../shared/LoaderWrapper';
+import ServerErrors from '../shared/ServerErrors';
 
-export const ForgotPasswordForm = ({
-  onSubmit,
-  forgotPasswordError,
-  isLoading
-}) => {
+export const ForgotPasswordForm = ({ onSubmit, error, isLoading }) => {
   const { t } = useTranslation('auth');
 
   return (
@@ -21,28 +18,24 @@ export const ForgotPasswordForm = ({
         onSubmit={onSubmit}
         validationSchema={forgotPasswordValidationRules({ t })}
       >
-        {() => (
-          <Form>
-            <Field
-              name="email"
-              component={TextInputWithLabel}
-              placeholder={t('enterEmail')}
-            />
-            {forgotPasswordError?.email && (
-              <p>{forgotPasswordError.email[0]}</p>
-            )}
-            <button type="submit">
-              <p>{t('submit', { ns: 'common' })}</p>
-            </button>
-          </Form>
-        )}
+        <Form>
+          <Field
+            name="email"
+            component={TextInputWithLabel}
+            placeholder={t('enterEmail')}
+          />
+          {error && <ServerErrors errors={error} />}
+          <button type="submit">
+            <p>{t('submit', { ns: 'common' })}</p>
+          </button>
+        </Form>
       </Formik>
     </LoaderWrapper>
   );
 };
 
 ForgotPasswordForm.propTypes = {
   onSubmit: PropTypes.func,
-  forgotPasswordError: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   isLoading: PropTypes.bool
 };

components/auth/ResetPasswordForm.js

@@ -8,11 +8,7 @@ import { PasswordInputWithLabel } from '../shared/formFields/PasswordInputWithLa
 import LoaderWrapper from '../shared/LoaderWrapper';
 import ServerErrors from '../shared/ServerErrors';
 
-export const ResetPasswordForm = ({
-  onSubmit,
-  resetPasswordError,
-  isLoading
-}) => {
+export const ResetPasswordForm = ({ onSubmit, error, isLoading }) => {
   const { t } = useTranslation('auth');
 
   return (
@@ -34,7 +30,7 @@ export const ResetPasswordForm = ({
               component={PasswordInputWithLabel}
               placeholder={t('confirmPass')}
             />
-            {resetPasswordError && <ServerErrors errors={resetPasswordError} />}
+            {error && <ServerErrors errors={error} />}
             <button type="submit">
               <p>{t('submit', { ns: 'common' })}</p>
             </button>
@@ -48,5 +44,5 @@ export const ResetPasswordForm = ({
 ResetPasswordForm.propTypes = {
   onSubmit: PropTypes.func,
   isLoading: PropTypes.bool,
-  resetPasswordError: PropTypes.object
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
 };

components/auth/SocialLoginButtons.js

@@ -1,24 +1,11 @@
-import React, { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import React from 'react';
 import FacebookLogin from 'react-facebook-login';
 import GoogleLogin from 'react-google-login';
 import config from '../../config';
-import {
-  facebookLogin,
-  googleLogin
-} from '../../store/actions/SocialLoginActions';
 
 const SocialLoginButtons = () => {
-  const dispatch = useDispatch();
-
-  const handleFacebookLogin = useCallback(
-    (data) => dispatch(facebookLogin(data)),
-    [dispatch]
-  );
-
-  const handleGoogleLogin = useCallback((data) => dispatch(googleLogin(data)), [
-    dispatch
-  ]);
+  const handleFacebookLogin = () => {};
+  const handleGoogleLogin = () => {};
 
   return (
     <div>

components/profile/ChangePasswordForm.js

@@ -6,9 +6,8 @@ import { PasswordInputWithLabel } from '../shared/formFields/PasswordInputWithLa
 import { changePasswordValidationRules } from '../../validation/profile';
 import { useTranslation } from '../../i18n';
 import LoaderWrapper from '../shared/LoaderWrapper';
-import { RESPONSE_STATES } from '../../constants';
 
-const ChangePasswordForm = ({ onSubmit, isLoading, passwordChangeState }) => {
+const ChangePasswordForm = ({ onSubmit, isLoading, error, success }) => {
   const { t } = useTranslation('profile');
   return (
     <LoaderWrapper isLoading={isLoading}>
@@ -28,9 +27,7 @@ const ChangePasswordForm = ({ onSubmit, isLoading, passwordChangeState }) => {
               component={PasswordInputWithLabel}
               placeholder={t('currentPassword')}
             />
-            {passwordChangeState === RESPONSE_STATES.ERROR && (
-              <p>{t('invalidOldPassword')}</p>
-            )}
+            {error && <p>{t('invalidOldPassword')}</p>}
             <Field
               name="new_password"
               component={PasswordInputWithLabel}
@@ -47,17 +44,16 @@ const ChangePasswordForm = ({ onSubmit, isLoading, passwordChangeState }) => {
           </Form>
         )}
       </Formik>
-      {passwordChangeState === RESPONSE_STATES.SUCCESS && (
-        <p>{t('passwordChangedSuccess')}</p>
-      )}
+      {success && <p>{t('passwordChangedSuccess')}</p>}
     </LoaderWrapper>
   );
 };
 
 ChangePasswordForm.propTypes = {
   onSubmit: PropTypes.func,
   isLoading: PropTypes.bool,
-  passwordChangeState: PropTypes.number
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  success: PropTypes.bool
 };
 
 export default ChangePasswordForm;

components/profile/ProfileForm.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import { Form, Formik, Field } from 'formik';
 import PropTypes from 'prop-types';
@@ -14,17 +13,13 @@ const ProfileForm = ({ user, onSubmit, isLoading }) => {
     <LoaderWrapper isLoading={isLoading}>
       <Formik
         onSubmit={onSubmit}
-        initialValues={{
-          first_name: user.first_name,
-          last_name: user.last_name,
-          email: user.email
-        }}
+        initialValues={user}
         enableReinitialize
         validationSchema={updateProfileValidationRules({ t })}
       >
         {({ dirty }) => (
           <Form>
-            {!!user.avatar && <img alt={user.first_name} src={user.avatar} />}
+            {!!user?.avatar && <img alt={user.first_name} src={user.avatar} />}
             <Field component={TextInputWithLabel} name="first_name" />
             <Field component={TextInputWithLabel} name="last_name" />
             <Field component={TextInputWithLabel} name="email" disabled />
@@ -37,7 +32,9 @@ const ProfileForm = ({ user, onSubmit, isLoading }) => {
 };
 
 ProfileForm.propTypes = {
-  user: PropTypes.object
+  user: PropTypes.object,
+  onSubmit: PropTypes.func,
+  isLoading: PropTypes.bool
 };
 
 export default ProfileForm;

components/shared/LoaderWrapper.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { useTranslation } from '../../i18n';
 
 const LoaderWrapper = ({ isLoading, loadingText, children }) => {
   const { t } = useTranslation('common');
 
   return (
-    <div> {isLoading ? <p>{loadingText || t('loading')}</p> : children} </div>
+    <div>
+      {isLoading && <p>{loadingText || t('loading')}</p>}
+      <>{children}</>
+    </div>
   );
 };
 

components/shared/ServerErrors.js

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const ServerErrors = ({ errors }) => {
-  const getFirstError = () => errors[Object.keys(errors)[0]][0];
+  const getFirstError = () =>
+    errors?.response?.data[Object.keys(errors?.response?.data)];
 
   return <p>{getFirstError()}</p>;
 };

components/shared/layout/Header.js

@@ -1,29 +1,21 @@
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React, { useContext } from 'react';
 
 import { useRouter } from 'next/router';
-import {
-  makeSelectUserData,
-  makeSelectUserAuthStatus
-} from '../../../store/selectors/UserSelector';
 import { useTranslation } from '../../../i18n';
-import { userSignOut } from '../../../store/actions/UserActions';
 import { PAGES } from '../../../constants/routes';
+import { UserContext } from '../../../context/UserContext';
+import { useLogout } from '../../../queries/auth/auth';
 
 const Header = () => {
-  const dispatch = useDispatch();
   const router = useRouter();
   const { t } = useTranslation('auth');
-
-  const user = useSelector(makeSelectUserData());
-  const auth = useSelector(makeSelectUserAuthStatus());
-
-  const handleSignOut = () => dispatch(userSignOut());
+  const user = useContext(UserContext);
+  const { mutate: handleSignOut } = useLogout();
 
   const navigateToSignIn = () => router.push(PAGES.SIGN_IN);
 
   const renderUserHeader = () =>
-    auth ? (
+    user ? (
       <div>
         <p>{`${user.first_name} ${user.last_name}`}</p>
         <button type="button" onClick={handleSignOut}>

context/UserContext.js

@@ -0,0 +1,20 @@
+import React, { createContext } from 'react';
+import PropTypes from 'prop-types';
+
+import { useGetUser } from '../queries/user/user';
+
+export const UserContext = createContext(null);
+
+const UserContextProvider = ({ children }) => {
+  const { data } = useGetUser();
+
+  return (
+    <UserContext.Provider value={data?.data}>{children}</UserContext.Provider>
+  );
+};
+
+UserContextProvider.propTypes = {
+  children: PropTypes.node
+};
+
+export default UserContextProvider;

package.json

@@ -34,18 +34,11 @@
     "next-compose-plugins": "^2.2.0",
     "next-cookies": "^2.0.3",
     "next-i18next": "^4.5.0",
-    "next-redux-saga": "^4.1.2",
-    "next-redux-wrapper": "^6.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-facebook-login": "^4.1.1",
     "react-google-login": "^5.1.21",
-    "react-redux": "^7.2.0",
-    "redux": "^4.0.5",
-    "redux-devtools-extension": "^2.13.8",
-    "redux-persist": "^6.0.0",
-    "redux-saga": "^1.1.3",
-    "reselect": "^4.0.0",
+    "react-query": "^3.13.0",
     "yup": "^0.29.1"
   },
   "devDependencies": {
@@ -65,8 +58,6 @@
     "eslint-plugin-jsx-a11y": "6.3.1",
     "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-react": "7.20.3",
-    "eslint-plugin-react-hooks": "4.0.8",
-    "eslint-plugin-redux-saga": "1.1.3",
     "jest-cli": "26.1.0",
     "jest-dom": "4.0.0",
     "lint-staged": "10.2.11",

pages/_app.js

@@ -1,40 +1,45 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import App from 'next/app';
 import React from 'react';
 import cookies from 'next-cookies';
+import PropTypes from 'prop-types';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 import { appWithTranslation } from '../i18n';
-import { wrapper } from '../store';
 import AuthService from '../services/AuthService';
-import { userGet } from '../store/actions/UserActions';
 import Layout from '../components/shared/layout/Layout';
+import UserContextProvider from '../context/UserContext';
 
-class MyApp extends App {
-  static async getInitialProps({ Component, ctx }) {
-    let pageProps = {};
+const queryClient = new QueryClient();
 
-    const auth = cookies(ctx).access_token;
+const MyApp = ({ Component, pageProps, hideHeader }) => (
+  <QueryClientProvider client={queryClient}>
+    <UserContextProvider>
+      <Layout hideHeader={hideHeader}>
+        <Component {...pageProps} />
+      </Layout>
+    </UserContextProvider>
+  </QueryClientProvider>
+);
+
+MyApp.propTypes = {
+  Component: PropTypes.node,
+  pageProps: PropTypes.object,
+  hideHeader: PropTypes.bool
+};
 
-    if (auth) {
-      AuthService.attachAuthHeader(auth);
-      ctx.store.dispatch(userGet());
-    }
+MyApp.getInitialProps = async ({ Component, ctx }) => {
+  let pageProps = {};
 
-    if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps({ ctx });
-    }
+  const auth = cookies(ctx).access_token;
 
-    return { pageProps, hideHeader: Component.hideHeader };
+  if (auth) {
+    AuthService.attachAuthHeader(auth);
   }
 
-  render() {
-    const { Component, pageProps, hideHeader } = this.props;
-    return (
-      <Layout hideHeader={hideHeader}>
-        <Component {...pageProps} />
-      </Layout>
-    );
+  if (Component.getInitialProps) {
+    pageProps = await Component.getInitialProps({ ctx });
   }
-}
 
-export default wrapper.withRedux(appWithTranslation(MyApp));
+  return { pageProps, hideHeader: Component.hideHeader };
+};
+
+export default appWithTranslation(MyApp);

pages/api/auth/me/index.js → pages/api/auth/forgot-password.js

@@ -1,5 +1,5 @@
 export default (req, res) => {
   res.statusCode = 200;
   res.setHeader('Content-Type', 'application/json');
-  res.end(JSON.stringify({ first_name: 'David', last_name: 'Beckham' }));
+  res.end();
 };