From ed65c8b61d2c7955998f877ee501ef84a1473626 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sun, 11 Apr 2021 12:42:42 -0700
Subject: refactor error handling in pasteinfo

---
 frontend/src/components/Err.js       |  2 +-
 frontend/src/components/PasteInfo.js | 34 +++++++++++++++++++---------------
 frontend/src/pages/[hash].js         | 10 +++-------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Err.js b/frontend/src/components/Err.js
index c87f6a8..fae0e0d 100644
--- a/frontend/src/components/Err.js
+++ b/frontend/src/components/Err.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components'
 
-const ErrMsg = styled.p`
+export const ErrMsg = styled.p`
     display: inline;
     font-weight: 700;
     color: #ff3333;
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index 2f912fb..1ef69cc 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { Theme } from './Inputs'
 import {Button} from "./Common/Button";
 import {useRouter} from "next/router";
+import {ErrMsg} from "./Err";
 
 const Bold = styled.span`
     font-weight: 700
@@ -27,21 +28,21 @@ const Flex = styled.div`
     flex-direction: row;
 `
 
-const PasteInfo = (props) => {
+const PasteInfo = ({hash, lang, theme, expiry, toggleRenderCallback, isRenderMode, onChange, err}) => {
     const router = useRouter()
     const redirRaw = () => {
-        const redirUrl = `/raw/${props.hash}`
+        const redirUrl = `/raw/${hash}`
         router.push(redirUrl);
     }
 
     const renderable = () => {
-        const buttonTxt = props.isRenderMode ? 'text' : 'render'
-        if (props.lang === 'latex' || props.lang === 'markdown') {
+        const buttonTxt = isRenderMode ? 'text' : 'render'
+        if (lang === 'latex' || lang === 'markdown') {
             return (
                 <ShiftedButton
                     secondary
                     type="button"
-                    onClick={props.toggleRenderCallback}>
+                    onClick={toggleRenderCallback}>
                     {buttonTxt}
                 </ShiftedButton>
             );
@@ -59,20 +60,23 @@ const PasteInfo = (props) => {
                 </ShiftedButton>
                 {renderable()}
                 <Theme
-                    value={props.theme}
-                    onChange={props.onChange}
+                    value={theme}
+                    onChange={onChange}
                     id="themeInput" />
             </Flex>
             <StyledDiv>
-                <SpacedText>
-                    <Bold>language:&nbsp;</Bold>{props.lang}
-                </SpacedText>
-                <SpacedText>
-                    <Bold>expires:&nbsp;</Bold>{props.expiry}
-                </SpacedText>
+                {err ?
+                  <ErrMsg active> {err} </ErrMsg> :
+                  <>
+                    <SpacedText>
+                      <Bold>language:&nbsp;</Bold>{lang}
+                    </SpacedText>
+                    <SpacedText>
+                      <Bold>expires:&nbsp;</Bold>{expiry}
+                    </SpacedText>
+                  </>
+                }
             </StyledDiv>
-            <br />
-            {props.err}
         </div>
     );
 }
diff --git a/frontend/src/pages/[hash].js b/frontend/src/pages/[hash].js
index bd7fc00..6d65f3e 100644
--- a/frontend/src/pages/[hash].js
+++ b/frontend/src/pages/[hash].js
@@ -1,5 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
-import Error from '../components/Err';
+import React, { useEffect, useState } from 'react';
 import { Text } from '../components/Inputs';
 import CodeRenderer from '../components/renderers/Code'
 import PasteInfo from '../components/PasteInfo';
@@ -24,13 +23,10 @@ const ViewPaste = ({data, unauthorized, error}) => {
   const [isRenderMode, setIsRenderMode] = useState(false);
   const [enteredPass, setEnteredPass] = useState('');
   const [correctPass, setCorrectPass] = useState(!unauthorized);
-  const ErrorLabelRef = useRef(null);
 
   const {content, language, expiry, title} = clientData;
 
-  if (error) {
-    ErrorLabelRef.current.showMessage(error, -1)
-  }
+
 
   const getWithPassword = (password, errorCallback) => {
     resolvePaste(hash, password)
@@ -78,7 +74,7 @@ const ViewPaste = ({data, unauthorized, error}) => {
         toggleRenderCallback={() => setIsRenderMode(!isRenderMode)}
         isRenderMode={isRenderMode}
         onChange={(e) => setTheme(e.target.value)}
-        err={<Error ref={ErrorLabelRef} />}
+        err={error}
       />
       <Watermark/>
     </div>
-- 
cgit v1.2.3