Use end state of excercise 4 as starting point in 5

Barta, Jan · Barta, Jan · commit 896921ab317c · 2020-07-30T09:31:43.000+02:00
diff --git a/src/exercises/05-router/App.jsx b/src/exercises/05-router/App.jsx
@@ -7,23 +7,12 @@ import {ResultItem} from './ResultsItem';
 
 import '../../index.css';
 
- const resultsFromAPI = [
-  {
-    link: '/Result-1',
-    title: 'Czech Magazine for Youth',
-    description: `ABC is a favorite Czech magazine for children that focuses on science and technology. It's purpose is to both educate children as well as get them excited about science and nature.`
-  },
-  {
-    link: '/Result-2',
-    title: 'TV Station',
-    description: 'ABC is an American Broadcasting Company, a flagship property of Walt Disney Television, a subsidiary of the Disney Media Networks division of The Walt Disney Company. It has headquarter in Burbank, California.'
-  },
-  {
-    link: '/Result-3',
-    title: 'First Letters of Alphabet',
-    description: 'ABC are first letters of the alphabet. English alphabet consists of 26 letters and it originated around the 7th century from the Latin script. The word alphabet is a compound of first two letters of greek alphabet - alpha and beta.'
-  }
-]
+const fetchResultsFromAPI = async () => {
+  const response = await fetch('https://myslenkynezastavis.cz?searchQuery=abc');
+  const result = await response.json();
+
+  return result;
+}
 
 /**
  * Cvičení:
@@ -35,18 +24,38 @@ import '../../index.css';
 export class App extends React.Component {
   state = {
     searchQuery: '',
+    loading: false,
+    error: null,
     results: []
   };
 
   handleInputChange = (text) => {
     this.setState({searchQuery: text});
   };
 
-  handleSearchClick = () => {
-    this.setState({results: resultsFromAPI});
+  handleSearchClick = async () => {
+    try{
+      this.setState({
+        loading: true,
+        // musíme vyresetovat chybu z předchozích stahování
+        error: null
+      });
+      const fetchResult = await fetchResultsFromAPI();
+      this.setState({
+        loading: false,
+        results: fetchResult
+      });
+    } catch (error) {
+      this.setState({
+        loading: false,
+        error: error.message
+      });
+    }
   };
 
   render() {
+    const {loading, error, results, searchQuery} = this.state;
+
     return (
       <div className="App">
         <header>
@@ -56,12 +65,12 @@ export class App extends React.Component {
         <div>
           <div>
             <div className="logo"></div>
-            <SearchInput onChange={this.handleInputChange} searchQuery={this.state.searchQuery} />
+            <SearchInput onChange={this.handleInputChange} searchQuery={searchQuery} />
             <SearchButtons onSearch={this.handleSearchClick} />
           </div>
         </div>
-        <Results searchQuery={this.state.searchQuery}>
-          {this.state.results.map((result) => {
+        <Results searchQuery={searchQuery} loading={loading} error={error}>
+          {results.map((result) => {
             return <ResultItem key={result.link}
                 link={result.link}
                 title={result.title}
diff --git a/src/exercises/05-router/Results.jsx b/src/exercises/05-router/Results.jsx
@@ -2,7 +2,15 @@ import React from 'react';
 
 export class Results extends React.Component {
   render() {
-    const {searchQuery, children} = this.props;
+    const {searchQuery, loading, error, children} = this.props;
+
+    if (loading) {
+      return <div className="results__loader">Loading ...</div>;
+    }
+
+    if (error) {
+      return <div className="results__error">{error}</div>;
+    }
 
     return (
       <div className="results">
diff --git a/src/exercises/05-router/SearchInput.jsx b/src/exercises/05-router/SearchInput.jsx
@@ -5,6 +5,10 @@ import searchLogo from '../../search.svg';
 export const SearchInput = ({onChange, searchQuery}) => (
   <div className="input">
     <img className="search-icon" src={searchLogo} alt="Search Logo" />
-    <input id="search-text" value={searchQuery} onChange={(e) => onChange(e.target.value)} />
+    <input
+      id="search-text"
+      value={searchQuery}
+      onChange={(e) => onChange(e.target.value)}
+    />
   </div>
 );
diff --git a/src/solutions/04-api/App.jsx b/src/solutions/04-api/App.jsx
@@ -27,7 +27,7 @@ export class App extends React.Component {
   };
 
   handleSearchClick = async () => {
-    try{
+    try {
       this.setState({
         loading: true,
         // musíme vyresetovat chybu z předchozích stahování
diff --git a/src/solutions/05-router/App.jsx b/src/solutions/05-router/App.jsx
@@ -1,92 +1,103 @@
 import React from 'react';
+import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
 
 import {SearchButtons} from './SearchButtons';
 import {SearchInput} from './SearchInput';
 import {Results} from './Results';
 import {ResultItem} from './ResultsItem';
-import {Gmail} from './Gmail'
-
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Link
-} from "react-router-dom";
+import {Gmail} from './Gmail';
 
 import '../../index.css';
 
- const resultsFromAPI = [
-  {
-    link: '/Result-1',
-    title: 'Czech Magazine for Youth',
-    description: `ABC is a favorite Czech magazine for children that focuses on science and technology. It's purpose is to both educate children as well as get them excited about science and nature.`
-  },
-  {
-    link: '/Result-2',
-    title: 'TV Station',
-    description: 'ABC is an American Broadcasting Company, a flagship property of Walt Disney Television, a subsidiary of the Disney Media Networks division of The Walt Disney Company. It has headquarter in Burbank, California.'
-  },
-  {
-    link: '/Result-3',
-    title: 'First Letters of Alphabet',
-    description: 'ABC are first letters of the alphabet. English alphabet consists of 26 letters and it originated around the 7th century from the Latin script. The word alphabet is a compound of first two letters of greek alphabet - alpha and beta.'
-  }
-]
+const fetchResultsFromAPI = async () => {
+  const response = await fetch('https://myslenkynezastavis.cz?searchQuery=abc');
+  const result = await response.json();
+
+  return result;
+};
 
 export class App extends React.Component {
   state = {
     searchQuery: '',
+    loading: false,
+    error: null,
     results: []
   };
 
   handleInputChange = (text) => {
     this.setState({searchQuery: text});
   };
 
-  handleSearchClick = () => {
-    this.setState({results: resultsFromAPI});
+  handleSearchClick = async () => {
+    try {
+      this.setState({
+        loading: true,
+        // musíme vyresetovat chybu z předchozích stahování
+        error: null
+      });
+      const fetchResult = await fetchResultsFromAPI();
+      this.setState({
+        loading: false,
+        results: fetchResult
+      });
+    } catch (error) {
+      this.setState({
+        loading: false,
+        error: error.message
+      });
+    }
   };
 
   render() {
+    const {loading, error, results, searchQuery} = this.state;
+
     return (
       <Router>
         <div className="App">
           <header>
-          <nav>
-            <ul>
-              <li>
-                <Link to="/">Search</Link>
-              </li>
-              <li>
-                <Link to="/gmail"><img />Gmail</Link>
-              </li>
-            </ul>
-          </nav>
+            <nav>
+              <ul>
+                <li>
+                  <Link to="/">Search</Link>
+                </li>
+                <li>
+                  <Link to="/gmail">
+                    <img />
+                    Gmail
+                  </Link>
+                </li>
+              </ul>
+            </nav>
           </header>
-
-          <Switch>
-            <Route exact path="/">
-              <div>
+          <div>
+            <Switch>
+              <Route exact path="/">
                 <div>
                   <div className="logo"></div>
-                  <SearchInput onChange={this.handleInputChange} searchQuery={this.state.searchQuery} />
+                  <SearchInput
+                    onChange={this.handleInputChange}
+                    searchQuery={searchQuery}
+                  />
                   <SearchButtons onSearch={this.handleSearchClick} />
                 </div>
-              </div>
-              <Results searchQuery={this.state.searchQuery}>
-                {this.state.results.map((result) => {
-                  return <ResultItem key={result.link}
-                      link={result.link}
-                      title={result.title}
-                      description={result.description}
-                    />
-                })}
-              </Results>
-            </Route>
-            <Route path="/gmail">
-              <Gmail />
-            </Route>
-          </Switch>
+                <Results searchQuery={searchQuery} loading={loading} error={error}>
+                  {results.map((result) => {
+                    return (
+                      <ResultItem
+                        key={result.link}
+                        link={result.link}
+                        title={result.title}
+                        description={result.description}
+                      />
+                    );
+                  })}
+                </Results>
+              </Route>
+              <Route path="/gmail">
+                <Gmail />
+              </Route>
+            </Switch>
+          </div>
         </div>
       </Router>
     );
diff --git a/src/solutions/05-router/Results.jsx b/src/solutions/05-router/Results.jsx
@@ -2,7 +2,15 @@ import React from 'react';
 
 export class Results extends React.Component {
   render() {
-    const {searchQuery, children} = this.props;
+    const {searchQuery, loading, error, children} = this.props;
+
+    if (loading) {
+      return <div className="results__loader">Loading ...</div>;
+    }
+
+    if (error) {
+      return <div className="results__error">{error}</div>;
+    }
 
     return (
       <div className="results">
diff --git a/src/solutions/05-router/SearchInput.jsx b/src/solutions/05-router/SearchInput.jsx
@@ -5,6 +5,10 @@ import searchLogo from '../../search.svg';
 export const SearchInput = ({onChange, searchQuery}) => (
   <div className="input">
     <img className="search-icon" src={searchLogo} alt="Search Logo" />
-    <input id="search-text" value={searchQuery} onChange={(e) => onChange(e.target.value)} />
+    <input
+      id="search-text"
+      value={searchQuery}
+      onChange={(e) => onChange(e.target.value)}
+    />
   </div>
 );
