refiling and api call for search

frontend/src/components/MainSearch.tsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react'; 
-import { useNavigate } from 'react-router-dom';
-import '../styles/MainScreenWrapper.css';
-
-interface Filters {
-  professor: string;
-  course: string;
-  topic: string;
-}
-
-const MainSearch: React.FC = () => {
-  const [filters, setFilters] = useState<Filters>({
-    professor: '',
-    course: '',
-    topic: '',
-  });
-
-  const navigate = useNavigate();
-
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const { name, value } = event.target;
-    setFilters((prevFilters: Filters) => ({
-      ...prevFilters,
-      [name]: value,
-    }));
-  };
-
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const input = filters.toString()
-    const searchParams = new URLSearchParams(input)
-    navigate(`/results?${searchParams}`);
-  };
-
-  return (
-    <>
-    <img
-      src="/PeerNotes.png" 
-      alt="PeerNotes Logo" 
-      style={{ 
-        height: "100px"
-      }} 
-    />
-    <form onSubmit={handleSubmit} className="filter-container">
-      <div className="filter-item">
-        <label htmlFor="professors">Professors:</label>
-        <select id="professors" name="professor" value={filters.professor} onChange={handleChange}>
-          <option value="">Select a Professor</option>
-          {/* temporary options */}
-          <option value="professor1">Professor 1</option>
-          <option value="professor2">Professor 2</option>
-        </select>
-      </div>
-      <div className="filter-item">
-        <label htmlFor="courses">Course:</label>
-        <select id="courses" name="course" value={filters.course} onChange={handleChange}>
-          <option value="">Select a Course</option>
-          {/* temporary options */}
-          <option value="course1">Course 1</option>
-          <option value="course2">Course 2</option>
-        </select>
-      </div>
-      <div className="filter-item">
-        <label htmlFor="topics">Topic:</label>
-        <select id="topics" name="topic" value={filters.topic} onChange={handleChange}>
-          <option value="">Select a Topic</option>
-          {/* temporary options */}
-          <option value="topic1">Topic 1</option>
-          <option value="topic2">Topic 2</option>
-        </select>
-      </div>
-      <button type="submit" className="submit-button">Submit</button>
-    </form>
-    </>
-  );
-}
-
-export default MainSearch;

frontend/src/main.tsx

@@ -8,8 +8,8 @@ import {
 } from "react-router-dom";
 import Login from './screens/Login.tsx';
 import Signup from './screens/Signup.tsx';
-import Results from './components/Results.tsx';
-import MainSearch from './components/MainSearch.tsx';
+import Results from './screens/Results.tsx';
+import MainSearch from './screens/MainSearch.tsx';
 
 const router = createBrowserRouter([
   {

frontend/src/screens/MainSearch.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import '../styles/MainScreenWrapper.css';
+
+interface Filters {
+  professor: string;
+  course: string;
+  topic: string;
+}
+
+const MainSearch: React.FC = () => {
+  const [filters, setFilters] = useState<Filters>({
+    professor: '',
+    course: '',
+    topic: '',
+  });
+  const [professors, setProfessors] = useState<string[]>([]);
+  const [courses, setCourses] = useState<string[]>([]);
+  const [topics, setTopics] = useState<string[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Fetch professors
+    fetchProfessors();
+    // Fetch courses
+    fetchCourses();
+    // Fetch topics
+    fetchTopics();
+  }, []);
+
+  const fetchProfessors = async () => {
+    try {
+      const response = await fetch('{{host}}/api/professors', {
+        method: 'GET',
+        credentials: 'include',
+      });
+      const data = await response.json();
+      setProfessors(data);
+    } catch (error) {
+      console.error('Error fetching professors:', error);
+    }
+  };
+
+  const fetchCourses = async () => {
+    try {
+      const response = await fetch('{{host}}/api/courses', {
+        method: 'GET',
+        credentials: 'include',
+      });
+      const data = await response.json();
+      setCourses(data);
+    } catch (error) {
+      console.error('Error fetching courses:', error);
+    }
+  };
+
+  const fetchTopics = async () => {
+    try {
+      const response = await fetch('{{host}}/api/topics', {
+        method: 'GET',
+        credentials: 'include',
+      });
+      const data = await response.json();
+      setTopics(data);
+    } catch (error) {
+      console.error('Error fetching topics:', error);
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const { name, value } = event.target;
+    setFilters((prevFilters: Filters) => ({
+      ...prevFilters,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const searchParams = new URLSearchParams(filters as any);
+    navigate(`/results?${searchParams}`);
+  };
+
+  return (
+    <>
+      <img src="/PeerNotes.png" alt="PeerNotes Logo" style={{ height: "100px" }} />
+      <form onSubmit={handleSubmit} className="filter-container">
+        <div className="filter-item">
+          <label htmlFor="professors">Professors:</label>
+          <select id="professors" name="professor" value={filters.professor} onChange={handleChange}>
+            <option value="">Select a Professor</option>
+            {professors.map((professor, index) => (
+              <option key={index} value={professor}>{professor}</option>
+            ))}
+          </select>
+        </div>
+        <div className="filter-item">
+          <label htmlFor="courses">Course:</label>
+          <select id="courses" name="course" value={filters.course} onChange={handleChange}>
+            <option value="">Select a Course</option>
+            {courses.map((course, index) => (
+              <option key={index} value={course}>{course}</option>
+            ))}
+          </select>
+        </div>
+        <div className="filter-item">
+          <label htmlFor="topics">Topic:</label>
+          <select id="topics" name="topic" value={filters.topic} onChange={handleChange}>
+            <option value="">Select a Topic</option>
+            {topics.map((topic, index) => (
+              <option key={index} value={topic}>{topic}</option>
+            ))}
+          </select>
+        </div>
+        <button type="submit" className="submit-button">Submit</button>
+      </form>
+    </>
+  );
+}
+
+export default MainSearch;

frontend/src/screens/Results.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import styles from '../screens/Results.module.css'; // Make sure this path is correct
+import styles from '../styles/Results.module.css'; // Make sure this path is correct
 
 interface File {
   id: string;