[new] - new hooks and api wrapper

frontend/src/API/tutors/useFetchTutor.tsx

@@ -4,7 +4,6 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 export default function useFetchTutor() {
   async function getTutors() {
     const { data } = await axios.get("/api/users/?tutor=1");
-    console.log(data);
     return data;
   }
   const data = useQuery({

frontend/src/Root.tsx

@@ -1,28 +1,38 @@
-import {Outlet, useLocation, useNavigate} from "react-router-dom";
+import {Outlet, useLocation} from "react-router-dom";
 import Navbar from "@/components/navigation/navbar.tsx";
 import { Toaster } from "@/components/ui/toaster";
 import {TooltipProvider} from "@/components/ui/tooltip.tsx";
 import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from "@/components/ui/resizable.tsx";
 import {
     AreaChart, Calendar,
-    Clock,
     Home, LifeBuoy, LogOut, MessageSquare,
     PenSquare, Settings, User, Users,
-    Video,
 } from "lucide-react";
 import {NewNav} from "@/components/new-nav.tsx";
 import {useEffect, useState} from "react";
 import {cn} from "@/lib/utils.ts";
 import {Separator} from "@/components/ui/separator.tsx";
+import {useIssues} from "@/hooks/use-issues.ts";
+import {useProfessors} from "@/hooks/use-professors.ts";
+import {useTickets} from "@/hooks/use-tickets.ts";
+import {useAnnouncements} from "@/hooks/use-announcements.ts";
+import {useCourses} from "@/hooks/use-courses.ts";
+import {useTutors} from "@/hooks/use-tutors.ts";
 
 export default function Root() {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [path, setPath] = useState("");
-  // const navigate = useNavigate();
+  const issues = useIssues();
+  const professors = useProfessors();
   const location = useLocation();
+  const tickets = useTickets();
+    const announcements = useAnnouncements();
+    const courses = useCourses();
+    const tutors = useTutors();
   useEffect(() => {
     setPath(location.pathname);
   }, [location]);
+  console.log(issues, professors, tickets, tutors, announcements, courses);
 
   return (
       <div className="bg-background">
@@ -74,9 +84,9 @@ export default function Root() {
                           title: "CSLC Info",
                           label: "",
                           icon: LifeBuoy,
-                          isActive: path === "/zoom",
+                          isActive: path === "/info",
                           isPinging: false,
-                          path: "/zoom"
+                          path: "/info"
                       }
                   ]}
               />

frontend/src/components/tickets/ticket.tsx

@@ -5,7 +5,6 @@ import { CSCIIcon } from "@/components/assets/department-icons.tsx";
 import { CheckIcon, CircleDashedIcon, CircleIcon, XIcon } from "lucide-react";
 
 export default function Ticket({ ticket }: any) {
-    console.log(ticket);
   return (
     <div className="border rounded-xl text-foreground px-4 pt-2">
       <div className="flex justify-between align-middle items-center mb-2">

frontend/src/hooks/use-announcements.ts

@@ -0,0 +1,16 @@
+import {keepPreviousData, useQuery} from "@tanstack/react-query";
+import {Instance} from "@/services/axios.ts";
+
+const instance: Instance = new Instance();
+
+export function useAnnouncements() {
+    const data = useQuery({
+        queryKey: ["announcements"],
+        queryFn: () => instance.getAnnouncements(),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    if (data) {
+        return data;
+    }
+}

frontend/src/hooks/use-courses.ts

@@ -0,0 +1,16 @@
+import {keepPreviousData, useQuery} from "@tanstack/react-query";
+import {Instance} from "@/services/axios.ts";
+
+const instance: Instance = new Instance();
+
+export function useCourses() {
+    const data = useQuery({
+        queryKey: ["courses"],
+        queryFn: () => instance.getCourses(),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    if (data) {
+        return data;
+    }
+}

frontend/src/hooks/use-issues.ts

@@ -0,0 +1,16 @@
+import {keepPreviousData, useQuery} from "@tanstack/react-query";
+import {Instance} from "@/services/axios.ts";
+
+const instance: Instance = new Instance();
+
+export function useIssues() {
+    const data = useQuery({
+        queryKey: ["issues"],
+        queryFn: () => instance.getIssues(),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    if (data) {
+        return data;
+    }
+}

frontend/src/hooks/use-professors.ts

@@ -0,0 +1,16 @@
+import {keepPreviousData, useQuery} from "@tanstack/react-query";
+import {Instance} from "@/services/axios.ts";
+
+const instance: Instance = new Instance();
+
+export function useProfessors() {
+    const data = useQuery({
+        queryKey: ["professors"],
+        queryFn: () => instance.getProfessors(),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    if (data) {
+        return data;
+    }
+}

frontend/src/hooks/use-sections.ts

@@ -0,0 +1,16 @@
+import {keepPreviousData, useQuery} from "@tanstack/react-query";
+import {Instance} from "@/services/axios.ts";
+
+const instance: Instance = new Instance();
+
+export function useSections() {
+    const data = useQuery({
+        queryKey: ["sections"],
+        queryFn: () => instance.getSections(),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    if (data) {
+        return data;
+    }
+}

frontend/src/hooks/use-tickets.ts

@@ -0,0 +1,16 @@
+import {keepPreviousData, useQuery} from "@tanstack/react-query";
+import {Instance} from "@/services/axios.ts";
+
+const instance: Instance = new Instance();
+
+export function useTickets() {
+    const data = useQuery({
+        queryKey: ["tickets"],
+        queryFn: () => instance.getTickets(),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    if (data) {
+        return data;
+    }
+}

frontend/src/hooks/use-tutors.ts

@@ -0,0 +1,16 @@
+import {keepPreviousData, useQuery} from "@tanstack/react-query";
+import {Instance} from "@/services/axios.ts";
+
+const instance: Instance = new Instance();
+
+export function useTutors() {
+    const data = useQuery({
+        queryKey: ["tutors"],
+        queryFn: () => instance.getTutors(),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    if (data) {
+        return data;
+    }
+}

frontend/src/services/axios.ts

@@ -0,0 +1,114 @@
+import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
+
+export class Instance {
+    private _instance: AxiosInstance;
+    constructor() {
+        this._instance = axios.create({
+            baseURL: "/api/",
+            timeout: 30000,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    }
+
+    async get(endpoint: string) {
+        const response = await this._instance.get(endpoint);
+        return response.data;
+    }
+
+    async post(endpoint: string, data: any, headers: AxiosRequestConfig | undefined = undefined) {
+        const response = await this._instance.post(endpoint, data, headers);
+        return response.data;
+    }
+
+    private cookie(name: string): string | undefined {
+        const value: string = `; ${document.cookie}`;
+        const parts: string[] = value.split(`; ${name}=`);
+        if (parts.length === 2 && !!parts) return parts.pop()?.split(";").shift();
+    }
+
+    async createTicket(data: any): Promise<any> {
+        const csrf: string | undefined = this.cookie("csrftoken");
+        return await this.post("tickets/", data, {
+            headers: {"X-CSRFToken": csrf},
+        });
+    }
+
+    async updateTicket(data: any) {
+        const csrf: string | undefined = this.cookie("csrftoken");
+        return await this.post(`tickets/${data.id}/`, data, {
+            headers: {"X-CSRFToken": csrf},
+        });
+    }
+
+    async getTickets() {
+        return await this.get("tickets");
+    }
+
+    async createAnnouncement(data: any) {
+        const csrf: string | undefined = this.cookie("csrftoken");
+        return await this.post("announcements", data, {
+            headers: {"X-CSRFToken": csrf},
+        });
+    }
+
+    async getAnnouncements() {
+        return await this.get("announcements");
+    }
+
+    async createCourse(data: any) {
+        const csrf: string | undefined = this.cookie("csrftoken");
+        return await this.post("courses", data, {
+            headers: {"X-CSRFToken": csrf},
+        });
+    }
+
+    async getCourses() {
+        return await this.get("courses");
+    }
+
+    async createIssue(data: any) {
+        const csrf: string | undefined = this.cookie("csrftoken");
+        return await this.post("issues", data, {
+            headers: {"X-CSRFToken": csrf},
+        });
+    }
+
+    async getIssues() {
+        return await this.get("issues");
+    }
+
+    async createProfessor(data: any) {
+        const csrf: string | undefined = this.cookie("csrftoken");
+        return await this.post("professors", data, {
+            headers: {"X-CSRFToken": csrf},
+        });
+    }
+
+    async getProfessors() {
+        return await this.get("professors");
+    }
+
+    async createSection(data: any) {
+        const csrf: string | undefined = this.cookie("csrftoken");
+        return await this.post("sections", data, {
+            headers: {"X-CSRFToken": csrf},
+        });
+    }
+
+    async getSections() {
+        return await this.get("sections");
+    }
+
+    async createTutor(data: any) {
+        const csrf: string | undefined = this.cookie("csrftoken");
+        return await this.post("tutors", data, {
+            headers: {"X-CSRFToken": csrf},
+        });
+    }
+
+    async getTutors() {
+        return await this.get("users/?tutor=1");
+    }
+}