small fixes

frontend/src/App.tsx

@@ -32,11 +32,15 @@ export default function App() {
 }
 function Navbar() {
   const session = useContext(SessionContext);
+  const logout = () => {
+    destroySessionCookie();
+    window.location.reload();
+  }
 
   const links = session ? (
     <>
       <Link to="/">Home</Link>
-      <Link to="/login" onClick={destroySessionCookie}>Logout</Link>
+      <a onClick={logout}>Logout</a>
     </>
   ): (
       <Link to="/login">Login</Link>

frontend/src/assets/file.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+
+<defs>
+</defs>
+<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
+	<path d="M 77.474 17.28 L 61.526 1.332 C 60.668 0.473 59.525 0 58.311 0 H 15.742 c -2.508 0 -4.548 2.04 -4.548 4.548 v 80.904 c 0 2.508 2.04 4.548 4.548 4.548 h 58.516 c 2.508 0 4.549 -2.04 4.549 -4.548 V 20.496 C 78.807 19.281 78.333 18.138 77.474 17.28 z M 61.073 5.121 l 12.611 12.612 H 62.35 c -0.704 0 -1.276 -0.573 -1.276 -1.277 V 5.121 z M 74.258 87 H 15.742 c -0.854 0 -1.548 -0.694 -1.548 -1.548 V 4.548 C 14.194 3.694 14.888 3 15.742 3 h 42.332 v 13.456 c 0 2.358 1.918 4.277 4.276 4.277 h 13.457 v 64.719 C 75.807 86.306 75.112 87 74.258 87 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 68.193 33.319 H 41.808 c -0.829 0 -1.5 -0.671 -1.5 -1.5 s 0.671 -1.5 1.5 -1.5 h 26.385 c 0.828 0 1.5 0.671 1.5 1.5 S 69.021 33.319 68.193 33.319 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 34.456 33.319 H 21.807 c -0.829 0 -1.5 -0.671 -1.5 -1.5 s 0.671 -1.5 1.5 -1.5 h 12.649 c 0.829 0 1.5 0.671 1.5 1.5 S 35.285 33.319 34.456 33.319 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<linearGradient id="SVGID_1" gradientUnits="userSpaceOnUse" x1="21.8064" y1="19.2332" x2="42.2984" y2="19.2332">
+<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity: 1"/>
+<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity: 1"/>
+</linearGradient>
+<line x1="-10.246" y1="0" x2="10.246" y2="0" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_1); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
+	<path d="M 42.298 20.733 H 21.807 c -0.829 0 -1.5 -0.671 -1.5 -1.5 s 0.671 -1.5 1.5 -1.5 h 20.492 c 0.829 0 1.5 0.671 1.5 1.5 S 43.127 20.733 42.298 20.733 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 68.193 44.319 H 21.807 c -0.829 0 -1.5 -0.671 -1.5 -1.5 s 0.671 -1.5 1.5 -1.5 h 46.387 c 0.828 0 1.5 0.671 1.5 1.5 S 69.021 44.319 68.193 44.319 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 48.191 55.319 H 21.807 c -0.829 0 -1.5 -0.672 -1.5 -1.5 s 0.671 -1.5 1.5 -1.5 h 26.385 c 0.828 0 1.5 0.672 1.5 1.5 S 49.02 55.319 48.191 55.319 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 68.193 55.319 H 55.544 c -0.828 0 -1.5 -0.672 -1.5 -1.5 s 0.672 -1.5 1.5 -1.5 h 12.649 c 0.828 0 1.5 0.672 1.5 1.5 S 69.021 55.319 68.193 55.319 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 68.193 66.319 H 21.807 c -0.829 0 -1.5 -0.672 -1.5 -1.5 s 0.671 -1.5 1.5 -1.5 h 46.387 c 0.828 0 1.5 0.672 1.5 1.5 S 69.021 66.319 68.193 66.319 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 68.193 77.319 H 55.544 c -0.828 0 -1.5 -0.672 -1.5 -1.5 s 0.672 -1.5 1.5 -1.5 h 12.649 c 0.828 0 1.5 0.672 1.5 1.5 S 69.021 77.319 68.193 77.319 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</svg>

frontend/src/hooks/sessionRedirect.ts

@@ -8,7 +8,7 @@ export const useSessionRedirect = () => {
   // Redirect to home if session is defined
   useEffect(() => {
     if (session !== undefined) {
-        navigate('/');
+      navigate('/search');
     }
   }, [session, navigate])
 }

frontend/src/screens/Login.tsx

@@ -22,19 +22,15 @@ export default function Login() {
         body: JSON.stringify({ username, password }),
     })
     .then(response => response.json())
-    .then(response => response.json())
     .then(data => {
       console.log("Login response data:", data);
       if (data.token) {
-          localStorage.setItem('authToken', data.token);
+        // localStorage.setItem('authToken', data.token);
-          navigate('/search');
+        navigate('/search');
       } else {
           console.error('No token received:', data);
       }
     })
-    // .then(() => {
-    //   navigate('/');
-    // })
     .catch((error) => {
         console.error('Error:', error);
     });

frontend/src/screens/MainSearch.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../styles/MainScreenWrapper.css';
+import { getSessionCookie } from '../contexts/session';
+import { Professor, Course, Topic } from "../types/types";
 
 interface Filters {
   professor: string;
@@ -14,9 +16,9 @@ const MainSearch: React.FC = () => {
     course: '',
     topic: '',
   });
-  const [professors, setProfessors] = useState<string[]>([]);
+  const [professors, setProfessors] = useState<Professor[]>([]);
-  const [courses, setCourses] = useState<string[]>([]);
+  const [courses, setCourses] = useState<Course[]>([]);
-  const [topics, setTopics] = useState<string[]>([]);
+  const [topics, setTopics] = useState<Topic[]>([]);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -29,7 +31,8 @@ const MainSearch: React.FC = () => {
   }, []);
 
   const getAuthHeaders = () => {
-    const token = localStorage.getItem('authToken');
+    const token = getSessionCookie();
+    // const token = localStorage.getItem('authToken');
     console.log("Using token for API call:", token);
     return {
       'Authorization': `Token ${token}`,
@@ -41,12 +44,13 @@ const MainSearch: React.FC = () => {
     try {
       const response = await fetch('http://localhost:8000/api/professors', {
         method: 'GET',
-        //credentials: 'include',
         headers: getAuthHeaders(),
       });
       const data = await response.json();
-      //setProfessors(data);
+      console.log("Professors fetched:", data);
+
       if (Array.isArray(data)) {
+        console.log("Professors fetched:", data);
         setProfessors(data);
       } else {
         console.error('Data fetched is not an array:', data);
@@ -60,11 +64,9 @@ const MainSearch: React.FC = () => {
     try {
       const response = await fetch('http://localhost:8000/api/courses', {
         method: 'GET',
-        //credentials: 'include',
         headers: getAuthHeaders(),
       });
       const data = await response.json();
-      //setCourses(data);
       if (Array.isArray(data)) {
         setCourses(data);
       } else {
@@ -79,7 +81,6 @@ const MainSearch: React.FC = () => {
     try {
       const response = await fetch('http://localhost:8000/api/topics', {
         method: 'GET',
-        //credentials: 'include',
         headers: getAuthHeaders(),
       });
       const data = await response.json();
@@ -88,7 +89,6 @@ const MainSearch: React.FC = () => {
       } else {
         console.error('Data fetched is not an array:', data);
       }
-      //setTopics(data);
     } catch (error) {
       console.error('Error fetching topics:', error);
     }

frontend/src/types/types.ts

@@ -0,0 +1,15 @@
+export interface Professor {
+  id: number;
+  name: string;
+}
+export interface Course {
+  id: number;
+  name: string;
+  number: string;
+}
+
+export interface Topic {
+  id: number;
+  name: string;
+  description: string;
+}