port api endpoints to json and add react pages to interact with them

1 files changed, 25 insertions, 0 deletions

diff --git a/frontend/src/pages/Article.tsx b/frontend/src/pages/Article.tsx
new file mode 100644
index 0000000..b367811
--- /dev/null
+++ b/frontend/src/pages/Article.tsx
@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+export default function Article () {
+	const { id } = useParams();
+	const [articleData, setArticleData] = useState<any>();
+
+	useEffect(() => {
+		const url = `${import.meta.env.VITE_API_TITLE}/api/v1/article/${id}`;
+		fetch(url).then((response) => {
+			if (response.ok) {
+				return response.json();
+			}
+			throw new Error("Network response was not ok.");
+		}).then((response) => setArticleData(response)); //.catch(() => navigate("/"));
+	}, [id]);
+
+	return(
+		<>
+		<h1>{articleData?.title}</h1>
+		<div>{articleData?.content}</div>
+		</>
+	);
+
+}