youli homework

package.json

@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.18.0",
+    "create-react-class": "^15.6.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

src/api/base.js

@@ -4,5 +4,9 @@ module.exports = {
   async reloadTodoDatas() {
     let { data: response } = await axios.get('https://jsonplaceholder.typicode.com/todos');
     return response;
+  },
+  async reloadOmDbApi() {
+    let { data: response} = await axios.get('http://www.omdbapi.com/?s=Batman&apikey=34472924');
+    return response;
   }
 };

src/app.js

@@ -1,38 +1,72 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Header from './components/Header';
+import Todo from './components/Todo';
+import List from './components/List';
 import api from './api/base';
-
-
+import {TabsControl} from './components/TabsControl';
+import {Tab}from './components/TabsControl';
+import { exists } from "fs";
+import "./css/TabsControl.css";
 
 class HelloMessage extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      todos: []
-    };
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			todos: [],
+			omdblist: []
+		};
+
+	}
+
+
+	async componentDidMount() {
+		const todos = await api.reloadTodoDatas();
+		const { Search: omdblist} = await api.reloadOmDbApi();
+
+		this.setState({
+			"todos": todos,
+			"omdblist": omdblist,
+		})
+	}
 
-  async componentDidMount() {
-    const todos = await api.reloadTodoDatas();
-    this.setState({
-      todos
-    });
-  }
+	render() {
+
+		const { todos } = this.state;
+		const { omdblist } = this.state;
+		return (
+			<div>
+				<h1> {this.props.name}</h1>
+				<TabsControl baseWidth={400}>
+					<Tab name="first">
+						<div className="container">
+							<ul>
+								{
+									todos.map((todo, index) => {
+										return <Todo key={index} id={todo.id} title={todo.title} />
+									})
+								}
+							</ul>
+						</div>
+					</Tab>
+					<Tab name="second">
+						<table>
+							<tbody>
+							{
+								omdblist.map((list, index) => {
+									return <List key={index} list={list} />
+								})
+							}
+							</tbody>
+						</table>
+					</Tab>
+				</TabsControl>
+			</div>
 
-  render() {
-    const { todos } = this.state;
-    return (
-      <div>
-        <Header/>
-        <div className="container">
-            <h1>Hi {this.props.name}</h1>
-        </div>
-      </div>
-    );
-  }
+		);
+	}
 }
 
 const App = document.getElementById("app");
-ReactDOM.render(<HelloMessage name="Caesar" />, App);
+ReactDOM.render(<HelloMessage name="My youli" />, App);

src/components/List.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "../css/list.css";
+
+const List = ({list}) => {
+    return (
+        <tr>
+            <td>
+                <img src= {list.Poster}  />
+            </td>
+            <td>
+                <p>{list.Title}（{list.Year}）({list.Type})</p>
+            </td>
+        </tr>
+    );
+}
+
+export default List;

src/components/TabsControl.js

@@ -0,0 +1,62 @@
+import React from "react";
+
+
+
+const TabsControl = (props) => {
+    var currentIndex = 0;
+    const setClass = (index, name) => {
+
+        var elems = document.querySelectorAll(".tab-title-item");
+        elems.forEach(function (e) {
+            e.classList.remove("active");
+            if (e.id === name) {
+                e.classList.add("active");
+            }
+        })
+        var elems = document.querySelectorAll(".tab-content-item");
+        elems.forEach(function (e) {
+            e.classList.remove("active");
+            if (e.id === name) {
+                e.classList.add("active");
+            }
+        })
+
+
+    }
+    const getTitleItemCssClasses = (index) => {
+        return index === currentIndex ? "tab-title-item active" : "tab-title-item";
+    }
+    const getContentItemCssClasses = (index) => {
+        return index === currentIndex ? "tab-content-item active" : "tab-content-item";
+    }
+    return (
+        <div>
+            <nav className="tab-title-items">
+
+                {React.Children.map(props.children, (element, index) => {
+                    return (
+                        <div onClick={() => setClass(index, element.props.name)} id={element.props.name} key={element.props.name} className={getTitleItemCssClasses(index)}>
+                            {element.props.name}
+                        </div>
+                    )
+                })}
+            </nav>
+            <div className="tab-content-items">
+                {React.Children.map(props.children, (element, index) => {
+                    return (<div data={element.props.name} id={element.props.name} className={getContentItemCssClasses(index)}>{element}</div>)
+                })}
+            </div>
+        </div>
+    )
+}
+
+
+const Tab = (props) => {
+    return (
+        <div>{props.children}</div>
+    );
+};
+module.exports = {
+    TabsControl,
+    Tab,
+};

src/components/Todo.js

@@ -0,0 +1,8 @@
+import React from "react";
+const Todo = ({id, title}) => {
+    return (
+        <li key={id}>{title}</li>
+    );
+}
+
+export default Todo;

src/css/list.css

@@ -0,0 +1,21 @@
+img {
+    width:80px;
+    height:100px;
+    margin-left: auto;
+    margin-right: auto;
+}
+tr:nth-child(even) {
+    background: #CCC
+}
+
+tr:nth-child(odd) {
+    background: #FFF
+}
+
+p {
+    color: 	#0D33FF;
+}
+
+table {
+    width: 100%;
+}

src/css/tabsControl.css

@@ -0,0 +1,39 @@
+.container,
+.container * {
+  box-sizing: border-box;  
+}
+
+.container {
+  border: 1px solid #999;
+}
+.tab-title-items {
+  bottom: 0;
+  display: table;
+  width: 100%;
+  height: 50px;
+  padding: 0;
+  table-layout: fixed;
+  border-bottom: 1px solid #999;
+}
+
+.tab-title-item {
+  display: table-cell;
+  width: 1%;
+  height: 50px;
+  color: #333;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.tab-title-item.active{
+  background-color: #333;
+  color: #fff;
+}
+
+.tab-content-item{
+  display: none;
+}
+.tab-content-item.active{
+  display: block;
+}
+