training.tsx still a bit messy, all that is left is to retrieve data from firestore /training and /walkthrough and render it

src/pages/api/training/index.ts

@@ -0,0 +1,50 @@
+import { sessionOptions } from "@/lib/session";
+import axios from "axios";
+import {app} from "@/firebase";
+import { collection, getDocs, getFirestore, query } from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { NextApiRequest, NextApiResponse } from "next";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (!req.session.user) {
+        res.status(401).json({ ok: false });
+        return;
+    }
+
+    if (req.method === "GET") return get(req, res);
+    if (req.method === "POST") return post(req, res);
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+    try {
+        const response = await axios.post(`${process.env.BACKEND_URL}/training_content`, req.body, {
+            headers: {
+                Authorization: `Bearer ${process.env.BACKEND_JWT}`,
+            },
+        });
+        res.status(response.status).json(response.data);
+    } catch (error) {
+        res.status(500).json({ message: 'An unexpected error occurred' });
+    }
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+    try {
+        const q = query(collection(db, "training"));
+
+        const snapshot = await getDocs(q);
+
+        res.status(200).json(
+            snapshot.docs.map((doc) => ({
+                id: doc.id,
+                ...doc.data(),
+            })),
+        );
+    } catch (error) {
+        res.status(500).json({ message: 'An unexpected error occurred' });
+    }
+}