redux-form

package.json

@@ -7,8 +7,11 @@
     "axios": "^0.18.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "^2.1.3"
+    "react-scripts": "^2.1.3",
+    "redux": "^4.0.1",
+    "redux-form": "^8.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/index.js

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

src/common/formFunc.js

@@ -2,9 +2,10 @@ import React from "react";
 
 export const renderField = ({input, meta: {touched, error}, label, type, placeholder }) => (
     <div className="form__input-box">
+    {console.log(input.value)}
         <label className="form__input-label" htmlFor="origin">
             {label}
-            <input  className="form__input"type = {type} placeholder = {placeholder} {...input} />
+            <input  className="form__input" type = {type} placeholder = {placeholder} {...input} />
         </label>
         {touched && error && <span>{error}</span>}
     </div>

src/components/Auth/index.js

@@ -1,22 +1,34 @@
 import React, { Component } from "react";
 import { reduxForm, Field } from "redux-form";
 
-import { renderField } from "../common/formFunc";
-import { authValidate } from "../utils/validate";
-
-class Form extends Component {
-
+import { renderField } from "../../common/formFunc";
+import  authValidate  from "../../utils/validate";
 
+class Form extends Component  {
 	submit = values => {
-	};
+		console.log("vlad lox")
 
+	}
 	render() {
-		const { handleSubmit } = this.props;
+		const { handleSubmit, title, pristine, submitting } = this.props;
 		return (
 			<form className="auth__form" onSubmit={handleSubmit(this.submit)}>
-				<Field name="email" type="email" label="E-mail:" placeholder="example@email.com" component={renderField} />
-
-				<Field name="password" type="password" label="Password:" placeholder ="password" component={renderField} />
+				<Field 
+				name="email" 
+				type="email"
+				component = {renderField}
+				label="E-mail:" 
+				placeholder="example@email.com"
+				/>
+				
+
+				<Field 
+				name="password"
+				component = {renderField}
+				type="password" 
+				label="Password:" 
+				placeholder ="password" 
+				/>
 
 				<button className="auth__submit-button">Submit</button>
 			</form>

src/components/Header/auth.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 import { Avatar } from 'antd';
-class Auth extends Component {
+class Myprofile extends Component {
     render() {
         return (
         <div className="auth">
-            <Link to="/auth" className="link">
+            <Link to="/auth" className="link" target="_blank">
 
                 <div className="avatar">
                     <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>
@@ -19,4 +19,4 @@ class Auth extends Component {
     }
 }
 
-export default Auth;
+export default Myprofile;

src/components/Header/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import HeaderLogo from '../Header/logo'
 import SearchLine from '../Header/searchLine'
-import Auth from '../Header/auth'
+import Myprofile from './Myprofile'
 import 'antd/dist/antd.css';
 class Header extends Component {
     render() {
@@ -9,7 +9,7 @@ class Header extends Component {
             <div className="header">
                <HeaderLogo />
                <SearchLine/>
-               <Auth/>
+               <Myprofile/>
             </div>
         );
     }

src/components/Header/searchLine.js

@@ -44,7 +44,7 @@ const axios = require('axios');
 //   })
 
 // axios.delete(`http://127.0.0.1:2000/api/users`, {
-//     "id": "151"
+//     "id": 151
 // })
 //   .then(function (response) {
 //     // handle success

src/components/LeftMenu/index.js

@@ -7,7 +7,7 @@ import {
      Sider
   } = Layout;
   const SubMenu = Menu.SubMenu;
-
+  const axios = require('axios');
 class LeftMenu extends Component {
     state = {
         collapsed: false,
@@ -17,7 +17,29 @@ class LeftMenu extends Component {
         this.setState({ collapsed });
     }
     onChange = ()=>{
-        console.log(this);
+        axios.post(`http://127.0.0.1:2000/api/staffs`,{
+            "title": "Футлка",
+            "description": "Продаю футболку Адидас",
+            "staff": "Одежда",
+            "price": 100,
+            "state": "0",
+            "img": "",
+            "userId": "1",
+            "categoryId": "1"
+        }
+        )
+  .then(function (response) {
+    // handle success
+    console.log(response);
+  }).catch((err)=>
+    console.log(err))
+}
+    onChange1 = ()=>{
+        axios.get('http://127.0.0.1:2000/api/staffs')
+  .then(function (response) {
+    // handle success
+    console.log(response.data);
+  })
     }
     render() {
         
@@ -47,18 +69,19 @@ class LeftMenu extends Component {
                     key="sub6"
                     title={<span><Icon type="shopping" /><span>Женское белье</span></span>}
                     >
-                    <Menu.Item key="4"><button onClick={this.onChange}>2332
+                    <Menu.Item key="3"><button onClick={this.onChange}>Post
+        </button></Menu.Item>
+                    <Menu.Item key="4"><button onClick={this.onChange1}>Get
         </button></Menu.Item>
-                    <Menu.Item key="5">Alex</Menu.Item>
                     </SubMenu>
-                    <Menu.Item key="4">Bill</Menu.Item>
-                    <Menu.Item key="5">Alex</Menu.Item>
+                    <Menu.Item key="5">Bill</Menu.Item>
+                    <Menu.Item key="6">Alex</Menu.Item>
                     </SubMenu>
                     <SubMenu
                     key="sub2"
                     title={<span><Icon type="team" /><span>Team</span></span>}
                     >
-                    <Menu.Item key="6">Team 1</Menu.Item>
+                    <Menu.Item key="7">Team 1</Menu.Item>
                     <Menu.Item key="8">Team 2</Menu.Item>
                     </SubMenu>
                     <Menu.Item key="9">

src/constants/actionTypes.js

@@ -0,0 +1 @@
+export const GET_DATA = "GET_DATA";

src/container/App.js

@@ -10,9 +10,11 @@ class App extends Component {
       <div className='ras'>
           <div className='ras1'>
             <LeftMenu />
+           
           </div>
           <div className='ras2'>
                 {
+                  
                   Back[0].podCategory[0].clothes[0].Underwear.map(el=><div className='as'><img className="img" src={el.img} alt='sadasd' /><p>{el.name}</p><p>{el.price}</p></div>)   
                 }
           </div>

src/index.js

@@ -4,9 +4,14 @@ import './index.css';
 import * as serviceWorker from './serviceWorker';
 import { BrowserRouter } from "react-router-dom";
 import Router from "./router";
+import { Provider } from "react-redux";
+import store from "./state/state";
+
 ReactDOM.render(
     <BrowserRouter>
-            <Router />
+        <Provider store={store}>
+            <Router/>
+        </Provider>
     </BrowserRouter>
 ,
 document.getElementById("root")

src/reducer/index.js

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

src/reducer/users.js

@@ -0,0 +1,21 @@
+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/router.js

@@ -1,14 +1,17 @@
-import React from "react";
+import React, {Fragment} from "react";
 import { Switch, Route } from "react-router-dom";
 
 import App from "./container/App";
 import Header from './components/Header'
+import Form from './components/Auth/index'
 
 export default () => (
     <div>
         <Header/>
 	        <Switch>
                 <Route path="/" exact component={App} />
+                <Route path="/auth" exact component={Form} />
+
 	        </Switch>
     </div>
 );

src/state/state.js

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

src/utils/validate.js

@@ -1,4 +1,4 @@
-export const authValidate = values => {
+export default values => {
     const { email, password } = values;
     const error = {};
     console.log(values)