Skip to content

nick.rodriguez.atx.advanced.1 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nickinwaco wants to merge 8 commits into
base: master
Choose a base branch
from
Open

nick.rodriguez.atx.advanced.1 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3825a18
first update
Apr 18, 2017
dda54b5
initial pushes
Apr 23, 2017
e5aafbf
updates
Apr 24, 2017
8ce2b19
updates2
Apr 24, 2017
2444b0a
updates
Apr 24, 2017
a65b9df
avatar changes
Apr 24, 2017
c2bd1d8
layout changes with linebreak
Apr 24, 2017
495b2d2
04302017 - daily update to List of Users
May 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
"init-declarations": 0,
"key-spacing": [2, {"beforeColon": false, "afterColon": true}],
"keyword-spacing": 2,
"linebreak-style": 2,
"linebreak-style": ["error", "windows"],
"lines-around-comment": 0,
"max-depth": 0,
"max-len": [2, 100, 4, {"ignoreUrls": true}],
Expand Down
19 changes: 0 additions & 19 deletions src/App.js
View file
Open in desktop

This file was deleted.

0 src/App.css → src/components/App.css
View file
Open in desktop
File renamed without changes.
37 changes: 37 additions & 0 deletions src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from "react";
// import logo from "./logo.svg"; moved to Header.js
import "./App.css";
import Body from "./Body.js";
import Footer from "./footer.js";
import Header from "./Header.js";
import ListOfUsers from "./ListOfUsers.js";
import UserDetail from "./UserDetail.js";
import propTypes from "prop-types";


function App(props) {

return (
<div className="App">
<Header name="Nick" />
<Body />{/* className = App-intro */}
{/*
<ComponentX/>
<UserDetail userDetail={props.usersDB} />
*/}

<ListOfUsers userNames={props.usersDB} />


<Footer /> {/* Footer location*/}
</div>

);
}

App.propTypes = {
usersDB: propTypes.array
};


export default App;
0 src/App.test.js → src/components/App.test.js
View file
Open in desktop
File renamed without changes.
16 changes: 16 additions & 0 deletions src/components/Body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";


function Body() {
return (

<h1> </h1>
Copy link

@ivome ivome May 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check the indentation...

/*
<p> className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
*/
);
}

export default Body;
17 changes: 17 additions & 0 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react";
import logo from "./logo.svg";

function Header(props) {

return (
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React {props.name} </h2>
<p>Test update Edits</p>
</div>
);

}


export default Header;
Copy link

@ivome ivome May 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing propTypes

49 changes: 49 additions & 0 deletions src/components/ListOfUsers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React, {Component} from "react"; // default component is without brackets
import propTypes from "prop-types";
import UserDetail from "./UserDetail";

class ListOfUsers extends Component {
constructor(...args) { // or constructor(props)
super(...args); // or super(props)
this.state = {
userWasClicked: false,



};
} // end of constructor

handleUserClick(event) {
console.log("Handle click", event);
console.log("the id is: ",event.id)
Copy link

@ivome ivome May 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation...

this.setState({
userWasClicked: !this.state.userWasClicked
});
} // end of click handler


render() {

return (
<div >
<hr />
{this.props.userNames.map((userNames,x) => {
return (
<p key={userNames.id} onClick={this.handleUserClick.bind(this, this.props.userNames[x])}>
{this.props.userNames[x].first_name}
{this.props.userNames[x].last_name}
{this.props.userNames[x].id}</p>
Copy link

@ivome ivome May 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Closing p tag should be on the same indentation level as opening tag.

);// end of return;
}) // end of map function
} // end of display usernames
<UserDetail num={this.props.userNames} />
Copy link

@ivome ivome May 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation...

</div>
);
}
}

ListOfUsers.propTypes = {
userNames: propTypes.array,
};

export default ListOfUsers;
40 changes: 40 additions & 0 deletions src/components/ListOfUsers.old
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React, {Component} from "react"; // default component is without brackets
import propTypes from "prop-types";

class ListOfUsers extends Component {
constructor(...args) { // or constructor(props)
super(...args); // or super(props)
this.state = {
userWasClicked: false
};
} // end of constructor

handleUserClick(event) {
console.log("Hanlde click", event);
console.log(this);
console.log(this.nameOfUser);
this.setState({
userWasClicked: !this.state.userWasClicked
});
} // end of click handler

render() {
return (
<div >
<hr />
{this.props.userNames.map((userNames,x) => {
return (
<p key={userNames.id} onClick={this.handleUserClick.bind(this)} nameOfUser={this.props.userNames[x].first_name} >
{this.props.userNames[x].first_name} {this.props.userNames[x].last_name} {this.props.userNames[x].id}</p>
);
})}
</div>
);
}
}

ListOfUsers.propTypes = {
userNames: propTypes.array,
};

export default ListOfUsers;
31 changes: 31 additions & 0 deletions src/components/UserDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, {Component} from "react";
import propTypes from "prop-types";


class UserDetail extends Component {
constructor (...args) {
super(...args);
this.state = {
userWasClicked: false
};
}

render(){
// console.log(this.props)
return (
<div>

</div>
);
}
}

UserDetail.propTypes = {
userDetail: propTypes.shape({
first_name: propTypes.string,
last_name: propTypes.string,
})
};


export default UserDetail;
11 changes: 11 additions & 0 deletions src/components/component1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";


export default class Component1 extends React.Component {
render(){
return (<div>
<h2>Component1</h2>
</div>
);
}
}
11 changes: 11 additions & 0 deletions src/components/component2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";


export default class Component2 extends React.Component {
render(){
return (<div>
<h2>Component2</h2>
</div>
);
}
}
11 changes: 11 additions & 0 deletions src/components/component3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";


export default class Component3 extends React.Component {
render(){
return (<div>
<h2>Component3</h2>
</div>
);
}
}
11 changes: 11 additions & 0 deletions src/components/component4.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";


export default class Component4 extends React.Component {
render(){
return (<div>
<h2>Component4</h2>
</div>
);
}
}
11 changes: 11 additions & 0 deletions src/components/component5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";


export default class Component5 extends React.Component {
render(){
return (<div>
<h2>Component5</h2>
</div>
);
}
}
11 changes: 11 additions & 0 deletions src/components/component6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";


export default class Component6 extends React.Component {
render(){
return (<div>
<h3>Component6</h3>
</div>
);
}
}
11 changes: 11 additions & 0 deletions src/components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";


export default class Footer extends React.Component {
render(){
return (<div>
<h1></h1>
</div>
);
}
}
0 src/logo.svg → src/components/logo.svg
View file
Open in desktop
File renamed without changes
62 changes: 62 additions & 0 deletions src/components/old_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from "react";
// import logo from "./logo.svg"; moved to Header.js
import "./App.css";
import Body from './Body.js';
import Footer from './footer.js';
import Header from './Header.js';
// import Component1 from './component1.js';
// import Component2 from './component2.js';
// import Component3 from './component3.js';
// import Component4 from './component4.js';
// import Component5 from './component5.js';
// import Component6 from './component6.js';
import ListOfUsers from './ListOfUsers.js';
import UserDetail from './UserDetail.js';


// function ComponentX() {
// return (
// <h3> Texas </h3>
// );
// }


function App(props) {
const userNames=props.users.map(function(users, index) {
return (
<div>
{users.first_name}{users.last_name}
</div>
); // end of return for MAP function
});
const userItems2=props.users.map(function(users, index) {
return (
<div key = {index}>
{users.address}{users.phone}{users.occupation}{users.avatar}
</div>
); // end of return for MAP function

}); // end of APP fucntion

return (
<div className="App">
<Header name="Nick" />
<Body />{/* className = App-intro */}
{/* <Component1/>
// <Component2/>
// <Component3/>
// <Component4/>
// <Component5/>
// <Component6/>
<ComponentX/>
<UserDetail />
*/}
<ListOfUsers userNames={userNames} />
<UserDetail userItems2={userItems2} />
<Footer /> {/* Footer location*/}
</div>

);
}

export default App;
8 changes: 6 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import App from "./components/App";
import "./index.css";
import users from "./users";



function render() {
ReactDOM.render(
<App />,
<App usersDB={users} />, // send 'users' array to APP.js
document.getElementById("root")
);
}



render();