chore: add jwt token on api calls

app/admin/create/page.tsx

@@ -4,6 +4,7 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { useRouter } from 'next/navigation'
 import { Checkbox, Label } from 'flowbite-react';
+import { useAuth } from "@/app/contexts/AuthContext";
 
 
 
@@ -22,6 +23,7 @@ const initialValues: FormData = {
 };
 
 export default function Create() {
+  const { token } = useAuth();
   const router = useRouter();
   const [formData, setFormData] = useState<FormData>(initialValues);
   const [selectedDate, setSelectedDate] = useState(new Date());
@@ -40,6 +42,7 @@ export default function Create() {
       const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/create`, {
         method: "POST",
         headers: {
+          Authorization: `Bearer ${token}`,
           "Content-Type": "application/json",
         },
         body: JSON.stringify(formDataWithDates),
@@ -136,19 +139,19 @@ export default function Create() {
   const handleQuestionChange = (index: number, field: string, value: string) => {
     const updatedQuestions = [...formData.questions];
     const questionObj = updatedQuestions[index];
-  
+
     if (questionObj) {
       // Ensure questionObj is defined
       questionObj[field as keyof typeof questionObj] = value;
-  
+
       setFormData((prevData) => ({
         ...prevData,
         questions: updatedQuestions,
       }));
     }
   };
-  
-  
+
+
 
   const renderInput = (
     id: keyof FormData,

app/admin/listing/[listingId]/[applicantId]/page.tsx

@@ -7,14 +7,21 @@ import ResponseCard from "@/components/admin/listing/ResponseCard";
 import ApplicantInfoCard from "@/components/admin/listing/ApplicantInfoCard";
 import ApplicantPDFViewer from "@/components/admin/listing/ApplicantPDFViewer";
 import Loader from "@/components/Loader";
+import { useAuth } from "@/app/contexts/AuthContext";
 
 export default function ApplicantPage({ params }: { params: { applicantId: string } }) {
+  const { token } = useAuth();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [applicantData, setApplicantData] = useState<null | Applicant>(null);
 
   useEffect(() => {
-    // Fetch listings data from your /listings API endpoint
-    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/applicant/${params.applicantId}`)
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/applicant/${params.applicantId}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    })
       .then((response) => response.json())
       .then((data: Applicant) => {
         setApplicantData(data);

app/admin/listing/[listingId]/insights/page.tsx

@@ -7,11 +7,13 @@ import { Applicant } from "@/types/applicant";
 import { PieChart, Pie, Tooltip, Label } from "recharts";
 import { Table, Tabs } from 'flowbite-react';
 import SummaryCard from "@/components/admin/listing/insights/SummaryCard";
+import { useAuth } from "@/app/contexts/AuthContext";
 
 import { FlowbiteTabTheme } from "flowbite-react";
 
 
 export default function Insights({ params }: { params: { listingId: string } }) {
+  const { token } = useAuth();
   const router = useRouter();
   // dashboard : object containing data from backend (# applicants, average gpa, #1 major, avg gradYear, avg response length)
   const [dashboard, setDashboard] = useState<Dashboard>({
@@ -41,10 +43,16 @@ export default function Insights({ params }: { params: { listingId: string } })
 
   // matchingApplicants : list of applicants depending on which part of PieChart (if any) has been clicked
   const [matchingApplicants, setMatchingApplicants] = useState<[] | Applicant[]>([]);
-  
+
   // Fetch insights data from your /listings API endpoint
   useEffect(() => {
-    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/insights/listing/${params.listingId}`)
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/insights/listing/${params.listingId}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    })
       .then((response) => response.json())
       .then(([dashboard, distribution]: [Dashboard, DistributionMetricsState]) => {
         setDashboard(dashboard);

app/admin/members/page.tsx

@@ -1,15 +1,23 @@
 "use client"
 import React, { useState, useEffect } from "react";
-import { Table, Progress } from 'flowbite-react';
+import { Table } from 'flowbite-react';
 import { Member } from "@/types/admin/members";
+import { useAuth } from "@/app/contexts/AuthContext";
 
 export default function Members() {
 
   const [members, setMembers] = useState<Member[]>([]);
 
   useEffect(() => {
+    const { token } = useAuth();
     // Fetch listings data from your /listings API endpoint
-    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/members`)
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/members`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    })
       .then((response) => response.json())
       .then((data: Member[]) => {
         setMembers(data);

app/admin/settings/[listingId]/page.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation';
 import { Listing } from "@/types/listing";
 import { Button, Modal } from 'flowbite-react';
 import CustomAlert from "@/components/admin/settings/CustomAlert";
+import { useAuth } from "@/app/contexts/AuthContext";
 
 
 interface FormData {
@@ -22,6 +23,7 @@ const initialValues: FormData = {
 };
 
 export default function ListingSettings({ params }: { params: { listingId: string } }) {
+  const { token } = useAuth();
   const router = useRouter();
   const [openModal, setOpenModal] = useState(false);
   const [listingData, setListingData] = useState<Listing | null>(null);
@@ -37,7 +39,13 @@ export default function ListingSettings({ params }: { params: { listingId: strin
 
   useEffect(() => {
     // Fetch listing data from your /listings API endpoint
-    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/listings/${params.listingId}`)
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/listings/${params.listingId}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    })
       .then((response) => response.json())
       .then((data: Listing) => {
         // Set the form data with the fetched listing data