switch to styled components for raw renderer

4 files changed, 80 insertions, 10 deletions

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index ae95dcb..eb63ed9 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -11,6 +11,7 @@ import {
   useParams
 } from "react-router-dom";
 import Raw from './renderers/Raw'
+import Dispatch from './renderers/Raw'
 
 const SpacedTitle = styled.div`
     margin-top: 10vh
@@ -38,6 +39,15 @@ const GetRawWithParam = () => {
   );
 }
 
+const RenderWithParam = () => {
+  let { hash } = useParams();
+  console.log(hash)
+
+  return (
+    <Dispatch hash={hash} />
+  );
+}
+
 function App() {
   return (
     <Router>
@@ -58,6 +68,9 @@ function App() {
 
           <main id="appElement">
             <Switch>
+              <Route path="/render/:hash"
+                children={<RenderWithParam />}
+              />
               <Route path="/:hash"
                 children={<GetPasteWithParam />}
               />
diff --git a/frontend/src/components/renderers/Dispatch.js b/frontend/src/components/renderers/Dispatch.js
new file mode 100644
index 0000000..fc80a47
--- /dev/null
+++ b/frontend/src/components/renderers/Dispatch.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { FetchPaste } from '../../helpers/httpHelper'
+
+class Raw extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            content: '',
+        };
+    }
+
+    render() {
+        const styles = {
+            wordWrap: "break-word",
+            whiteSpace: "pre-wrap",
+            lineHeight: "initial",
+            fontSize: "0.8em",
+            padding: "0 1em"
+        }
+
+        return (
+            <pre style={styles}>
+                {this.state.content}
+            </pre>
+        );
+    }
+
+    componentDidMount() {
+        FetchPaste(this.props.hash)
+            .then((response) => {
+                const data = response.data
+                this.setState({ content: data.content })
+            }).catch((error) => {
+                const resp = error.response
+
+                // catch 401 unauth (password protected)
+                if (resp.status === 401) {
+                    this.setState({ content: 'err: password protected' })
+                    return
+                }
+
+                // some weird err
+                if (resp !== undefined) {
+                    const errTxt = `${resp.statusText}: ${resp.data}`
+                    this.setState({ content: errTxt })
+                    return
+                }
+
+                // some weird err (e.g. network)
+                this.setState({ content: error })
+            })
+    }
+}
+
+export default Raw
\ No newline at end of file
diff --git a/frontend/src/components/renderers/Latex.js b/frontend/src/components/renderers/Latex.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/frontend/src/components/renderers/Latex.js
diff --git a/frontend/src/components/renderers/Raw.js b/frontend/src/components/renderers/Raw.js
index a8d0e31..7f8e7c1 100644
--- a/frontend/src/components/renderers/Raw.js
+++ b/frontend/src/components/renderers/Raw.js
@@ -1,6 +1,15 @@
 import React from 'react';
+import styled from 'styled-components'
 import { FetchPaste } from '../../helpers/httpHelper'
 
+const RawText = styled.pre`
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    line-height: initial;
+    font-size: 0.8em;
+    padding: 0 1em;
+`
+
 class Raw extends React.Component {
 
     constructor(props) {
@@ -11,18 +20,10 @@ class Raw extends React.Component {
     }
 
     render() {
-        const styles = {
-            wordWrap: "break-word",
-            whiteSpace: "pre-wrap",
-            lineHeight: "initial", 
-            fontSize: "0.8em",
-            padding: "0 1em"
-        }
-
         return (
-            <pre style={styles}>
+            <RawText>
                 {this.state.content}
-            </pre>
+            </RawText>
         );
     }