From 0b37c8b715b8f5ebea4472c9e7d6104ca8adbdc8 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 15 May 2020 22:11:13 -0700
Subject: add view raw button

---
 frontend/src/components/App.js           | 63 ++++++++++++++++++++------------
 frontend/src/components/PasteInfo.js     | 25 ++++++++++++-
 frontend/src/components/ViewPaste.js     |  1 +
 frontend/src/components/renderers/Raw.js | 56 ++++++++++++++++++++++++++++
 4 files changed, 120 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/renderers/Raw.js

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 3b147db..ae95dcb 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -10,6 +10,7 @@ import {
   Link,
   useParams
 } from "react-router-dom";
+import Raw from './renderers/Raw'
 
 const SpacedTitle = styled.div`
     margin-top: 10vh
@@ -29,35 +30,49 @@ const GetPasteWithParam = () => {
   );
 }
 
+const GetRawWithParam = () => {
+  let { hash } = useParams();
+
+  return (
+    <Raw hash={hash} />
+  );
+}
+
 function App() {
   return (
     <Router>
-      <div className="lt-content-column">
-        <SpacedTitle>
-          <nav>
-            <h1 className="mainLogo">
-              <span role="img" aria-label="clipboard">📋&nbsp;</span>
-              <Link to="/">ctrl-v</Link>
-            </h1>
-            <Desc />
-          </nav>
-        </SpacedTitle>
-
-        <main id="appElement">
-          <Switch>
-            <Route path="/:hash" 
-              children={<GetPasteWithParam />} 
-            />
-            <Route path="/">
-              <NewPaste />
-            </Route>
-          </Switch>
-        </main>
-
-        <Footer />
-      </div>
+      <Switch>
+        <Route path="/raw/:hash"
+          children={<GetRawWithParam />}
+        />
+        <div className="lt-content-column">
+          <SpacedTitle>
+            <nav>
+              <h1 className="mainLogo">
+                <span role="img" aria-label="clipboard">📋&nbsp;</span>
+                <Link to="/">ctrl-v</Link>
+              </h1>
+              <Desc />
+            </nav>
+          </SpacedTitle>
+
+          <main id="appElement">
+            <Switch>
+              <Route path="/:hash"
+                children={<GetPasteWithParam />}
+              />
+              <Route path="/">
+                <NewPaste />
+              </Route>
+            </Switch>
+          </main>
+
+          <Footer />
+        </div>
+      </Switch>
     </Router>
   );
 }
 
+
 export default App;
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index dabbb94..5217901 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components'
+import { useHistory } from 'react-router-dom';
 import { LangInput, ThemeInput } from './Inputs'
 
 const Bold = styled.span`
@@ -7,10 +8,17 @@ const Bold = styled.span`
 `
 
 const StyledDiv = styled.div`
-    margin: 2em 0;
     display: inline-block;
 `
 
+const Button = styled.button`
+    margin-left: 0 !important;
+`
+
+const ButtonRow = styled.div`
+    display: inline;
+`
+
 const Flex = styled.div`
     float: right;
     display: flex;
@@ -19,6 +27,12 @@ const Flex = styled.div`
 `
 
 const PasteInfo = (props) => {
+    const history = useHistory();
+    const redir = () => {
+        const redirUrl = `/raw/${props.hash}`
+        history.push(redirUrl);
+    }
+
     return (
         <div>
             <Flex>
@@ -32,6 +46,15 @@ const PasteInfo = (props) => {
                     id="themeInput" />
             </Flex>
             <StyledDiv>
+                <ButtonRow>
+                    <Button 
+                        className="lt-shadow lt-hover" 
+                        type="button"
+                        onClick={redir}
+                        >
+                        view raw
+                    </Button>
+                </ButtonRow>
                 <Bold>expires:&nbsp;</Bold>{props.expiry}
             </StyledDiv>
         </div>
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 491c440..0b2ebe7 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -92,6 +92,7 @@ class ViewPaste extends React.Component {
                     theme={this.state.theme}
                     id="pasteInput" />
                 <PasteInfo
+                    hash={this.props.hash}
                     lang={this.state.language}
                     theme={this.state.theme}
                     onChange={this.handleChange}
diff --git a/frontend/src/components/renderers/Raw.js b/frontend/src/components/renderers/Raw.js
new file mode 100644
index 0000000..a8d0e31
--- /dev/null
+++ b/frontend/src/components/renderers/Raw.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
-- 
cgit v1.2.3