chore: minor changes & better error handling

Signed-off-by: alok8bb <alok8bb@gmail.com>

.env

@@ -0,0 +1 @@
+SERVER_URL=http://localhost:8080

src/api/bin.ts

@@ -1,13 +1,25 @@
-export const setPaste = async (code: string): Promise<Response> => {
+import { SERVER_URL } from "../util";
-	return await fetch("http://localhost:8080/bin/paste", {
+
+export const setPaste = async (code: string) => {
+	try {
+		return await fetch(SERVER_URL + "/bin/paste", {
 			method: "POST",
 			headers: { "Content-type": "text/plain" },
 			body: code,
 		});
+	} catch (err) {
+		console.error(err);
+		return null;
+	}
 };
 
 export const getPaste = async (pasteId: string) => {
-	return await fetch(`http://localhost:8080/bin/paste/${pasteId}`);
+	try {
+		const response = await fetch(`${SERVER_URL}/bin/paste/${pasteId}`);
+		return response;
+	} catch (err) {
+		return null;
+	}
 };
 
 export interface SuccessResponse {

src/components/Editor.tsx

@@ -6,7 +6,6 @@ import Theme from "./EditorTheme";
 const Editor: FunctionComponent<propTypes> = props => {
 	return (
 		// TODO: custom implementation?
-		// TODO: fix line wrap
 		<CodeMirror
 			className="editor"
 			autoFocus={true}

src/pages/Home.tsx

@@ -9,12 +9,20 @@ function Home() {
 	const navigate = useNavigate();
 
 	const postPaste = useCallback(async () => {
-		const res: Response = await setPaste(code);
+		const res: Response | null = await setPaste(code);
-		if (res.status !== 200) {
+
+		if (res == null) {
+			alert("Couldn't save paste, something went wrong.");
+			return;
+		}
+
+		if (!res?.ok) {
 			alert("Something went wrong!");
 			console.log(res);
+			return;
 		}
-		let data: SuccessResponse = await res.json();
+
+		let data: SuccessResponse = await res?.json();
 		navigate(`/${data.endpoint}`);
 	}, [code]);
 

src/pages/Paste.tsx

@@ -15,14 +15,18 @@ function Paste() {
 			return navigate("/");
 		}
 
-		const res: Response = await getPaste(id);
+		const res: Response | null = await getPaste(id);
+		if (res == null) {
+			alert("Couldn't connect to the server, something went wrong.");
+			navigate("/");
+		}
 
-		if (res.status == 404) {
+		if (res?.status == 404) {
 			alert("Paste not found!");
 			navigate("/");
 		}
 
-		if (res.status == 200) {
+		if (res?.ok) {
 			setCode(await res.text());
 		}
 	};

src/pages/Raw.tsx

@@ -13,14 +13,19 @@ const Raw = () => {
 			return navigate("/");
 		}
 
-		const res: Response = await getPaste(id);
+		const res: Response | null = await getPaste(id);
 
-		if (res.status == 404) {
+		if (res == null) {
+			alert("Couldn't connect to the server, something went wrong.");
+			navigate("/");
+		}
+
+		if (res?.status == 404) {
 			alert("Paste not found!");
 			navigate("/");
 		}
 
-		if (res.status == 200) {
+		if (res?.status == 200) {
 			setCode(await res.text());
 		}
 	};

src/util/index.ts

@@ -0,0 +1 @@
+export const SERVER_URL = import.meta.env.VITE_SERVER_URL