[ADD] - Increased decoupling of API calls

Msal
nulzo · Nov 18, 2023 · 73555d9 · 73555d9
2 parents 5b91d1d + 717834b
commit 73555d9
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 57 deletions.
diff --git a/backend/base/settings.py b/backend/base/settings.py
@@ -28,6 +28,10 @@
 
 ALLOWED_HOSTS: list[str] = ["*", "http://localhost", "localhost"]
 
+CSRF_TRUSTED_ORIGINS = [
+    'http://localhost', 'http://localhost:80', 'http://localhost:4200', 'http://localhost:6969'
+]
+
 INSTALLED_APPS = [
     # 'daphne',
     "django.contrib.admin",
@@ -47,18 +51,19 @@
     "django.middleware.security.SecurityMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
-    # "django.middleware.csrf.CsrfViewMiddleware",
+    "django.middleware.csrf.CsrfViewMiddleware",
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "corsheaders.middleware.CorsMiddleware",
 ]
 
 CORS_ORIGIN_ALLOW_ALL = True
-# CORS_ORIGIN_WHITELIST = ("http://localhost:5173",)
+CORS_ALLOW_ALL_ORIGINS = True
 
 ASGI_APPLICATION = "api.routing.application"
-CHANNEL_LAYERS = {"default": {"BACKEND": "channels.layers.InMemoryChannelLayer"}}
+CHANNEL_LAYERS = {"default": {
+    "BACKEND": "channels.layers.InMemoryChannelLayer"}}
 
 MESSAGE_STORAGE = "django.contrib.messages.storage.cookie.CookieStorage"
 

diff --git a/frontend/index.html b/frontend/index.html
@@ -1,16 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image" href="/UNO.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="./node_modules/preline/dist/preline.js"></script>
-    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
-    <title>CSLC Tutoring Portal</title>
-  </head>
 
-  <body class="overscroll-none">
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image" href="/UNO.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CSLC Tutoring Portal</title>
+</head>
+
+<body class="overscroll-none">
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -44,6 +44,7 @@
     "@radix-ui/themes": "^1.1.2",
     "@tailwindcss/forms": "^0.5.6",
     "@tanstack/react-query": "^5.0.5",
+    "@tanstack/react-query-devtools": "^5.8.4",
     "@tanstack/react-table": "^8.10.7",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.5.1",

diff --git a/frontend/src/API/professors/useMutateProfessor.ts b/frontend/src/API/professors/useMutateProfessor.ts
diff --git a/frontend/src/API/tickets/ticketRequests.ts b/frontend/src/API/tickets/ticketRequests.ts
@@ -0,0 +1,23 @@
+import axios from "axios"
+
+export function createTicket(data: any) {
+    function getCookie(name) {
+        const value = `; ${document.cookie}`;
+        const parts = value.split(`; ${name}=`);
+        if (parts.length === 2) return parts.pop().split(';').shift();
+    }
+    const csrftoken = getCookie('csrftoken');
+    return axios.post("/api/tickets/", {
+        name: data.student_name,
+        description: data.body,
+        professor: data.professor,
+        course: data.section,
+        issue: data.issue,
+    },
+        {
+            headers: {
+                'X-CSRFToken': csrftoken
+            }
+        })
+        .then(res => res.data);
+}
diff --git a/frontend/src/components/forms/TicketForm.tsx b/frontend/src/components/forms/TicketForm.tsx
@@ -31,10 +31,10 @@ import useFetchProfessor from "@/API/professors/useFetchProfessor";
 import useFetchCourse from "@/API/courses/useFetchCourse";
 import useFetchIssue from "@/API/issues/useFetchIssue";
 import { ScrollArea } from "../ui/scroll-area";
-import axios from "axios";
 import LoadingSelect from "../loading/loading_select";
 import { useMutation } from "@tanstack/react-query";
 import { useToast } from "@/components/ui/use-toast";
+import { createTicket } from "@/API/tickets/ticketRequests";
 // import useFetchSection from "@/API/sections/useFetchSection";
 
 const max_ticket_length = 500;
@@ -94,19 +94,11 @@ export default function TicketForm() {
   const { toast } = useToast();
 
   const mutation = useMutation({
-    mutationFn: (data) => {
-      return axios.post("http://localhost:6969/api/tickets/", {
-        name: data.student_name,
-        description: data.body,
-        professor: data.professor,
-        course: data.section,
-        issue: data.issue,
-      });
-    },
+    mutationFn: createTicket,
   });
 
-  async function onSubmit(data: z.infer<typeof FormSchema>) {
-    await mutation.mutateAsync(data);
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    mutation.mutate(data);
     toast({
       title: "Scheduled: Catch up",
       description: "Friday, February 10, 2023 at 5:57 PM",
@@ -191,14 +183,14 @@ export default function TicketForm() {
                               className={cn(
                                 "w-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] justify-between",
                                 !field.value &&
-                                  "text-muted-foreground font-normal",
+                                "text-muted-foreground font-normal",
                               )}
                             >
                               {field.value
                                 ? professors?.data.find(
-                                    (professor: any) =>
-                                      professor.professor_id === field.value,
-                                  )?.full_name
+                                  (professor: any) =>
+                                    professor.professor_id === field.value,
+                                )?.full_name
                                 : "select a professor"}
                               <CaretSortIcon className="ml-2 h-4 w-4 shrink-0" />
                             </Button>
@@ -272,13 +264,13 @@ export default function TicketForm() {
                               className={cn(
                                 "w-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] justify-between",
                                 !field.value &&
-                                  "text-muted-foreground font-normal",
+                                "text-muted-foreground font-normal",
                               )}
                             >
                               {field.value
                                 ? courses?.data.find(
-                                    (course: any) => course.id === field.value,
-                                  )?.course_code
+                                  (course: any) => course.id === field.value,
+                                )?.course_code
                                 : "select a course"}
                               <CaretSortIcon
                                 key="course_sort_icon"
@@ -362,14 +354,14 @@ export default function TicketForm() {
                               className={cn(
                                 "w-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] justify-between",
                                 !field.value &&
-                                  "text-muted-foreground font-normal",
+                                "text-muted-foreground font-normal",
                               )}
                             >
                               {field.value
                                 ? issues?.data.find(
-                                    (issue: any) =>
-                                      issue.issue_id === field.value,
-                                  )?.problem_type
+                                  (issue: any) =>
+                                    issue.issue_id === field.value,
+                                )?.problem_type
                                 : "select an issue"}
                               <CaretSortIcon
                                 key="issue_sort_icon"
@@ -466,7 +458,7 @@ export default function TicketForm() {
               </FormItem>
             )}
           />
-          <Button type="submit">Submit Ticket</Button>
+          <Button disabled={mutation.isL} type="submit">Submit Ticket</Button>
         </form>
       </Form>
     </>

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -30,6 +30,7 @@ import ForEthan from "./views/ethan.tsx";
 import { PublicClientApplication } from "@azure/msal-browser";
 import { MsalProvider } from "@azure/msal-react";
 import { msalConfig } from "./authConfig.ts";
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const queryClient = new QueryClient();
 
@@ -126,6 +127,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <MsalProvider instance={msalInstance}>
       <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools />
         <RouterProvider router={router} />
       </QueryClientProvider>
     </MsalProvider>

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -7,7 +7,6 @@ module.exports = {
     "./components/**/*.{ts,tsx}",
     "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
-    "node_modules/preline/dist/*.js",
   ],
   theme: {
     container: {

diff --git a/nginx/nginx.conf b/nginx/nginx.conf
@@ -20,6 +20,9 @@ server {
 
     # All frontend requests
     location / {
+        proxy_set_header 'Access-Control-Allow-Credentials' 'true';
+        # proxy_set_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,X-CSRFToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
+        proxy_set_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
         proxy_pass http://frontend:4200;
         proxy_set_header Host $host;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;