From 1519c913241669b532d13351331e7a8d512e1438 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 17 Jul 2020 22:29:38 -0700
Subject: refactor renderers

---
 frontend/src/components/ViewPaste.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

(limited to 'frontend/src/components/ViewPaste.js')

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)
                 }
             });
     }
-- 
cgit v1.2.3


From 4916fec43a8fae28c7d0c230505d5c4c2ac2f026 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 18 Jul 2020 15:34:26 -0700
Subject: refactor viewpaste and fixed button height

---
 frontend/src/components/ViewPaste.js | 204 +++++++++++++++--------------------
 1 file changed, 86 insertions(+), 118 deletions(-)

(limited to 'frontend/src/components/ViewPaste.js')

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
-- 
cgit v1.2.3