src/components/FormsAdd/redForm/index.js

@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import { Field, reduxForm } from 'redux-form';
+
+import FormData from 'form-data'
+
+
+class FormRedactorStaff extends  Component  {
+
+    constructor(props){
+        super(props)
+       this.state = { trig:false }
+    }
+    // componentDidUpdate(prevProps){
+    //     const {  match } = this.props
+    //     if(prevProps.InfoStaff[0].id !==this.props.InfoStaff[0].id ){
+    //         this.props.getStaffsDataById(this.props.InfoStaff[0].id)
+    //     }
+    //     console.log("prevProps.InfoStaff", prevProps.InfoStaff, "this.props.InfoStaff", this.props.InfoStaff)
+    // }
+    onChange = e =>{
+        const { pushPhoto,photo } = this.props
+        //this.setState({image: e.target.files[0]})
+        this.setState({trig:true})
+        let data = new FormData();
+        data.append('image',e.target.files[0], e.target.files[0].name);
+          
+          pushPhoto(data)
+    }
+    
+    changeHandler = (e) =>{
+          const { inputchangeHandler } = this.props
+          inputchangeHandler(e.target.value)
+    }
+    changeHandler1 = (e) =>{
+        const { inputchangeHandler1 } = this.props
+        inputchangeHandler1(e.target.value)
+    }
+    changeHandler2 = (e) =>{
+         const { inputchangeHandler2 } = this.props
+        inputchangeHandler2(e.target.value)
+        
+    }
+    changeHandler3 = (e) =>{
+         const { inputchangeHandler3 } = this.props
+        inputchangeHandler3(e.target.value)
+        
+    }
+    send = () =>{
+        const { inputData, inputData1, inputData2, inputData3, match, photo, EditStaffAction, InfoStaff, getUser } = this.props
+        
+        let values = {}
+   
+        if(!this.state.trig){
+            values.img = "http://rs.img.com.ua/crop?v2=1&w=600&h=0&url=%2F%2Fbm.img.com.ua%2Fberlin%2Fstorage%2Forig%2Fd224d3bd9bfe8bcb6b561da523d87364.jpg";
+            values.state = 0
+        }
+        else{
+            values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`; 
+            values.state = 1 
+         }
+        values.staff = "Машина"
+        values.title = inputData
+        values.description = inputData1
+        values.price = inputData2
+        values.categoryId = inputData3
+        values.userId = getUser.id
+        values.id = InfoStaff[0].id
+          //EditStaffAction(values)
+          console.log(values)
+    }
+    render(){
+        
+        
+         const { handleSubmit, pristine, reset, submitting, InfoStaff, photo, allCategory } = this.props
+         console.log("InfoStaff", InfoStaff)
+         const category = allCategory.data.filter(el => el.parentId !== 0)
+         let data;
+         if(this.props.InfoStaff[0].id === this.props.match.params.id){
+             data = []
+         }
+         else{
+            data = InfoStaff.map(el => <form  className="form">
+            <input type="text"  name="title" defaultValue ={el.title} className="input" onChange={this.changeHandler}/>
+            <textarea type="text"  name="description" defaultValue ={el.description} className="input" onChange={this.changeHandler1}/>
+            <input type="number"  name="price" defaultValue ={el.price} className="input" onChange={this.changeHandler2}/>
+            <select type="number"  name="categoryId"  className="input" onChange={this.changeHandler3}>
+
+              <option >Выберите рубрику</option>
+                    {category.map(el => <option value={el.id}> {el.title}</option>)}
+                </select>         
+                            <label className='upload-zone'>
+                               <i>&nbsp;</i>
+                                <input type='file' className='files'  onChange={this.onChange}/>
+                                
+                            </label>
+                            <label className='upload-zone zone2'>
+                            <i>&nbsp;</i>
+                                <input type='file' className='files'  onChange={this.onChange}/>
+                                
+                            </label>
+                            <label className='upload-zone zone3'>
+                            <i>&nbsp;</i>
+                                <input type='file' className='files'  onChange={this.onChange}/>
+                                
+                            </label>
+                            <label className='upload-zone zone4'>
+                            <i>&nbsp;</i>
+                                <input type='file' className='files'  onChange={this.onChange}/>
+                                
+                            </label>
+                            
+                        
+               
+                <div className="buttonConteiner">
+                    <button type="button" className="button" onClick={this.send}>
+                        Submit
+                    </button>
+                    <button type="button" disabled={pristine || submitting} onClick={reset} className="button" >
+                        Clear Values
+                    </button>
+                   
+                </div>
+                
+                
+            </form>
+          )
+         }
+    return (
+        
+            <div className="formdiv">
+              {data}  
+            </div>
+        
+    )
+  }
+}
+
+export default reduxForm({
+    form: 'RedactorForm'
+})(FormRedactorStaff)

src/container/activeStaffs.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+
+import { getUsersDataById } from "../actions/getUserById"
+import { deleteStaffById } from "../actions/getStaffByIdAction"
+import { Link } from "react-router-dom";
+import { connect } from 'react-redux';
+
+import { bindActionCreators } from "redux";
+const axios = require('axios')
+class activeStaffs extends Component {
+   
+    componentDidMount() {
+        const { getUsersDataById } = this.props
+               
+               
+
+              let localS = JSON.parse(localStorage.getItem("login"));
+                if(localS===null){
+
+                }
+                else{
+                    getUsersDataById(localS)
+                }     
+    }
+    deleteStaff = (id) =>{
+        
+        
+       
+        axios.delete(`http://127.0.0.1:2000/api/staffs`,id).then(res => console.log(res))
+    }
+    render() {
+        const { getUser, deleteStaffById } = this.props
+            const { staffs } = getUser
+       console.log(this.props)
+        return (
+            <div>
+               {staffs!==undefined && staffs.reverse().map((el,key)=>  <div className="staff" key={key}>
+                            <Link to={`/activeStaffs/${el.id}`}><button >Редактирование</button></Link>
+                            <button onClick={()=>this.deleteStaff(el.id)}>Удалить объявление</button>
+                             {el.state ?  <img src={el.img.substr(0,53)} width="325" height="190" className="imgStaff"  alt="lorem" /> : <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />}
+                                <div className="titlleAndPrice">
+                                    <h4>{el.title}</h4>
+                                    <h4>Цена: {el.price}</h4>
+                                </div>
+
+                            </div> )}
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    getUser: state.getUserById.getUser,
+    
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ getUsersDataById, deleteStaffById }, dispatch);
+
+export default activeStaffs = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(activeStaffs);

src/container/redactorForm.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import { getUsersDataById } from "../actions/getUserById"
+import { getCategoriesData } from '../actions/categoryAction';
+import { getStaffsDataById } from "../actions/getStaffByIdAction"
+import { pushPhoto, inputchangeHandler, inputchangeHandler1, inputchangeHandler2, inputchangeHandler3, EditStaffAction } from "../actions/addNewStaffAction"; 
+import FormRedactorStaff from '../components/FormsAdd/redForm'
+
+import { connect} from 'react-redux';
+import { bindActionCreators } from "redux";
+
+class redactorForm extends Component {
+    // componentDidUpdate(prevProps){
+    //     const {getStaffsDataById, match } = this.props
+    //     console.log(prevProps.match.params.id, match.params.id)
+    //     if(prevProps.match.params.id !==match.params.id ){
+    //         getStaffsDataById(match.params.id)
+    //     }
+    // }
+    componentDidMount(){
+        const { getStaffsDataById, match, getUsersDataById } = this.props
+        getStaffsDataById(match.params.id)
+            this.props.getCategoriesData();
+            let localS = JSON.parse(localStorage.getItem("login"));
+        if(localS===null){
+        }
+        else{
+            getUsersDataById(localS)
+        }     
+
+    }
+    render() {
+        const { allCategory } = this.props
+        let data; 
+        if (allCategory.data===undefined){
+            data = []
+        }
+        else{ 
+            const category = allCategory.data.filter(el => el.parentId !== 0)
+            data = <FormRedactorStaff {...this.props}/>
+        }
+       
+        return (
+            <div>
+              {data}  
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    allCategory: state.category.allCategory,
+    InfoStaff: state.staffById.infoStaffs,
+    isFetching: state.staffById.isFetching,
+    getUser: state.getUserById.getUser,
+    photo: state.addStaff.photo,
+    inputData: state.addStaff.inputData,
+    inputData1: state.addStaff.inputData1,
+    inputData2: state.addStaff.inputData2,
+    inputData3: state.addStaff.inputData3
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({ getUsersDataById, getStaffsDataById, getCategoriesData, pushPhoto, inputchangeHandler, inputchangeHandler1, inputchangeHandler2, inputchangeHandler3, EditStaffAction }, dispatch);
+  
+  export default redactorForm = connect(
+        mapStateToProps,
+        mapDispatchToProps
+  )(redactorForm);