feat: support Markdown by url

4 files changed, 42 insertions, 9 deletions

diff --git a/package-lock.json b/package-lock.json
index 18fa783..4bde2bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2465,6 +2465,37 @@
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.1.tgz",
diff --git a/package.json b/package.json
index 61075ab..d1d2e04 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "@material-ui/core": "^4.9.0",
+    "axios": "^0.19.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-virtualized-auto-sizer": "^1.0.2",
diff --git a/src/index.tsx b/src/index.tsx
index cba71b6..9678beb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,8 +28,6 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const data = "# Getting started\n## Installation \nGo and install it \n# Development\nMore info on dev";
-
 const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
 
 const headerContents = {
@@ -92,7 +90,7 @@ const App: React.FC = () => {
               primary
             </Button>
           </ContentSection>
-          <Markdown data={data} />
+          <Markdown url='https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md' />
         </div>
       </Window>
       <Window type="secondary" name="SmartList preview window">
diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx
index a3ffc38..944ac86 100644
--- a/src/lib/Markdown/Markdown.tsx
+++ b/src/lib/Markdown/Markdown.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
 import ContentSection from '../ContentSection/ContentSection';
 
 
 interface PropTypes {
-  data: string;
+  data?: string;
+  url?: string;
 }
 
 interface RawLinesPropType {
@@ -14,7 +16,7 @@ interface RawLinesPropType {
 
 const header = (level: number): string => {
   return `^#{${level}} .*$`;
-};
+}
 
 const Content: React.FC<RawLinesPropType> = ({ rawLines }) => {
   const plainText = rawLines.join();
@@ -47,9 +49,10 @@ const Level: React.FC<RawLinesPropType> = ({ rawLines, level = 0 }) => {
   );
 }
 
-const Markdown: React.FC<PropTypes> = ({ data }) => {
-  const rawLines = data.split('\n');
-  return <Level rawLines={rawLines} />
+const Markdown: React.FC<PropTypes> = ({ data, url }) => {
+  const [markdown, setMarkdown] = useState<string>(data || '');
+  if (url) axios.get(url).then(response => setMarkdown(response.data));
+  return <Level rawLines={markdown.split('\n')} />
 };