diff --git a/.eslintrc b/.eslintrc index ee54d86f..48b88b59 100644 --- a/.eslintrc +++ b/.eslintrc @@ -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}], diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 0042c777..00000000 --- a/src/App.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import logo from "./logo.svg"; -import "./App.css"; - -function App() { - return ( -
-
- logo -

Welcome to React

-
-

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

-
- ); -} - -export default App; diff --git a/src/App.css b/src/components/App.css similarity index 100% rename from src/App.css rename to src/components/App.css diff --git a/src/components/App.js b/src/components/App.js new file mode 100644 index 00000000..17e006b8 --- /dev/null +++ b/src/components/App.js @@ -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 ( +
+
+ {/* className = App-intro */} + {/* + + + */} + + + + +
+ + ); +} + +App.propTypes = { + usersDB: propTypes.array +}; + + +export default App; diff --git a/src/App.test.js b/src/components/App.test.js similarity index 100% rename from src/App.test.js rename to src/components/App.test.js diff --git a/src/components/Body.js b/src/components/Body.js new file mode 100644 index 00000000..56296342 --- /dev/null +++ b/src/components/Body.js @@ -0,0 +1,16 @@ +import React from "react"; + + +function Body() { + return ( + +

+ /* +

className="App-intro"> + To get started, edit src/App.js and save to reload. +

+*/ + ); + } + + export default Body; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 00000000..9049703a --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,17 @@ +import React from "react"; +import logo from "./logo.svg"; + +function Header(props) { + + return ( +
+ logo +

Welcome to React {props.name}

+

Test update Edits

+
+ ); + + } + + +export default Header; diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js new file mode 100644 index 00000000..0389a7d9 --- /dev/null +++ b/src/components/ListOfUsers.js @@ -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) + this.setState({ + userWasClicked: !this.state.userWasClicked + }); + } // end of click handler + + + render() { + + return ( +
+
+ {this.props.userNames.map((userNames,x) => { + return ( +

+ {this.props.userNames[x].first_name} + {this.props.userNames[x].last_name} + {this.props.userNames[x].id}

+ );// end of return; + }) // end of map function + } // end of display usernames + +
+ ); + } +} + +ListOfUsers.propTypes = { + userNames: propTypes.array, +}; + +export default ListOfUsers; diff --git a/src/components/ListOfUsers.old b/src/components/ListOfUsers.old new file mode 100644 index 00000000..25689f8f --- /dev/null +++ b/src/components/ListOfUsers.old @@ -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 ( +
+
+ {this.props.userNames.map((userNames,x) => { + return ( +

+ {this.props.userNames[x].first_name} {this.props.userNames[x].last_name} {this.props.userNames[x].id}

+ ); + })} +
+ ); + } +} + +ListOfUsers.propTypes = { + userNames: propTypes.array, +}; + +export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js new file mode 100644 index 00000000..f356c8ac --- /dev/null +++ b/src/components/UserDetail.js @@ -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 ( +
+ +
+ ); +} +} + +UserDetail.propTypes = { + userDetail: propTypes.shape({ + first_name: propTypes.string, + last_name: propTypes.string, + }) +}; + + +export default UserDetail; diff --git a/src/components/component1.js b/src/components/component1.js new file mode 100644 index 00000000..dc406a9c --- /dev/null +++ b/src/components/component1.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component1 extends React.Component { + render(){ + return (
+

Component1

+
+ ); + } + } diff --git a/src/components/component2.js b/src/components/component2.js new file mode 100644 index 00000000..7f9ff323 --- /dev/null +++ b/src/components/component2.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component2 extends React.Component { + render(){ + return (
+

Component2

+
+ ); + } + } diff --git a/src/components/component3.js b/src/components/component3.js new file mode 100644 index 00000000..f13413ed --- /dev/null +++ b/src/components/component3.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component3 extends React.Component { + render(){ + return (
+

Component3

+
+ ); + } + } diff --git a/src/components/component4.js b/src/components/component4.js new file mode 100644 index 00000000..1cff27da --- /dev/null +++ b/src/components/component4.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component4 extends React.Component { + render(){ + return (
+

Component4

+
+ ); + } + } diff --git a/src/components/component5.js b/src/components/component5.js new file mode 100644 index 00000000..ac524ec2 --- /dev/null +++ b/src/components/component5.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component5 extends React.Component { + render(){ + return (
+

Component5

+
+ ); + } + } diff --git a/src/components/component6.js b/src/components/component6.js new file mode 100644 index 00000000..4b8af28f --- /dev/null +++ b/src/components/component6.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component6 extends React.Component { + render(){ + return (
+

Component6

+
+ ); + } + } diff --git a/src/components/footer.js b/src/components/footer.js new file mode 100644 index 00000000..dd027983 --- /dev/null +++ b/src/components/footer.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Footer extends React.Component { + render(){ + return (
+

+
+ ); + } + } diff --git a/src/logo.svg b/src/components/logo.svg similarity index 100% rename from src/logo.svg rename to src/components/logo.svg diff --git a/src/components/old_app.js b/src/components/old_app.js new file mode 100644 index 00000000..0a545327 --- /dev/null +++ b/src/components/old_app.js @@ -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 ( +//

Texas

+// ); +// } + + +function App(props) { + const userNames=props.users.map(function(users, index) { + return ( +
+ {users.first_name}{users.last_name} +
+ ); // end of return for MAP function + }); + const userItems2=props.users.map(function(users, index) { + return ( +
+ {users.address}{users.phone}{users.occupation}{users.avatar} +
+ ); // end of return for MAP function + + }); // end of APP fucntion + + return ( +
+
+ {/* className = App-intro */} + {/* + // + // + // + // + // + + + */} + + +
+ + ); +} + +export default App; diff --git a/src/index.js b/src/index.js index 8e6bfe35..6ab7c849 100644 --- a/src/index.js +++ b/src/index.js @@ -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( - , + , // send 'users' array to APP.js document.getElementById("root") ); } + + + render();