diff options
Diffstat (limited to 'client/src/components/Editor/Editor.jsx')
| -rw-r--r-- | client/src/components/Editor/Editor.jsx | 210 |
1 files changed, 92 insertions, 118 deletions
diff --git a/client/src/components/Editor/Editor.jsx b/client/src/components/Editor/Editor.jsx index e1675fc..dac633c 100644 --- a/client/src/components/Editor/Editor.jsx +++ b/client/src/components/Editor/Editor.jsx @@ -1,10 +1,16 @@ -import React, { useState, useEffect, useRef } from "react"; +import React, { + useState, + useEffect, + useRef, + useCallback, + useMemo, +} from "react"; import { useLocation, useNavigate, useParams } from "react-router-dom"; import Prism from "prismjs"; import styles from "./Editor.module.css"; import "../prism-themes/prism-gruvbox-dark.css"; import "../prism-themes/prism-line-numbers.css"; -import { BASE_URL, URL_REGEX } from "../../utils/constants"; +import { URL_REGEX } from "../../utils/constants"; import Header from "../Header/Header"; import { generateAESKey, @@ -24,25 +30,29 @@ const Editor = () => { const [openModal, setOpenModal] = useState(false); const textareaRef = useRef(null); const lineNumberRef = useRef(null); - const queryParams = new URLSearchParams(location.search); + const queryParams = useMemo( + () => new URLSearchParams(location.search), + [location.search], + ); + const origin = useMemo(() => window.location.origin, []); - const handleTextChange = (event) => { + const handleTextChange = useCallback((event) => { setText(event.target.value); - }; + }, []); - const handleScroll = () => { + const handleScroll = useCallback(() => { if (textareaRef.current && lineNumberRef.current) { lineNumberRef.current.scrollTop = textareaRef.current.scrollTop; } - }; + }, []); - const handleSaveClick = async () => { + const handleSaveClick = useCallback(async () => { if (!text) { alert("Please enter some text!"); return; } if (URL_REGEX.test(text)) { - const response = await fetch(`${BASE_URL}/bin`, { + const response = await fetch(`${origin}/bin`, { method: "POST", headers: { "Content-Type": "application/json", @@ -54,29 +64,19 @@ const Editor = () => { }); const data = await response.json(); if (response.ok) { - navigator.clipboard - .writeText(`${window.location.origin}/r/${data.id}`) - .then( - function () { - alert("Short URL copied to clipboard!"); - }, - function () { - try { - document.execCommand("copy"); - alert("Short URL copied to clipboard!"); - } catch (err) { - console.log("Oops, unable to copy"); - } - }, - ); + const shortURL = `${origin}/r/${data.id}`; + copyToClipboard(shortURL); + alert("Short URL copied to clipboard!"); + navigate(`/${data.id}`); + } else { + console.error(data); } - navigate(`/${data.id}`); - return; + } else { + setOpenModal(true); } - setOpenModal(true); - }; + }, [text, language, navigate]); - const handleSuccessClick = async () => { + const handleSuccessClick = useCallback(async () => { setOpenModal(false); const key = await generateAESKey(); const keyString = await keyToString(key); @@ -86,7 +86,7 @@ const Editor = () => { ); const ivBase64 = btoa(String.fromCharCode.apply(null, iv)); - const response = await fetch(`${BASE_URL}/bin`, { + const response = await fetch(`${origin}/bin`, { method: "POST", headers: { "Content-Type": "application/json", @@ -99,33 +99,18 @@ const Editor = () => { }); const data = await response.json(); if (response.ok) { - navigator.clipboard - .writeText(`${window.location.origin}/${data.id}?key=${keyString}`) - .then( - function () { - navigator.clipboard.writeText( - `${window.location.origin}/${data.id}?key=${keyString}`, - ); - alert("URL copied to clipboard!"); - }, - function () { - try { - document.execCommand("copy"); - alert("URL copied to clipboard!"); - } catch (err) { - console.log("Oops, unable to copy"); - } - }, - ); + const encryptedURL = `${origin}/${data.id}?key=${keyString}`; + copyToClipboard(encryptedURL); + alert("URL copied to clipboard!"); navigate(`/${data.id}?key=${keyString}`); } else { console.error(data); } - }; + }, [text, language, navigate]); - const handleCancelClick = async () => { + const handleCancelClick = useCallback(async () => { setOpenModal(false); - const response = await fetch(`${BASE_URL}/bin`, { + const response = await fetch(`${origin}/bin`, { method: "POST", headers: { "Content-Type": "application/json", @@ -137,78 +122,72 @@ const Editor = () => { }); const data = await response.json(); if (response.ok) { - navigator.clipboard - .writeText(`${window.location.origin}/${data.id}`) - .then( - function () { - navigator.clipboard.writeText( - `${window.location.origin}/${data.id}`, - ); - alert("URL copied to clipboard!"); - }, - function () { - try { - document.execCommand("copy"); - alert("URL copied to clip`board!"); - } catch (err) { - console.log("Oops, unable to copy"); - } - }, - ); + const normalURL = `${origin}/${data.id}`; + copyToClipboard(normalURL); + alert("URL copied to clipboard!"); navigate(`/${data.id}`); } else { console.error(data); } - }; + }, [text, language, navigate]); - const handleLanguageChange = (value) => { + const handleLanguageChange = useCallback((value) => { setLanguage(value); - }; + }, []); useEffect(() => { Prism.highlightAll(); }, [text, language]); - useEffect(() => { - const fetchData = async () => { - const response = await fetch(`${BASE_URL}/bin/${id}`); - const data = await response.json(); - if (response.ok) { - if (data.iv) { - const keyString = queryParams.get("key"); - const key = await stringToKey(keyString); - const encrypted = new Uint8Array( - atob(data.content) - .split("") - .map((char) => char.charCodeAt(0)), - ).buffer; - const ivArray = new Uint8Array( - atob(data.iv) - .split("") - .map((char) => char.charCodeAt(0)), - ); - const decryptedContent = await decryptAES(encrypted, key, ivArray); - setLanguage(data.language); - setText(decryptedContent); + const fetchData = useCallback(async () => { + const response = await fetch(`${origin}/bin/${id}`); + const data = await response.json(); + if (response.ok) { + if (data.iv) { + const keyString = queryParams.get("key"); + const key = await stringToKey(keyString); + const encrypted = new Uint8Array( + atob(data.content) + .split("") + .map((char) => char.charCodeAt(0)), + ).buffer; + const ivArray = new Uint8Array( + atob(data.iv) + .split("") + .map((char) => char.charCodeAt(0)), + ); + const decryptedContent = await decryptAES(encrypted, key, ivArray); + setLanguage(data.language); + setText(decryptedContent); + } else { + const isURL = URL_REGEX.test(data.content); + if (isURL) { + setText(`Your shortened URL: ${origin}/r/${id}`); } else { - const isURL = URL_REGEX.test(data.content); - if (isURL) { - setText(`Your shortened URL: ${window.location.origin}/r/${id}`); - } else { - setLanguage(data.language); - setText(data.content); - } + setLanguage(data.language); + setText(data.content); } } - }; + } + }, [id, queryParams]); + useEffect(() => { if (id) { fetchData(); } else { - textareaRef.current.value = ""; setText(""); } - }, [id]); + }, [id, fetchData]); + + const copyToClipboard = useCallback((text) => { + navigator.clipboard.writeText(text).catch(() => { + try { + document.execCommand("copy"); + } catch (err) { + console.log("Oops, unable to copy"); + } + }); + }, []); return ( <> @@ -216,22 +195,17 @@ const Editor = () => { <Modal openModal={openModal} setOpenModal={setOpenModal} - onSuccessClick={() => { - handleSuccessClick(); - }} - onCancelClick={() => { - handleCancelClick(); - }} + onSuccessClick={handleSuccessClick} + onCancelClick={handleCancelClick} /> <div className={styles.container}> {!id && ( - <button - className={styles.btn__save} - onClick={() => { - handleSaveClick(); - }} - > - <img src="assets/icons/save.svg" className={styles.btn__icon} /> + <button className={styles.btn__save} onClick={handleSaveClick}> + <img + src="assets/icons/save.svg" + className={styles.btn__icon} + alt="Save" + /> </button> )} @@ -245,8 +219,9 @@ const Editor = () => { spellCheck="false" ref={textareaRef} placeholder="</> Paste, save, share! (Pasting just a URL will shorten it!)" + value={text} /> - <pre className="line-numbers"> + <pre className="line-numbers" ref={lineNumberRef}> <code className={`${styles.codespace__code} language-${language}`} > @@ -261,4 +236,3 @@ const Editor = () => { }; export default Editor; - |