Hooked training content to backend, did refactors to training components and record.tsx

src/pages/api/training/[id].ts

@@ -0,0 +1,44 @@
+import { sessionOptions } from "@/lib/session";
+import {app} from "@/firebase";
+import { collection, doc, getDoc, 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);
+}
+
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+    try {
+        const { id } = req.query;
+
+      if (typeof id !== 'string') {
+        return res.status(400).json({ message: 'Invalid ID' });
+      }
+
+      const docRef = doc(db, "training", id);
+      const docSnap = await getDoc(docRef);
+
+      if (docSnap.exists()) {
+        res.status(200).json({
+          id: docSnap.id,
+          ...docSnap.data(),
+        });
+      } else {
+        res.status(404).json({ message: 'Document not found' });
+      }
+    } catch (error) {
+        console.error('Error fetching data:', error);
+        res.status(500).json({ message: 'An unexpected error occurred' });
+    }
+}