updated librarys, added api hook and HOC, upgradet api calls

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "0.18.0",
+    "formik": "^1.5.8",
     "prop-types": "15.7.2",
     "react": "16.8.3",
     "react-native": "0.59.8",
@@ -22,12 +23,12 @@
     "react-native-size-matters": "0.2.1",
     "react-navigation": "3.11.0",
     "react-navigation-redux-helpers": "3.0.2",
-    "react-redux": "5.0.7",
-    "redux": "4.0.0",
-    "redux-act": "1.7.4",
-    "redux-form": "7.4.2",
-    "redux-persist": "5.10.0",
-    "redux-saga": "1.0.2"
+    "react-redux": "7.1.1",
+    "redux": "4.0.4",
+    "redux-act": "1.7.7",
+    "redux-persist": "6.0.0",
+    "redux-saga": "1.1.1",
+    "yup": "^0.27.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",

src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { PersistGate } from 'redux-persist/lib/integration/react';
+import { PersistGate } from 'redux-persist/integration/react';
 import { Provider } from 'react-redux';
-
+import ApiProvider from './utils/apiProvider';
 import store, { persistor } from './redux';
 import RootNavigator from './navigation';
 
@@ -14,7 +14,9 @@ export default class App extends Component {
           persistor={persistor}
           loading={null}
         >
-          <RootNavigator />
+          <ApiProvider store={store}>
+            <RootNavigator />
+          </ApiProvider>
         </PersistGate>
       </Provider>
     );

src/components/AuthFormInput/index.js

@@ -9,57 +9,64 @@ import styles from './styles';
 
 const FormInput = (props) => {
   const {
-    input,
     containerStyle,
     inputContainerStyle,
-    meta: { error, touched },
     inlineImage,
+    name,
+    handleChange,
+    handleBlur,
+    errors,
+    touched,
+    value,
     ...inputProps
   } = props;
 
+  const hasError = touched[name] && errors[name];
+
   const renderError = () => {
-    if (touched && error) {
-      return <DefaultText>{error}</DefaultText>;
+    if (hasError) {
+      return <DefaultText>{errors[name]}</DefaultText>;
     }
     return null;
   };
 
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View
         style={[
           styles.inputContainer,
           inputContainerStyle,
-          (error && touched) ? styles.errorInput : null,
+          (hasError) ? styles.errorInput : null,
         ]}
       >
         <DefaultInput
           style={styles.input}
           {...inputProps}
-          onChangeText={input.onChange}
-          onBlur={input.onBlur}
-          onFocus={input.onFocus}
-          value={input.value}
+          onChangeText={handleChange(name)}
+          onBlur={handleBlur(name)}
+          value={inputProps.value}
           />
       </View>
       <View style={styles.errorContainer}>
-        {
-          renderError()
-        }
+        {renderError()}
       </View>
     </View>
   );
 };
 
 FormInput.propTypes = {
+  ...DefaultInput.propTypes,
   input: PropTypes.object,
   containerStyle: PropTypes.any,
-  meta: PropTypes.shape({
-    touched: PropTypes.bool,
-    error: PropTypes.any,
-  }),
   inlineImage: PropTypes.any,
   inputContainerStyle: PropTypes.any,
+  name: PropTypes.string.isRequired,
+  handleChange: PropTypes.func,
+  handleBlur: PropTypes.func,
+  errors: PropTypes.object,
+  touched: PropTypes.object,
+  value: DefaultInput.propTypes.value,
 };
 
 export default FormInput;

src/components/DefaultInput/index.js

@@ -18,7 +18,8 @@ const DefaultInput = ({ inputRef, style, ...rest }) => (
 );
 
 DefaultInput.propTypes = {
-  inputRef: PropTypes.func,
+  ...TextInput.propTypes,
+  inputRef: PropTypes.any,
   style: PropTypes.any,
 };
 

src/constants/endpoints.js

@@ -4,4 +4,4 @@
 export const SIGN_IN_ENDPOINT = '';
 export const SIGN_UP_ENDPOINT = '';
 export const TEST_AUTH_ENDPOINT = '';
-export const REFRESH_ACCESS_TOKEN_ENPOINT = '';
+export const REFRESH_ACCESS_TOKEN_ENDPOINT = '';

src/redux/index.js

@@ -1,8 +1,8 @@
+import { AsyncStorage } from 'react-native';
 import { createStore, applyMiddleware, compose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
 
 import { persistStore, persistReducer } from 'redux-persist';
-import storage from 'redux-persist/lib/storage';
 import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
 import { navigationMiddleware } from '../navigation';
 
@@ -17,7 +17,7 @@ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const persistConfig = {
   key: 'root',
-  storage,
+  storage: AsyncStorage,
   stateReconciler: autoMergeLevel2,
   blacklist: ['nav', 'form'],
   whitelist: ['auth'],

src/redux/reducers/index.js

@@ -1,10 +1,8 @@
 import { combineReducers } from 'redux';
-import { reducer as form } from 'redux-form';
 import nav from '../../navigation/reducer';
 import auth from './auth';
 
 const reducer = combineReducers({
-  form,
   nav,
   auth,
 });

src/redux/sagas/api.js

@@ -1,81 +1,28 @@
-import { put as sagaPut, call, select } from 'redux-saga/effects';
+import { call } from 'redux-saga/effects';
 import api, { setAuthHeader, resetAuthHeader } from '../../utils/axios';
-import { REFRESH_ACCESS_TOKEN_ENPOINT } from '../../constants/endpoints';
-import * as actions from '../actions';
-
-const getRefreshToken = state => state.auth.refreshToken;
 
 export function* get(endpoint, options) {
   try {
     return yield call(api.get, endpoint, options || {});
   } catch (error) {
-    return yield call(checkForTokenError, error, retryRequest, 'accessToken');
+    throw error;
   }
 }
 
 export function* post(endpoint, data, options) {
   try {
     return yield call(api.post, endpoint, data, options || {});
   } catch (error) {
-    return yield call(checkForTokenError, error, retryRequest, 'accessToken');
+    throw error;
   }
 }
 
 export function* put(endpoint, data, options) {
   try {
     return yield call(api.put, endpoint, data, options || {});
   } catch (error) {
-    return yield call(checkForTokenError, error, retryRequest, 'accessToken');
-  }
-}
-
-function* retryRequest(error) {
-  const newToken = yield call(refreshAccessToken);
-  const newError = { ...error };
-  newError.config.headers.Authorization = `Bearer ${newToken}`;
-  return yield call(api.request, newError.config);
-}
-
-function* checkForTokenError(error, onAccessTokeErrorCallback, paramToCheck) {
-  if (error.response) {
-    const accessTokenError = error.response.data.find(e => e.param === paramToCheck);
-    if (accessTokenError) {
-      return yield call(onAccessTokeErrorCallback, error);
-    }
-
     throw error;
-  } else if (error.request) {
-    throw createSimpleErrorObject('Server does not respond');
   }
-
-  throw createSimpleErrorObject('Please, check your internet connection');
-}
-
-function* refreshAccessToken() {
-  try {
-    const refreshToken = yield select(getRefreshToken);
-    const response = yield call(api.post, REFRESH_ACCESS_TOKEN_ENPOINT, { refreshToken });
-    setAuthHeader(response.data.accessToken);
-    yield sagaPut(actions.accessTokenUpdatedAction(response.data));
-    return response.data.accessToken;
-  } catch (error) {
-    return yield call(checkForTokenError, error, onRefreshTokenError, 'refreshToken');
-  }
-}
-
-function* onRefreshTokenError(error) {
-  yield sagaPut(actions.signOutAction());
-  throw error;
-}
-
-function createSimpleErrorObject(error) {
-  return {
-    response: {
-      data: {
-        _error: error,
-      },
-    },
-  };
 }
 
 export { resetAuthHeader, setAuthHeader };

src/screens/Root.js

@@ -1,28 +1,25 @@
-import { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { testAuthAction } from '../redux/actions';
 
-@connect(null, ({
-  testAuth: testAuthAction,
-}))
-class Root extends Component {
-  static navigationOptions = {
-    header: null,
-  }
+const Root = ({ testAuth }) => {
+  useEffect(() => {
+    testAuth();
+  }, []);
 
-  static propTypes = {
-    testAuth: PropTypes.func,
-  };
+  return null;
+};
 
-  componentDidMount() {
-    this.props.testAuth();
-  }
+Root.navigationOptions = {
+  header: null,
+};
 
-  render() {
-    return null;
-  }
-}
+Root.propTypes = {
+  testAuth: PropTypes.func,
+};
 
-export default Root;
+export default connect(null, ({
+  testAuth: testAuthAction,
+}))(Root);

src/screens/SignInScreen/FormProvider.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import { object, string } from 'yup';
+
+const SignInSchema = object().shape({
+  email: string()
+    .email('Invalid email')
+    .required('Required'),
+  password: string().required('Required'),
+});
+
+const INITIAL_SIGN_IN_VALUES = {
+  email: '',
+  password: '',
+};
+
+const FormProvider = ({ children, onSubmit }) => {
+  /* :: (object, object) -> Promise<void> */
+  const handleSignIn = async (formData, actions) => {
+    try {
+      onSubmit(formData);
+    } catch (error) {
+      actions.resetForm();
+      actions.setFieldValue('email', formData.email);
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={{ ...INITIAL_SIGN_IN_VALUES }}
+      validationSchema={SignInSchema}
+      onSubmit={handleSignIn}
+    >
+      {children}
+    </Formik>
+  );
+};
+
+FormProvider.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+};
+
+export default FormProvider;