From 992857f22936ccbd93c3cd31e9f507c23cbd3dc5 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Tue, 7 Apr 2020 15:34:10 +0300
Subject: feat: add custom md preview page

---
 src/index.tsx | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 65 insertions(+), 10 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index b64b207..60453eb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, TextField, Button } from '@material-ui/core';
 
 import {
   Benzin,
   Header,
   Window,
   Markdown,
+  ContentSection,
 } from './lib';
 
 import icon from './assets/icon.svg';
@@ -21,6 +22,11 @@ interface RenderPropTypes {
 const useStyles = makeStyles(theme => ({
   window: {
     padding: theme.spacing(4),
+  },
+  promoButton: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: theme.spacing(4),
   }
 }));
 
@@ -29,29 +35,63 @@ const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
 
 const headerContents = {
   home: null,
-  space: null,
   'spacevim': null,
-  'emoji': null,
   'material-ui': null,
+  'custom': null,
 };
 
 const pageMap: Record<string, string> = {
   home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md',
-  space: 'https://raw.githubusercontent.com/eug-vs/space/master/docs/environment.md',
   'spacevim': 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md',
-  emoji: 'https://raw.githubusercontent.com/muan/emoji/gh-pages/README.md',
   'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md',
 };
 
 
+const CustomPage: React.FC = () => {
+  const [url, setUrl] = useState<string>('');
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const handleParseUrl = () => {
+    setUrl(inputEl.current?.value || '');
+  }
+
+  return (
+    <>
+      <ContentSection sectionName="Render custom markdown document" level={2} >
+        <p>
+          This should be a link to a valid markdown file. Response should give the file contents.
+          If you copy README file from GitHub, make sure you provide link to raw view.
+        </p>
+        <p>
+          <TextField
+            inputRef={inputEl}
+            variant="outlined"
+            color="secondary"
+            label="Markdown url"
+          />
+        </p>
+        <Button variant="contained" color="secondary" onClick={handleParseUrl} >
+          Render!
+        </Button>
+      </ContentSection>
+      <Markdown url={url} />
+    </>
+  );
+}
+
+
 const App: React.FC = () => {
   const classes = useStyles();
-  const [page, setPage] = useState('home');
+  const [page, setPage] = useState<string>('home');
+
+  const handleGoCustom = () => {
+    setPage('custom');
+  }
 
   const url = pageMap[page];
-  const fileName = url.slice(url.lastIndexOf('/') + 1);
+  const fileName = url?.slice(url.lastIndexOf('/') + 1);
   const metadata = [
-    `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and processed by **BENZIN**! :rocket:`,
+    `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`,
     'Switch between tabs on the header to explore other markdown templates. :recycle: ',
     'Currently **only core features** of markdown function.',
     'Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:',
@@ -76,12 +116,27 @@ const App: React.FC = () => {
       />
       <Window type="primary">
         <div className={classes.window}>
-          <Markdown url={url} />
+          {
+            (page === 'custom') ?
+            <CustomPage />
+            :
+            <Markdown url={url} />
+          }
         </div>
       </Window>
       <Window type="secondary" name="Feature preview">
         <div className={classes.window}>
           <Markdown data={metadata} />
+          <p className={classes.promoButton}>
+            <Button
+              variant="contained"
+              color="primary"
+              size="large"
+              onClick={handleGoCustom}
+            >
+              Render custom document
+            </Button>
+          </p>
         </div>
       </Window>
     </Benzin>
-- 
cgit v1.2.3


From dee4f642cdba418351e7abb178b3cb8dbae2eeac Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Tue, 7 Apr 2020 15:37:27 +0300
Subject: fix: add mising types

---
 src/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index 60453eb..be76722 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -51,7 +51,7 @@ const CustomPage: React.FC = () => {
   const [url, setUrl] = useState<string>('');
   const inputEl = useRef<HTMLInputElement>(null);
 
-  const handleParseUrl = () => {
+  const handleParseUrl = (): void => {
     setUrl(inputEl.current?.value || '');
   }
 
@@ -65,9 +65,7 @@ const CustomPage: React.FC = () => {
         <p>
           <TextField
             inputRef={inputEl}
-            variant="outlined"
-            color="secondary"
-            label="Markdown url"
+            variant="outlined" color="secondary" label="Markdown url"
           />
         </p>
         <Button variant="contained" color="secondary" onClick={handleParseUrl} >
@@ -84,7 +82,7 @@ const App: React.FC = () => {
   const classes = useStyles();
   const [page, setPage] = useState<string>('home');
 
-  const handleGoCustom = () => {
+  const handleGoCustom = (): void => {
     setPage('custom');
   }
 
-- 
cgit v1.2.3


From 4734e2b50ba130cd697dcf58575e9a8477fc49cf Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 9 Apr 2020 16:21:43 +0300
Subject: feat: add live preview page

---
 src/index.tsx | 79 +++++++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 64 insertions(+), 15 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index be76722..e440746 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -38,6 +38,7 @@ const headerContents = {
   'spacevim': null,
   'material-ui': null,
   'custom': null,
+  'live preview': null,
 };
 
 const pageMap: Record<string, string> = {
@@ -64,8 +65,11 @@ const CustomPage: React.FC = () => {
         </p>
         <p>
           <TextField
+            fullWidth
             inputRef={inputEl}
-            variant="outlined" color="secondary" label="Markdown url"
+            variant="outlined"
+            color="secondary"
+            label="Markdown url"
           />
         </p>
         <Button variant="contained" color="secondary" onClick={handleParseUrl} >
@@ -77,18 +81,53 @@ const CustomPage: React.FC = () => {
   );
 }
 
+interface LivePropTypes {
+  setLivePreviewData: (livePreviewData: string) => void;
+}
+
+const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
+  const classes = useStyles();
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const handleRender = (): void => {
+    setLivePreviewData(inputEl.current?.value || '');
+  }
+
+  return (
+    <>
+      <ContentSection sectionName="Markdown live preview" level={2} >
+        <p>
+          Start typing and see your text rendered on the left window! We recommend starting with # Header.
+        </p>
+        <p>
+          <TextField
+            fullWidth
+            multiline
+            inputRef={inputEl}
+            variant="outlined"
+            color="primary"
+            label="Markdown"
+            onChange={handleRender}
+          />
+        </p>
+      </ContentSection>
+    </>
+  )
+}
+
 
 const App: React.FC = () => {
   const classes = useStyles();
   const [page, setPage] = useState<string>('home');
+  const [livePreviewData, setLivePreviewData] = useState<string>('');
 
-  const handleGoCustom = (): void => {
-    setPage('custom');
+  const handleGoLivePreview = (): void => {
+    setPage('live preview');
   }
 
   const url = pageMap[page];
   const fileName = url?.slice(url.lastIndexOf('/') + 1);
-  const metadata = [
+  const info = [
     `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`,
     'Switch between tabs on the header to explore other markdown templates. :recycle: ',
     'Currently **only core features** of markdown function.',
@@ -118,23 +157,33 @@ const App: React.FC = () => {
             (page === 'custom') ?
             <CustomPage />
             :
+            (page === 'live preview') ?
+            <Markdown data={livePreviewData || '# Start typing in the right window!'} />
+            :
             <Markdown url={url} />
           }
         </div>
       </Window>
       <Window type="secondary" name="Feature preview">
         <div className={classes.window}>
-          <Markdown data={metadata} />
-          <p className={classes.promoButton}>
-            <Button
-              variant="contained"
-              color="primary"
-              size="large"
-              onClick={handleGoCustom}
-            >
-              Render custom document
-            </Button>
-          </p>
+          {
+            (page === 'live preview') ?
+            <LivePreviewPage setLivePreviewData={setLivePreviewData} />
+            :
+            <>
+              <Markdown data={info} />
+              <p className={classes.promoButton}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  onClick={handleGoLivePreview}
+                >
+                  Try it yourself!
+                </Button>
+              </p>
+            </>
+          }
         </div>
       </Window>
     </Benzin>
-- 
cgit v1.2.3


From b808381b02097a25eb51b14246f7a239a785b347 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 9 Apr 2020 16:27:03 +0300
Subject: fix: remove unused var

---
 src/index.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index e440746..a9a7012 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -86,7 +86,6 @@ interface LivePropTypes {
 }
 
 const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
-  const classes = useStyles();
   const inputEl = useRef<HTMLInputElement>(null);
 
   const handleRender = (): void => {
-- 
cgit v1.2.3


From 2c5fa193541eb8b74974731d01312f73951bca17 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 18 Apr 2020 20:26:32 +0300
Subject: style: correct some errors with eslint --fix

---
 src/index.tsx | 73 +++++++++++++++++++++++++++++------------------------------
 1 file changed, 36 insertions(+), 37 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index a9a7012..ac7bfc2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -27,23 +27,23 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     justifyContent: 'center',
     marginTop: theme.spacing(4),
-  }
+  },
 }));
 
 
-const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
+const Icon = <img src={icon} width="32px" height="37px" alt="logo" />;
 
 const headerContents = {
   home: null,
-  'spacevim': null,
+  spacevim: null,
   'material-ui': null,
-  'custom': null,
+  custom: null,
   'live preview': null,
 };
 
 const pageMap: Record<string, string> = {
   home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md',
-  'spacevim': 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md',
+  spacevim: 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md',
   'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md',
 };
 
@@ -54,11 +54,11 @@ const CustomPage: React.FC = () => {
 
   const handleParseUrl = (): void => {
     setUrl(inputEl.current?.value || '');
-  }
+  };
 
   return (
     <>
-      <ContentSection sectionName="Render custom markdown document" level={2} >
+      <ContentSection sectionName="Render custom markdown document" level={2}>
         <p>
           This should be a link to a valid markdown file. Response should give the file contents.
           If you copy README file from GitHub, make sure you provide link to raw view.
@@ -72,14 +72,14 @@ const CustomPage: React.FC = () => {
             label="Markdown url"
           />
         </p>
-        <Button variant="contained" color="secondary" onClick={handleParseUrl} >
+        <Button variant="contained" color="secondary" onClick={handleParseUrl}>
           Render!
         </Button>
       </ContentSection>
       <Markdown url={url} />
     </>
   );
-}
+};
 
 interface LivePropTypes {
   setLivePreviewData: (livePreviewData: string) => void;
@@ -90,11 +90,11 @@ const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
 
   const handleRender = (): void => {
     setLivePreviewData(inputEl.current?.value || '');
-  }
+  };
 
   return (
     <>
-      <ContentSection sectionName="Markdown live preview" level={2} >
+      <ContentSection sectionName="Markdown live preview" level={2}>
         <p>
           Start typing and see your text rendered on the left window! We recommend starting with # Header.
         </p>
@@ -111,8 +111,8 @@ const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
         </p>
       </ContentSection>
     </>
-  )
-}
+  );
+};
 
 
 const App: React.FC = () => {
@@ -122,7 +122,7 @@ const App: React.FC = () => {
 
   const handleGoLivePreview = (): void => {
     setPage('live preview');
-  }
+  };
 
   const url = pageMap[page];
   const fileName = url?.slice(url.lastIndexOf('/') + 1);
@@ -153,35 +153,34 @@ const App: React.FC = () => {
       <Window type="primary">
         <div className={classes.window}>
           {
-            (page === 'custom') ?
-            <CustomPage />
-            :
-            (page === 'live preview') ?
-            <Markdown data={livePreviewData || '# Start typing in the right window!'} />
-            :
-            <Markdown url={url} />
+            (page === 'custom')
+              ? <CustomPage />
+              : (page === 'live preview')
+                ? <Markdown data={livePreviewData || '# Start typing in the right window!'} />
+                : <Markdown url={url} />
           }
         </div>
       </Window>
       <Window type="secondary" name="Feature preview">
         <div className={classes.window}>
           {
-            (page === 'live preview') ?
-            <LivePreviewPage setLivePreviewData={setLivePreviewData} />
-            :
-            <>
-              <Markdown data={info} />
-              <p className={classes.promoButton}>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="large"
-                  onClick={handleGoLivePreview}
-                >
-                  Try it yourself!
-                </Button>
-              </p>
-            </>
+            (page === 'live preview')
+              ? <LivePreviewPage setLivePreviewData={setLivePreviewData} />
+              : (
+                <>
+                  <Markdown data={info} />
+                  <p className={classes.promoButton}>
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      size="large"
+                      onClick={handleGoLivePreview}
+                    >
+                      Try it yourself!
+                    </Button>
+                  </p>
+                </>
+              )
           }
         </div>
       </Window>
-- 
cgit v1.2.3


From f4f8689631d247f0be93c2f32791c9ba02ecb64e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 18 Apr 2020 21:01:34 +0300
Subject: style: fix index.tsx

---
 src/index.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index ac7bfc2..c5e1989 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -96,7 +96,8 @@ const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
     <>
       <ContentSection sectionName="Markdown live preview" level={2}>
         <p>
-          Start typing and see your text rendered on the left window! We recommend starting with # Header.
+          Start typing and see your text rendered on the left window!
+          We recommend starting with # Header.
         </p>
         <p>
           <TextField
@@ -127,6 +128,7 @@ const App: React.FC = () => {
   const url = pageMap[page];
   const fileName = url?.slice(url.lastIndexOf('/') + 1);
   const info = [
+    /* eslint-disable max-len */
     `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`,
     'Switch between tabs on the header to explore other markdown templates. :recycle: ',
     'Currently **only core features** of markdown function.',
@@ -137,8 +139,15 @@ const App: React.FC = () => {
     'const data = \'# Header\\nHello, *world!*\';',
     'ReactDOM.render(<Markdown data={data}/>, document.getElementById(\'root\'));',
     '```',
+    /* eslint-enable max-len */
   ].join('\n');
 
+  let primaryWindowContent = <Markdown url={url} />;
+  if (page === 'custom') primaryWindowContent = <CustomPage />;
+  else if (page === 'live preview') {
+    primaryWindowContent = <Markdown data={livePreviewData || '# Start typing in the right window!'} />;
+  }
+
   return (
     <Benzin>
       <Header
@@ -151,15 +160,7 @@ const App: React.FC = () => {
         setPage={setPage}
       />
       <Window type="primary">
-        <div className={classes.window}>
-          {
-            (page === 'custom')
-              ? <CustomPage />
-              : (page === 'live preview')
-                ? <Markdown data={livePreviewData || '# Start typing in the right window!'} />
-                : <Markdown url={url} />
-          }
-        </div>
+        <div className={classes.window}>{primaryWindowContent}</div>
       </Window>
       <Window type="secondary" name="Feature preview">
         <div className={classes.window}>
-- 
cgit v1.2.3