create UsersList component
This commit is contained in:
parent
aa9e1cc542
commit
4724eff74c
@ -1,12 +1,13 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Route } from "react-router-dom";
|
import { Route } from "react-router-dom";
|
||||||
import Home from "./components/Home";
|
import Home from "./components/Home";
|
||||||
|
import UsersList from "./components/UsersList";
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Route exact path="/" component={Home} />
|
<Route exact path="/" component={Home} />
|
||||||
<Route exact path="/users" component={() => 'Users'} />
|
<Route exact path="/users" component={UsersList} />
|
||||||
<Route exact path="/admins" component={() => 'Admins List'} />
|
<Route exact path="/admins" component={() => 'Admins List'} />
|
||||||
<Route exact path="/profile" component={() => 'Current User'} />
|
<Route exact path="/profile" component={() => 'Current User'} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import 'babel-polyfill';
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { BrowserRouter } from "react-router-dom";
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
30
src/client/components/UsersList.js
Normal file
30
src/client/components/UsersList.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
import { fetchUsers } from "../actions";
|
||||||
|
|
||||||
|
class UsersList extends Component {
|
||||||
|
componentDidMount() {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUsers() {
|
||||||
|
return this.props.users.map(user => {
|
||||||
|
return <li key={user.id}>{user.name}</li>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
Users List
|
||||||
|
<ul>{this.renderUsers()}</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state) {
|
||||||
|
return { users: state.users };
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, { fetchUsers })(UsersList);
|
@ -1,3 +1,4 @@
|
|||||||
|
import 'babel-polyfill';
|
||||||
import express from 'express';
|
import express from 'express';
|
||||||
import renderer from './helpers/renderer';
|
import renderer from './helpers/renderer';
|
||||||
import createStore from "./helpers/createStore";
|
import createStore from "./helpers/createStore";
|
||||||
|
Loading…
Reference in New Issue
Block a user