Merge pull request #52 from jackyzha0/refactor-react

Refactor to use functional components instead of class components

1 files changed, 32 insertions, 43 deletions

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