feat: add raw route and add functionality to bar buttons

src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "./pages/Home";
+import Raw from "./pages/Raw";
 import Paste from "./pages/Paste";
 
 function App() {
@@ -15,6 +16,7 @@ function App() {
 				<Routes>
 					<Route path="/" element={<Home />} />
 					<Route path="/:id" element={<Paste />} />
+					<Route path="/raw/:id" element={<Raw />} />
 				</Routes>
 			</div>
 		</Router>

src/components/BottomBar.tsx

@@ -1,4 +1,7 @@
-const BottomBar = () => {
+import { FunctionComponent } from "react";
+import { useParams } from "react-router-dom";
+
+const BottomBar: FunctionComponent<propTypes> = props => {
 	return (
 		<footer
 			style={{
@@ -28,33 +31,48 @@ const BottomBar = () => {
 					marginBottom: "2px",
 					alignItems: "center",
 				}}>
-				<ButtonControl text="raw" link="/" />
+				{/* make component of these links some day */}
+
+				{props.isNewPaste ? (
+					<a
+						href="#"
+						onClick={async () => {
+							if (props.postCallback != undefined) {
+								await props.postCallback();
+							}
+						}}
+						style={linkStyle}>
+						<li style={listStyle}>save</li>
+					</a>
+				) : (
+					<a href={`/raw/${useParams().id}`} style={linkStyle}>
+						<li style={listStyle}>raw</li>
+					</a>
+				)}
 				<Separator />
-				<ButtonControl text="save" link="/" />
+				<a href={"/"} style={linkStyle}>
+					<li style={listStyle}>new</li>
+				</a>
 				<Separator />
-				<ButtonControl text="source" link="/" />
+				<a
+					href={"https://github.com/okiba-org/"}
+					target="_blank"
+					style={linkStyle}>
+					<li style={listStyle}>source</li>
+				</a>
 			</ul>
 		</footer>
 	);
 };
 
-const ButtonControl = (props: tControlProps) => {
-	return (
-		<a
-			href={props.link}
-			style={{
+const linkStyle = {
 	color: "white",
-			}}>
-			<li
-				style={{
+};
+
+const listStyle = {
 	marginInline: "10px",
 	listStyle: "none",
 	fontSize: "1rem",
-				}}>
-				{props.text}
-			</li>
-		</a>
-	);
 };
 
 const Separator = () => (
@@ -67,9 +85,9 @@ const Separator = () => (
 	</div>
 );
 
-interface tControlProps {
-	text: string;
-	link: string;
+interface propTypes {
+	isNewPaste: boolean;
+	postCallback: Function | undefined;
 }
 
 export default BottomBar;

src/pages/Home.tsx

@@ -28,7 +28,7 @@ function Home() {
 	return (
 		<>
 			<Editor setCode={setCode} value={code} keyEvent={handleSaveKey} />
-			<BottomBar />
+			<BottomBar isNewPaste={true} postCallback={postPaste} />
 		</>
 	);
 }

src/pages/Paste.tsx

@@ -41,7 +41,7 @@ function Paste() {
 				readonly={true}
 				placeholder={""}
 			/>
-			<BottomBar />
+			<BottomBar isNewPaste={false} postCallback={undefined} />
 		</>
 	);
 }

src/pages/Raw.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { getPaste } from "../api/bin";
+
+const Raw = () => {
+	let navigate = useNavigate();
+	let [code, setCode] = useState("");
+	let { id } = useParams();
+
+	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 (
+		<>
+			<pre>{code}</pre>
+		</>
+	);
+};
+
+export default Raw;