From 8356df2821fdfd929e417ec30811c7132a83d83d Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Thu, 20 Jul 2017 11:12:39 -0500 Subject: [PATCH 01/12] ACAAdv react address book phase1 --- README.md | 48 +++++++++++++++++------------------ src/App.js | 12 ++++++++- src/components/ListOfUsers.js | 44 ++++++++++++++++++++++++++++++++ src/components/UserDetail.js | 8 ++++++ src/index.js | 10 +++++++- 5 files changed, 95 insertions(+), 27 deletions(-) create mode 100644 src/components/ListOfUsers.js create mode 100644 src/components/UserDetail.js diff --git a/README.md b/README.md index 9c7fd665..c4c9222c 100644 --- a/README.md +++ b/README.md @@ -2,41 +2,39 @@ * From address book directory, run yarn install, yarn start ### Do -* Import the array of users into index.js -* Create a folder in src called components to hold all our components -* Create the UserDetail and ListOfUsers functional components -* Import and use components in App -* Send the user array into Apps and then into ListOfUsers -* Send the first user from the array down into the UserDetail component +* xImport the array of users into index.js +* xCreate a folder in src called components to hold all our components +* xCreate the UserDetail and ListOfUsers functional components +* xImport and use components in App +* xSend the user array into Apps and then into ListOfUsers +* xSend the first user from the array down into the UserDetail component ### Do -* Add a button to the ListOfUsers component that says Hide -* Add an onClick to the button and a handler -* Make clicking the button hide the list and change the text to “Show” -* If you click it again it will show the list and change the text back to “Hide” +* xAdd a button to the ListOfUsers component that says Hide +* xAdd an onClick to the button and a handler +* xMake clicking the button hide the list and change the text to “Show” +* xIf you click it again it will show the list and change the text back to “Hide” ### Do -* Change ListOfUsers to be a class component -* Add a constructor -* Add a property called “state” that is an object -* Add a property on the state object called "visible" -* Add a method called “render” that returns the jsx the function returned +* xChange ListOfUsers to be a class component +* xAdd a constructor +* xAdd a property called “state” that is an object +* xAdd a property on the state object called "visible" +* xAdd a method called “render” that returns the jsx the function returned ### Do -* Add text box anywhere to ListOfUsers with a label “Search” -* In ListOfUsers add a state property “searchText”, default to “” -* Assign searchText to the value attribute of the text box +* xAdd text box anywhere to ListOfUsers with a label “Search” +* xIn ListOfUsers add a state property “searchText”, default to “” +* xAssign searchText to the value attribute of the text box ### Do -* Add onChange to text box -* In onChange handler function, setState the searchText to the value from the textbox +* xAdd onChange to text box +* xIn onChange handler function, setState the searchText to the value from the textbox ### Do -* Create a variable called currentUser in index.js. -* Define a function in index.js called selectUser that will take a user as a parameter and then set that user as the currentUser. -* Send this function down the child tree so that ListOfUsers can call it +* xCreate a variable called currentUser in index.js. +* xDefine a function in index.js called selectUser that will take a user as a parameter and then set that user as the currentUser. +* xSend this function down the child tree so that ListOfUsers can call it * Change index.js to send currentUser down the child tree instead of App.js hard coding the first one * Register click event for ListOfUsers view link, call the function sent into props by parents, supply the argument of whatever user was clicked on. * Re render the components - - diff --git a/src/App.js b/src/App.js index 0042c777..c4e33e46 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,10 @@ import React from "react"; import logo from "./logo.svg"; import "./App.css"; +import ListOfUsers from "./components/ListOfUsers.js"; +import UserDetail from "./components/UserDetail.js"; -function App() { +function App(props) { return (
@@ -12,6 +14,14 @@ function App() {

To get started, edit src/App.js and save to reload.

+ + +
+ + +
+ +
); } diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js new file mode 100644 index 00000000..8852dd84 --- /dev/null +++ b/src/components/ListOfUsers.js @@ -0,0 +1,44 @@ +import React from 'react'; + +class ListOfUsers extends React.Component { + constructor(props) { + super(props); + this.state = { + toggleOn: true, + searchText: '' + }; + + this.handleClick = this.handleClick.bind(this); + } + + handleClick() { + this.setState(prevState => ({ + toggleOn: !prevState.toggleOn + })); + } + + changeInput(event) { + // event.preventDefault(); + this.setState({ + searchText: event.target.value + }) + } + + render() { + const userDivs = this.props.users.map((user) => { + if (this.state.toggleOn) return
{user.first_name}
; + else return
+ }) + + return ( +
+ + {userDivs} + +
+ ) + } + +} + +export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js new file mode 100644 index 00000000..745195d6 --- /dev/null +++ b/src/components/UserDetail.js @@ -0,0 +1,8 @@ +import React from 'react'; + +// {props.user.first_name} +function UserDetail(props) { + return
+} + +export default UserDetail; diff --git a/src/index.js b/src/index.js index 8e6bfe35..32a0394e 100644 --- a/src/index.js +++ b/src/index.js @@ -4,11 +4,19 @@ import App from "./App"; import "./index.css"; import users from "./users"; +var currentUser = ''; + +function selectUser(user) { + currentUser = user; +} + function render() { ReactDOM.render( - , + , document.getElementById("root") ); } render(); + +export default selectUser; From 4b83eaec58aa019e30ced1ab23cad2bb3ce3952f Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Thu, 20 Jul 2017 16:50:25 -0500 Subject: [PATCH 02/12] Almost done. Need to do last DO item before re rendering --- README.md | 2 +- src/App.js | 4 ++-- src/components/ListOfUsers.js | 9 +++++---- src/components/UserDetail.js | 2 +- src/index.js | 10 +++++----- 5 files changed, 14 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index c4c9222c..4b34367c 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,6 @@ * xCreate a variable called currentUser in index.js. * xDefine a function in index.js called selectUser that will take a user as a parameter and then set that user as the currentUser. * xSend this function down the child tree so that ListOfUsers can call it -* Change index.js to send currentUser down the child tree instead of App.js hard coding the first one +* xChange index.js to send currentUser down the child tree instead of App.js hard coding the first one * Register click event for ListOfUsers view link, call the function sent into props by parents, supply the argument of whatever user was clicked on. * Re render the components diff --git a/src/App.js b/src/App.js index c4e33e46..42031584 100644 --- a/src/App.js +++ b/src/App.js @@ -17,8 +17,8 @@ function App(props) {
- - + +
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 8852dd84..2737465e 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,4 +1,5 @@ import React from 'react'; +// import SelectUser from './index.js'; class ListOfUsers extends React.Component { constructor(props) { @@ -18,22 +19,22 @@ class ListOfUsers extends React.Component { } changeInput(event) { - // event.preventDefault(); + event.preventDefault(); this.setState({ searchText: event.target.value }) - } + }; render() { const userDivs = this.props.users.map((user) => { - if (this.state.toggleOn) return
{user.first_name}
; + if (this.state.toggleOn) return
  • {user.first_name}
    • ; else return
    }) return (
    - {userDivs} +
      {userDivs}
    ) diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 745195d6..f2b82711 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -2,7 +2,7 @@ import React from 'react'; // {props.user.first_name} function UserDetail(props) { - return
    + return
    {props.user}
    } export default UserDetail; diff --git a/src/index.js b/src/index.js index 32a0394e..dfd29a87 100644 --- a/src/index.js +++ b/src/index.js @@ -6,17 +6,17 @@ import users from "./users"; var currentUser = ''; -function selectUser(user) { +function SelectUser(user) { currentUser = user; -} +}; function render() { ReactDOM.render( - , + , document.getElementById("root") ); } render(); - -export default selectUser; From b6cd151415c0e77ff454517164e573534b1551fa Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Sun, 23 Jul 2017 18:56:12 -0500 Subject: [PATCH 03/12] Trying to fix userSelected --- src/App.js | 1 + src/components/ListOfUsers.js | 20 +++++++++++++------- src/components/UserDetail.js | 3 ++- src/index.js | 6 +++++- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 42031584..a6891fa7 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import "./App.css"; import ListOfUsers from "./components/ListOfUsers.js"; import UserDetail from "./components/UserDetail.js"; + function App(props) { return (
    diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 2737465e..1b735e27 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,5 +1,5 @@ import React from 'react'; -// import SelectUser from './index.js'; +import SelectUser from '../index.js'; class ListOfUsers extends React.Component { constructor(props) { @@ -9,15 +9,21 @@ class ListOfUsers extends React.Component { searchText: '' }; - this.handleClick = this.handleClick.bind(this); + // this.buttonClick = this.buttonClick.bind(this); + // this.props.SelectUser = this.props.SelectUser.bind(this); } - handleClick() { + buttonClick = () => { this.setState(prevState => ({ toggleOn: !prevState.toggleOn })); } + userSelected = (chosenOne) => { + console.log(chosenOne); + SelectUser(chosenOne) + } + changeInput(event) { event.preventDefault(); this.setState({ @@ -27,15 +33,15 @@ class ListOfUsers extends React.Component { render() { const userDivs = this.props.users.map((user) => { - if (this.state.toggleOn) return
  • {user.first_name}
    • ; + if (this.state.toggleOn) return
    {user.first_name}
    ; else return
    }) return (
    - -
      {userDivs}
    - + +
    {userDivs}
    +
    ) } diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index f2b82711..0bb7b2eb 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -1,6 +1,7 @@ import React from 'react'; -// {props.user.first_name} +// console.log({props.user.first_name}); + function UserDetail(props) { return
    {props.user}
    } diff --git a/src/index.js b/src/index.js index dfd29a87..fb25a980 100644 --- a/src/index.js +++ b/src/index.js @@ -7,16 +7,20 @@ import users from "./users"; var currentUser = ''; function SelectUser(user) { + console.log(user); currentUser = user; }; +console.log(currentUser); function render() { ReactDOM.render( , + user={currentUser} />, document.getElementById("root") ); } render(); + +export default SelectUser; From d95e40dd26fffd09533c0e1a9a5a32af7cb9a8bf Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Sun, 23 Jul 2017 19:13:26 -0500 Subject: [PATCH 04/12] Added key to each user --- src/components/ListOfUsers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 1b735e27..0bbed273 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -33,7 +33,7 @@ class ListOfUsers extends React.Component { render() { const userDivs = this.props.users.map((user) => { - if (this.state.toggleOn) return
    {user.first_name}
    ; + if (this.state.toggleOn) return
    {user.first_name}
    ; else return
    }) From 976d784d3813ac21c99f1da91a5a7e352cc56e61 Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Sun, 23 Jul 2017 19:21:54 -0500 Subject: [PATCH 05/12] Changed onClick to idv user during mapping. Causes error elsewhere. --- src/components/ListOfUsers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 0bbed273..939461fa 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -33,14 +33,14 @@ class ListOfUsers extends React.Component { render() { const userDivs = this.props.users.map((user) => { - if (this.state.toggleOn) return
    {user.first_name}
    ; + if (this.state.toggleOn) return
    {user.first_name}
    ; else return
    }) return (
    -
    {userDivs}
    +
    {userDivs}
    ) From 707ecc3e058d927889a15c27004013e2385da0a9 Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Sun, 23 Jul 2017 19:39:39 -0500 Subject: [PATCH 06/12] Changed variable name toggleOn to visible --- src/components/ListOfUsers.js | 10 +++++----- src/index.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 939461fa..b1332e15 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -5,7 +5,7 @@ class ListOfUsers extends React.Component { constructor(props) { super(props); this.state = { - toggleOn: true, + visible: true, searchText: '' }; @@ -15,13 +15,13 @@ class ListOfUsers extends React.Component { buttonClick = () => { this.setState(prevState => ({ - toggleOn: !prevState.toggleOn + visible: !prevState.visible })); } userSelected = (chosenOne) => { console.log(chosenOne); - SelectUser(chosenOne) + // SelectUser(chosenOne) } changeInput(event) { @@ -33,7 +33,7 @@ class ListOfUsers extends React.Component { render() { const userDivs = this.props.users.map((user) => { - if (this.state.toggleOn) return
    {user.first_name}
    ; + if (this.state.visible) return
    {user.first_name}
    ; else return
    }) @@ -41,7 +41,7 @@ class ListOfUsers extends React.Component {
    {userDivs}
    - +
    ) } diff --git a/src/index.js b/src/index.js index fb25a980..82055cf5 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,7 @@ import users from "./users"; var currentUser = ''; function SelectUser(user) { - console.log(user); + // console.log(user); currentUser = user; }; From 1c831cf992ecf140f379e33128288cbf4e98cd11 Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Wed, 26 Jul 2017 20:01:15 -0500 Subject: [PATCH 07/12] Finished. Thanks Jon --- src/App.js | 4 ++-- src/components/ListOfUsers.js | 9 ++++++++- src/components/UserDetail.js | 10 +++++++--- src/index.js | 11 +++++------ 4 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index a6891fa7..b73bbc7d 100644 --- a/src/App.js +++ b/src/App.js @@ -18,8 +18,8 @@ function App(props) {
    - - + +
    diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index b1332e15..a2ad5f12 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -33,7 +33,14 @@ class ListOfUsers extends React.Component { render() { const userDivs = this.props.users.map((user) => { - if (this.state.visible) return
    {user.first_name}
    ; + if (this.state.visible) { + // return
    {user.first_name}
    ; + + return + } else return
    }) diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 0bb7b2eb..669f959e 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -1,9 +1,13 @@ import React from 'react'; -// console.log({props.user.first_name}); - function UserDetail(props) { - return
    {props.user}
    + return
    +

    {props.selectedUser.first_name} {props.selectedUser.last_name}

    +
    {props.selectedUser.address}
    +
    {props.selectedUser.phone}
    +
    {props.selectedUser.occupation}
    +
    +
    } export default UserDetail; diff --git a/src/index.js b/src/index.js index 82055cf5..797efb52 100644 --- a/src/index.js +++ b/src/index.js @@ -6,21 +6,20 @@ import users from "./users"; var currentUser = ''; -function SelectUser(user) { - // console.log(user); +function selectUser(user) { currentUser = user; + render(); }; -console.log(currentUser); - function render() { ReactDOM.render( , + selectUser={selectUser} + selectedUser={currentUser} />, document.getElementById("root") ); } render(); -export default SelectUser; +export default selectUser; From 9dd90551f3c6797176268a6cbfb14d0520d9b599 Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Wed, 2 Aug 2017 12:04:24 -0500 Subject: [PATCH 08/12] Complete --- src/components/ListOfUsers.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index a2ad5f12..0196071c 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -46,7 +46,7 @@ class ListOfUsers extends React.Component { return (
    - +
    {userDivs}
    @@ -55,4 +55,13 @@ class ListOfUsers extends React.Component { } +// var filterUsers = this.props.users.filter((u) => { +// if(this.state.searchText == "") { +// return true; +// } +// if(u.last_name.indexOf(this.state.searchText) > -1 { +// return true; +// } else return false; +// }) + export default ListOfUsers; From 784f5a4b50011290a66e675a6c9f0b389956a839 Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Wed, 2 Aug 2017 18:19:58 -0500 Subject: [PATCH 09/12] Completed the search. Was confused on what search was supposed to do --- src/components/ListOfUsers.js | 27 ++++++++++++++++----------- src/components/UserDetail.js | 2 +- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 0196071c..8d20ac8d 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,12 +1,11 @@ import React from 'react'; -import SelectUser from '../index.js'; class ListOfUsers extends React.Component { constructor(props) { super(props); this.state = { visible: true, - searchText: '' + searchText: "" }; // this.buttonClick = this.buttonClick.bind(this); @@ -19,12 +18,7 @@ class ListOfUsers extends React.Component { })); } - userSelected = (chosenOne) => { - console.log(chosenOne); - // SelectUser(chosenOne) - } - - changeInput(event) { + changeInput = (event) => { event.preventDefault(); this.setState({ searchText: event.target.value @@ -32,9 +26,19 @@ class ListOfUsers extends React.Component { }; render() { - const userDivs = this.props.users.map((user) => { + + // filterUsers filters the + var filterUsers = this.props.users.filter((u) => { + if(this.state.searchText === "") { + return true; + }; + if(u.first_name.indexOf(this.state.searchText) > -1) { + return true; + } else return false; + }); + + const userDivs = filterUsers.map((user) => { if (this.state.visible) { - // return
    {user.first_name}
    ; return
    {user.first_name} @@ -42,13 +46,14 @@ class ListOfUsers extends React.Component {
    } else return
    - }) + }); return (
    {userDivs}
    +
    ) } diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 669f959e..3b764537 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -6,7 +6,7 @@ function UserDetail(props) {
    {props.selectedUser.address}
    {props.selectedUser.phone}
    {props.selectedUser.occupation}
    -
    +
    } From b472758eb84e2b0d26eeba0fef33a2a97f8b3309 Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Tue, 8 Aug 2017 17:11:50 -0500 Subject: [PATCH 10/12] WIP- Converting over to redux --- src/components/ListOfUsers.js | 30 +++++++++++++++++------------- src/components/UserDetail.js | 13 ++++++++++++- src/index.js | 11 +++++------ src/reducers/index.js | 20 ++++++++++++++++++++ src/state.js | 8 ++++++++ src/store.js | 8 ++++++++ 6 files changed, 70 insertions(+), 20 deletions(-) create mode 100644 src/reducers/index.js create mode 100644 src/state.js create mode 100644 src/store.js diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 8d20ac8d..6160c9f9 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,4 +1,6 @@ import React from 'react'; +import { connect } from 'react-redux'; + class ListOfUsers extends React.Component { constructor(props) { @@ -27,7 +29,7 @@ class ListOfUsers extends React.Component { render() { - // filterUsers filters the + // filterUsers filters the var filterUsers = this.props.users.filter((u) => { if(this.state.searchText === "") { return true; @@ -42,8 +44,8 @@ class ListOfUsers extends React.Component { return + {this.props.selectedUser(user)} }> View +
    } else return
    }); @@ -57,16 +59,18 @@ class ListOfUsers extends React.Component { ) } - } -// var filterUsers = this.props.users.filter((u) => { -// if(this.state.searchText == "") { -// return true; -// } -// if(u.last_name.indexOf(this.state.searchText) > -1 { -// return true; -// } else return false; -// }) + function mapStateToProps(state) { + return { + users: state.users + } + } + + var otherFunction = connect(mapStateToProps); + const ListOfUsersContainer = otherFunction(ListOfUsers); + export default ListOfUsersContainer + + -export default ListOfUsers; +// export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 3b764537..287a2dd6 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -1,4 +1,6 @@ import React from 'react'; +import { connect } from 'react-redux'; + function UserDetail(props) { return
    @@ -10,4 +12,13 @@ function UserDetail(props) {
    } -export default UserDetail; +function mapStateToProps(state) { + return { + selectedUser: state.selectedUser + } +} + +var otherFunction = connect(mapStateToProps); +const UserDetailContainer = otherFunction(UserDetail); +export default UserDetailContainer +// export default UserDetail; diff --git a/src/index.js b/src/index.js index 797efb52..8fdc84a7 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,9 @@ import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import "./index.css"; -import users from "./users"; +import store from "./store"; +import {Provider} from 'react-redux'; + var currentUser = ''; @@ -13,11 +15,8 @@ function selectUser(user) { function render() { ReactDOM.render( - , - document.getElementById("root") + , + document.getElementById('root') ); } render(); diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 00000000..593b0672 --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,20 @@ +import {combineReducers} from 'redux'; + + +function users(state=[], action) { + return state; +} + +function searchText(state="", action) { + return state; +} + +function selectedUser(state={}, action) { + return state; +} + + +const rootReducer = combineReducers({ + users,searchText,selectedUser +}); +export default rootReducer; diff --git a/src/state.js b/src/state.js new file mode 100644 index 00000000..1013fba7 --- /dev/null +++ b/src/state.js @@ -0,0 +1,8 @@ +import users from './users'; + + +export default { + users: users, + selectedUser: users[0], + searchText: "", +} diff --git a/src/store.js b/src/store.js new file mode 100644 index 00000000..e01dedaa --- /dev/null +++ b/src/store.js @@ -0,0 +1,8 @@ +import {createStore} from 'redux'; +import state from "./state"; +import reducers from './reducers'; + + +var store = createStore(reducers,state); + +export default store; From df78a07bbe73f7a6289914110b9eb455939bebe1 Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Wed, 9 Aug 2017 00:16:50 -0500 Subject: [PATCH 11/12] WIP- UserDetail now working with redux --- src/actions/index.js | 6 ++++++ src/components/ListOfUsers.js | 16 ++++++++++------ src/components/UserDetail.js | 5 ++--- src/index.js | 14 +++++++------- src/reducers/index.js | 7 +++++-- src/state.js | 2 +- 6 files changed, 31 insertions(+), 19 deletions(-) create mode 100644 src/actions/index.js diff --git a/src/actions/index.js b/src/actions/index.js new file mode 100644 index 00000000..3a7dd3c7 --- /dev/null +++ b/src/actions/index.js @@ -0,0 +1,6 @@ +export function setCurrentUser(user){ + return { + type:"SET_CURRENT_USER", + value: user + } +} diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 6160c9f9..b3013b64 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,6 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; - +import {setCurrentUser} from '../actions'; class ListOfUsers extends React.Component { constructor(props) { @@ -9,7 +9,6 @@ class ListOfUsers extends React.Component { visible: true, searchText: "" }; - // this.buttonClick = this.buttonClick.bind(this); // this.props.SelectUser = this.props.SelectUser.bind(this); } @@ -44,7 +43,7 @@ class ListOfUsers extends React.Component { return
    {user.first_name} - {this.props.selectedUser(user)} }> View + {e.preventDefault(); this.props.setCurrentUser(user)} }> View
    } else return
    @@ -67,10 +66,15 @@ class ListOfUsers extends React.Component { } } - var otherFunction = connect(mapStateToProps); - const ListOfUsersContainer = otherFunction(ListOfUsers); - export default ListOfUsersContainer + function mapDispatchToProps(dispatch){ + return { + setCurrentUser:function(user){ + dispatch(setCurrentUser(user)); + } + } + } + export default connect(mapStateToProps, mapDispatchToProps)(ListOfUsers);; // export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 287a2dd6..e541a098 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -14,11 +14,10 @@ function UserDetail(props) { function mapStateToProps(state) { return { - selectedUser: state.selectedUser + selectedUser: state.currentUser } } -var otherFunction = connect(mapStateToProps); -const UserDetailContainer = otherFunction(UserDetail); +const UserDetailContainer = connect(mapStateToProps)(UserDetail); export default UserDetailContainer // export default UserDetail; diff --git a/src/index.js b/src/index.js index 8fdc84a7..c2e1e6b9 100644 --- a/src/index.js +++ b/src/index.js @@ -6,12 +6,12 @@ import store from "./store"; import {Provider} from 'react-redux'; -var currentUser = ''; - -function selectUser(user) { - currentUser = user; - render(); -}; +// var selectedUser = ''; +// +// function selectUser(user) { +// selectedUser = user; +// render(); +// }; function render() { ReactDOM.render( @@ -21,4 +21,4 @@ function render() { } render(); -export default selectUser; +// export default selectUser; diff --git a/src/reducers/index.js b/src/reducers/index.js index 593b0672..11e9a656 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -9,12 +9,15 @@ function searchText(state="", action) { return state; } -function selectedUser(state={}, action) { +function currentUser(state={}, action) { + if (action.type === "SET_CURRENT_USER") { + return action.value; + } return state; } const rootReducer = combineReducers({ - users,searchText,selectedUser + users,searchText,currentUser }); export default rootReducer; diff --git a/src/state.js b/src/state.js index 1013fba7..2bffd34e 100644 --- a/src/state.js +++ b/src/state.js @@ -3,6 +3,6 @@ import users from './users'; export default { users: users, - selectedUser: users[0], + currentUser: users[0], searchText: "", } From 385782c4f31e1659a1d7957d5aa73f809f569112 Mon Sep 17 00:00:00 2001 From: Greg Devany Date: Wed, 9 Aug 2017 14:28:22 -0500 Subject: [PATCH 12/12] Complete. Transferred searchBox to component and reduxed it. --- src/App.js | 15 ++++++--------- src/actions/index.js | 7 +++++++ src/components/ListOfUsers.js | 19 ++++++------------- src/components/SearchBox.js | 24 ++++++++++++++++++++++++ src/reducers/index.js | 11 +++++++---- 5 files changed, 50 insertions(+), 26 deletions(-) create mode 100644 src/components/SearchBox.js diff --git a/src/App.js b/src/App.js index b73bbc7d..cafc1a2f 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import logo from "./logo.svg"; import "./App.css"; import ListOfUsers from "./components/ListOfUsers.js"; import UserDetail from "./components/UserDetail.js"; +import SearchBox from "./components/SearchBox.js"; function App(props) { @@ -12,16 +13,12 @@ function App(props) { logo

    Welcome to React

    -

    - To get started, edit src/App.js and save to reload. -

    - - -
    - - -
    +
    + + + +
    ); diff --git a/src/actions/index.js b/src/actions/index.js index 3a7dd3c7..41693f0a 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -4,3 +4,10 @@ export function setCurrentUser(user){ value: user } } + +export function setSearchText(text) { + return { + type: "SET_TEXT", + value: text + } +} diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index b3013b64..650ff0cb 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -6,8 +6,7 @@ class ListOfUsers extends React.Component { constructor(props) { super(props); this.state = { - visible: true, - searchText: "" + visible: true }; // this.buttonClick = this.buttonClick.bind(this); // this.props.SelectUser = this.props.SelectUser.bind(this); @@ -19,21 +18,15 @@ class ListOfUsers extends React.Component { })); } - changeInput = (event) => { - event.preventDefault(); - this.setState({ - searchText: event.target.value - }) - }; - render() { // filterUsers filters the + console.log(this.props.searchText); var filterUsers = this.props.users.filter((u) => { - if(this.state.searchText === "") { + if(this.props.searchText === "") { return true; }; - if(u.first_name.indexOf(this.state.searchText) > -1) { + if(u.first_name.indexOf(this.props.searchText) > -1) { return true; } else return false; }); @@ -51,7 +44,6 @@ class ListOfUsers extends React.Component { return (
    -
    {userDivs}
    @@ -62,7 +54,8 @@ class ListOfUsers extends React.Component { function mapStateToProps(state) { return { - users: state.users + users: state.users, + searchText: state.searchText } } diff --git a/src/components/SearchBox.js b/src/components/SearchBox.js new file mode 100644 index 00000000..8ee77ed0 --- /dev/null +++ b/src/components/SearchBox.js @@ -0,0 +1,24 @@ +import React from 'react'; +import {setSearchText} from '../actions'; +import { connect } from 'react-redux'; + + + +function SearchBox(props) { + return ( + { + e.preventDefault(); + props.setSearchText(e.target.value); + } } /> + ) +} + +function mapDispatchToProps(dispatch){ + return { + setSearchText:function(text){ + dispatch(setSearchText(text)); + } + } +} +export default connect(null, mapDispatchToProps)(SearchBox);; diff --git a/src/reducers/index.js b/src/reducers/index.js index 11e9a656..596e7f7f 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -5,10 +5,6 @@ function users(state=[], action) { return state; } -function searchText(state="", action) { - return state; -} - function currentUser(state={}, action) { if (action.type === "SET_CURRENT_USER") { return action.value; @@ -16,6 +12,13 @@ function currentUser(state={}, action) { return state; } +function searchText(state="", action) { + if (action.type === "SET_TEXT") { + return action.value + } + return state; +} + const rootReducer = combineReducers({ users,searchText,currentUser