refactor: re-use editor component and other minor changes

package.json

@@ -12,7 +12,6 @@
     "@lezer/highlight": "^1.0.0",
     "@uiw/codemirror-themes": "^4.11.4",
     "@uiw/react-codemirror": "^4.11.4",
-    "axios": "^0.27.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0"

src/api/bin.ts

@@ -0,0 +1,16 @@
+export const setPaste = async (code: string): Promise<Response> => {
+	return await fetch("http://localhost:8080/bin/paste", {
+		method: "POST",
+		headers: { "Content-type": "text/plain" },
+		body: code,
+	});
+};
+
+export const getPaste = async (pasteId: string) => {
+	return await fetch(`http://localhost:8080/bin/paste/${pasteId}`);
+};
+
+export interface SuccessResponse {
+	message: string;
+	endpoint: string;
+}

src/components/Editor.tsx

@@ -1,48 +1,19 @@
 import CodeMirror from "@uiw/react-codemirror";
-import React, { useCallback, useState } from "react";
+import { FunctionComponent } from "react";
-import { GithubDark } from "./EditorTheme";
+import Theme from "./EditorTheme";
-import axios from "axios";
-import { useNavigate } from "react-router-dom";
 
-const Editor = () => {
+const Editor: FunctionComponent<propTypes> = props => {
-	const [code, setCode] = useState("");
-	let navigate = useNavigate();
-
-	// TODO: fix this callback thing later
-	const postPaste = useCallback(async () => {
-		let res = await axios.post("http://localhost:8080/bin/paste", code, {
-			headers: { "Content-type": "text/plain" },
-		});
-
-		if (res.status !== 200) {
-			alert("Something went wrong!");
-			console.log(res);
-		}
-		navigate(`/${res.data["endpoint"]}`);
-	}, [code]);
-
-	const handleSavePaste = async (
-		event: React.KeyboardEvent<HTMLInputElement>,
-	) => {
-		if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
-			event.preventDefault();
-			postPaste();
-		}
-	};
-
-	const placeholder = `// paste code here, use ctrl + s to save`;
 	return (
 		// TODO: custom implementation?
 		// TODO: fix line wrap
 		<CodeMirror
 			className="editor"
 			autoFocus={true}
-			onKeyDown={handleSavePaste}
+			value={props.value}
-			placeholder={placeholder}
+			onKeyDown={e => props.keyEvent(e)}
+			placeholder={props.placeholder}
 			height="100%"
-			onChange={(value: string) => {
+			onChange={val => props.setCode(val)}
-				setCode(value);
-			}}
 			style={{
 				width: "100%",
 				flex: 1,
@@ -50,9 +21,27 @@ const Editor = () => {
 				fontFamily: "IBM Plex Mono",
 				fontSize: "1rem",
 			}}
-			theme={GithubDark}
+			editable={props.editable}
+			readOnly={props.readonly}
+			theme={Theme}
 		/>
 	);
 };
 
+Editor.defaultProps = {
+	placeholder: `// paste code here, use ctrl + s to save`,
+	readonly: false,
+	editable: true,
+	value: "",
+};
+
+interface propTypes {
+	readonly?: boolean;
+	editable?: boolean;
+	placeholder?: string;
+	value: string;
+	setCode: Function;
+	keyEvent: Function;
+}
+
 export default Editor;

src/components/EditorTheme.ts

@@ -1,7 +1,8 @@
 import { tags as t } from "@lezer/highlight";
 import { createTheme } from "@uiw/codemirror-themes";
 
-export const GithubDark = createTheme({
+// custom theme based on GitHub dark theme
+export default createTheme({
 	theme: "dark",
 	settings: {
 		background: "black",

src/index.css

@@ -6,10 +6,8 @@
 }
 
 body {
-  font-family: "IBM Plex Mono", monospace;
   background: black;
   color: white;
-  /* min-height: 100%; */
 }
 
 #root {

src/pages/Home.tsx

@@ -1,10 +1,33 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { setPaste, SuccessResponse } from "../api/bin";
 import BottomBar from "../components/BottomBar";
 import Editor from "../components/Editor";
 
 function Home() {
+	const [code, setCode] = useState("");
+	const navigate = useNavigate();
+
+	const postPaste = useCallback(async () => {
+		const res: Response = await setPaste(code);
+		if (res.status !== 200) {
+			alert("Something went wrong!");
+			console.log(res);
+		}
+		let data: SuccessResponse = await res.json();
+		navigate(`/${data.endpoint}`);
+	}, [code]);
+
+	const handleSaveKey = async (event: React.KeyboardEvent<HTMLDivElement>) => {
+		if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
+			event.preventDefault();
+			postPaste();
+		}
+	};
+
 	return (
 		<>
-			<Editor />
+			<Editor setCode={setCode} value={code} keyEvent={handleSaveKey} />
 			<BottomBar />
 		</>
 	);

src/pages/Paste.tsx

@@ -1,8 +1,48 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { getPaste } from "../api/bin";
+import BottomBar from "../components/BottomBar";
+import Editor from "../components/Editor";
+
 function Paste() {
+	const { id } = useParams();
+	const [code, setCode] = useState("");
+	const navigate = useNavigate();
+
+	const getCode = async () => {
+		if (id == undefined) {
+			alert("Something went wrong!");
+			return navigate("/");
+		}
+
+		const res: Response = await getPaste(id);
+
+		if (res.status == 404) {
+			alert("Paste not found!");
+			navigate("/");
+		}
+
+		if (res.status == 200) {
+			setCode(await res.text());
+		}
+	};
+
+	useEffect(() => {
+		getCode();
+	}, []);
+
 	return (
-		<div className="container">
+		<>
-			<h1>Paste Page</h1>
+			<Editor
-		</div>
+				setCode={() => {}}
+				value={code}
+				keyEvent={() => {}}
+				editable={false}
+				readonly={true}
+				placeholder={""}
+			/>
+			<BottomBar />
+		</>
 	);
 }