From 12c995b6bd501be73b60e3bae6c46c59cebef6c2 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sun, 11 Apr 2021 12:30:02 -0700
Subject: base resolve paste and fetch paste refactor

---
 frontend/src/components/Common/Button.js |  2 +-
 frontend/src/http/resolvePaste.js        | 43 ++++++++++++++++++++++++++++++++
 frontend/src/http/useFetchPaste.js       | 43 --------------------------------
 frontend/src/pages/[hash].js             | 40 +++++++++++++++++++++--------
 frontend/src/pages/raw/[hash].js         |  2 +-
 5 files changed, 75 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/http/resolvePaste.js
 delete mode 100644 frontend/src/http/useFetchPaste.js

(limited to 'frontend')

diff --git a/frontend/src/components/Common/Button.js b/frontend/src/components/Common/Button.js
index 59e148b..d853d3a 100644
--- a/frontend/src/components/Common/Button.js
+++ b/frontend/src/components/Common/Button.js
@@ -6,7 +6,7 @@ const Base = css`
   ${Rounded}
   ${ButtonLike}
   margin-right: 2em;
-  height: calc(16px + 1.6em);
+  height: calc(16px + 1.4em);
   cursor: pointer;
 `
 
diff --git a/frontend/src/http/resolvePaste.js b/frontend/src/http/resolvePaste.js
new file mode 100644
index 0000000..8d40cbe
--- /dev/null
+++ b/frontend/src/http/resolvePaste.js
@@ -0,0 +1,43 @@
+import {useEffect, useState} from 'react'
+import {fetchPaste, fmtDateStr} from './shared'
+import {LANGS} from "../components/renderers/Code";
+
+const resolvePaste = (id, password = "") => {
+  const response = {
+    data: {
+      title: '',
+      content: '',
+      language: LANGS.detect,
+      expiry: '',
+    },
+    unauthorized: false,
+    error: '',
+  }
+  return fetchPaste(id, password)
+    .then(resp => {
+      const data = resp.data
+      response.data = {
+        ...data,
+        expiry: fmtDateStr(data.expiry)
+      }
+      return response
+    })
+    .catch(error => {
+      const resp = error.response
+      if (!resp) {
+        response.error = 'network error'
+        return
+      }
+
+      if (resp.status === 401) {
+        response.error = 'unauthorized'
+        response.unauthorized = true
+        return
+      }
+
+      response.error = `${resp.status}: ${resp.data}`
+      return response
+    })
+}
+
+export default resolvePaste
\ No newline at end of file
diff --git a/frontend/src/http/useFetchPaste.js b/frontend/src/http/useFetchPaste.js
deleted file mode 100644
index 8d40cbe..0000000
--- a/frontend/src/http/useFetchPaste.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import {useEffect, useState} from 'react'
-import {fetchPaste, fmtDateStr} from './shared'
-import {LANGS} from "../components/renderers/Code";
-
-const resolvePaste = (id, password = "") => {
-  const response = {
-    data: {
-      title: '',
-      content: '',
-      language: LANGS.detect,
-      expiry: '',
-    },
-    unauthorized: false,
-    error: '',
-  }
-  return fetchPaste(id, password)
-    .then(resp => {
-      const data = resp.data
-      response.data = {
-        ...data,
-        expiry: fmtDateStr(data.expiry)
-      }
-      return response
-    })
-    .catch(error => {
-      const resp = error.response
-      if (!resp) {
-        response.error = 'network error'
-        return
-      }
-
-      if (resp.status === 401) {
-        response.error = 'unauthorized'
-        response.unauthorized = true
-        return
-      }
-
-      response.error = `${resp.status}: ${resp.data}`
-      return response
-    })
-}
-
-export default resolvePaste
\ No newline at end of file
diff --git a/frontend/src/pages/[hash].js b/frontend/src/pages/[hash].js
index 5a04e31..bd7fc00 100644
--- a/frontend/src/pages/[hash].js
+++ b/frontend/src/pages/[hash].js
@@ -5,20 +5,40 @@ import CodeRenderer from '../components/renderers/Code'
 import PasteInfo from '../components/PasteInfo';
 import PasswordModal from '../components/modals/PasswordModal'
 import RenderDispatch from '../components/renderers/RenderDispatch'
-import useFetchPaste from "../http/useFetchPaste";
 import {Watermark} from "../components/Watermark";
-import ThemeProvider from "../theme/ThemeProvider";
+import { useRouter } from 'next/router'
+import resolvePaste from "../http/resolvePaste";
 
-const ViewPaste = (props) => {
-  const { err, requiresAuth, validPass, getWithPassword, result } = useFetchPaste(props.hash)
-  const {content, language, expiry, title} = result ?? {}
+export async function getServerSideProps(ctx) {
+  const data = await resolvePaste(ctx.params.hash)
+
+  // Pass data to the page via props
+  return { props: { ...data } }
+}
+
+const ViewPaste = ({data, unauthorized, error}) => {
+  const router = useRouter()
+  const { hash } = router.query
+  const [clientData, setClientData] = useState(data);
   const [theme, setTheme] = useState('atom');
   const [isRenderMode, setIsRenderMode] = useState(false);
   const [enteredPass, setEnteredPass] = useState('');
+  const [correctPass, setCorrectPass] = useState(!unauthorized);
   const ErrorLabelRef = useRef(null);
 
-  if (err) {
-    ErrorLabelRef.current.showMessage(err, -1)
+  const {content, language, expiry, title} = clientData;
+
+  if (error) {
+    ErrorLabelRef.current.showMessage(error, -1)
+  }
+
+  const getWithPassword = (password, errorCallback) => {
+    resolvePaste(hash, password)
+      .then(resp => {
+        setCorrectPass(true)
+        setClientData(resp.data)
+      })
+      .catch(e => errorCallback(e.response.data))
   }
 
   useEffect(() => {
@@ -39,8 +59,8 @@ const ViewPaste = (props) => {
   return (
     <div>
       <PasswordModal
-        hasPass={requiresAuth}
-        validPass={validPass}
+        hasPass={unauthorized}
+        validPass={correctPass}
         value={enteredPass}
         onChange={(e) => setEnteredPass(e.target.value)}
         validateCallback={getWithPassword} />
@@ -51,7 +71,7 @@ const ViewPaste = (props) => {
         readOnly />
       {getDisplay()}
       <PasteInfo
-        hash={props.hash}
+        hash={hash}
         lang={language}
         theme={theme}
         expiry={expiry}
diff --git a/frontend/src/pages/raw/[hash].js b/frontend/src/pages/raw/[hash].js
index d0a66a7..a100b4b 100644
--- a/frontend/src/pages/raw/[hash].js
+++ b/frontend/src/pages/raw/[hash].js
@@ -1,5 +1,5 @@
 import React from 'react';
-import resolvePaste from "../../http/useFetchPaste";
+import resolvePaste from "../../http/resolvePaste";
 import {CodeLike} from "../../components/Common/mixins";
 import styled from 'styled-components'
 
-- 
cgit v1.2.3