switch fetch function

noelledusahel · Oct 30, 2019 · 4433a19 · 4433a19
1 parent d336354
commit 4433a19
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 36 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,20 +1,22 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 const Header = (props) => (
   <header>
-    <NavLink
+    <Link
       to ={{
         pathname:'/',
         state:{
           imageInfo: props.latestImage
         }
       }}
-      activeClassName="is-active"
-      exact={true}
-      onClick={props.fetchLatest}>Latest
-    </NavLink>&nbsp;
-    <NavLink to="/search" activeClassName="is-active">Search</NavLink>&nbsp;
+      onClick={props.componentDidMount}
+      className="latest">Latest
+    </Link>&nbsp;
+    <Link
+      to="/search"
+      className="search">Search
+    </Link>&nbsp;
   </header>
 )
 

diff --git a/src/components/HomePage.js b/src/components/HomePage.js
@@ -1,19 +1,13 @@
 import React from 'react';
 
 const HomePage =(props) => {
-  console.log(props)
   return (
-    <img src={props.location.state.imageInfo.imageUrl}
-     title={props.location.state.imageInfo.alt}
-     alt={props.location.state.imageInfo.title}/>
+    <img
+      className="latestImage"
+      src={props.location.state.imageInfo.imageUrl}
+      title={props.location.state.imageInfo.alt}
+      alt={props.location.state.imageInfo.title}/>
   )
 }
-//   <div className={'latestImage'}>
-//     <p>this is the home page</p>
-//   </div>
-// );
-  // <div>
-  //   <img className={'latestImage'} src={props.imageUrl} title={props.alt} alt={props.title}/>
-  // </div>
 
 export default HomePage;
diff --git a/src/routers/AppRouter.js b/src/routers/AppRouter.js
@@ -9,33 +9,44 @@ import NotFoundPage from '../components/NotFoundPage';
 export default class AppRouter extends React.Component {
 
   state = {
-    latestImage: {
-      imageUrl: 'https://xkcd.now.sh/?comic=latest',
-      alt: 'Dog',
-      title: 'Cat'
-    }
+    latestImage: {}
   }
 
-  fetchLatest = () => {
+  componentDidMount = () => {
     fetch('https://xkcd.now.sh/?comic=latest')
-    .then(response => response.json())
-    .then((image) => {
-      this.setState(() => ({
-        latestImage: {
-          imageUrl: image.img,
-          alt: image.title,
-          title: image.alt
-        }
-      }))
-    })
-  };
+      .then(response => response.json())
+      .then((data) => {
+        this.setState(() => ({
+          latestImage: {
+            imageUrl: data.img,
+            alt: data.title,
+            title: data.alt
+          }
+        })
+      )})
+      .catch(console.log)
+    }
+
+  // fetchLatest = () => {
+  //   fetch('https://xkcd.now.sh/?comic=latest')
+  //   .then(response => response.json())
+  //   .then((image) => {
+  //     this.setState(() => ({
+  //       latestImage: {
+  //         imageUrl: image.img,
+  //         alt: image.title,
+  //         title: image.alt
+  //       }
+  //     }))
+  //   })
+  // };
 
   render() {
     return (
       <BrowserRouter>
         <div>
           <Header
-           fetchLatest={this.fetchLatest}
+           componentDidMount={this.componentDidMount}
            latestImage={this.state.latestImage}>
           </Header>
           <Switch>