React homework - 嘉義 Amo Lin

package.json

@@ -18,12 +18,13 @@
     "react-dom": "^16.8.6"
   },
   "devDependencies": {
-    "@babel/plugin-transform-async-to-generator": "^7.4.4",
     "@babel/core": "^7.4.5",
+    "@babel/plugin-transform-async-to-generator": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.6",
-    "parcel-bundler": "^1.12.3"
+    "parcel-bundler": "^1.12.3",
+    "sass": "^1.20.3"
   }
 }

src/api/base.js

@@ -1,8 +1,12 @@
 import axios from 'axios';
 
 module.exports = {
-  async reloadTodoDatas() {
-    let { data: response } = await axios.get('https://jsonplaceholder.typicode.com/todos');
-    return response;
-  }
+    async reloadTodoDatas() {
+        let { data: response } = await axios.get('https://jsonplaceholder.typicode.com/todos');
+        return response;
+    },
+    async reloadOmdbDatas() {
+        let { data: response } = await axios.get('http://www.omdbapi.com/?s=Batman&apikey=34472924');
+        return response;
+    }
 };

src/app.js

@@ -1,38 +1,25 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import Header from './components/Header';
-import api from './api/base';
-
-
+import Todo from './components/Todo';
+import Product from './components/Product';
 
 class HelloMessage extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      todos: []
-    };
-  }
-
-  async componentDidMount() {
-    const todos = await api.reloadTodoDatas();
-    this.setState({
-      todos
-    });
-  }
+    constructor(props) {
+        super(props);
+    }
 
-  render() {
-    const { todos } = this.state;
-    return (
-      <div>
-        <Header/>
-        <div className="container">
-            <h1>Hi {this.props.name}</h1>
-        </div>
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div>
+                <Product/>
+                <Todo/>
+            </div>
+        );
+    }
+
+
 }
 
 const App = document.getElementById("app");
-ReactDOM.render(<HelloMessage name="Caesar" />, App);
+ReactDOM.render(<HelloMessage/>, App);

src/assets/stylesheet/style.scss

@@ -0,0 +1,68 @@
+.prods {
+    margin: 8%;
+}
+
+.prods-head {
+    color:#ffff;
+    background-color: rgb(40, 38, 37);
+    height: 8vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 3% 0 3%;
+    margin: 0;
+}
+
+.prods-title {
+    font-size: 23px;
+}
+
+.search-type {
+    font-size: 20px;
+    color: rgb(247, 37, 33);
+}
+
+.prods-content ul {
+    list-style-type: none;
+    margin: 0px;
+    padding: 0px;
+}
+.prods-content ul li {
+    font-size: 20px;
+    margin: 1px 0 1px 0;
+}
+
+.prod-info {
+    display: flex;
+    align-items: center;
+}
+
+.prod-info span {
+    padding-left: 5px;
+}
+
+.prod-info a {
+    text-decoration: none;
+}
+/*
+.prod-line1 {
+    background-color: rgb(255, 255, 231);
+}
+
+.prod-line2 {
+    background-color: rgb(238, 238, 238);
+}
+*/
+
+.prod:nth-of-type(odd) {
+    background-color: rgb(255, 255, 231);
+}
+
+.prod:nth-of-type(even) {
+    background-color: rgb(238, 238, 238);
+}
+
+.error-message {
+    color: rgb(248, 2, 2);
+    text-align: center;
+}

src/components/Product.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import api from '/api/base';
+
+export default class Product extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            prods: [],
+            totalNum : 0,
+            error:""
+        };
+    }
+
+    async componentDidMount() {
+        const prodInfo = await api.reloadOmdbDatas();
+        let prods = [];
+        let errorMsg = "";
+        for (let [key, value] of Object.entries(prodInfo)) {
+            if(key == "Search") {
+                prods = value;
+            }
+            if (key == "Error") {
+                errorMsg = value;
+            }
+        }
+        this.setState({
+            'prods': prods,
+            "error": errorMsg
+        });    
+
+    }
+
+    render() {
+        const { error } = this.state;
+        const { prods } = this.state;
+
+        let movieList = "";
+        if (error.length == 0 ) {
+            movieList = prods.map((prod, index) => {
+                return (
+                    <li key={index} className="prod">
+                        <span className="prod-info"><img width="120" src={prod.Poster} alt={prod.imdbID} /><span><a href={prod.imdbID} >{prod.Title}</a></span><span>({prod.Year})</span><span>({prod.Type})</span></span>
+                    </li>
+                );
+            })
+        } else {
+            movieList = <li className="error-message" >{error}</li>;
+        }
+
+        return(
+            <div className="prods">
+                <div className="prods-head">
+                    <span className="prods-title">SEARCH RESULTS FOR：Batman</span>
+                    <span>VIEW：<span className='search-type'>exact title matches</span></span>
+                </div>
+                <div className="prods-content">
+                    <ul>
+                       {movieList}
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+}

src/components/Todo.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import api from '/api/base';
+
+export default class Todo extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            todos: []
+        };
+    }
+
+    async componentDidMount() {
+        const todos = await api.reloadTodoDatas();
+        this.setState({
+            'todos': todos
+        });
+        this.handleChecked = this.handleChecked.bind(this);
+    }
+
+    handleChecked () {
+        this.setState({completed: !this.state.completed});
+    }
+
+    render() {
+        const { todos } = this.state;
+        return (
+            <div className="todos">
+                <ul>
+                    {todos.map((todo) => {
+                        return (
+                            <div id="item" key={todo.id}>
+                                <input type='checkbox' value={todo.id} onChange={this.handleChecked}></input>{todo.id}. {todo.title}
+                            </div>
+                        );
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}

src/index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
+  <link rel="stylesheet" href="./assets/stylesheet/style.scss"/>
 </head>
 <body>
   <div id="app"></div>