refactor renderers

5 files changed, 95 insertions, 120 deletions

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index ae95dcb..0a5fb8b 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -38,7 +38,7 @@ const GetRawWithParam = () => {
   );
 }
 
-function App() {
+const App = () => {
   return (
     <Router>
       <Switch>
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 117bb18..6bff4ae 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -52,7 +52,7 @@ class ViewPaste extends React.Component {
         this.setState({ isRenderMode: !this.state.isRenderMode });
     }
 
-    validatePass(pass) {
+    validatePass(pass, onErrorCallBack) {
         FetchPasswordPaste(this.props.hash, pass)
             .then((response) => {
                 this.setState({ validPass: true })
@@ -62,19 +62,17 @@ class ViewPaste extends React.Component {
 
                 // 401 unauth (bad pass)
                 if (resp.status === 401) {
-                    this.PasswordModal.current
-                        .ErrorLabel.current
-                        .showMessage("incorrect pass")
+                    onErrorCallBack("incorrect pass")
                     return
                 }
 
                 // otherwise, just log it lmao
                 if (resp !== undefined) {
                     const errTxt = `${resp.status}: ${resp.data}`
-                    this.ErrorLabel.current.showMessage(errTxt)
+                    onErrorCallBack(errTxt)
                 } else {
                     // some weird err (e.g. network)
-                    this.ErrorLabel.current.showMessage(error)
+                    onErrorCallBack(error)
                 }
             });
     }
diff --git a/frontend/src/components/modals/PasswordModal.js b/frontend/src/components/modals/PasswordModal.js
index 527fc54..e250e84 100644
--- a/frontend/src/components/modals/PasswordModal.js
+++ b/frontend/src/components/modals/PasswordModal.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import Modal from 'react-modal';
 import { PassInput } from '../Inputs'
 import { RightPad, LeftPad, ModalHeader, Padding } from './shared'
@@ -15,49 +15,39 @@ const modalStyles = {
     }
 };
 
-class PasswordModal extends React.Component {
+const PasswordModal = (props) => {
+    const ErrorLabel = useRef();
+    Modal.setAppElement('body');
 
-    componentWillMount() {
-        Modal.setAppElement('body');
+    function submitPassword(e) {
+        e.preventDefault();
+        const password = props.value
+        props.validateCallback(password, ErrorLabel.current.showMessage)
     }
 
-    constructor(props) {
-        super(props);
-        this.submitPassword = this.submitPassword.bind(this);
-        this.ErrorLabel = React.createRef();
-    }
-
-    submitPassword(event) {
-        const password = this.props.value
-        this.props.validateCallback(password)
-        event.preventDefault();
-    }
-
-    render() {
-        return(
-            <Modal
-                isOpen={this.props.hasPass && !this.props.validPass}
-                style={modalStyles}
-                contentLabel="enter paste password"
-            >
-                <form onSubmit={this.submitPassword}>
-                    <LeftPad>
-                        <ModalHeader><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</ModalHeader>
-                    </LeftPad>
-                    <RightPad>
-                        <PassInput
-                            value={this.props.value}
-                            onChange={this.props.onChange} />
-                    </RightPad>
-                    <LeftPad>
-                        <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
-                        <Padding />
-                        <Error ref={this.ErrorLabel} />
-                    </LeftPad>
-                </form>
-            </Modal>
-        );
-    }
+    return(
+        <Modal
+            isOpen={props.hasPass && !props.validPass}
+            style={modalStyles}
+            contentLabel="enter paste password"
+        >
+            <form onSubmit={submitPassword}>
+                <LeftPad>
+                    <ModalHeader><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</ModalHeader>
+                </LeftPad>
+                <RightPad>
+                    <PassInput
+                        value={props.value}
+                        onChange={props.onChange} />
+                </RightPad>
+                <LeftPad>
+                    <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
+                    <Padding />
+                    <Error ref={ErrorLabel} />
+                </LeftPad>
+            </form>
+        </Modal>
+    );
 }
 
 export default PasswordModal
\ No newline at end of file
diff --git a/frontend/src/components/renderers/Latex.js b/frontend/src/components/renderers/Latex.js
index dcb9ea3..fd3d4e2 100644
--- a/frontend/src/components/renderers/Latex.js
+++ b/frontend/src/components/renderers/Latex.js
@@ -8,37 +8,35 @@ const StyledInlineLatex = styled.div`
     margin-bottom: 1em;
 `
 
-class Latex extends React.Component {
-    render() {
-        // split by \begin{...} and \end{...} flags
-        const els = this.props.content.split(/(\\begin\{.*\}[\s\S]*?\\end\{.*\})/gm).map(line => {
-            // line doesnt start with \begin{...}, safe to split on \\
-            if (!line.match(/^(\\begin\{.*\})/)) {
-                return line.split("\\\\")
-            } else {
-                return line
-            }
-        }).flat()
-
-        // if <=1 lines, just render block
-        if (els.length <= 1) {
-            return (
-                <BlockMath>
-                    {this.props.content}
-                </BlockMath>
-            );
+const Latex = (props) => {
+    // split by \begin{...} and \end{...} flags
+    const els = props.content.split(/(\\begin\{.*\}[\s\S]*?\\end\{.*\})/gm).map(line => {
+        // line doesnt start with \begin{...}, safe to split on \\
+        if (!line.match(/^(\\begin\{.*\})/)) {
+            return line.split("\\\\")
         } else {
-            // new inline block for every line
-            const blocks = els.map(line =>
-                <StyledInlineLatex>
-                    <InlineMath>
-                        {line}
-                    </InlineMath>
-                </StyledInlineLatex>
-            )
-
-            return blocks;
+            return line
         }
+    }).flat()
+
+    // if <=1 lines, just render block
+    if (els.length <= 1) {
+        return (
+            <BlockMath>
+                {props.content}
+            </BlockMath>
+        );
+    } else {
+        // new inline block for every line
+        const blocks = els.map(line =>
+            <StyledInlineLatex>
+                <InlineMath>
+                    {line}
+                </InlineMath>
+            </StyledInlineLatex>
+        )
+
+        return blocks;
     }
 }
 
diff --git a/frontend/src/components/renderers/Raw.js b/frontend/src/components/renderers/Raw.js
index 7f8e7c1..d4dc830 100644
--- a/frontend/src/components/renderers/Raw.js
+++ b/frontend/src/components/renderers/Raw.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components'
 import { FetchPaste } from '../../helpers/httpHelper'
 
@@ -10,48 +10,37 @@ const RawText = styled.pre`
     padding: 0 1em;
 `
 
-class Raw extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            content: '',
-        };
-    }
-
-    render() {
-        return (
-            <RawText>
-                {this.state.content}
-            </RawText>
-        );
-    }
-
-    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 })
-            })
-    }
+const Raw = ({hash}) => {
+    const [content, setContent] = useState('');
+
+    useEffect(() => {
+        FetchPaste(hash)
+        .then((response) => {
+            const data = response.data
+            setContent(data.content)
+        }).catch((error) => {
+            const resp = error.response
+
+            // catch 401 unauth (password protected)
+            if (resp.status === 401) {
+                setContent('err: password protected')
+                return
+            }
+
+            // some weird err
+            if (resp !== undefined) {
+                const errTxt = `${resp.statusText}: ${resp.data}`
+                setContent(errTxt)
+                return
+            }
+
+            // some weird err (e.g. network)
+            setContent(error)
+    })}, [hash])
+
+    return (
+        <RawText>{content}</RawText>
+    );
 }
 
 export default Raw
\ No newline at end of file