create mock matching page

docker-compose.yml

@@ -49,6 +49,17 @@ services:
     ports:
       - 27018:27017
 
+#   matching-service:
+#     build: ./matching-service
+#     ports:
+#       - 3002:3002
+#     depends_on:
+#       - user-service
+#       # - question-service # maybe to retrieve information on the questions difficulties/topics
+#     volumes:
+#       - ./matching-service:/app
+#       - /app/node_modules
+# 
 
 volumes:
   user-db-data:

frontend-service/components/HomeNavBar.tsx

@@ -43,6 +43,11 @@ export default function HomeNavBar() {
                   Match Me
                 </Button>
               </Link>
+              <Link to="/mock-match">
+                <Button variant="ghost" fontWeight="bold" mr={86}>
+                  Match Me (Mock)
+                </Button>
+              </Link>
               <Link to="/about-us">
                 <Button variant="ghost" fontWeight="bold" mr={86}>
                   About Us

frontend-service/components/hooks/useQuestionDifficulties.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+const useQuestionDifficulties = () => {
+  const [difficulties, setDifficulties] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchDifficulties = async () => {
+      try {
+        const response = await fetch("http://localhost:8080/api/questions/difficulties");
+        if (!response.ok) {
+          throw new Error("Failed to fetch difficulties");
+        }
+        const data = await response.json();
+        if (!Array.isArray(data)) {
+          throw new Error("Expected an array of difficulties");
+        }
+        setDifficulties(data);
+      } catch (error) {
+        if (error instanceof Error) {
+          setError(error.message);
+        } else {
+          setError("An unknown error occurred");
+        }
+      }
+    };
+    fetchDifficulties();
+  }, []);
+
+  return { difficulties, error };
+};
+
+export default useQuestionDifficulties;

frontend-service/components/hooks/useQuestionTopics.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+const useQuestionTopics = () => {
+  const [topics, setTopics] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchTopics = async () => {
+      try {
+        const response = await fetch("http://localhost:8080/api/questions/topics");
+        if (!response.ok) {
+          throw new Error("Failed to fetch topics");
+        }
+        const data = await response.json();
+        if (!Array.isArray(data)) {
+          throw new Error("Expected an array of topics");
+        }
+        setTopics(data);
+      } catch (error) {
+        if (error instanceof Error) {
+          setError(error.message);
+        } else {
+          setError("An unknown error occurred");
+        }
+      }
+    };
+    fetchTopics();
+  }, []);
+
+  return { topics, error };
+};
+
+export default useQuestionTopics;
+

frontend-service/src/App.tsx

@@ -7,6 +7,7 @@ import HomeNavBar from "../components/HomeNavBar";
 import Login from "./pages/SignIn/login";
 import Home from "./home";
 import Signup from "./pages/SignUp/signup";
+import MockMatch from "./pages/MockMatch/mockMatch";
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
           <Route path="/signup" element={<Signup />} />
           <Route path="/questions" element={<QuestionPage />} />
           <Route path="/questions/:id" element={<QuestionDetails />} />
+          <Route path="/mock-match" element={<MockMatch />} />
         </Routes>
       </Box>
     </Box>

frontend-service/src/pages/MockMatch/mockMatch.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import useQuestionDifficulties from "../../../components/hooks/useQuestionDifficulties";
+import useQuestionTopics from "../../../components/hooks/useQuestionTopics";
+
+const MockMatch: React.FC = () => {
+  const { difficulties } = useQuestionDifficulties();
+  const { topics } = useQuestionTopics();
+
+  const [selectedDifficulty, setSelectedDifficulty] = useState("");
+  const [selectedTopic, setSelectedTopic] = useState("");
+
+  const handleDifficultyChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedDifficulty(event.target.value);
+  };
+
+  const handleTopicChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedTopic(event.target.value);
+  };
+
+  const handleMatchMe = async () => {
+    if (!selectedDifficulty || !selectedTopic) {
+      alert("Please select a difficulty and topic!");
+      return;
+    }
+
+    try {
+      const response = await fetch("http://localhost:3002/match-user", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ difficulty: selectedDifficulty, topic: selectedTopic }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Error matching");
+      }
+
+      const data = await response.json();
+      alert(`Matched with ${data.opponentUsername}!`);
+    } catch (error) {
+      alert("Error matching");
+    }
+  };
+
+  return (
+    <div>
+      <h2>MockMatch</h2>
+      <label>
+        Difficulty:
+        <select value={selectedDifficulty} onChange={handleDifficultyChange}>
+          <option value="">Select difficulty</option>
+          {difficulties.map((difficulty) => (
+            <option key={difficulty} value={difficulty}>
+              {difficulty}
+            </option>
+          ))}
+        </select>
+      </label>
+      <br />
+      <label>
+        Topic:
+        <select value={selectedTopic} onChange={handleTopicChange}>
+          <option value="">Select topic</option>
+          {topics.map((topic) => (
+            <option key={topic} value={topic}>
+              {topic}
+            </option>
+          ))}
+        </select>
+      </label>
+      <br />
+      <button onClick={handleMatchMe}>Match me!</button>
+    </div>
+  );
+};
+
+export default MockMatch;
+

matching-service/index.ts

@@ -0,0 +1,10 @@
+import express from 'express';
+import router from "./routes/matching-route";
+
+const app = express();
+
+app.use(router);
+
+app.listen(3002, () => {
+    console.log("Server started on port 3002");
+})