refactor viewpaste and fixed button height

3 files changed, 89 insertions, 120 deletions

diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index 8669b20..bab7e23 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -16,7 +16,8 @@ const StyledDiv = styled.div`
 const Button = styled.button`
     margin-right: 0 !important;
     margin-left: 2em !important;
-    height: calc(16px + 1.6em + 2px);
+    height: calc(16px + 1.6em);
+    margin-top: 1.6em !important;
 `
 
 const SpacedText = styled.span`
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 6bff4ae..ebdc950 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import Error from './Err';
 import { TitleInput } from './Inputs';
 import CodeRenderer from './renderers/Code'
@@ -8,55 +8,32 @@ import { FetchPaste, FetchPasswordPaste } from '../helpers/httpHelper'
 import { LANGS } from './renderers/Code'
 import RenderDispatch from './renderers/RenderDispatch'
 
-class ViewPaste extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            title: 'untitled paste',
-            content: '',
-            hasPass: false,
-            enteredPass: '',
-            validPass: false,
-            expiry: 'no expiry',
-            error: '',
-            passError: '',
-            theme: 'atom',
-            inRenderMode: false,
-            language: LANGS.raw,
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.typedPass = this.typedPass.bind(this);
-        this.toggleRender = this.toggleRender.bind(this);
-        this.validatePass = this.validatePass.bind(this);
-        this.ErrorLabel = React.createRef();
-        this.PasswordModal = React.createRef();
-        this.componentRef = React.createRef();
-    }
-
-    handleChange(event) {
-        const target = event.target;
-        const name = target.name;
-
-        this.setState({
-            [name]: target.value
-        });
-    }
-
-    typedPass(event) {
-        this.setState({ enteredPass: event.target.value });
-    }
-
-    toggleRender() {
-        this.setState({ isRenderMode: !this.state.isRenderMode });
-    }
+function fmtDateStr(dateString) {
+    const d = new Date(dateString)
+    const options = { hour: '2-digit', minute: '2-digit', year: 'numeric', month: 'long', day: 'numeric' }
+    return d.toLocaleDateString("en-US", options).toLocaleLowerCase()
+}
 
-    validatePass(pass, onErrorCallBack) {
-        FetchPasswordPaste(this.props.hash, pass)
+const ViewPaste = (props) => {
+    const [title, setTitle] = useState('untitled paste');
+    const [content, setContent] = useState('');
+    const [hasPass, setHasPass] = useState(false);
+    const [enteredPass, setEnteredPass] = useState('');
+    const [validPass, setValidPass] = useState(false);
+    const [expiry, setExpiry] = useState('');
+    const [theme, setTheme] = useState('atom');
+    const [isRenderMode, setIsRenderMode] = useState(false);
+    const [language, setLanguage] = useState(LANGS.raw);
+
+    const ErrorLabelRef = useRef(null);
+    const PasswordModalRef = useRef(null);
+    const ComponentRef = useRef(null);
+
+    function validatePass(pass, onErrorCallBack) {
+        FetchPasswordPaste(props.hash, pass)
             .then((response) => {
-                this.setState({ validPass: true })
-                this.setStateFromData(response.data)
+                setValidPass(true)
+                setStateFromData(response.data)
             }).catch((error) => {
                 const resp = error.response
 
@@ -77,102 +54,93 @@ class ViewPaste extends React.Component {
             });
     }
 
-    render() {
-
-        var display
-        if (this.state.isRenderMode) {
-            display = 
-                <RenderDispatch
-                    language={this.state.language}
-                    content={this.state.content}
-                    ref={this.componentRef}
-                />
-        } else {
-            display = 
-            <CodeRenderer
-                content={this.state.content}
-                lang={this.state.language}
-                theme={this.state.theme}
-                ref={this.componentRef}
-                id="pasteInput" />
-        }
-
-        return (
-            <div>
-                <PasswordModal
-                    ref={this.PasswordModal}
-                    hasPass={this.state.hasPass}
-                    validPass={this.state.validPass}
-                    value={this.state.enteredPass}
-                    onChange={this.typedPass}
-                    validateCallback={this.validatePass} />
-                <TitleInput
-                    value={this.state.title}
-                    id="titleInput"
-                    readOnly />
-                {display}
-                <PasteInfo
-                    hash={this.props.hash}
-                    lang={this.state.language}
-                    theme={this.state.theme}
-                    expiry={this.state.expiry}
-                    toggleRenderCallback={this.toggleRender}
-                    isRenderMode={this.state.isRenderMode}
-                    onChange={this.handleChange}
-                    compref={this.componentRef}
-                    err={<Error ref={this.ErrorLabel} />}
-                />
-            </div>
-        );
-    }
-
-    fmtDateStr(dateString) {
-        const d = new Date(dateString)
-        const options = { hour: '2-digit', minute: '2-digit', year: 'numeric', month: 'long', day: 'numeric' }
-        return d.toLocaleDateString("en-US", options).toLocaleLowerCase()
-    }
-
-    setStateFromData(data) {
-        console.log(data)
-        this.setState({
-            title: data.title,
-            content: data.content,
-            language: data.language,
-            expiry: this.fmtDateStr(data.expiry),
-        })
+    function setStateFromData(data) {
+        setTitle(data.title)
+        setContent(data.content)
+        setLanguage(data.language)
+        setExpiry(fmtDateStr(data.expiry))
     }
 
-    componentDidMount() {
-        FetchPaste(this.props.hash)
+    useEffect(() => {
+        FetchPaste(props.hash)
             .then((response) => {
                 const data = response.data
-                this.setStateFromData(data)
+                setStateFromData(data)
             }).catch((error) => {
                 const resp = error.response
 
                 // network err
                 if (!resp) {
-                    this.ErrorLabel.current.showMessage(error)
+                    ErrorLabelRef.current.showMessage(error)
                     return
                 }
 
                 // catch 401 unauth (password protected)
                 if (resp.status === 401) {
-                    this.setState({hasPass: true})
+                    setHasPass(true)
                     return
                 }
 
                 // some weird err
                 if (resp !== undefined) {
                     const errTxt = `${resp.status}: ${resp.data}`
-                    this.ErrorLabel.current.showMessage(errTxt, -1)
+                    ErrorLabelRef.current.showMessage(errTxt, -1)
                     return
                 }
 
                 // some weird err (e.g. network)
-                this.ErrorLabel.current.showMessage(error, -1)
+                ErrorLabelRef.current.showMessage(error, -1)
             })
+    }, [props.hash])
+
+    function getDisplay() {
+        if (isRenderMode) {
+            return (
+                <RenderDispatch
+                    language={language}
+                    content={content}
+                    ref={ComponentRef}
+                />
+            )
+        } else {
+            return (
+                <CodeRenderer
+                    content={content}
+                    lang={language}
+                    theme={theme}
+                    ref={ComponentRef}
+                    id="pasteInput" />
+            )
+        }
     }
+
+    return (
+        <div>
+            <PasswordModal
+                ref={PasswordModalRef}
+                hasPass={hasPass}
+                validPass={validPass}
+                value={enteredPass}
+                onChange={(e) => setEnteredPass(e.target.value)}
+                validateCallback={validatePass} />
+            <TitleInput
+                value={title}
+                id="titleInput"
+                readOnly />
+            {getDisplay()}
+            <PasteInfo
+                hash={props.hash}
+                lang={language}
+                theme={theme}
+                expiry={expiry}
+                toggleRenderCallback={() => setIsRenderMode(!isRenderMode)}
+                isRenderMode={isRenderMode}
+                onChange={(e) => setTheme(e.target.value)}
+                compref={ComponentRef}
+                err={<Error ref={ErrorLabelRef} />}
+            />
+        </div>
+    );
 }
 
 export default ViewPaste
\ No newline at end of file
diff --git a/frontend/src/components/modals/PasswordModal.js b/frontend/src/components/modals/PasswordModal.js
index e250e84..bf373cc 100644
--- a/frontend/src/components/modals/PasswordModal.js
+++ b/frontend/src/components/modals/PasswordModal.js
@@ -16,7 +16,7 @@ const modalStyles = {
 };
 
 const PasswordModal = (props) => {
-    const ErrorLabel = useRef();
+    const ErrorLabel = useRef(null);
     Modal.setAppElement('body');
 
     function submitPassword(e) {