add register

src/routes/auth/index.jsx

@@ -36,31 +36,28 @@ const Auth = () => {
   const dispatch = useDispatch();
   const history = useHistory();
 
-  const [auth, setAuth] = useState(true);
   const { formArray, updateEvent, valid, disabled, submitEvent,  setValueManually } = hookForm({ initialForm: form })
-  console.log('formArray', formArray);
+  
   const user = useSelector((s) => s.auth.user);
-  const emailFromRegister = useSelector((s) => s.auth.emailFromRegister);
+  const registeredUser = useSelector((s) => s.auth.registeredUser);
 
   useEffect(() => {
     if (user) history.push('/');
   }, [user, history]);
 
   useEffect(() => {
-    if (emailFromRegister) {
-      setValueManually('password', '');
-      setAuth(true);
+    if (registeredUser) {
+      setValueManually('email', registeredUser.email)
     }
-  }, [emailFromRegister, setValueManually])
+  }, [registeredUser, setValueManually]);
 
   const submit = submitEvent((v) => {
-    if (auth) dispatch(runAuth(v))
-    else dispatch(runRegister(v))
+    dispatch(runAuth(v))
   });
 
   return (
     <div className={classes.container}>
-      <form onSubmit={submit} className={classes.form}>
+      <form action="/adfsgfb" className={classes.form}>
         {formArray.map(el => (
           <div className={classes.form} key={el.name}>
             <Input
@@ -73,8 +70,6 @@ const Auth = () => {
         ))}
         <button type="submit" disabled={disabled || !valid}>Submit</button>
       </form>
-
-      <p className={classes.text} onClick={() => setAuth(p => !p)}>{auth ? 'Do you have a account ?' : 'Log In'}</p>
     </div>
   )
 }

src/routes/index.js

@@ -15,4 +15,11 @@ export const ROUTES = [
     path: '/auth',
     component: lazy(() => import('./auth')),
   },
+  {
+    id: 2,
+    exact: true,
+    private: false,
+    path: '/register',
+    component: lazy(() => import('./register')),
+  },
 ]

src/routes/register/index.jsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import hookForm from 'hook-easy-form';
+import { useHistory } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { runAuth, runRegister } from 'store/auth/actions';
+import Input from 'components/inputs/text-input/text-input';
+
+import classes from '../auth/auth.module.scss';
+
+const form = [
+  {
+    name: 'email',
+    value: '',
+    required: true,
+    options: {
+      type: 'email',
+      label: 'Your email'
+    }
+  },
+  {
+    name: 'password',
+    value: '',
+    required: true,
+    options: {
+      type: 'password',
+      label: 'Your password'
+    },
+    validate: {
+      maxLength: (v) => (v.trim().length < 6 ? 'Invalid' : ''),
+    },
+  },
+];
+
+const Register = () => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const { formArray, updateEvent, valid, disabled, submitEvent } = hookForm({ initialForm: form })
+
+  const registeredUser = useSelector((s) => s.auth.registeredUser);
+
+  useEffect(() => {
+    if (registeredUser) history.push('/auth');
+  }, [registeredUser, history]);
+
+  const submit = submitEvent((v) => {
+    dispatch(runRegister(v))
+  });
+
+  return (
+    <div className={classes.container}>
+      <form onSubmit={submit} className={classes.form}>
+        {formArray.map(el => (
+          <div className={classes.form} key={el.name}>
+            <Input
+              value={el.value}
+              name={el.name}
+              label={el.options.label}
+              type={el.options.type}
+              onChange={updateEvent} />
+          </div>
+        ))}
+        <button type="submit" disabled={disabled || !valid}>Submit</button>
+      </form>
+    </div>
+  )
+}
+
+export default Register;

src/store/auth/reducer.js

@@ -2,7 +2,8 @@ import * as types from './types';
 
 const initialState = {
   user: null,
-  emailFromRegister: null,
+  registeredUser: null,
+  credentials: null
 }
 
 export const authReducer = (state = initialState, action) => {
@@ -10,7 +11,10 @@ export const authReducer = (state = initialState, action) => {
     case types.RUN_AUTH_SUCCESS: {
       return { ...state, user: action.payload }
     }
-    case types.RUN_AUTH: 
+    case types.RUN_AUTH: {
+      const credentials = window.btoa(`${action.payload.email}:${action.payload.password}`)
+      return { ...state, credentials }
+    }
     case types.RUN_AUTH_FAIL:
     case types.GET_ME: 
     case types.GET_ME_FAIL: {
@@ -22,7 +26,7 @@ export const authReducer = (state = initialState, action) => {
     }
 
     case types.RUN_REGISTER_SUCCESS:  {
-      return { ...state, emailFromRegister: action.payload }
+      return { ...state, registeredUser: action.payload }
     }
 
     default: {

src/store/auth/saga.js

@@ -1,4 +1,4 @@
-import { takeLatest, call, put } from 'redux-saga/effects';
+import { takeLatest, call, put, select } from 'redux-saga/effects';
 
 import * as types from './types';
 import * as actions from './actions'
@@ -25,6 +25,7 @@ const register = (cred) => AxiosInstance({
 })
 
 function* runAuth({ payload }) {
+  // const credentials = yield select(s => s.auth.credentials);
   const credentials = yield window.btoa(`${payload.email}:${payload.password}`)
 
   try {
@@ -41,8 +42,8 @@ function* runAuth({ payload }) {
 function* runRegister({ payload }) {
   try {
     const result = yield call(register, payload);
-    console.log('result', result)
-    yield put(actions.runRegisterSuccess(result.data.email))
+    console.log('result of register', result)
+    yield put(actions.runRegisterSuccess(result.data))
   } catch (error) {
     yield put(actions.runRegisterFail(error))
   }

src/utils/local-storage-actions.js

@@ -7,3 +7,7 @@ export const getToken = () => {
 export const setToLocalStorage = (token) => {
   window.localStorage.setItem(TOKEN, token)
 }
+
+export const logOut = (token) => {
+  window.localStorage.clear(TOKEN)
+}