file upload

src/components/common/formFunc.js

@@ -2,10 +2,18 @@ import React from "react";
 
 export const renderField = ({ input, meta: { touched, error }, label, type }) => (
 	<div className="form__input-box">
-		<label className="form__input-lable" htmlFor="origin">
+		<label
+			className={touched && error ? "form__input-lable form__input-lable--error" : "form__input-lable"}
+			htmlFor="origin">
 			{label}
 			<input type={type} {...input} />
 		</label>
 		{touched && error && <span>{error}</span>}
 	</div>
 );
+
+// export const renderFieldFile = ({ input, meta: { touched, error }, onChange }) => (
+// 	<div className="form__input-box">
+// 		<input type="file" {...input} onChange={onChange} />
+// 	</div>
+// );

src/components/loadForm/index.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { reduxForm, Field, FieldArray } from "redux-form";
 
-import { renderField } from "../common/formFunc";
+import { renderField, renderFieldFile } from "../common/formFunc";
 
 const ololo = values => {
 	const { origin, destination } = values;
@@ -49,14 +49,24 @@ class LoadForm extends Component {
 		changeInputValue({ value, id, checked });
 	};
 
+	state = { file: null };
+
 	submit = values => {
 		const { event } = this.props;
+		const { file } = this.state;
+
+		event({ ...values, file });
+	};
+
+	onChange = e => {
+		const { target } = e;
 
-		event(values);
+		this.setState({ file: target.files[0] });
 	};
 
 	render() {
 		const { handleSubmit, title, pristine, submitting } = this.props;
+		console.log("s", this.props);
 
 		return (
 			<form onSubmit={handleSubmit(this.submit)} className="form">
@@ -64,6 +74,8 @@ class LoadForm extends Component {
 				<Field name="destination" label="Город получатель" type="text" component={renderField} />
 				<Field name="contactName" label="Введите имя водителя" type="text" component={renderField} />
 				<Field name="night" label="Ночная перевозка ?" type="checkbox" component={renderField} />
+				{/* <Field name="file" component={renderFieldFile} /> */}
+				<input type="file" onChange={this.onChange} />
 
 				<div className="form__input-box">
 					<label className="form__input-lable" htmlFor="bodyType">

src/container/fetchPage.js

@@ -9,9 +9,16 @@ class FetchPage extends Component {
 	state = {
 		foo: 1,
 		files: null,
-		photo: null
+		photo: null,
+		url: "https://test-app-a-level.herokuapp.com"
 	};
 
+	async componentDidMount() {
+		const lol = await fetch("https://jsonplaceholder.typicode.com/todos/1").catch(() => null);
+
+		if (!lol) console.log("lol", lol);
+	}
+
 	add = () => this.setState(prevState => ({ foo: prevState.foo + 1 }));
 
 	change = e => {
@@ -42,7 +49,29 @@ class FetchPage extends Component {
 	post = () => {
 		const file = new FormData();
 
-		file.append("profilePhoto", this.state.file);
+		file.append("file", this.state.file);
+
+		// fetch(`${this.state.url}/auth/upload`, {
+		// 	method: "POST",
+		// 	// headers: {
+		// 	// 	"Content-Type": "multipart/form-data"
+		// 	// },
+		// 	body: file
+		// })
+		// 	.then(res => res.json())
+		// 	.then(res => console.log("res", res))
+		// 	.catch(err => console.log("res", err));
+
+		fetch(`http://localhost:5000/category`, {
+			method: "GET"
+			// headers: {
+			// "Content-Type": "application/json"
+			// 	Accept: "application/json"
+			// }
+		})
+			.then(res => res.json())
+			.then(res => console.log("res", res))
+			.catch(err => console.log("res", err));
 	};
 
 	render() {
@@ -57,7 +86,7 @@ class FetchPage extends Component {
 				</button>
 
 				<div>
-					<img src={photo} alt="asdfas" />
+					<img src={`${this.state.url}/static/img/1547758776732-frog.jpeg`} alt="asdfas" />
 					<input type="file" onChange={e => this.change(e)} />
 					<button onClick={this.post}>POST FILE</button>
 				</div>

src/router.js

@@ -1,6 +1,6 @@
 import React, { lazy, Suspense } from "react";
 import { Switch, Route } from "react-router-dom";
-// import App from "./container/App";
+import App from "./container/App";
 // import FetchPage from "./container/fetchPage";
 import Auth from "./container/Auth";
 
@@ -8,7 +8,7 @@ import Header from "./components/header";
 
 import PrivateRoute from "./privateRouter";
 
-const app = lazy(() => import("./container/Auth"));
+// const app = lazy(() => import("./container/Auth"));
 const FetchPage = lazy(() => import("./container/fetchPage"));
 
 export default () => (
@@ -16,7 +16,7 @@ export default () => (
 		<Suspense fallback={<div>Loading...</div>}>
 			<Header />
 			<Switch>
-				<PrivateRoute path="/" exact component={app} />
+				<PrivateRoute path="/" exact component={App} />
 				<Route path="/auth" render={props => <Auth name="Tony" {...props} />} />
 				<Route exact path="/fetch" component={FetchPage} />
 			</Switch>

src/state/state.js

@@ -9,18 +9,18 @@ import initialState from "./initialState";
 
 const sagaMiddleware = createSagaMiddleware();
 
-const log = state => next => action => {
-	console.log("PrevState", state.getState());
-	next(action);
-	console.log("action", action);
-	console.log("nextState", state.getState());
-};
+// const log = state => next => action => {
+// 	console.log("PrevState", state.getState());
+// 	next(action);
+// 	console.log("action", action);
+// 	console.log("nextState", state.getState());
+// };
 
 const store = createStore(
 	reducers,
 	initialState,
 	// applyMiddleware(thunk, logger)
-	applyMiddleware(thunk, sagaMiddleware, log)
+	applyMiddleware(thunk, sagaMiddleware)
 );
 
 sagaMiddleware.run(saga);

src/style/components/_form.scss

@@ -14,6 +14,10 @@
 		display: flex;
 		flex-direction: column;
 		margin-bottom: 0.5rem;
+
+		&--error {
+			color: red;
+		}
 	}
 
 	&__input {

src/utils/validate.js

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