successfully made the frontend called the backend in the dashboard

Author: sylee212

client/src/components/ui/backend/organization_call_backend.ts

@@ -7,14 +7,14 @@ import { generateRandomMockInventoryDetails } from "@/mocks/Inventory_Details_In
 import { generateMockMember } from "@/mocks/Members_Details_Interface_Mocks";
 
 // tha main URL
-export const BASE_URL = "http://localhost:8000/api/activities/";
+export const BASE_INVENTORY_URL = "http://localhost:8000/api/inventory/";
 
 // change when backend is ready
-const isDev: boolean = true;
+const isDev: boolean = false;
 
 // --- GET: Fetch all items ---
 export const getItems = async (
-  filterType: string,
+  URL: string,
 ): Promise<Inventory_Details_Interface[]> => {
   if (isDev) {
     // Mock data for development
@@ -27,7 +27,8 @@ export const getItems = async (
   } else {
     // 1. Fetch from Django
     // fetch() is used to get the data from backend using URL
-    const response = await fetch(`${BASE_URL}?type=${filterType}`);
+    // `${}` is place holders for code, anything inside the curly braces is code
+    const response = await fetch(`${URL}`);
 
     // 2. Check if the request was successful
     if (!response.ok) throw new Error("Failed to fetch");
@@ -53,7 +54,7 @@ export const createItem = async (
     console.log("Mock create item called with data:", newData);
     return true; // Simulate successful creation
   } else {
-    const response = await fetch(BASE_URL, {
+    const response = await fetch(BASE_INVENTORY_URL, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(newData),
@@ -70,7 +71,7 @@ export const updateItem = async (
   newData: Inventory_Details_Interface,
 ) => {
   // Django usually expects a trailing slash after the ID
-  const response = await fetch(`${BASE_URL}${id}/`, {
+  const response = await fetch(`${BASE_INVENTORY_URL}${id}/`, {
     method: "PATCH",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(newData),
@@ -80,7 +81,7 @@ export const updateItem = async (
 
 // --- DELETE: Remove an item ---
 export const deleteItem = async (id: number) => {
-  const response = await fetch(`${BASE_URL}${id}/`, {
+  const response = await fetch(`${BASE_INVENTORY_URL}${id}/`, {
     method: "DELETE",
   });
   // DELETE usually returns a 204 No Content status, so we don't always .json() it
@@ -103,7 +104,7 @@ export const getMembers = async (
   } else {
     // 1. Fetch from Django
     // fetch() is used to get the data from backend using URL
-    const response = await fetch(`${BASE_URL}?type=${filterType}`);
+    const response = await fetch(`${BASE_INVENTORY_URL}?type=${filterType}`);
 
     // 2. Check if the request was successful
     if (!response.ok) throw new Error("Failed to fetch");
@@ -124,7 +125,7 @@ export const createMember = async (
     console.log("Mock create Member called with data:", newData);
     return true; // Simulate successful creation
   } else {
-    const response = await fetch(BASE_URL, {
+    const response = await fetch(BASE_INVENTORY_URL, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(newData),
@@ -141,7 +142,7 @@ export const updateMember = async (
   newData: Member_Details_Interface,
 ) => {
   // Django usually expects a trailing slash after the ID
-  const response = await fetch(`${BASE_URL}${id}/`, {
+  const response = await fetch(`${BASE_INVENTORY_URL}${id}/`, {
     method: "PATCH",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(newData),
@@ -151,7 +152,7 @@ export const updateMember = async (
 
 // --- DELETE: Remove an Member ---
 export const deleteMember = async (id: number) => {
-  const response = await fetch(`${BASE_URL}${id}/`, {
+  const response = await fetch(`${BASE_INVENTORY_URL}${id}/`, {
     method: "DELETE",
   });
   // DELETE usually returns a 204 No Content status, so we don't always .json() it

client/src/components/ui/backend/organization_clean_backend_calls.ts

@@ -1,11 +1,11 @@
 // src/hooks/organization_clean_backend_calls.ts
-import SWR, { KeyedMutator } from "swr";
+import useSWR, { KeyedMutator } from "swr";
 
 import { Member_Details_Interface } from "@/components/ui/card_organization_member_details_modal";
 
 import type { Inventory_Details_Interface } from "../card_organization_inventory_details_modal";
 import {
-  BASE_URL,
+  BASE_INVENTORY_URL,
   createItem,
   createMember,
   deleteItem,
@@ -54,17 +54,15 @@ Remember, this will only be invoked once, when its mounted, if you want to call
 // 1. Define a simple fetcher function (standard for SWR)
 // const fetcher = (url: string) => fetch(url).then(res => res.json());
 
-// this is the one that will work with the clean function from api call
-const fetcher = () => getItems("all");
-
 /*
 Even if we are calling mocks, we need to  SWR
 
 filterType: d to add to backend url call
 isDev: true if we want to  mock data
 */
 export const useOrganizationBackendGetItems = (
-  filterType: string,
+  category: string,
+  sortBy: string,
 ): organization_clean_backend_calls_return_interface => {
   // 2. SWR handles the state, the effect, and the async logic
   // SWR(key, fetcher, options)
@@ -116,9 +114,27 @@ export const useOrganizationBackendGetItems = (
   // mutate? what is that, so lets say we do polling every 30seconds and
   // ther is an inventory update that happened in between the 30seconds
   // SWR will immediately
-  const { data, error, isLoading, mutate } = SWR(
-    [`${BASE_URL}`, filterType], // The "Key" (Unique identifier)
-    fetcher, // The "Fetcher" (Your function)
+
+  // generate the URL
+  // 1. GENERATE THE URL STRING
+  // Instead of complex if/else, we use URLSearchParams
+  const params = new URLSearchParams();
+  if (category && category !== "") params.append("categories", category); // Django expects 'categories'
+  if (sortBy && sortBy !== "") params.append("ordering", sortBy); // Django expects 'ordering'
+
+  // If params exist, add '?' and the params, otherwise just the base URL
+  const queryString = params.toString();
+
+  // 2. Fix the URL construction
+  // We need backticks ` ` to use ${}
+  // We need to add 'items/' because the router is registered there
+  const finalUrl = queryString
+    ? `${BASE_INVENTORY_URL}?${queryString}`
+    : `${BASE_INVENTORY_URL}`;
+
+  const { data, error, isLoading, mutate } = useSWR(
+    finalUrl, // The "Key" (Unique identifier)
+    getItems, // The "Fetcher" (Your function)
     {
       refreshInterval: 30, // Poll every 30 seconds 30000ms
       revalidateOnFocus: true, // Refresh when r clicks back into the tab
@@ -184,8 +200,8 @@ isDev: true if we want to  mock data
 export const useOrganizationBackendGetMembers = (
   filterType: string,
 ): organization_clean_backend_calls_return_get_members_interface => {
-  const { data, error, isLoading, mutate } = SWR(
-    [`${BASE_URL}`, filterType], // The "Key" (Unique identifier)
+  const { data, error, isLoading, mutate } = useSWR(
+    [`${BASE_INVENTORY_URL}`, filterType], // The "Key" (Unique identifier)
     fetcher2, // The "Fetcher" (Your function)
     {
       refreshInterval: 30, // Poll every 30 seconds 30000ms
@@ -246,7 +262,7 @@ export const deleteMemberClean = async (memberId: number): Promise<boolean> => {
 
 //   // to  SWR for PUT
 //   const { data, error, isLoading, mutate } = SWR(
-//     [`${BASE_URL}`, "newItem"],
+//     [`${BASE_INVENTORY_URL}`, "newItem"],
 //     () => createItem(itemData),
 //     {
 //       revalidateOnFocus: true,

client/src/pages/organization_dashboard.tsx

@@ -25,7 +25,7 @@ const Organization_Dashboard = () => {
     error,
     refresh,
   }: organization_clean_backend_calls_return_interface =
-    useOrganizationBackendGetItems("all");
+    useOrganizationBackendGetItems("", "");
   console.log("Data from useOrganizationBackendGetItems:", data);
   console.log("Loading state:", loading);
   console.log("Error state:", error);