From ada13e4fb78be718337d93ddc6fa30e9cb98f0d5 Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Wed, 19 Jul 2017 19:50:41 -0500 Subject: [PATCH 1/9] first commit, thru 5 on HW --- README.md | 4 +--- src/App.js | 5 +++++ src/components/ListOfUsers.js | 11 +++++++++++ src/components/UserDetail.js | 11 +++++++++++ src/index.js | 1 + 5 files changed, 29 insertions(+), 3 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..46324bb9 100644 --- a/README.md +++ b/README.md @@ -32,11 +32,9 @@ * In onChange handler function, setState the searchText to the value from the textbox ### Do -* Create a variable called currentUser in index.js. +* 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 * 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..90952ad2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React from "react"; import logo from "./logo.svg"; import "./App.css"; +import ListOfUsers from "./components/ListOfUsers.js" function App() { return ( @@ -12,6 +13,10 @@ 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..3c1246ae --- /dev/null +++ b/src/components/ListOfUsers.js @@ -0,0 +1,11 @@ +import React from "react"; + +function ListOfUsers(props) { + return ( +
+ hello ListOfUsers! +
+ ); +} + +export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js new file mode 100644 index 00000000..17a5a800 --- /dev/null +++ b/src/components/UserDetail.js @@ -0,0 +1,11 @@ +import React from "react"; + +function UserDetail(props) { + return ( +
+ hey UserDetail! +
+ ); +} + +export default UserDetail; diff --git a/src/index.js b/src/index.js index 8e6bfe35..2eb0a225 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import App from "./App"; import "./index.css"; import users from "./users"; +console.log(users); function render() { ReactDOM.render( From 69ef69c809bec25b055a31b011cef5120dfd1d2b Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Wed, 19 Jul 2017 20:36:42 -0500 Subject: [PATCH 2/9] finished first set --- src/App.css | 4 ++-- src/App.js | 25 +++++++++++++------------ src/components/ListOfUsers.js | 9 ++++----- src/components/UserDetail.js | 6 +----- src/index.js | 2 +- 5 files changed, 21 insertions(+), 25 deletions(-) diff --git a/src/App.css b/src/App.css index 15adfdc7..cd8735fb 100644 --- a/src/App.css +++ b/src/App.css @@ -3,12 +3,12 @@ } .App-logo { - animation: App-logo-spin infinite 20s linear; + animation: App-logo-spin infinite 40s linear; height: 80px; } .App-header { - background-color: #222; + background-color: #909; height: 150px; padding: 20px; color: white; diff --git a/src/App.js b/src/App.js index 90952ad2..2d1ff206 100644 --- a/src/App.js +++ b/src/App.js @@ -2,22 +2,23 @@ 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 ( -
-
- logo -

Welcome to React

-
-

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

- + //
+ //
+ // logo + //

Welcome to React

+ //
+ //

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

- + +
-
+ //
); } diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 3c1246ae..b993881c 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,11 +1,10 @@ import React from "react"; function ListOfUsers(props) { - return ( -
- hello ListOfUsers! -
- ); + const userDivs = props.users.map((user) => { + return
{user.first_name}
+ }) + return
{userDivs}
} export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 17a5a800..cf14687c 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -1,11 +1,7 @@ import React from "react"; function UserDetail(props) { - return ( -
- hey UserDetail! -
- ); + return
{props.user.first_name}
} export default UserDetail; diff --git a/src/index.js b/src/index.js index 2eb0a225..4b8d6d52 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,7 @@ console.log(users); function render() { ReactDOM.render( - , + , document.getElementById("root") ); } From 6521677554e9060a72aa198d2c751688c83c214f Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Wed, 26 Jul 2017 19:38:36 -0500 Subject: [PATCH 3/9] basic onClick --- README.md | 8 ++++---- src/App.js | 19 ++++++++++--------- src/index.js | 1 - 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 46324bb9..e48f031b 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,10 @@ * 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 +* Import the array of users into index.js - DONE +* Create a folder in src called components to hold all our components - DONE +* Create the UserDetail and ListOfUsers functional components - DONE +* Import and use components in App - DONE * Send the user array into Apps and then into ListOfUsers * Send the first user from the array down into the UserDetail component diff --git a/src/App.js b/src/App.js index 2d1ff206..73770d99 100644 --- a/src/App.js +++ b/src/App.js @@ -6,19 +6,20 @@ import UserDetail from "./components/UserDetail.js" function App(props) { return ( - //
- //
- // logo - //

Welcome to React

- //
- //

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

+
+
+ logo +

Welcome to React

+
+

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

+
- //
+
); } diff --git a/src/index.js b/src/index.js index 4b8d6d52..9b952df2 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,6 @@ import App from "./App"; import "./index.css"; import users from "./users"; -console.log(users); function render() { ReactDOM.render( From 623b0e0002f6d6f25ccfd7959ea1be0b0b0f8365 Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Wed, 2 Aug 2017 20:18:26 -0500 Subject: [PATCH 4/9] reset master --- Procfile | 0 README.md | 12 +++++++----- circle.yml | 0 db.json | 0 package.json | 0 public/favicon.ico | Bin public/index.html | 0 src/App.css | 4 ++-- src/App.js | 9 +-------- src/App.test.js | 0 src/components/ListOfUsers.js | 10 ---------- src/components/UserDetail.js | 7 ------- src/index.css | 0 src/index.js | 2 +- src/logo.svg | 0 src/users.js | 0 yarn.lock | 0 17 files changed, 11 insertions(+), 33 deletions(-) mode change 100644 => 100755 Procfile mode change 100644 => 100755 README.md mode change 100644 => 100755 circle.yml mode change 100644 => 100755 db.json mode change 100644 => 100755 package.json mode change 100644 => 100755 public/favicon.ico mode change 100644 => 100755 public/index.html mode change 100644 => 100755 src/App.css mode change 100644 => 100755 src/App.js mode change 100644 => 100755 src/App.test.js delete mode 100644 src/components/ListOfUsers.js delete mode 100644 src/components/UserDetail.js mode change 100644 => 100755 src/index.css mode change 100644 => 100755 src/index.js mode change 100644 => 100755 src/logo.svg mode change 100644 => 100755 src/users.js mode change 100644 => 100755 yarn.lock diff --git a/Procfile b/Procfile old mode 100644 new mode 100755 diff --git a/README.md b/README.md old mode 100644 new mode 100755 index e48f031b..9c7fd665 --- a/README.md +++ b/README.md @@ -2,10 +2,10 @@ * From address book directory, run yarn install, yarn start ### Do -* Import the array of users into index.js - DONE -* Create a folder in src called components to hold all our components - DONE -* Create the UserDetail and ListOfUsers functional components - DONE -* Import and use components in App - DONE +* 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 @@ -32,9 +32,11 @@ * In onChange handler function, setState the searchText to the value from the textbox ### Do -* Create a variable called currentUser in index.js. +* 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 * 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/circle.yml b/circle.yml old mode 100644 new mode 100755 diff --git a/db.json b/db.json old mode 100644 new mode 100755 diff --git a/package.json b/package.json old mode 100644 new mode 100755 diff --git a/public/favicon.ico b/public/favicon.ico old mode 100644 new mode 100755 diff --git a/public/index.html b/public/index.html old mode 100644 new mode 100755 diff --git a/src/App.css b/src/App.css old mode 100644 new mode 100755 index cd8735fb..15adfdc7 --- a/src/App.css +++ b/src/App.css @@ -3,12 +3,12 @@ } .App-logo { - animation: App-logo-spin infinite 40s linear; + animation: App-logo-spin infinite 20s linear; height: 80px; } .App-header { - background-color: #909; + background-color: #222; height: 150px; padding: 20px; color: white; diff --git a/src/App.js b/src/App.js old mode 100644 new mode 100755 index 73770d99..0042c777 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,8 @@ 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(props) { +function App() { return (
@@ -14,11 +12,6 @@ function App(props) {

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

- -
- - -
); } diff --git a/src/App.test.js b/src/App.test.js old mode 100644 new mode 100755 diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js deleted file mode 100644 index b993881c..00000000 --- a/src/components/ListOfUsers.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; - -function ListOfUsers(props) { - const userDivs = props.users.map((user) => { - return
{user.first_name}
- }) - return
{userDivs}
-} - -export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js deleted file mode 100644 index cf14687c..00000000 --- a/src/components/UserDetail.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -function UserDetail(props) { - return
{props.user.first_name}
-} - -export default UserDetail; diff --git a/src/index.css b/src/index.css old mode 100644 new mode 100755 diff --git a/src/index.js b/src/index.js old mode 100644 new mode 100755 index 9b952df2..8e6bfe35 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,7 @@ import users from "./users"; function render() { ReactDOM.render( - , + , document.getElementById("root") ); } diff --git a/src/logo.svg b/src/logo.svg old mode 100644 new mode 100755 diff --git a/src/users.js b/src/users.js old mode 100644 new mode 100755 diff --git a/yarn.lock b/yarn.lock old mode 100644 new mode 100755 From 6a81824419042b11f32e8cbc2242c99d18ff1ce6 Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Thu, 3 Aug 2017 15:39:00 -0500 Subject: [PATCH 5/9] began onClick --- src/App.js | 15 ++++++++++----- src/components/ListofUsers.js | 26 ++++++++++++++++++++++++++ src/components/UserDetail.js | 7 +++++++ src/index.js | 3 ++- 4 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 src/components/ListofUsers.js create mode 100644 src/components/UserDetail.js diff --git a/src/App.js b/src/App.js index 0042c777..e88c7f4b 100755 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,22 @@ import React from "react"; import logo from "./logo.svg"; import "./App.css"; +import ListofUsers from "./components/ListofUsers" +import UserDetail from "./components/UserDetail" -function App() { + +function App(props) { return (
logo -

Welcome to React

+

React Address Book

+
+
+

+ +
-

- 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..bc96ebba --- /dev/null +++ b/src/components/ListofUsers.js @@ -0,0 +1,26 @@ +import React from 'react'; + +function ListofUsers(props) { + const userDiv = props.users.map((user) => { + return ( +
+ {user.first_name} +
+ ); + }) + return ( +
+ {userDiv} + +
+ ); +} + +// same thing as HW 1, importing map function as a variable. + +export default ListofUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js new file mode 100644 index 00000000..76e78c76 --- /dev/null +++ b/src/components/UserDetail.js @@ -0,0 +1,7 @@ +import React from 'react'; + +function UserDetail(props) { + return
{props.user.first_name}
; +} + +export default UserDetail; diff --git a/src/index.js b/src/index.js index 8e6bfe35..4b8d6d52 100755 --- a/src/index.js +++ b/src/index.js @@ -4,10 +4,11 @@ import App from "./App"; import "./index.css"; import users from "./users"; +console.log(users); function render() { ReactDOM.render( - , + , document.getElementById("root") ); } From bc0916348d8ebf5358fc5c5a5affbe54f3ffa3b4 Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Tue, 29 Aug 2017 21:25:41 -0500 Subject: [PATCH 6/9] pre OnClick code clean and funtional --- README.md | 28 +++++++++++++--------------- src/components/ListofUsers.js | 27 +++++++++++---------------- src/components/UserDetail.js | 9 ++++++++- src/index.js | 11 +++++++++-- 4 files changed, 41 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 9c7fd665..ada14656 100755 --- a/README.md +++ b/README.md @@ -2,25 +2,25 @@ * 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 +* DONE--- Import the array of users into index.js +* DONE--- Create a folder in src called components to hold all our components +* DONE--- Create the UserDetail and ListOfUsers functional components +* DONE--- Import and use components in App +* DONE--- Send the user array into Apps and then into ListOfUsers +* DONE--- Send the first user from the array down into the UserDetail component ### Do -* Add a button to the ListOfUsers component that says Hide +* DONE--- 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” ### 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 +* DONE--- Change ListofUsers to be a class component +* DONE--- Add a constructor +* DONE--- Add a property called “state” that is an object +* DONE--- Add a property on the state object called "visible" +* DONE--- Add a method called “render” that returns the jsx the function returned ### Do * Add text box anywhere to ListOfUsers with a label “Search” @@ -32,11 +32,9 @@ * In onChange handler function, setState the searchText to the value from the textbox ### Do -* Create a variable called currentUser in index.js. +* 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 * 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/components/ListofUsers.js b/src/components/ListofUsers.js index bc96ebba..391265f5 100644 --- a/src/components/ListofUsers.js +++ b/src/components/ListofUsers.js @@ -1,23 +1,18 @@ import React from 'react'; +// I need props to have a property called users +// and it needs to be an array of user objects + function ListofUsers(props) { - const userDiv = props.users.map((user) => { - return ( -
- {user.first_name} -
- ); - }) + const users = props.users; + const userDivs = users.map(function (user, i) { + return
{user.first_name}
; + }); return ( -
- {userDiv} - -
+
+ + {userDivs} +
); } diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 76e78c76..e110f7ce 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -1,7 +1,14 @@ import React from 'react'; function UserDetail(props) { - return
{props.user.first_name}
; + return ( +
+

{props.user.first_name} {props.user.last_name}

+
{props.user.address}
+
{props.user.phone}
+
{props.user.occupation}
+
+
); } export default UserDetail; diff --git a/src/index.js b/src/index.js index 4b8d6d52..088959a6 100755 --- a/src/index.js +++ b/src/index.js @@ -4,12 +4,19 @@ import App from "./App"; import "./index.css"; import users from "./users"; -console.log(users); +var currentUser = ''; + +function selectUser(user) { + currentUser = user; + render(); +}; function render() { ReactDOM.render( - , + , document.getElementById("root") ); } render(); + +export default selectUser; From 835a9d99ef1ad1297704bc6cb633a0cc8b71ee4a Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Tue, 29 Aug 2017 22:19:17 -0500 Subject: [PATCH 7/9] Oh snap, finally got it! onClick & onChange done --- README.md | 16 +++++----- src/components/ListofUsers.js | 57 ++++++++++++++++++++++++++++------- 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index ada14656..7320cb3c 100755 --- a/README.md +++ b/README.md @@ -11,9 +11,9 @@ ### Do * DONE--- 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” +* DONE--- Add an onClick to the button and a handler +* DONE--- Make clicking the button hide the list and change the text to “Show” +* DONE--- If you click it again it will show the list and change the text back to “Hide” ### Do * DONE--- Change ListofUsers to be a class component @@ -23,13 +23,13 @@ * DONE--- Add 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 +* DONE--- Add text box anywhere to ListOfUsers with a label “Search” +* DONE--- In ListOfUsers add a state property “searchText”, default to “” +* DONE--- Assign 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 +* DONE--- Add onChange to text box +* DONE--- In onChange handler function, setState the searchText to the value from the textbox ### Do * Create a variable called currentUser in index.js. diff --git a/src/components/ListofUsers.js b/src/components/ListofUsers.js index 391265f5..edaa30ae 100644 --- a/src/components/ListofUsers.js +++ b/src/components/ListofUsers.js @@ -3,17 +3,52 @@ import React from 'react'; // I need props to have a property called users // and it needs to be an array of user objects -function ListofUsers(props) { - const users = props.users; - const userDivs = users.map(function (user, i) { - return
{user.first_name}
; - }); - return ( -
- - {userDivs} -
- ); +class ListofUsers extends React.Component { + constructor() { + super(); + this.state = { + visible: true, + searchText: "", + }; + } + render() { + const users = this.props.users; + let userDivs = ""; + if (this.state.visible) { + userDivs = users.map(function (user, i) { + return
{user.first_name}
; + }); + } + else{ + userDivs = ""; + } + + return ( +
+ { + this.setState({ + searchText: e.target.value + }); + } + } + value={this.state.searchText}> + + + {userDivs} +
+ ); + } } // same thing as HW 1, importing map function as a variable. From b1f61487a46bfc2c5638b1138474fcf10a4a9667 Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Tue, 29 Aug 2017 22:56:26 -0500 Subject: [PATCH 8/9] almost done --- README.md | 8 ++++---- src/App.js | 5 +++-- src/index.js | 8 ++++++-- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 7320cb3c..e4a64c3f 100755 --- a/README.md +++ b/README.md @@ -32,9 +32,9 @@ * DONE--- In 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 -* Change index.js to send currentUser down the child tree instead of App.js hard coding the first one +* DONE--- Create a variable called currentUser in index.js. +* DONE--- Define a function in index.js called selectUser that will take a user as a parameter and then set that user as the currentUser. +* DONE--- Send this function down the child tree so that ListOfUsers can call it +* DONE--- Change index.js to send currentUser down the child tree instead of App.js hard coding the first one (app should give currentUser to UserDetail) * 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 e88c7f4b..3c368e0e 100755 --- a/src/App.js +++ b/src/App.js @@ -14,8 +14,9 @@ function App(props) {


- - + +
); diff --git a/src/index.js b/src/index.js index 088959a6..ecc8cd46 100755 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ import App from "./App"; import "./index.css"; import users from "./users"; -var currentUser = ''; +let currentUser = ""; function selectUser(user) { currentUser = user; @@ -13,7 +13,11 @@ function selectUser(user) { function render() { ReactDOM.render( - , + , document.getElementById("root") ); } From 121cafbb0c110ed46a9beb21a59ade5702824f1e Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Wed, 30 Aug 2017 14:32:07 -0500 Subject: [PATCH 9/9] Need help with last 2 items --- src/App.js | 5 ++--- src/index.js | 3 +-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 3c368e0e..e88c7f4b 100755 --- a/src/App.js +++ b/src/App.js @@ -14,9 +14,8 @@ function App(props) {


- - + +
); diff --git a/src/index.js b/src/index.js index ecc8cd46..2d37ad56 100755 --- a/src/index.js +++ b/src/index.js @@ -13,8 +13,7 @@ function selectUser(user) { function render() { ReactDOM.render( - ,