proper api call

backend/peer_notes/settings.py

@@ -25,7 +25,9 @@ SECRET_KEY = "django-insecure-rh0s*u8&#4$uugtt10cxbifjriaz%@&p1w!)c2=y^undd2*nx5
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ["10.20.4.109", "73.7.29.136", "localhost", "127.0.0.1"]
+ALLOWED_HOSTS = ["10.20.4.109", "73.7.29.136", "localhost", "127.0.0.1", "http://localhost:5173"]
+# ALLOWED_HOSTS = []
+
 
 
 # Application definition
@@ -50,6 +52,7 @@ REST_FRAMEWORK = {
 }
 
 MIDDLEWARE = [
+    "corsheaders.middleware.CorsMiddleware",
     "django.middleware.security.SecurityMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
@@ -57,7 +60,6 @@ MIDDLEWARE = [
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
-    "corsheaders.middleware.CorsMiddleware",
 ]
 
 ROOT_URLCONF = "peer_notes.urls"
@@ -134,6 +136,7 @@ STATIC_URL = "static/"
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 AUTH_USER_MODEL = "api.PeerUser"
 CORS_ALLOW_ALL_ORIGINS = True
+CORS_ALLOW_ALL_METHODS = True
 # CORS_ALLOWED_ORIGINS = [
 # "http://localhost:5173"
 # ]

frontend/src/screens/Login.tsx

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

frontend/src/screens/MainSearch.tsx

@@ -28,14 +28,29 @@ const MainSearch: React.FC = () => {
     fetchTopics();
   }, []);
 
+  const getAuthHeaders = () => {
+    const token = localStorage.getItem('authToken');
+    console.log("Using token for API call:", token);
+    return {
+      'Authorization': `Token ${token}`,
+      'Content-Type': 'application/json'
+    };
+  };
+
   const fetchProfessors = async () => {
     try {
-      const response = await fetch('{{host}}/api/professors', {
+      const response = await fetch('http://localhost:8000/api/professors', {
         method: 'GET',
-        credentials: 'include',
+        //credentials: 'include',
+        headers: getAuthHeaders(),
       });
       const data = await response.json();
-      setProfessors(data);
+      //setProfessors(data);
+      if (Array.isArray(data)) {
+        setProfessors(data);
+      } else {
+        console.error('Data fetched is not an array:', data);
+      }
     } catch (error) {
       console.error('Error fetching professors:', error);
     }
@@ -43,12 +58,18 @@ const MainSearch: React.FC = () => {
 
   const fetchCourses = async () => {
     try {
-      const response = await fetch('{{host}}/api/courses', {
+      const response = await fetch('http://localhost:8000/api/courses', {
         method: 'GET',
-        credentials: 'include',
+        //credentials: 'include',
+        headers: getAuthHeaders(),
       });
       const data = await response.json();
-      setCourses(data);
+      //setCourses(data);
+      if (Array.isArray(data)) {
+        setCourses(data);
+      } else {
+        console.error('Data fetched is not an array:', data);
+      }
     } catch (error) {
       console.error('Error fetching courses:', error);
     }
@@ -56,12 +77,18 @@ const MainSearch: React.FC = () => {
 
   const fetchTopics = async () => {
     try {
-      const response = await fetch('{{host}}/api/topics', {
+      const response = await fetch('http://localhost:8000/api/topics', {
         method: 'GET',
-        credentials: 'include',
+        //credentials: 'include',
+        headers: getAuthHeaders(),
       });
       const data = await response.json();
-      setTopics(data);
+      if (Array.isArray(data)) {
+        setTopics(data);
+      } else {
+        console.error('Data fetched is not an array:', data);
+      }
+      //setTopics(data);
     } catch (error) {
       console.error('Error fetching topics:', error);
     }