Changed async/await functions into Promise chains

(fixes gatsbyjs/gatsby#3972)

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;

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 (
       <CardList>
-        {(videos === null)
-        ? <YouTubeVideo {...this.state} />
-        : (
+        {videos === null ? (
+          <YouTubeVideo {...this.state} />
+        ) : (
           videos.map(({ id, title, thumbnail, content }) => {
             const props = { loading, error, video: { title, thumbnail, content } };
             return <YouTubeVideo key={id} {...props} />;