diff --git a/src/data/youtube-feed.js b/src/data/youtube-feed.js index 91acd11..538a029 100644 --- a/src/data/youtube-feed.js +++ b/src/data/youtube-feed.js @@ -50,20 +50,18 @@ const parseVideoFeedDom = videoFeedDom => }; }); -const parseVideoFeed = async (feedResponse) => { - const videoFeedData = await feedResponse.text(); - const parsedVideoFeedData = (new DOMParser()).parseFromString(videoFeedData, 'application/xml'); +const parseVideoFeed = feedResponse => feedResponse.text().then((videoFeedData) => { + const parsedVideoFeedData = new DOMParser().parseFromString(videoFeedData, 'application/xml'); const videoFeedDom = parsedVideoFeedData.documentElement; const videoFeedInfo = parseVideoFeedDom(videoFeedDom); return videoFeedInfo; -}; +}); -const filterVideos = async (feedResponse) => { - const videoFeedInfo = await parseVideoFeed(feedResponse); +const filterVideos = feedResponse => parseVideoFeed(feedResponse).then((videoFeedInfo) => { const filteredVideoFeed = videoFeedInfo.filter(({ title }) => title.includes(videoFilter)); return filteredVideoFeed; -}; +}); -const fetchVideos = async () => filterVideos(await fetchVideoFeed()); +const fetchVideos = () => fetchVideoFeed().then(videos => filterVideos(videos)); export default fetchVideos; diff --git a/src/pages/videos.js b/src/pages/videos.js index 3e44824..72be1f9 100644 --- a/src/pages/videos.js +++ b/src/pages/videos.js @@ -8,15 +8,16 @@ import fetchYouTubeVideos from '../data/youtube-feed'; class YouTubeVideoContainer extends Component { state = { loading: true, videos: null, error: null }; - componentDidMount = async () => { + componentDidMount = () => { this.mounted = true; - try { - const videos = await fetchYouTubeVideos(); - this.setStateIfMounted({ loading: false, videos }); - } catch (error) { - this.setStateIfMounted({ loading: false, error }); - } + fetchYouTubeVideos() + .then((videos) => { + this.setStateIfMounted({ loading: false, videos }); + }) + .catch((error) => { + this.setStateIfMounted({ loading: false, error }); + }); }; componentWillUnmount = () => { @@ -35,9 +36,9 @@ class YouTubeVideoContainer extends Component { const { loading, videos, error } = this.state; return ( - {(videos === null) - ? - : ( + {videos === null ? ( + + ) : ( videos.map(({ id, title, thumbnail, content }) => { const props = { loading, error, video: { title, thumbnail, content } }; return ;