add upload file boilerplate + changes to results page

frontend/src/screens/MainSearch.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../styles/MainScreenWrapper.css';
 import { getAuthHeaders } from '../utils/getAuthHeaders';
-import { Professor, Course, Topic } from "../types/types";
+import { Professor, Course, Topic, Semester } from "../types/types";
 
 interface Filters extends Record<string, string> {
   professor: string;
@@ -19,6 +19,7 @@ const MainSearch: React.FC = () => {
   const [professors, setProfessors] = useState<Professor[]>([]);
   const [courses, setCourses] = useState<Course[]>([]);
   const [topics, setTopics] = useState<Topic[]>([]);
+  const [semesters, setSemesters] = useState<Semester[]>([]);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -28,6 +29,8 @@ const MainSearch: React.FC = () => {
     fetchCourses();
     // Fetch topics
     fetchTopics();
+    // Fetch semesters
+    fetchSemesters();
   }, []);
 
 
@@ -82,6 +85,22 @@ const MainSearch: React.FC = () => {
       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;
@@ -128,6 +147,15 @@ const MainSearch: React.FC = () => {
             ))}
           </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>
     </>

frontend/src/screens/RegisterFile.tsx

@@ -0,0 +1,66 @@
+import "../styles/RegisterFile.css";
+import { RegisteredFile } from "../types/types";
+import { useState, useEffect } from "react";
+
+export default function RegisterFile() {
+  const [registeredFiles, setRegisteredFiles] = useState<RegisteredFile[]>([]);
+
+  useEffect(() => {
+    fetchRegisteredFiles();
+  }, [])
+  const fetchRegisteredFiles = () => {
+    return
+    fetch("http://localhost:5000/files") // replace with local api endpoint
+      .then(response => response.json())
+      .then(data => {
+          setRegisteredFiles(data);
+      })
+      .catch(error => console.error(error));
+  }
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // handle file upload
+    const formData = new FormData(event.target as HTMLFormElement);
+    const file = formData.get('file');
+    console.log(file, typeof file)
+
+  }
+    return (
+        <div className="container">
+          <div className="file-upload-card">
+              <h1>Upload a File</h1>
+              <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" />
+              <button type="submit" className="submit-button">Submit</button>
+            </form>
+          </div>
+          <div>
+          <h1>Registered Files</h1>
+          <table>
+            <thead>
+              <tr>
+                <th>File Name</th>
+                <th>Original Author</th>
+                <th>Professor</th>
+                <th>Semester</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {registeredFiles.map((file) => (
+                <tr key={file.id}>
+                  <td>{file.filename}</td>
+                  <td>{file.original_author.username}</td>
+                  <td>{file.professor.name}</td>
+                  <td>{file.semester.name}</td>
+                  <td>{file.status}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          </div>
+        </div>
+    )
+}

frontend/src/screens/Results.tsx

@@ -49,17 +49,34 @@ const Results: React.FC = () => {
         {isLoading ? (
           <p>Loading...</p>
         ) : files.length ? (
-            files.map((file) => (
-            <div key={file.id} className={styles.fileCard}>
-              <h3>{file.filename}</h3>
-              <p>Course: {file.course.name} {file.course.number}</p>
-              <p>Professor: {file.professor.name}</p>
-              <p>Semester: {file.semester.name}</p>
-              <p>Upvotes: {file.upvotes.length}</p>
-              <p>Downvotes: {file.downvotes.length}</p>
-              <p><a href="">Download</a></p>
-            </div>
-          ))
+            <table>
+              <thead>
+                <tr>
+                  <th>Filename</th>
+                  <th>Course</th>
+                  <th>Professor</th>
+                  <th>Semester</th>
+                  <th>Upvotes</th>
+                  <th>Downvotes</th>
+                  <th>Original Author</th>
+                  <th>Download</th>
+                </tr>
+              </thead>
+              <tbody>
+                {files.map((file) => (
+                  <tr key={file.id}>
+                    <td>{file.filename}</td>
+                    <td>{file.course.name} {file.course.number}</td>
+                    <td>{file.professor.name}</td>
+                    <td>{file.semester.name}</td>
+                    <td>{file.upvotes.length}</td>
+                    <td>{file.downvotes.length}</td>
+                    <td>{file.original_author.username}</td>
+                    <td><a href="">Download</a></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
         ) : (
           <p>No results found.</p>
         )}