get basic results page working

This commit is contained in:
afazio1
2024-04-21 00:21:25 -04:00
parent 4a6aa5faa5
commit 851443f19f
7 changed files with 93 additions and 32 deletions

View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import '../styles/MainScreenWrapper.css';
import { getSessionCookie } from '../contexts/session';
import { getAuthHeaders } from '../utils/getAuthHeaders';
import { Professor, Course, Topic } from "../types/types";
interface Filters extends Record<string, string> {
@@ -30,15 +30,6 @@ const MainSearch: React.FC = () => {
fetchTopics();
}, []);
const getAuthHeaders = () => {
const token = getSessionCookie();
// 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 {

View File

@@ -1,15 +1,8 @@
import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import styles from '../styles/Results.module.css'; // Make sure this path is correct
interface File {
id: string;
name: string; // do we even use id and name?
professor: string;
course: string;
type?: string; // Assumed type is optional
// what other properties to add?semester?
}
import { getAuthHeaders } from '../utils/getAuthHeaders';
import { File } from '../types/types';
const Results: React.FC = () => {
const [files, setFiles] = useState<File[]>([]);
@@ -23,7 +16,8 @@ const Results: React.FC = () => {
try {
// Need to double check this
const queryString = location.search; // Includes the '?' prefix
const response = await fetch(`/api/path-to-filefilterview${queryString}`);
console.log(queryString)
const response = await fetch(`http://localhost:8000/api/files/filter${queryString}`, {headers: getAuthHeaders()});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@@ -55,9 +49,26 @@ const Results: React.FC = () => {
{isLoading ? (
<p>Loading...</p>
) : files.length ? (
<table className={styles.resultsTable}>
{/* Table structure here */}
</table>
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>
</div>
<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>
</div>
</>
))
) : (
<p>No results found.</p>
)}