17.04.2019

Lesson5/package.json

@@ -1,7 +1,6 @@
 {
   "name": "lesson5",
   "version": "1.0.0",
-  "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -19,19 +18,27 @@
     "jquery": "^3.3.1",
     "popper.js": "^1.14.7",
     "prop-types": "^15.7.2",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-router": "^3.2.1"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-redux": "^7.0.2",
+    "react-router": "^3.2.1",
+    "react-router-dom": "^5.0.0",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-promise-middleware": "^6.1.0",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1"
-  }
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
+  },
+  "keywords": [],
+  "description": ""
 }

Lesson5/src/app.js

@@ -9,11 +9,14 @@ import PageNotFound from './app/pages/PageNotFound';
 import Users from './app/pages/Users';
 import User from './app/pages/User';
 
+import { Provider } from 'react-redux';
 
-const app = document.querySelector('#root');
 
+const app = document.querySelector('#root');
+import GlobalStore from './app/store'
 
 ReactDOM.render(
+	<Provider store={GlobalStore}>
 	<Router history={browserHistory}>
 		<Route path="/" component={Layout}>
 			<IndexRoute component={MainPage}/>
@@ -23,6 +26,7 @@ ReactDOM.render(
 			<Route path="*" component={PageNotFound}/>
 		</Route>
 	</Router>
+	</Provider>
 	,
 app);
 

Lesson5/src/app/actions/userActions.js

@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+export function fetchUser(userId) {
+    return function (dispatch) {
+        dispatch({ type: "FETCH_USER" });
+
+        axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`)
+            .then(res => {
+                dispatch({ type: "FETCH_USER_FULFILED", payload: res.data })
+            })
+            .catch(err => {
+                dispatch({ type: "FETCH_USER_REJECTED", payload: err })
+            }
+            )
+    }
+}

Lesson5/src/app/actions/userListActions.js

@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+export function fetchUserList(userId) {
+    return function (dispatch) {
+        dispatch({ type: "FETCH_USERS_LIST" });
+
+        axios.get(`https://jsonplaceholder.typicode.com/users/`)
+            .then(res => {
+                dispatch({ type: "FETCH_USERS_LIST_FULFILED", payload: res.data })
+            })
+            .catch(err => {
+                dispatch({ type: "FETCH_USERS_LIST_REJECTED", payload: err })
+            }
+            )
+    }
+}

Lesson5/src/app/components/User.js

@@ -1,20 +1,40 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
+import { connect } from 'react-redux';
+import { fetchUser } from '../actions/userActions'
 
-export default class User extends React.Component {
+class User extends React.Component {
+
+  componentDidMount() {
+    if (this.props.id) {
+      this.props.dispatch(
+        fetchUser(this.props.id)
+      );
+    }
+  }
   render() {
+
+    const userOne = this.props;
     return (
-      <div className="card border-secondary mb-3">
+      <div key={userOne.id} className="card border-secondary mb-3">
         <div className="card-header">
-          <Link to={`/users/${this.props.id}`}>{this.props.username}</Link>
+          <Link to={`/users/${userOne.id}`}>{userOne.username}</Link>
         </div>
         <div className="card-body text-secondary">
-          <p>{this.props.name}</p>
-          <p>{this.props.email}</p>
-          <p>{this.props.phone}</p>
-          <p>{this.props.website}</p>
+          <p>{userOne.name}</p>
+          <p>{userOne.email}</p>
+          <p>{userOne.phone}</p>
+          <p>{userOne.website}</p>
         </div>
       </div>
     );
   }
-}
+}
+
+function mapStateToProps(state) {
+  return {
+    user: state.user.userData,
+    userFetched: state.user.fetched
+  }
+}
+export default connect(mapStateToProps)(User) 

Lesson5/src/app/components/UsersList.js

@@ -1,37 +1,39 @@
 import React from 'react';
-import axios from 'axios';
+import { connect } from 'react-redux';
+
 import User from './User';
+import { fetchUserList } from '../actions/userListActions';
 
-export default class UsersList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      users: []
-    };
-  }
+class UsersList extends React.Component {
 
-  componentDidMount()
-  {
-    axios.get('https://jsonplaceholder.typicode.com/users/')
-    .then((response) => {
-      this.setState({users: response.data})
-    })
+  componentDidMount() {
+    this.props.dispatch(fetchUserList())
   }
 
   render() {
-    if(!this.state.users.length) {
-      return null;
-    }
+
 
-    const users = this.state.users.map((user, index) => {
-      return <User key={index} {...user} />
+    const users = this.props.usersList.map((user, index) => {
+      return <User key={user.id} {...user} />
     })
-
+    console.log("this.props.usersList", this.props.usersList);
     return (
+      !this.props.usersList.length ?
+      <h1>Идет загрузка данных ... </h1>
+      :
       <div>
         <h1>Пользователи</h1>
         {users}
       </div>
     );
   }
-}
+}
+
+function mapStateToProps(state) {
+  console.log(state);
+  return {
+    usersList: state.usersList.list,
+    usersListFetched: state.usersList.fetched
+  }
+}
+export default connect(mapStateToProps)(UsersList) 

Lesson5/src/app/reducers/index.js

@@ -0,0 +1,9 @@
+import { combineReducers } from "redux"
+
+import usersList from "./usersListReducer"
+import user from "./userReducer"
+
+export default combineReducers({
+  usersList: usersList,
+  user: user,
+})

Lesson5/src/app/reducers/userReducer.js

@@ -0,0 +1,47 @@
+const InitState = {
+  userData: {
+    id: null,
+    username: "",
+    name: "",
+    email: "",
+    phone: "",
+    website: ""
+  },
+  fetching: false,
+  fetched: false,
+  error: null
+}
+
+export default function reducer(state = InitState, action) {
+
+  switch (action.type) {
+    case "FETCH_USER": {
+      return { ...state, fetching: true }
+    }
+    case "FETCH_USER_REJECTED": {
+      return { ...state, fetching: false, error: action.payload }
+    }
+    case "FETCH_USER_FULFILED": {
+      return {
+        ...state,
+        fetching: false,
+        fetched: true,
+        userData: action.payload,
+      }
+    }
+    case "SET_USER_NAME": {
+      return {
+        ...state,
+        userData: { ...state.user, name: action.payload },
+      }
+    }
+    case "SET_USER_AGE": {
+      return {
+        ...state,
+        userData: { ...state.user, age: action.payload },
+      }
+    }
+  }
+
+  return state
+}

Lesson5/src/app/reducers/usersListReducer.js

@@ -0,0 +1,36 @@
+const InitState = {
+    list:[ {
+        id: null,
+        username:"",
+        name: "",
+        email: "",
+        phone: "",
+        website: ""
+      }],
+      fetching: false,
+      fetched: false,
+      error: null
+}
+
+export default function reducer(state=InitState, action) {
+
+    switch (action.type) {
+      case "FETCH_USERS_LIST": {
+        return {...state, fetching: true}
+      }
+      case "FETCH_USERS_LIST_REJECTED": {
+        return {...state, fetching: false, error: action.payload}
+      }
+      case "FETCH_USERS_LIST_FULFILED": {
+        console.log("###FETCH_USERS_LIST_FULFILED", action.payload);
+        return {
+          ...state,
+          fetching: false,
+          fetched: true,
+          list: action.payload,
+        }
+      }   
+    }
+
+    return state
+}

Lesson5/src/app/store.js

@@ -0,0 +1,11 @@
+import { applyMiddleware, createStore } from 'redux';
+
+import {createLogger} from 'redux-logger';
+import thunk from 'redux-thunk';
+import promise from 'redux-promise-middleware';
+
+import reducer from './reducers';
+
+const middleware = applyMiddleware(promise, thunk, createLogger());
+
+export default createStore(reducer, middleware);

src_Lesson8/app.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import {Router, Route, browserHistory, IndexRoute} from 'react-router';
+
+import Layout from './app/layouts/Layout';
+import MainPage from './app/pages/Main';
+import PageNotFound from './app/pages/PageNotFound';
+import Users from './app/pages/Users';
+import User from './app/pages/User';
+import {Provider} from 'react-redux';
+//import store from './store';
+
+const app = document.querySelector('#root');
+
+
+ReactDOM.render(
+//	<Provider store={store}>
+	<Router history={browserHistory}>
+		<Route path="/" component={Layout}>
+			<IndexRoute component={MainPage}/>
+			<Route path="users" component={Users}>
+				<Route path=":userId" component={User}/>
+			</Route>
+			<Route path="*" component={PageNotFound}/>
+		</Route>
+	</Router>
+	//</Provider>
+	,
+app);
+
+//localhost:8080/about

src_Lesson8/app/components/Menu.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const Menu = (props) => {
+  return (
+    <nav className="navbar navbar-expand-lg navbar-light bg-light">
+      <div className="container">
+        <Link to="/" className="navbar-brand">{props.brand}</Link>
+        <div className="collapse navbar-collapse">
+          <ul className="navbar-nav">
+            {props.children}
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Menu;