add new form

src/components/header/index.js

@@ -6,7 +6,7 @@ const liArr = [
 	{ path: "/", id: 1, text: "Main", hideWhenAuth: false },
 	{ path: "/count", id: 2, text: "Counter from redux", hideWhenAuth: false },
 	{ path: "/redux-todo", id: 3, text: "Todo redux", hideWhenAuth: false },
-	// { path: "/remote-todo", id: 4, text: "Remote todo", hideWhenAuth: false },
+	{ path: "/form", id: 4, text: "TODO REDUX_FORM", hideWhenAuth: false },
 	{ path: "/auth", id: 5, text: "Auth", hideWhenAuth: true }
 ];
 

src/containers/remote-todo.js

@@ -1,180 +1,24 @@
 import React, { Component } from "react";
-import { connect } from "react-redux";
+import { reduxForm, Field } from "redux-form";
 
-import {
-	changeInputValue,
-	createPost,
-	getPosts,
-	resetPostForm,
-	removePost,
-	showEditForm,
-	cancelUpdate,
-	update,
-	handleChangeEditForm
-} from "../actions/remote-todo";
+import { renderInput } from "../components/redux-form/form-elemets";
 
-import Input from "../components/input";
-import Button from "../components/button/button";
-import Loder from "../components/HOC/loader";
-import Modal from "../components/modal";
-
-export class RemoteTodo extends Component {
-	state = { open: false };
-
-	close = () => this.setState({ open: false });
-
-	open = () => this.setState({ open: true });
-
-	componentDidMount() {
-		this.props.getPosts();
-	}
-
-	showEditModalForm = id => {
-		this.props.showEditForm(id);
-		this.open();
-	};
-
-	udatePostHandler = () => {
-		const { sendDataObject, update } = this.props;
-		update(sendDataObject);
-		this.close();
-	};
-
-	cancelUpdatePostHandler = () => {
-		const { cancelUpdate } = this.props;
-		cancelUpdate();
-		this.close();
-	};
+class RemoteTodo extends Component {
+	submit = value => console.log("value", value);
 
 	render() {
-		const {
-			changeInputValue,
-			myForm,
-			createPost,
-			postList,
-			resetPostForm,
-			sendDataObject,
-			removePost,
-			isFetching,
-			editForm,
-			editFormField,
-			handleChangeEditForm
-		} = this.props;
-
+		console.log("this.props", this.props);
 		return (
-			<div
-				style={{
-					width: "100%",
-					padding: 50,
-					display: "flex"
-				}}>
-				<div
-					style={{
-						width: "20%",
-						display: "flex",
-						flexDirection: "column"
-					}}>
-					{myForm.map(el => {
-						return (
-							<Input
-								key={el.id}
-								id={el.id}
-								value={el.value}
-								checked={el.checked}
-								type={el.type}
-								name={el.name}
-								label={el.label}
-								onChange={changeInputValue}
-							/>
-						);
-					})}
-					<div>
-						<Loder flag={isFetching}>
-							<Button text="Create Post" onClick={createPost.bind(null, sendDataObject)} />
-						</Loder>
-						<Button text="RESET" onClick={resetPostForm} />
-					</div>
-				</div>
-				<div className="list">
-					{postList.map(el => (
-						<div key={el.id} className="list__item">
-							<Button text="x" className="list__rm-btn" onClick={removePost.bind(null, el.id)} />
-							{el.editable && (
-								<Button
-									text="edit"
-									className="list__edit-btn"
-									onClick={this.showEditModalForm.bind(null, el.id)}
-								/>
-							)}
-							<h3>
-								{el.firstName} {el.lastName}
-							</h3>
-							<p>{el.age}</p>
-						</div>
-					))}
-				</div>
-				{editForm && (
-					<div>
-						<div
-							style={{
-								width: "100%",
-								display: "flex",
-								flexDirection: "column"
-							}}
-						/>
-					</div>
-				)}
-				<Modal open={this.state.open} close={this.close}>
-					<div>
-						{editFormField.map(el => {
-							return (
-								<Input
-									key={el.id}
-									id={el.id}
-									value={el.value}
-									checked={el.checked}
-									type={el.type}
-									name={el.name}
-									label={el.label}
-									onChange={handleChangeEditForm}
-								/>
-							);
-						})}
-						<div>
-							<Loder flag={isFetching}>
-								<Button text="Update Post" onClick={this.udatePostHandler} />
-							</Loder>
-							<Button text="CANCEL" onClick={this.cancelUpdatePostHandler} />
-						</div>
-					</div>
-				</Modal>
+			<div>
+				<form onSubmit={this.props.handleSubmit(this.submit)} style={{ width: "30rem", margin: "0 auto" }}>
+					<Field name="name" component={renderInput} />
+					<Field name="age" type="number" component={renderInput} />
+
+					<button>OK</button>
+				</form>
 			</div>
 		);
 	}
 }
 
-const mapStateToProps = state => {
-	return {
-		myForm: state.remote_todo.myForm,
-		postList: state.remote_todo.postList,
-		sendDataObject: state.remote_todo.sendDataObject,
-		isFetching: state.remote_todo.isFetching,
-		editForm: state.remote_todo.editForm,
-		editFormField: state.remote_todo.editFormField
-	};
-};
-
-export default connect(
-	mapStateToProps,
-	{
-		changeInputValue,
-		createPost,
-		getPosts,
-		resetPostForm,
-		removePost,
-		showEditForm,
-		cancelUpdate,
-		handleChangeEditForm,
-		update
-	}
-)(RemoteTodo);
+export default reduxForm({ form: "redux-form" })(RemoteTodo);

src/private-router.js

@@ -13,7 +13,7 @@ export const PrivateRoute = ({ component: Component, protectedRoute, ...rest })
 
 				return <Component {...props} />;
 			}
-			return <Component {...props} />;
+			return <Component initialValues={{ name: "Tony", age: 34 }} {...props} />;
 		}}
 	/>
 );

src/reducer/redux-todo.js

@@ -36,7 +36,8 @@ const initialValue = {
 				value: ""
 			}
 		]
-	}
+	},
+	updateObject: {}
 };
 
 export default (state = initialValue, action) => {
@@ -145,7 +146,15 @@ export default (state = initialValue, action) => {
 		}
 
 		case "@@redux-form/CHANGE": {
-			console.log("action", action);
+			if (action.meta.form === "redux-form") {
+				return {
+					...state,
+					updateObject: {
+						...state.updateObject,
+						[action.meta.field]: action.payload
+					}
+				};
+			}
 			return state;
 		}
 

src/router.js

@@ -1,13 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useEffect, lazy, Suspense } from "react";
 import { Switch, withRouter } from "react-router-dom";
 
 import Header from "./components/header";
 
-import Main from "./containers/main";
-import Count from "./containers/count";
-import ReduxTodo from "./containers/reduxTodo";
-import AuthContainer from "./containers/auth";
-
 import { PrivateRoute } from "./private-router";
 import { checkJWT } from "./utils/checkJWT";
 
@@ -20,28 +15,35 @@ const route = [
 		path: "/",
 		protected: false,
 		// hasAccess: [],
-		component: Main
+		component: lazy(() => import("./containers/main"))
 	},
 	{
 		id: 5,
 		exact: true,
 		path: "/auth",
 		protected: false,
-		component: AuthContainer
+		component: lazy(() => import("./containers/auth"))
 	},
 	{
 		id: 2,
 		exact: true,
 		path: "/count",
 		protected: true,
-		component: Count
+		component: lazy(() => import("./containers/count"))
 	},
 	{
 		id: 3,
 		exact: true,
 		path: "/redux-todo",
 		protected: true,
-		component: ReduxTodo
+		component: lazy(() => import("./containers/reduxTodo"))
+	},
+	{
+		id: 6,
+		exact: true,
+		path: "/form",
+		protected: false,
+		component: lazy(() => import("./containers/remote-todo"))
 	},
 	{
 		id: 4,
@@ -63,18 +65,20 @@ export const App = withRouter(({ history }) => {
 
 	return (
 		<div className="container">
-			<Header />
-			<Switch>
-				{route.map(el => (
-					<PrivateRoute
-						protectedRoute={el.protected}
-						key={el.id}
-						exact={el.exact}
-						path={el.path}
-						component={el.component}
-					/>
-				))}
-			</Switch>
+			<Suspense fallback={<div>Loading...</div>}>
+				<Header />
+				<Switch>
+					{route.map(el => (
+						<PrivateRoute
+							protectedRoute={el.protected}
+							key={el.id}
+							exact={el.exact}
+							path={el.path}
+							component={el.component}
+						/>
+					))}
+				</Switch>
+			</Suspense>
 		</div>
 	);
 });