diff --git a/package.json b/package.json index 523a98e..4e47827 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react-number-format": "^4.4.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", + "react-youtube": "7.13.1", "rxjs": "^6.6.3", "socket.io-client": "^2.3.1", "xterm": "^4.9.0", @@ -44,7 +45,6 @@ "@storybook/preset-create-react-app": "^3.1.6", "@storybook/react": "^6.1.21", "@storybook/theming": "^6.1.21", - "storybook-react-router": "^1.0.8", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -61,6 +61,7 @@ "cross-env": "^7.0.2", "eslint-plugin-jest": "^24.0.2", "prettier": "^2.1.2", + "storybook-react-router": "^1.0.8", "ts-jest": "^26.4.0", "typescript": "^3.7.5" }, diff --git a/public/index.html b/public/index.html index c73995a..7c013ae 100644 --- a/public/index.html +++ b/public/index.html @@ -7,8 +7,9 @@ + { + return ( + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/common/components/icons/LearnIcon.tsx b/src/common/components/icons/LearnIcon.tsx new file mode 100644 index 0000000..9d48143 --- /dev/null +++ b/src/common/components/icons/LearnIcon.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +export const LearnIcon: React.FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/common/components/icons/MMBotIcon.tsx b/src/common/components/icons/MMBotIcon.tsx new file mode 100644 index 0000000..24fe863 --- /dev/null +++ b/src/common/components/icons/MMBotIcon.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +export const MMBotIcon: React.FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/common/components/icons/OverviewIcon.tsx b/src/common/components/icons/OverviewIcon.tsx new file mode 100644 index 0000000..af43b04 --- /dev/null +++ b/src/common/components/icons/OverviewIcon.tsx @@ -0,0 +1,43 @@ +import React from "react"; + +export const OverviewIcon: React.FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/common/components/icons/SettingsIcon.tsx b/src/common/components/icons/SettingsIcon.tsx new file mode 100644 index 0000000..82ce8b6 --- /dev/null +++ b/src/common/components/icons/SettingsIcon.tsx @@ -0,0 +1,36 @@ +import React from "react"; + +export const SettingsIcon: React.FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + ); +}; diff --git a/src/common/components/icons/TradeHistoryIcon.tsx b/src/common/components/icons/TradeHistoryIcon.tsx new file mode 100644 index 0000000..89bed93 --- /dev/null +++ b/src/common/components/icons/TradeHistoryIcon.tsx @@ -0,0 +1,43 @@ +import React from "react"; + +export const TradeHistoryIcon: React.FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/common/components/icons/TradeIcon.tsx b/src/common/components/icons/TradeIcon.tsx new file mode 100644 index 0000000..edd3180 --- /dev/null +++ b/src/common/components/icons/TradeIcon.tsx @@ -0,0 +1,37 @@ +import React from "react"; + +export const TradeIcon: React.FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + ); +}; diff --git a/src/common/components/icons/WalletIcon.tsx b/src/common/components/icons/WalletIcon.tsx new file mode 100644 index 0000000..a1e3431 --- /dev/null +++ b/src/common/components/icons/WalletIcon.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +export const WalletIcon: React.FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/common/components/navigation/Menu.tsx b/src/common/components/navigation/Menu.tsx index 923f4ad..09b5ca8 100644 --- a/src/common/components/navigation/Menu.tsx +++ b/src/common/components/navigation/Menu.tsx @@ -2,13 +2,7 @@ import React, { useEffect, useState } from "react"; import Drawer from "@material-ui/core/Drawer"; import { Grid } from "@material-ui/core"; import List from "@material-ui/core/List"; -import AccountBalanceWalletOutlinedIcon from "@material-ui/icons/AccountBalanceWalletOutlined"; import CachedIcon from "@material-ui/icons/Cached"; -import HistoryIcon from "@material-ui/icons/History"; -import RemoveRedEyeOutlinedIcon from "@material-ui/icons/RemoveRedEyeOutlined"; -import SettingsIcon from "@material-ui/icons/Settings"; -import SportsEsportsIcon from "@material-ui/icons/SportsEsports"; -import TrendingUpIcon from "@material-ui/icons/TrendingUp"; import { makeStyles } from "@material-ui/core/styles"; import { useLocation, useRouteMatch } from "react-router-dom"; import { Path } from "../../../router/Path"; @@ -18,9 +12,17 @@ import Trade from "../../../dashboard/trade/Trade"; import Tradehistory from "../../../dashboard/tradehistory/Tradehistory"; import Wallets from "../../../dashboard/wallet/Wallets"; import Console from "../../../dashboard/console/Console"; +import Learn from "../../../dashboard/learn/Learn"; import { isElectron, sendMessageToParent } from "../../utils/appUtil"; import Button from "../input/buttons/Button"; import Settings from "../../../settings/Settings"; +import { LearnIcon } from "../icons/LearnIcon"; +import { OverviewIcon } from "../icons/OverviewIcon"; +import { TradeIcon } from "../icons/TradeIcon"; +import { TradeHistoryIcon } from "../icons/TradeHistoryIcon"; +import { WalletIcon } from "../icons/WalletIcon"; +import { ConsoleIcon } from "../icons/ConsoleIcon"; +import { SettingsIcon } from "../icons/SettingsIcon"; import { OpenDexMainLogo } from "../icons/OpenDexMainLogo"; export const menuItems: MenuItemProps[] = [ @@ -28,32 +30,38 @@ export const menuItems: MenuItemProps[] = [ path: Path.OVERVIEW, text: "Overview", component: Overview, - icon: RemoveRedEyeOutlinedIcon, + icon: OverviewIcon, isFallback: true, }, { path: Path.TRADE, text: "Trade", component: Trade, - icon: TrendingUpIcon, + icon: TradeIcon, }, { path: Path.TRADEHISTORY, text: "Trade History", component: Tradehistory, - icon: HistoryIcon, + icon: TradeHistoryIcon, }, { path: Path.WALLETS, text: "Wallets", component: Wallets, - icon: AccountBalanceWalletOutlinedIcon, + icon: WalletIcon, }, { path: Path.CONSOLE, text: "Console", component: Console, - icon: SportsEsportsIcon, + icon: ConsoleIcon, + }, + { + path: Path.LEARN, + text: "Learn", + component: , + icon: LearnIcon, }, { path: Path.SETTINGS, diff --git a/src/dashboard/learn/Learn.tsx b/src/dashboard/learn/Learn.tsx new file mode 100644 index 0000000..9a72961 --- /dev/null +++ b/src/dashboard/learn/Learn.tsx @@ -0,0 +1,78 @@ +import { makeStyles } from "@material-ui/core"; +import React, { useEffect, useState } from "react"; +import Grid from "@material-ui/core/Grid"; +import LearnItem from "./LearnItem"; + +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: { + fontSize: "30px", + color: "#f2f2f2", + }, +})); + +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([]); + 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 ( +
+

Learn

+ {error ? ( +

{error}

+ ) : ( + + {videos.map((video) => { + return ; + })} + + )} +
+ ); +}; + +export default Learn; diff --git a/src/dashboard/learn/LearnItem.tsx b/src/dashboard/learn/LearnItem.tsx new file mode 100644 index 0000000..f8ecc63 --- /dev/null +++ b/src/dashboard/learn/LearnItem.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import Grid from "@material-ui/core/Grid"; +import { makeStyles } from "@material-ui/core"; +import YouTube from "react-youtube"; + +type LearnItemProps = { + videoId: string; + title: string; +}; + +const opts = { + height: "200", + width: "350", +}; + +const useStyles = makeStyles(() => ({ + title: { + fontSize: "16px", + color: "#f2f2f2", + }, +})); + +const LearnItem: React.FunctionComponent = (props) => { + const { videoId, title } = props; + const classes = useStyles(); + + return ( + + +

{title}

+ + ); +}; + +export default LearnItem; diff --git a/src/router/Path.ts b/src/router/Path.ts index f74f0ec..a630365 100644 --- a/src/router/Path.ts +++ b/src/router/Path.ts @@ -11,4 +11,5 @@ export enum Path { TRADE = "/trade", TRADEHISTORY = "/tradehistory", WALLETS = "/wallets", + LEARN = "/learn", } diff --git a/src/stories/LearnItem.stories.tsx b/src/stories/LearnItem.stories.tsx new file mode 100644 index 0000000..64360ee --- /dev/null +++ b/src/stories/LearnItem.stories.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; +import LearnItem from "../dashboard/learn/LearnItem"; + +storiesOf("LearnItem", module).add("LearnItemDefault", () => ( + +)); diff --git a/src/stories/MenuIcons.stories.tsx b/src/stories/MenuIcons.stories.tsx new file mode 100644 index 0000000..353c29f --- /dev/null +++ b/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", () => ) + .add("MMBot Icon", () => ) + .add("Trade Icon", () => ) + .add("Trade History Icon", () => ) + .add("Wallet Icon", () => ) + .add("Console Icon", () => ) + .add("Learn Icon", () => ) + .add("Settings Icon", () => ); diff --git a/yarn.lock b/yarn.lock index 64fef94..701dcb0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5893,7 +5893,7 @@ data-urls@^1.0.0, data-urls@^1.1.0: whatwg-mimetype "^2.2.0" whatwg-url "^7.0.0" -debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: +debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== @@ -7014,7 +7014,7 @@ extsprintf@^1.2.0: resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8= -fast-deep-equal@^3.1.1: +fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== @@ -9944,6 +9944,11 @@ load-json-file@^4.0.0: pify "^3.0.0" strip-bom "^3.0.0" +load-script@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" + integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ= + loader-fs-cache@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz#f08657646d607078be2f0a032f8bd69dd6f277d9" @@ -12261,7 +12266,7 @@ prompts@2.4.0, prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -12837,6 +12842,15 @@ react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" +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== + dependencies: + fast-deep-equal "3.1.3" + prop-types "15.7.2" + youtube-player "5.5.2" + react@^16.13.1: version "16.14.0" resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" @@ -13710,6 +13724,11 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" +sister@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4" + integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA== + sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" @@ -15797,6 +15816,15 @@ yocto-queue@^0.1.0: resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== +youtube-player@5.5.2: + version "5.5.2" + resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5" + integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ== + dependencies: + debug "^2.6.6" + load-script "^1.0.0" + sister "^3.0.0" + zwitch@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"