Xilin_Wang_atx_Advanced1

-

@@ -0,0 +1,2 @@
+import React from "react";
+import "./App.css";

package.json

@@ -13,7 +13,8 @@
     "foreman": "^2.0.0",
     "json-server": "^0.9.4",
     "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "whatwg-fetch": "^2.0.3"
   },
   "scripts": {
     "start": "nf start",
@@ -24,5 +25,5 @@
     "test": "npm run lint && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy" : "http://localhost:3001"
+  "proxy": "http://localhost:3001"
 }

src/App.css → src/components/App.css

@@ -18,6 +18,28 @@
   font-size: large;
 }
 
+.App-links {
+  width: 60px;
+  height: 60px;
+  margin-top: 10px;
+}
+
+.Berlin {
+  width:100%;
+  height:600px;
+  margin-top:10px;
+}
+
+.Schloss {
+  width:100%;
+  height:600px;
+  margin-top:10px;
+}
+
+button {
+  margin-left: 8px;
+}
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

src/components/App.js

@@ -0,0 +1,33 @@
+import React from "react";
+import "./App.css";
+import Eins from "./Eins";
+import Zwei from "./Zwei";
+import Drei from "./Drei";
+import Vier from "./Vier";
+import Funf from "./Funf";
+import Oxford from "./Oxford";
+import ListOfUsers from "./ListOfUsers";
+import UserDetail from "./UserDetail";
+import users from "../users";
+
+
+function App(props) {
+  return (
+    <div className="App">
+      <Eins />
+      <Zwei />
+      <Drei />
+      <Oxford />
+      <ListOfUsers />
+      <UserDetail users={users} />
+      <Vier />
+      <Funf />
+    </div>
+  );
+}
+
+// App.propTypes = {
+//   users: React.PropTypes.node,
+// };
+
+export default App;

src/components/Drei.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./App.css";
+
+
+function Drei() {
+  return (
+    <a href="mailto:popularwatson@gmail.com">popularwatson@gmail.com</a>
+  );
+}
+
+export default Drei;

src/components/Eins.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "./App.css";
+// import logo from "./logo.svg";
+import Links from "./Links.png";
+import Header from "./Header";
+
+function Hund() {
+  return (
+    <div className="App-header">
+      <Header Schild="LINKS" />
+      <img src={Links} className="App-links" alt="Links" />
+      <h2>Wie geht es ihnen?</h2>
+    </div>
+  );
+}
+
+export default Hund;

src/components/Funf.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./App.css";
+import Schloss from "./Schloss.jpg";
+
+
+function Funf() {
+  return (
+    <img src={Schloss} className="Schloss" alt="Schloss" />
+  );
+}
+
+export default Funf;

src/components/Header.js

@@ -0,0 +1,19 @@
+import React from "react";
+import "./App.css";
+import PropTypes from "prop-types";
+
+function Header(props) {
+  return (
+    <header>{props.Schild}</header>
+  );
+}
+
+Header.propTypes = {
+  Schild: PropTypes.string.isRequired
+};
+
+// Header.propTypes = {
+//   Schild: React.PropTypes.node,
+// };
+
+export default Header;

src/components/ListOfUsers.js

@@ -0,0 +1,32 @@
+import React from "react";
+import "./App.css";
+import users from "../users";
+
+class ListOfUsers extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      Users: users,
+      visible: "",
+      searchText: ""
+    };
+  }
+  searchHandler(event) {
+    this.setState({
+      searchText: event.target.value
+    });
+  }
+  render() {
+    return (
+      <input
+        className="searchBox"
+        name="Search"
+        type="text"
+        value={this.state.searchText}
+        onChange={(event) => this.searchHandler(event)}
+      />
+    );
+  }
+}
+
+export default ListOfUsers;

src/components/Oxford.js

@@ -0,0 +1,34 @@
+import React from "react";
+import "./App.css";
+
+class Oxford extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      word: ""
+    };
+  }
+  searchHandler(event) {
+    this.setState({
+      word: event.target.value
+    });
+  }
+  render() {
+    return (
+      <div>
+        <input
+          className="searchBox"
+          name="Search"
+          type="text"
+          value={this.state.word}
+          onChange={(event) => this.searchHandler(event)}
+        />
+        <p className="App-intro">
+          Hallo
+        </p>
+      </div>
+    );
+  }
+}
+
+export default Oxford;

src/components/UserDetail.js

@@ -0,0 +1,79 @@
+import React from "react";
+import "./App.css";
+import PropTypes from "prop-types";
+
+function setUpper(word) {
+  let firstLetter = word[0];
+  firstLetter = firstLetter.toUpperCase();
+  const secondPart = word.slice(1);
+  const newWord = firstLetter + secondPart;
+  return newWord;
+}
+
+function SearchUser({letter, users}) {
+  const filteredUsers = [];
+  users.map((user, index) => {
+    if (user.last_name[0] === letter) {
+      const name = (
+        <div key={index}>
+          {setUpper(user.last_name) + ", " + setUpper(user.first_name)}
+        </div>
+      );
+      filteredUsers.push(name);
+    }
+  });
+  if (filteredUsers.length === 0) {
+    filteredUsers.push("No Entry");
+  }
+  return (
+    <div>
+      ## {letter.toUpperCase()}
+      <br />
+      {filteredUsers}
+    </div>
+  );
+}
+
+SearchUser.propTypes = {
+  letter: PropTypes.string.isRequired,
+  users: PropTypes.array.isRequired
+};
+
+class UserDetail extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: "Hide",
+      hide: false
+    };
+  }
+  handleButton() {
+    this.setState({
+      hide: !this.state.hide,
+      value: this.state.hide ? "Hide" : "Show"
+    });
+  }
+  render() {
+    const Alphabet = ["a","b","c","d","e","f","g","h","i","j","k",
+      "l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
+    const userItems = Alphabet.map((letter, index) => {
+      return (
+        <div key={index}>
+          <SearchUser letter={letter} users={this.props.users} />
+        </div>
+      );
+    });
+
+    return (
+      <div>
+        {userItems}
+      </div>
+    );
+  }
+}
+
+UserDetail.propTypes = {
+  users: PropTypes.array
+};
+
+export default UserDetail;

src/components/Vier.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./App.css";
+import Brandenburg from "./Brandenburg.jpg";
+
+
+function Vier() {
+  return (
+    <img src={Brandenburg} className="Berlin" alt="Brandenburg" />
+  );
+}
+
+export default Vier;

src/components/Zwei.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./App.css";
+
+
+function Zwei() {
+  return (
+    <p className="App-intro">
+      Es hat mir viel Spass gemacht!!!
+    </p>
+  );
+}
+
+export default Zwei;

src/index.js

@@ -1,13 +1,17 @@
 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";
 
+// var currentUser;
+//
+// function selectUser() {
+// }
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users} />,
     document.getElementById("root")
   );
 }

src/users.js

@@ -55,6 +55,3 @@ export default [
   }
 
 ];
-
-
-