Merge pull request #52 from jackyzha0/refactor-react

Refactor to use functional components instead of class components

2 files changed, 59 insertions, 72 deletions

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