feat: fetch youtube videos dynamically, move menu icons into one story

src/dashboard/learn/Learn.tsx

@@ -1,78 +1,17 @@
 import { makeStyles } from "@material-ui/core";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
 import LearnItem from "./LearnItem";
 
-const videos = [
-  {
-    videoId: "EGmR676jMt8",
-    title: "Community Call #19 (2021-03-24)",
-  },
-  {
-    videoId: "oB3BeDNtN7g",
-    title: "Community Call #18 (2021-03-17)",
-  },
-  {
-    videoId: "zpwiZlbRRbs",
-    title: "Community Call #16 (2021-02-24)",
-  },
-  {
-    videoId: "A9bQPYvWb1o",
-    title: "Community Call #14 (2021-02-10)",
-  },
-  {
-    videoId: "Xha5l6t19Nk",
-    title: "Community Call #13 (2021-02-03)",
-  },
-  {
-    videoId: "tL5FRf-QvH8",
-    title: "Community Call #12 (2021-01-27)",
-  },
-  {
-    videoId: "CpeFQqFKksg",
-    title: "Community Call #11 (2021-01-13)",
-  },
-  {
-    videoId: "CFwnbgoMMBM",
-    title: "Community Call #10 (2020-12-23)",
-  },
-  {
-    videoId: "QTx7U6fPe_k",
-    title: "Community Call #9 (2020-12-16)",
-  },
-  {
-    videoId: "oBoDNGI8f3w",
-    title: "Community Call #8 (2020-12-09)",
-  },
-  {
-    videoId: "_KbbTmMA8WM",
-    title: "Community Call #7 (2020-12-02)",
-  },
-  {
-    videoId: "xi0sXZgG9NE",
-    title: "Community Call #6 (2020-11-25)",
-  },
-  {
-    videoId: "tt_TYVft4dQ",
-    title: "Community Call #5 (2020-11-18)",
-  },
-  {
-    videoId: "iNw5d1rZUqY",
-    title: "Community Call #4 (2020-11-11)",
-  },
-  {
-    videoId: "IBrVkzyCwb4",
-    title: "Community Call #3 (2020-11-04)",
-  },
-  {
-    videoId: "rC7zlCSuVEc",
-    title: "Community Call #2 (2020-10-28)",
-  },
-  {
-    videoId: "mGumdYAjDkY",
-    title: "Community Call #1 (2020-10-21)",
-  },
-];
+const fetchVideos = async () => {
+  const response = await fetch(
+    "https://youtube.googleapis.com/youtube/v3/search?channelId=UCemVkpcBJvbzciHp_5Ly4dw&key=AIzaSyAitbrvF7nJkOlarAMAcco7zwgN-msm0Nc&part=snippet,id&order=date&maxResults=6"
+  );
+  if (response.status === 200) {
+    const responseJSON = await response.json();
+    return responseJSON;
+  }
+};
 
 const useStyles = makeStyles(() => ({
   heading: {
@@ -81,17 +20,57 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
+interface Video {
+  id: {
+    videoId: string;
+  };
+  snippet: {
+    title: string;
+  };
+}
+
+interface Videos {
+  videoId: string;
+  title: string;
+}
+
 const Learn: React.FunctionComponent = () => {
   const classes = useStyles();
+  const [videos, setVideos] = useState<Videos[]>([]);
+  const [error, setError] = useState("");
+
+  const handleFetchVideos = async () => {
+    try {
+      const response = await fetchVideos();
+      response.items.forEach((video: Video) => {
+        setVideos((prevState) => {
+          return [
+            ...prevState,
+            { videoId: video.id.videoId, title: video.snippet.title },
+          ];
+        });
+      });
+    } catch (e) {
+      setError("Unable to fetch videos.");
+    }
+  };
+
+  useEffect(() => {
+    handleFetchVideos();
+  }, []);
 
   return (
     <div>
       <h1 className={classes.heading}>Learn</h1>
-      <Grid container spacing={2}>
-        {videos.map((video) => {
-          return <LearnItem {...video} key={video.videoId} />;
-        })}
-      </Grid>
+      {error ? (
+        <p>{error}</p>
+      ) : (
+        <Grid container spacing={2}>
+          {videos.map((video) => {
+            return <LearnItem {...video} key={video.videoId} />;
+          })}
+        </Grid>
+      )}
     </div>
   );
 };

src/stories/MenuIcons.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { ConsoleIcon } from "../common/components/icons/ConsoleIcon";
+import { LearnIcon } from "../common/components/icons/LearnIcon";
+import { MMBotIcon } from "../common/components/icons/MMBotIcon";
+import { OverviewIcon } from "../common/components/icons/OverviewIcon";
+import { SettingsIcon } from "../common/components/icons/SettingsIcon";
+import { TradeHistoryIcon } from "../common/components/icons/TradeHistoryIcon";
+import { TradeIcon } from "../common/components/icons/TradeIcon";
+import { WalletIcon } from "../common/components/icons/WalletIcon";
+
+storiesOf("Menu Icons", module)
+  .add("Overview Icon", () => <OverviewIcon />)
+  .add("MMBot Icon", () => <MMBotIcon />)
+  .add("Trade Icon", () => <TradeIcon />)
+  .add("Trade History Icon", () => <TradeHistoryIcon />)
+  .add("Wallet Icon", () => <WalletIcon />)
+  .add("Console Icon", () => <ConsoleIcon />)
+  .add("Learn Icon", () => <LearnIcon />)
+  .add("Settings Icon", () => <SettingsIcon />);

yarn.lock

@@ -12842,7 +12842,7 @@ react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-youtube@^7.13.1:
+react-youtube@7.13.1:
   version "7.13.1"
   resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-7.13.1.tgz#3b327599a687bf22e071468818522920b36bcb57"
   integrity sha512-b++TLHmHDpd0ZBS1wcbYabbuchU+W4jtx5A2MUQX0BINNKKsaIQX29sn/aLvZ9v5luwAoceia3VGtyz9blaB9w==