diff options
| author | jackyzha0 <[email protected]> | 2021-04-11 10:27:27 -0700 |
|---|---|---|
| committer | jackyzha0 <[email protected]> | 2021-04-11 10:27:27 -0700 |
| commit | 0144bfc9cc6c616a00a8171f3950a75ec948427e (patch) | |
| tree | 101d6c12471d411e9266cffa8e90176aff2e6fdb /frontend/src/components/pages | |
| parent | base next bump (diff) | |
| download | ctrl-v-0144bfc9cc6c616a00a8171f3950a75ec948427e.tar.xz ctrl-v-0144bfc9cc6c616a00a8171f3950a75ec948427e.zip | |
base next refactor
Diffstat (limited to 'frontend/src/components/pages')
| -rw-r--r-- | frontend/src/components/pages/NewPaste.js | 150 | ||||
| -rw-r--r-- | frontend/src/components/pages/Raw.js | 16 | ||||
| -rw-r--r-- | frontend/src/components/pages/ViewPaste.js | 65 |
3 files changed, 0 insertions, 231 deletions
diff --git a/frontend/src/components/pages/NewPaste.js b/frontend/src/components/pages/NewPaste.js deleted file mode 100644 index 19161da..0000000 --- a/frontend/src/components/pages/NewPaste.js +++ /dev/null @@ -1,150 +0,0 @@ -import React, { useEffect, useState, useRef } from 'react'; -import { Text, Code } from '../Inputs' -import OptionsContainer from '../Options' -import Error from '../Err' -import PasteModal from '../modals/PasteModal' -import styled from 'styled-components' -import CodeRenderer from '../renderers/Code' -import Latex from '../renderers/Latex' -import Markdown from '../renderers/Markdown' -import {Button, SubmitButton} from "../Common/Button"; -import {newPaste} from "../hooks/shared"; - -const Flex = styled.div` - display: flex; - flex-direction: row; -` - -const FlexLeft = styled.div` - flex: 0 0 calc(50% - 1em - 2px); -` - -const FlexRight = styled.div` - flex: 0 0 50%; - max-width: calc(50% - 1em + 2px); - margin-left: 2em; -` - -const PreviewWrapper = styled.div` - margin: 2em; -` - -const NewPaste = () => { - const [title, setTitle] = useState(''); - const [content, setContent] = useState(''); - const [pass, setPass] = useState(''); - const [language, setLanguage] = useState('detect'); - const [expiry, setExpiry] = useState(''); - const [hash, setHash] = useState(''); - const [isPreview, setIsPreview] = useState(false); - const ErrorLabel = useRef(null); - - useEffect(() => { - document.title = title === "" ? `ctrl-v` : `ctrl-v | ${title}`; - }, [title]) - - function handleSubmit(e) { - e.preventDefault(); - - // prevent resubmission - if (!hash) { - newPaste({title, content, language, pass, expiry}) - .then(resp => {setHash(resp.data.hash)}) - .catch((error) => { - const resp = error.response - - // some weird err (e.g. network) - if (!resp) { - ErrorLabel.current.showMessage(error) - return - } - - // some weird err - const errTxt = `${resp.status}: ${resp.data}` - ErrorLabel.current.showMessage(errTxt) - }); - } - } - - function renderPreview() { - const pasteInput = <Code - setContentCallback={setContent} - content={content} - maxLength="100000" /> - - if (isPreview) { - var preview - switch (language) { - case 'latex': - preview = - <PreviewWrapper> - <Latex - content={content} /> - </PreviewWrapper> - break - case 'markdown': - preview = - <PreviewWrapper className='md' > - <Markdown - content={content} /> - </PreviewWrapper> - break - default: - preview = - <CodeRenderer - lang={language} - theme='atom' - content={content} /> - } - - return ( - <Flex> - <FlexLeft> - {pasteInput} - </FlexLeft> - <FlexRight className='preview' > - {preview} - </FlexRight> - </Flex> - ); - } else { - return ( - pasteInput - ); - } - } - - return ( - <form onSubmit={handleSubmit}> - <PasteModal hash={hash} /> - <Text - label="title" - onChange={(e) => {setTitle(e.target.value)}} - value={title} - autoFocus - maxLength="100" - id="titleInput" /> - {renderPreview()} - <OptionsContainer - pass={pass} - expiry={expiry} - lang={language} - onPassChange={(e) => { setPass(e.target.value) }} - onLangChange={(e) => { setLanguage(e.target.value) }} - onExpiryChange={(e) => { setExpiry(e.target.value) }} /> - <div> - <SubmitButton type="submit" value="new paste" /> - {language !== 'detect' && <Button - secondary - type="button" - onClick={() => setIsPreview(!isPreview)}> - preview - </Button>} - </div> - <br /> - <Error ref={ErrorLabel} /> - </form> - ); -} - -export default NewPaste
\ No newline at end of file diff --git a/frontend/src/components/pages/Raw.js b/frontend/src/components/pages/Raw.js deleted file mode 100644 index 23ef6bf..0000000 --- a/frontend/src/components/pages/Raw.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import styled from 'styled-components' -import {CodeLike} from "../Common/mixins"; -import useFetchPaste from "../hooks/useFetchPaste"; - -const RawText = styled.pre` - ${CodeLike} - padding: 0 1em; -` - -const Raw = ({hash}) => { - const { err, result } = useFetchPaste(hash) - return <RawText>{result?.content || err}</RawText> -} - -export default Raw
\ No newline at end of file diff --git a/frontend/src/components/pages/ViewPaste.js b/frontend/src/components/pages/ViewPaste.js deleted file mode 100644 index bc61314..0000000 --- a/frontend/src/components/pages/ViewPaste.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useEffect, useState, useRef } from 'react'; -import Error from '../Err'; -import { Text } from '../Inputs'; -import CodeRenderer from '../renderers/Code' -import PasteInfo from '../PasteInfo'; -import PasswordModal from '../modals/PasswordModal' -import RenderDispatch from '../renderers/RenderDispatch' -import useFetchPaste from "../hooks/useFetchPaste"; - -const ViewPaste = (props) => { - const { err, requiresAuth, validPass, getWithPassword, result } = useFetchPaste(props.hash) - const {content, language, expiry, title} = result ?? {} - const [theme, setTheme] = useState('atom'); - const [isRenderMode, setIsRenderMode] = useState(false); - const [enteredPass, setEnteredPass] = useState(''); - const ErrorLabelRef = useRef(null); - - if (err) { - ErrorLabelRef.current.showMessage(err, -1) - } - - useEffect(() => { - setIsRenderMode(language === 'latex' || language === 'markdown') - }, [language]) - - function getDisplay() { - return isRenderMode ? <RenderDispatch - language={language} - content={content} - /> : <CodeRenderer - content={content} - lang={language} - theme={theme} - id="pasteInput" /> - } - - return ( - <div> - <PasswordModal - hasPass={requiresAuth} - validPass={validPass} - value={enteredPass} - onChange={(e) => setEnteredPass(e.target.value)} - validateCallback={getWithPassword} /> - <Text - label="title" - 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)} - err={<Error ref={ErrorLabelRef} />} - /> - </div> - ); -} - -export default ViewPaste
\ No newline at end of file |