athuorisation added back

package-lock.json

@@ -14733,6 +14733,11 @@
         }
       }
     },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",

package.json

@@ -11,7 +11,8 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.3",
     "redux": "^4.0.1",
-    "redux-form": "^8.1.0"
+    "redux-form": "^8.1.0",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/index.js

@@ -1,5 +0,0 @@
-import * as types from "../constants/actionTypes";
-
-export const getUsersData = (payload)=>({
-    type: types.GETDATA, payload
-});

src/actions/usersAuthActions.js

@@ -0,0 +1,31 @@
+import * as types from "../constants/actionTypes";
+
+const axios= require("axios");
+
+const userAuthRequest = payload => ({
+    type: types.USER_AUTH_REQUEST,
+    payload
+})
+
+//const userAuthRequestSuccess = payload => ({
+//type: types.USER_AUTH_REQUEST_SUCCESS,
+//    payload
+//})
+
+const userAuthRequestFail = payload => ({
+    type: types.USER_AUTH_REQUEST_FAIL,
+    payload
+})
+
+export const getUsersData = (payload) => {
+    return dispatch => {
+        dispatch(userAuthRequest());
+        return axios.get(`http://127.0.0.1:2000/api/users`)
+            .then(res => {
+                 console.log(res);
+                })
+            .catch(err => {
+                dispatch(userAuthRequestFail(err));
+            })
+    }
+}

src/actions/usersRegistrActions.js

@@ -0,0 +1,32 @@
+import * as types from "../constants/actionTypes";
+
+const axios= require("axios");
+
+const userRegRequest = payload => ({
+    type: types.USER_REG_REQUEST,
+    payload
+});
+
+const userRegRequestSuccess = payload => ({
+    type: types.USER_REG_REQUEST_SUCCESS,
+    payload
+});
+
+const userRegRequestFail = payload => ({
+    type: types.USER_REG_REQUEST_FAIL,
+    payload
+});
+
+export const postUsersData = (payload) =>{
+    return dispatch => {
+    dispatch(userRegRequest());
+    return axios.post(`http://127.0.0.1:2000/api/users`,payload)
+                    .then(res => {
+                            setTimeout(()=>{dispatch(userRegRequestSuccess(res))},2000);
+                        })
+                    .catch(err=>{
+                            dispatch(userRegRequestFail(err));
+                    })    
+      
+  };
+};

src/components/Auth/authButtons.js

@@ -0,0 +1,15 @@
+import React, {Component} from "react"
+import {Link} from "react-router-dom"
+
+class Authbuttons extends Component {
+  render() {
+    return (
+        <div className="auth__button">
+          <Link to="/auth">Войти</Link>
+          <Link to="/registration">Зарегистрироваться</Link>
+        </div>
+    )
+  }
+}
+
+export default Authbuttons;

src/components/Auth/authorisation.js

@@ -1,19 +1,23 @@
 import React from "react";
 import { reduxForm, Field } from "redux-form";
 import  authValidate  from "../../utils/validate";
-import Auth from './index'
+import Authbuttons from './authButtons'
+
 const Form = props => {
-  const { handleSubmit,submitting } = props
+  const { handleSubmit, getUsersData } = props
+  const submit = (values) => { 
+    getUsersData(values);
+  }
     return (
       <div>
-        <Auth />
-        <form className="auth__form" onSubmit={handleSubmit}>
+        <Authbuttons />
+        <form className="auth__form" onSubmit={handleSubmit(submit)}>
           <div>
             <Field
               name="email"
               component="input"
-              type="email" 
-              placeholder="Email@example.com"
+              type="Емейл" 
+              placeholder="email@example.com"
 
             />
           </div>
@@ -22,10 +26,10 @@ const Form = props => {
               name="password"
               component="input" 
               type="password" 
-              placeholder ="Password"  
+              placeholder ="Пароль"  
             />
           </div>
-          <button className="auth__submit-button">Submit</button>
+          <button className="auth__submit-button">Отправить</button>
         </form>
       </div>
     );

src/components/Auth/index.js

@@ -1,15 +0,0 @@
-import React, {Component} from "react"
-import {Link} from "react-router-dom"
-
-class Auth extends Component {
-  render() {
-    return (
-        <div className="auth__button">
-          <Link to="/auth">Sign in</Link>
-          <Link to="/registration">Join</Link>
-        </div>
-    )
-  }
-}
-
-export default Auth;

src/components/Auth/registration.js

@@ -1,20 +1,27 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form'
-import Auth from './index'
+import Authbuttons from './authButtons'
 
 const RegistrForm = props => {
-  const { handleSubmit, pristine, reset, submitting } = props
+  const { handleSubmit, pristine, reset, postUsersData } = props
+  const submit = (values) =>{
+    values.avatar = "https://site.com"
+    values.isAdmin = 1
+    values.description = "gfdfgdgdf"
+    postUsersData(values)
+  
+}
   return (
     <div>
-      <Auth />
-      <form onSubmit={handleSubmit}>
+      <Authbuttons />
+      <form onSubmit={handleSubmit(submit)}>
         <div>
           <div>
             <Field
               name="login"
               component="input"
               type="text"
-              placeholder="Login"
+              placeholder="Логин"
             />
           </div>
 
@@ -23,16 +30,7 @@ const RegistrForm = props => {
               name="password"
               component="input"
               type="password"
-              placeholder="Password"
-              />
-          </div>
-
-          <div>
-            <Field
-              name="confirmPassword"
-              component="input"
-              type="password"
-              placeholder="Confirm password"
+              placeholder="Пароль"
               />
           </div>
 
@@ -41,7 +39,7 @@ const RegistrForm = props => {
               name="name"
               component="input"
               type="text"
-              placeholder="Name"
+              placeholder="Имя"
             />
           </div>
           <div>
@@ -62,11 +60,11 @@ const RegistrForm = props => {
           </div>
         </div>
         <div>
-          <button type="submit" disabled={pristine || submitting}>
-            Submit
+          <button type="submit" disabled={pristine} >
+            Отправить
           </button>
-          <button type="button" disabled={pristine || submitting} onClick={reset}>
-            Clear Values
+          <button type="button" disabled={pristine} onClick={reset}>
+            Очистить поля
           </button>
         </div>
         </form>

src/components/Header/searchLine.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Input } from 'antd';
 const Search = Input.Search;
-const axios = require('axios');
+//const axios = require('axios');
 
 //Выводит всех пользователей
 // axios.get('http://127.0.0.1:2000/api/users')

src/constants/actionTypes.js

@@ -1 +1,7 @@
-export const GET_DATA = "GET_DATA";
+export const USER_REG_REQUEST = "USER_REG_REQUEST";
+export const USER_REG_REQUEST_SUCCESS = "USER_REG_REQUEST_SUCCESS";
+export const USER_REG_REQUEST_FAIL = "USER_REG_REQUEST_FAIL";
+
+export const USER_AUTH_REQUEST = "USER_AUTH_REQUEST";
+export const USER_AUTH_REQUEST_SUCCESS = "USER_AUTH_REQUEST_SUCCESS";
+export const USER_AUTH_REQUEST_FAIL = "USER_AUTH_REQUEST_FAIL";

src/container/renderAuthorisation.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import { bindActionCreators } from "redux";
+import { connect} from 'react-redux';
+
+import Form from "../components/Auth/authorisation";
+import * as actions from "../actions/usersAuthActions";
+
+class RenderAuthorisation extends Component {      
+    render() {
+      return (
+        <div>
+          <Form {...this.props} />
+        </div>       
+      );
+    }
+}
+
+
+const mapStateToProps = state => ({
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default RenderAuthorisation = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RenderAuthorisation);

src/container/renderRegistration.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import { bindActionCreators } from "redux";
+import { connect} from 'react-redux';
+
+import RegistrForm from "../components/Auth/registration";
+import * as actions from "../actions/usersRegistrActions";
+
+class RenderRegistration extends Component {      
+        render() {
+          return (
+            <div>
+              <RegistrForm {...this.props} />
+            </div>       
+          );
+        }
+  }
+  
+
+const mapStateToProps = state => ({
+  });
+  
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  
+export default RenderRegistration = connect(
+      mapStateToProps,
+      mapDispatchToProps
+  )(RenderRegistration);

src/reducer/index.js

@@ -1,9 +1,11 @@
 import { combineReducers } from "redux";
 import { reducer as formReducer } from 'redux-form';
 
-import users from './users'
+import usersRegistration from './usersRegistration'
+import usersAuthorisation from './usersAuthorisation'
 
 export default  combineReducers({
-    users: users,
+    usersRegistr: usersRegistration,
+    usersAuth: usersAuthorisation,
     form: formReducer,
 })

src/reducer/users.js

@@ -1,21 +0,0 @@
-import * as types from "../constants/actionTypes";
-
-const initState = {
-    inputData: [],
-    isFetching: false,
-    error: null
-  };
-
-  export default (state = initState, { type, payload }) => {
-    
-      switch (type) {
-        case types.GET_DATA: {
-          return {
-          ...state,
-          inputData: payload
-          }
-        }
-        
-        default: return state;    
-    }
-  };

src/reducer/usersAuthorisation.js

@@ -0,0 +1,35 @@
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    inputData: [],
+    isFetching: false,
+    error: null
+  };
+
+export default (state = initState, {type, payload} ) => {
+    switch(type) {
+        case types.USER_AUTH_REQUEST: {
+            return {
+                ...state,
+                inputData: payload,
+                isFatching: true
+            }
+        }
+        case types.USER_AUTH_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                inputData: payload.data,
+                isFatching: false
+            }
+        }
+        case types.USER_AUTH_REQUEST_FAIL: {
+            return {
+                ...state,
+                isFatching: false,
+                error: "ERROR"
+            }
+        }
+        default: return state;
+
+    }
+};

src/reducer/usersRegistration.js

@@ -0,0 +1,37 @@
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    inputData: [],
+    isFetching: false,
+    error: null
+  };
+
+  export default (state = initState, { type, payload }) => {
+      switch (type) {
+        case types.USER_REG_REQUEST: {
+          return {
+          ...state,
+          inputData: payload,
+          isFetching: true
+          }
+        }
+
+        case types.USER_REG_REQUEST_SUCCESS: {
+          return {
+            ...state,
+            isFetching: false,
+            inputDate: payload.data
+          }
+        }
+
+        case types.USER_REG_REQUEST_FAIL: {
+          return {
+            ...state,
+            isFetching: false,
+            error: "ERROR"
+          }
+        }
+        
+        default: return state;    
+    }
+  };

src/router.js

@@ -1,11 +1,10 @@
-import React, {Fragment} from "react";
+import React from "react";
 import { Switch, Route } from "react-router-dom";
 
 import App from "./container/App";
 import Header from "./components/Header"
-import Auth from "./components/Auth/index"
-import Form from './components/Auth/authorisation'
-import RegistrForm from "./components/Auth/registration"
+import RenderRegistration from "./container/renderRegistration"
+import RenderAuthorisation from "./container/renderAuthorisation"
 
 
 export default () => (
@@ -13,9 +12,9 @@ export default () => (
         <Header/>
 	        <Switch>
                 <Route path="/" exact component={App} />
-                <Route path="/authorisation" exact component={Form} />
-                <Route path="/auth" exact component= {Form}/>
-                <Route path="/registration" exact component={RegistrForm} />
+                <Route path="/authorisation" exact component={RenderAuthorisation} />
+                <Route path="/auth" exact component= {RenderAuthorisation}/>
+                <Route path="/registration" exact component={RenderRegistration} />
 
 	        </Switch>
     </div>

src/state/state.js

@@ -1,8 +1,8 @@
-import { createStore} from "redux";
-
-//import thunk from "redux-thunk";
+import { createStore, applyMiddleware} from "redux";
+import thunk from "redux-thunk";
 import reducers from "../reducer/";
 
 export default createStore(
-	reducers
+	reducers,
+	applyMiddleware(thunk)
 );

src/utils/validate.js

@@ -1,7 +1,7 @@
 export default values => {
     const { email, password } = values;
     const error = {};
-    console.log(values)
+
 
     if(!email) {
         error.email = "Required"