add filter inputs

frontend/src/screens/RegisterFile.tsx

@@ -1,7 +1,8 @@
 import "../styles/RegisterFile.css";
-import { RegisteredFile, Status } from "../types/types";
+import { RegisteredFile, Status, Professor, Course, Topic, Semester } from "../types/types";
 import { useState, useEffect } from "react";
 import { getAuthHeaders } from "../utils/getAuthHeaders";
+import { getSessionCookie } from "../contexts/session";
 
 export default function RegisterFile() {
   const [serverFiles, setServerFiles] = useState<RegisteredFile[]>([]);
@@ -52,16 +53,17 @@ export default function RegisterFile() {
     // @ts-expect-error - fileInput is an HTMLInputElement
     const filename: string = fileInput.files[0].name.replace(/\s/g, "_");
     const formData = new FormData(event.target as HTMLFormElement);
+
     // register file with central server
     fetch(`http://localhost:8000/api/register/`, {
       method: 'POST',
       headers: getAuthHeaders(),
       body: JSON.stringify({
         filename: filename,
-        topic: 1,
-        semester: 1,
-        professor: 1,
-        course: 1,
+        topic: formData.get('topic'),
+        semester: formData.get('semester'),
+        professor: formData.get('professor'),
+        course: formData.get('course'),
       })
     })
       .then(response => response.json())
@@ -80,6 +82,113 @@ export default function RegisterFile() {
       })
       .catch(error => console.error(error));
   }
+
+  // Filters Logic
+  interface Filters extends Record<string, string> {
+  professor: string;
+  course: string;
+  topic: string;
+}
+  const [filters, setFilters] = useState<Filters>({
+    professor: '',
+    course: '',
+    topic: '',
+  });
+  const [professors, setProfessors] = useState<Professor[]>([]);
+  const [courses, setCourses] = useState<Course[]>([]);
+  const [topics, setTopics] = useState<Topic[]>([]);
+  const [semesters, setSemesters] = useState<Semester[]>([]);
+
+  useEffect(() => {
+    if (!getSessionCookie()) {
+      return;
+    }
+    // Fetch professors
+    fetchProfessors();
+    // Fetch courses
+    fetchCourses();
+    // Fetch topics
+    fetchTopics();
+    // Fetch semesters
+    fetchSemesters();
+  }, []);
+
+
+  const fetchProfessors = async () => {
+    try {
+      const response = await fetch('http://localhost:8000/api/professors', {
+        method: 'GET',
+        headers: getAuthHeaders(),
+      });
+      const data = await response.json();
+
+      if (Array.isArray(data)) {
+        setProfessors(data);
+      } else {
+        console.error('Data fetched is not an array:', data);
+      }
+    } catch (error) {
+      console.error('Error fetching professors:', error);
+    }
+  };
+
+  const fetchCourses = async () => {
+    try {
+      const response = await fetch('http://localhost:8000/api/courses', {
+        method: 'GET',
+        headers: getAuthHeaders(),
+      });
+      const data = await response.json();
+      if (Array.isArray(data)) {
+        setCourses(data);
+      } else {
+        console.error('Data fetched is not an array:', data);
+      }
+    } catch (error) {
+      console.error('Error fetching courses:', error);
+    }
+  };
+
+  const fetchTopics = async () => {
+    try {
+      const response = await fetch('http://localhost:8000/api/topics', {
+        method: 'GET',
+        headers: getAuthHeaders(),
+      });
+      const data = await response.json();
+      if (Array.isArray(data)) {
+        setTopics(data);
+      } else {
+        console.error('Data fetched is not an array:', data);
+      }
+    } catch (error) {
+      console.error('Error fetching topics:', error);
+    }
+  };
+  const fetchSemesters = async () => {
+    try {
+      const response = await fetch('http://localhost:8000/api/semesters', {
+        method: 'GET',
+        headers: getAuthHeaders(),
+      });
+      const data = await response.json();
+      if (Array.isArray(data)) {
+        setSemesters(data);
+      } else {
+        console.error('Data fetched is not an array:', data);
+      }
+    } catch (error) {
+      console.error('Error fetching courses:', error);
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const { name, value } = event.target;
+    setFilters((prevFilters: Filters) => ({
+      ...prevFilters,
+      [name]: value,
+    }));
+  };
     return (
         <div className="container">
           <div className="file-upload-card">
@@ -87,7 +196,43 @@ export default function RegisterFile() {
               <p>Host a local file for the GT community!</p>
             <form onSubmit={handleSubmit}>
               <label htmlFor="file">File</label>
-              <input type="file" name="file" id="file" />
+            <input type="file" name="file" id="file" />
+            <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) => (
+              <option key={professor.id} value={professor.id}>{professor.name}</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) => (
+              <option key={course.id} value={course.id}>{course.name}</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) => (
+              <option key={topic.id} value={topic.id}>{topic.name}</option>
+            ))}
+          </select>
+        </div>
+        <div className="filter-item">
+          <label htmlFor="semesters">Semester:</label>
+          <select id="semester" name="semester" value={filters.semester} onChange={handleChange}>
+            <option value="">Select a Semester</option>
+            {semesters.map((semester) => (
+              <option key={semester.id} value={semester.id}>{semester.name}</option>
+            ))}
+          </select>
+        </div>
               <button type="submit" className="submit-button">Submit</button>
             </form>
           </div>

frontend/src/styles/RegisterFile.css

@@ -3,8 +3,8 @@ color: white;
 }
 .container {
     display: flex;
-    gap: 10rem;
-    justify-content: space-between;
+    gap: 5rem;
+    justify-content: center;
 }
 
 .file-upload-card {
@@ -45,4 +45,4 @@ color: white;
     border: 1px solid #FFFFFF;
     background-color: #B1D4E0;
     color: black;
-  }
+  }