From cffa29ad832a48de9f345d87b36b826dce33abfd Mon Sep 17 00:00:00 2001 From: KidUnknown Date: Wed, 26 Feb 2020 11:45:56 +0000 Subject: [PATCH 1/5] 1 file modified with body content --- index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 3e5d97f..155ea95 100644 --- a/index.js +++ b/index.js @@ -3,23 +3,24 @@ import { render } from 'react-dom'; import Hello from './Hello'; import Title from './Title'; import './style.css'; - +/* */ class App extends Component { constructor() { super(); this.state = { name: 'React', - title: 'My first stackblitz app' + title: 'My first stackblitz app', + bodycopy: 'Just a small sentence for the body area' }; } render() { return (
- + <Hello name={this.state.name} /> <p> - Start editing to see some magic happen :) + {this.state.bodycopy} </p> </div> ); From 64b9f5756d424c60490df7abe1dfb44545f3695f Mon Sep 17 00:00:00 2001 From: KidUnknown <jonathan_theobald@dennis.co.uk> Date: Tue, 12 May 2020 08:56:53 +0100 Subject: [PATCH 2/5] collected the data from api --- index.js | 65 +++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 46 insertions(+), 19 deletions(-) diff --git a/index.js b/index.js index 155ea95..3446bb3 100644 --- a/index.js +++ b/index.js @@ -1,30 +1,57 @@ import React, { Component } from 'react'; import { render } from 'react-dom'; -import Hello from './Hello'; -import Title from './Title'; import './style.css'; -/* */ -class App extends Component { - constructor() { - super(); + +class MyComponent extends React.Component { + constructor(props) { + super(props); this.state = { - name: 'React', - title: 'My first stackblitz app', - bodycopy: 'Just a small sentence for the body area' + error: null, + isLoaded: false, + items: [] }; } + componentDidMount() { + fetch("https://jsonplaceholder.typicode.com/photos") + .then(res => res.json()) + .then( + (result) => { + this.setState({ + isLoaded: true, + items: result + }); + }, + // Note: it's important to handle errors here + // instead of a catch() block so that we don't swallow + // exceptions from actual bugs in components. + (error) => { + this.setState({ + isLoaded: true, + error + }); + } + ) + } + render() { - return ( - <div> - <Title title={this.state.title} /> - <Hello name={this.state.name} /> - <p> - {this.state.bodycopy} - </p> - </div> - ); + const { error, isLoaded, items } = this.state; + if (error) { + return <div>Error: {error.message}</div>; + } else if (!isLoaded) { + return <div>Loading...</div>; + } else { + return ( + <ul> + {items.map(item => ( + <li key={item.id}> + {item.id} {item.albumId} {item.thumbnailUrl} + </li> + ))} + </ul> + ); + } } } -render(<App />, document.getElementById('root')); +render(<MyComponent />, document.getElementById('root')); From 10a146ab941828f6c0de70070b16c77cfaa19b88 Mon Sep 17 00:00:00 2001 From: KidUnknown <jonathan_theobald@dennis.co.uk> Date: Thu, 4 Jun 2020 15:46:32 +0100 Subject: [PATCH 3/5] code tidy with destructuring --- index.js | 75 +++++++++++++++++++++++++++++++------------------------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/index.js b/index.js index 3446bb3..826cc6c 100644 --- a/index.js +++ b/index.js @@ -5,6 +5,19 @@ import './style.css'; class MyComponent extends React.Component { constructor(props) { super(props); + + // props = { + // headerProps: { + // HeaderTitle: '', + // HeaderRole: '', + // HeaderClass: '' + // }, + // footerProps: { + // FooterTitle: '', + // FooterClass: '' + // } + // }; + this.state = { error: null, isLoaded: false, @@ -14,43 +27,39 @@ class MyComponent extends React.Component { componentDidMount() { fetch("https://jsonplaceholder.typicode.com/photos") - .then(res => res.json()) - .then( - (result) => { - this.setState({ - isLoaded: true, - items: result - }); - }, - // Note: it's important to handle errors here - // instead of a catch() block so that we don't swallow - // exceptions from actual bugs in components. - (error) => { - this.setState({ - isLoaded: true, - error - }); - } - ) + .then(res => res.json()) + .then( + (result) => { + this.setState({ + isLoaded: true, + items: result + }); + } + ) + .catch((error) => { + this.setState({ + isLoaded: true, + error + }); + }) } render() { const { error, isLoaded, items } = this.state; - if (error) { - return <div>Error: {error.message}</div>; - } else if (!isLoaded) { - return <div>Loading...</div>; - } else { - return ( - <ul> - {items.map(item => ( - <li key={item.id}> - {item.id} {item.albumId} {item.thumbnailUrl} - </li> - ))} - </ul> - ); - } + + if (error) return <div>Error: {error.message}</div>; + if (!isLoaded) return <div>Loading...</div>; + + return ( + <ul> + {items.map(item => { + const {albumId,id,thumbnailUrl} = item; + <li key={id}> + <img id={id} alt={albumId} src={thumbnailUrl} /> + </li> + })} + </ul> + ); } } From eb9b37a91701dcf30686494e7ece46f156500266 Mon Sep 17 00:00:00 2001 From: KidUnknown <jonathan_theobald@dennis.co.uk> Date: Fri, 5 Jun 2020 16:04:40 +0100 Subject: [PATCH 4/5] created usefetch file and used with react Hook method --- _UseFetch.js | 24 +++++++++++++++++ index.js | 75 +++++++++++++--------------------------------------- 2 files changed, 42 insertions(+), 57 deletions(-) create mode 100644 _UseFetch.js diff --git a/_UseFetch.js b/_UseFetch.js new file mode 100644 index 0000000..0716843 --- /dev/null +++ b/_UseFetch.js @@ -0,0 +1,24 @@ +import React from 'react'; + +const useFetch = (url, options) => { + + const [items, setItems] = React.useState([]); + const [error, setError] = React.useState(null); + + React.useEffect(() => { + const fetchItems = async () => { + try { + const res = await fetch(url, options); + const items = await res.json(); + setItems(items); + } catch (error) { + setError(error); + } + }; + fetchItems(); + }, [url, options]); + + return { items, error }; +} + +export default useFetch; \ No newline at end of file diff --git a/index.js b/index.js index 826cc6c..a369442 100644 --- a/index.js +++ b/index.js @@ -1,66 +1,27 @@ import React, { Component } from 'react'; import { render } from 'react-dom'; +import useFetch from './_UseFetch'; import './style.css'; -class MyComponent extends React.Component { - constructor(props) { - super(props); +function MyComponent() { + const res = useFetch('https://jsonplaceholder.typicode.com/albums', {}); - // props = { - // headerProps: { - // HeaderTitle: '', - // HeaderRole: '', - // HeaderClass: '' - // }, - // footerProps: { - // FooterTitle: '', - // FooterClass: '' - // } - // }; - - this.state = { - error: null, - isLoaded: false, - items: [] - }; - } + if (res.error) return <div>Error: {res.error.message}</div>; + if (!res.items) return <div>Loading...</div>; - componentDidMount() { - fetch("https://jsonplaceholder.typicode.com/photos") - .then(res => res.json()) - .then( - (result) => { - this.setState({ - isLoaded: true, - items: result - }); - } - ) - .catch((error) => { - this.setState({ - isLoaded: true, - error - }); - }) - } - - render() { - const { error, isLoaded, items } = this.state; - - if (error) return <div>Error: {error.message}</div>; - if (!isLoaded) return <div>Loading...</div>; - - return ( - <ul> - {items.map(item => { - const {albumId,id,thumbnailUrl} = item; - <li key={id}> - <img id={id} alt={albumId} src={thumbnailUrl} /> - </li> - })} - </ul> - ); - } + //console.log(res.items); + + return ( + <ul> + {res.items.map(item => { + const { id, userId, title } = item; + <li key={id}> + <p>Album: {id} user: {userId}</p> + <p>title: {title} </p> + </li> + })} + </ul> + ); } render(<MyComponent />, document.getElementById('root')); From f612884d60c9bb44c953182b3f9b281e74235332 Mon Sep 17 00:00:00 2001 From: KidUnknown <jonathan_theobald@dennis.co.uk> Date: Fri, 5 Jun 2020 16:27:26 +0100 Subject: [PATCH 5/5] 2 files modified --- _UseFetch.js | 2 +- index.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/_UseFetch.js b/_UseFetch.js index 0716843..9363f7d 100644 --- a/_UseFetch.js +++ b/_UseFetch.js @@ -21,4 +21,4 @@ const useFetch = (url, options) => { return { items, error }; } -export default useFetch; \ No newline at end of file +export default useFetch; diff --git a/index.js b/index.js index a369442..0d7d7c0 100644 --- a/index.js +++ b/index.js @@ -8,8 +8,6 @@ function MyComponent() { if (res.error) return <div>Error: {res.error.message}</div>; if (!res.items) return <div>Loading...</div>; - - //console.log(res.items); return ( <ul>