1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
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
|