Merge pull request #30 from CS3219-AY2425S1/branch-MatchingServiceUI

Branch matching service UI

peerprep/frontend/src/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import QuestionManagement from './views/QuestionManagement';
-import './App.css';
+import './styles/App.css';
 /*
 const App: React.FC = () => {
   return (
@@ -22,12 +21,13 @@ export default App;
 */
 
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Login from './Login';
-import Profile from './Profile';
-import AdminDashboard from './AdminDashBoard';
-import PrivateRoute from './PrivateRoute'; // Assuming you have a PrivateRoute component
-import SignUp from './SignUp'; // Import the new SignUp component
-import QuestionService from './views/QuestionManagement';
+import Login from './views/UserServiceViews/Login';
+import Profile from './views/UserServiceViews/Profile';
+import AdminDashboard from './views/UserServiceViews/AdminDashBoard';
+import PrivateRoute from './views/UserServiceViews/PrivateRoute'; // Assuming you have a PrivateRoute component
+import SignUp from './views/UserServiceViews/SignUp'; // Import the new SignUp component
+import QuestionService from './views/QuestionServiceViews/QuestionManagement';
+import MatchingService from './views/MatchingServiceViews/MatchingServiceMainView';
 
 const App: React.FC = () => {
   return (
@@ -39,6 +39,9 @@ const App: React.FC = () => {
         {/* Public Route for Question Management */}
         <Route path="/questions" element={<QuestionService />} />
 
+        {/* Public Route for Question Management */}
+        <Route path="/matching" element={<MatchingService />} />
+
         {/* Public Route for Sign-Up */}
         <Route path="/signup" element={<SignUp />} /> {/* New Sign-Up Route */}
 

peerprep/frontend/src/main.tsx

@@ -1,7 +1,8 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
+import './styles/index.css'
+import './styles/App.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

peerprep/frontend/src/App.css → peerprep/frontend/src/styles/App.css

@@ -51,7 +51,7 @@ h2 {
 }
 
 .form-section {
-  max-width: 90%; /* Adjust width of the form, set smaller than 100 for aesthetics */
+  max-width: 100%; /* Adjust width of the form, set smaller than 100 for aesthetics */
   text-align: center; /* Center the content inside */
   margin: 0 auto; /* Center the form horizontally */
   padding: 0;
@@ -232,3 +232,204 @@ h2 {
 }
 
 
+/* MATCHING FORM VIEWS */
+
+/* Container to center the form */
+.matching-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 20px;
+}
+
+.matching-form {
+  padding: 20px;
+  max-width: 100%;
+  margin: 0 auto; /* Center the form */
+  border: 2px solid #ccc; /* form border */
+  border-radius: 10px; /* Rounded corners for the form */
+  background-color: white; 
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* shadow */
+}
+
+/* Styles for inputs, textarea, and select within .question-form */
+.matching-form input,
+.matching-form textarea,
+.matching-form select {
+  width: 100%; 
+  padding: 10px; 
+  margin-top: 5px; /* Space between input boxes */
+  border: 1px solid #ccc; /* Border */
+  border-radius: 4px; /* Rounded corners */
+  background-color: #f4f4f4; 
+  color: #333; 
+  font-size: 16px;
+  box-sizing: border-box; /* Ensures padding is included within the width */
+}
+
+/* Input Fields Focus State */
+.matching-form input:focus,
+.matching-form textarea:focus,
+.matching-form select:focus {
+  outline: none;
+  border: 2px solid #4CAF50; /* Green border on focus */
+  background-color: #fff; /* White background on focus */
+}
+
+/* Custom styling for the difficulty select dropdown */
+.matching-form select {
+  width: 100%;
+  padding: 10px;
+  margin-top: 5px;
+  border: 2px solid #ccc; /* border */
+  border-radius: 4px; /* Rounded corners */
+  background-color: #f9f9f9; 
+  color: #333;
+  font-size: 16px;
+  appearance: none; 
+}
+
+/* Focus state for select dropdown */
+.matching-form select:focus {
+  outline: none;
+  border-color: #4CAF50; /* Green border on focus */
+  background-color: #fff; /* White background on focus */
+}
+
+/* Submit Button */
+.matching-form button.submit-btn {
+  background-color: #4CAF50;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.matching-form button.submit-btn:hover {
+  background-color: #45a049;
+}
+
+/* Error Message styling, to be expanded later most likely split into diff types */
+.matching-form .error-message {
+  color: red;
+  font-size: 14px;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+/* Position the link in the top right corner */
+.top-left-link {
+  position: absolute;
+  top: 20px;
+  left: 100px;
+  text-decoration: none;
+  color: #4CAF50; /* Green color */
+  font-weight: bold;
+}
+
+.top-left-link:hover {
+  color: #45a049; /* Slightly darker green on hover */
+}
+
+/* Position the link in the top right corner */
+.top-right-link {
+  position: absolute;
+  top: 20px;
+  right: 100px;
+  text-decoration: none;
+  color: #4CAF50; /* Green color */
+  font-weight: bold;
+}
+
+.top-right-link:hover {
+  color: #45a049; /* Slightly darker green on hover */
+}
+
+/* LOGIN FORM STYLES */
+
+.login-form {
+  width: 100%;
+  max-width: 400px;
+  min-width: 400px;
+  padding: 30px;
+  border: 2px solid #ccc;
+  border-radius: 12px;
+  background-color: white;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+/* Input field styling */
+.login-form input {
+  width: 100%;
+  padding: 12px;
+  margin-top: 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background-color: #f4f4f4;
+  font-size: 16px;
+  color: black;
+  box-sizing: border-box;
+}
+
+/* Focus state for input fields */
+.login-form input:focus {
+  outline: none;
+  border-color: #4CAF50;
+  color: black;
+  background-color: white;
+}
+
+/* Primary button styling */
+.submit-btn {
+  width: 100%;
+  padding: 12px;
+  margin-top: 15px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.submit-btn:hover {
+  background-color: #45a049;
+}
+
+/* Alternative button styling */
+.alt-btn {
+  width: 100%;
+  padding: 12px;
+  margin-top: 10px;
+  background-color: #333;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.alt-btn:hover {
+  background-color: #444;
+}
+
+/* Error message styling */
+.error-message {
+  color: red;
+  margin-top: 10px;
+}
+
+/* Link styling */
+.link {
+  color: #4CAF50;
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}

peerprep/frontend/src/views/MatchingServiceViews/MatchingServiceMainView.tsx

@@ -0,0 +1,75 @@
+import { useNavigate, Link } from "react-router-dom";
+import React, { useState, useEffect } from 'react';
+
+
+const MatchingServiceMainView: React.FC = () => {
+  // State for topic and difficulty
+  const [topic, setTopic] = useState<string>('');
+  const [difficulty, setDifficulty] = useState<string>('');
+
+  // Handle input changes
+  const handleTopicChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setTopic(e.target.value);
+  };
+
+  const handleDifficultyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setDifficulty(e.target.value);
+  };
+
+  // Handle form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Replace placeholder alert with actual matching logic
+    alert(`Matching for Topic: ${topic}, Difficulty: ${difficulty}`);
+    // Reset state
+    setTopic('');
+    setDifficulty('');
+  };
+
+  return (
+    <div className="matching-container">
+      <Link to="/" className="top-left-link">Go to Login</Link>
+      <Link to="/questions" className="top-right-link">Go to Questions</Link>
+      <div className="matching-form">
+        <h2>Select a Topic and Difficulty</h2>
+        <form onSubmit={handleSubmit}>
+          <div className="form-section category-group">
+            <select
+              name="topic"
+              value={topic}
+              onChange={handleTopicChange}
+              required
+            >
+              <option value="">Select Topic</option>
+              <option value="algorithms">Algorithms</option>
+              <option value="data-structures">Data Structures</option>
+              <option value="dynamic-programming">Dynamic Programming</option>
+              <option value="graphs">Graphs</option>
+              <option value="strings">Strings</option>
+            </select>
+          </div>
+
+          <div className="form-section">
+            <select
+              name="difficulty"
+              value={difficulty}
+              onChange={handleDifficultyChange}
+              required
+            >
+              <option value="">Select Difficulty</option>
+              <option value="easy">Easy</option>
+              <option value="medium">Medium</option>
+              <option value="hard">Hard</option>
+            </select>
+          </div>
+
+          <button type="submit" className="submit-btn">
+            Submit
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default MatchingServiceMainView;

peerprep/frontend/src/views/QuestionForm.tsx → peerprep/frontend/src/views/QuestionServiceViews/QuestionForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Question } from '../models/Question';
+import { Question } from '../../models/Question';
 
 interface QuestionFormProps {
   onSubmit: (formData: Omit<Question, '_id'>) => void;
@@ -50,7 +50,7 @@ const QuestionForm: React.FC<QuestionFormProps> = ({ onSubmit, initialData }) =>
 
   return (
     <form onSubmit={handleSubmit} className="question-form">
-      <div className="form-group">
+      <div className="form-section">
         <input
           type="text"
           name="title"
@@ -61,7 +61,7 @@ const QuestionForm: React.FC<QuestionFormProps> = ({ onSubmit, initialData }) =>
         />
       </div>
 
-      <div className="form-group">
+      <div className="form-section">
         <textarea
           name="description"
           value={formData.description}
@@ -71,7 +71,7 @@ const QuestionForm: React.FC<QuestionFormProps> = ({ onSubmit, initialData }) =>
         />
       </div>
 
-      <div className="form-group category-group">
+      <div className="form-section category-group">
         <label>Categories:</label>
         {['algorithms', 'data-structures', 'dynamic-programming', 'graphs', 'strings'].map(category => (
           <label key={category}>
@@ -87,7 +87,7 @@ const QuestionForm: React.FC<QuestionFormProps> = ({ onSubmit, initialData }) =>
         ))}
       </div>
 
-      <div className="form-group">
+      <div className="form-section">
         <select
           name="difficulty"
           value={formData.difficulty}

peerprep/frontend/src/views/QuestionList.tsx → peerprep/frontend/src/views/QuestionServiceViews/QuestionList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Question } from '../models/Question';
+import { Question } from '../../models/Question';
 
 interface QuestionListProps {
   questions: Question[];