Fixes

Author: PleatherStarfish

backend/core/templatetags/custom_tags.py

@@ -1,6 +1,6 @@
 from django import template
 from django.urls import reverse
-from urllib.parse import urlparse, urlunparse
+from urllib.parse import parse_qs, urlencode, urlparse, urlunparse
 import math
 
 register = template.Library()
@@ -47,26 +47,38 @@ def get_display_name(value, mounting_style_options):
 
 
 @register.filter
-def force_https_and_remove_trailing_slash(url):
+def force_https_and_clean_canonical(url):
     """
-    Ensures the URL uses HTTPS and removes the trailing slash if it exists.
+    Ensures the URL uses HTTPS, includes a trailing slash, and removes unnecessary query parameters.
     """
     parsed_url = urlparse(url)
+
     # Force HTTPS
     scheme = "https"
-    # Remove trailing slash
+
+    # Ensure trailing slash, except for root "/"
     path = parsed_url.path
-    # Rebuild the URL
+    if not path.endswith("/") and path != "/":
+        path += "/"
+
+    # Keep only "important" query parameters (modify as needed)
+    allowed_params = ["lang"]  # Add other necessary parameters here
+    query_dict = parse_qs(parsed_url.query)
+    cleaned_query = urlencode(
+        {k: v[0] for k, v in query_dict.items() if k in allowed_params}
+    )
+
     updated_url = urlunparse(
         (
             scheme,
             parsed_url.netloc,
             path,
             parsed_url.params,
-            parsed_url.query,
+            cleaned_query,
             parsed_url.fragment,
         )
     )
+
     return updated_url
 
 

backend/static/js/main.bundle.js

@@ -253,7 +253,7 @@ const Components: React.FC = () => {
             ) : (
               <a
                 className="text-blue-500 hover:text-blue-700"
-                href={`${getBaseUrl()}/components/${row.id}`}
+                href={`${getBaseUrl()}/components/${row.id}/`}
               >
                 {row.description}
               </a>

backend/static/js/main.bundle.js.gz

@@ -140,7 +140,7 @@ const UserPage: React.FC = () => {
                   </ul>
                 </li>
                 <li className="justify-between mt-auto -mx-6">
-                  <Link to="settings">
+                  <Link to="settings/">
                     <div className="flex items-center px-6 py-3 text-sm font-semibold leading-6 text-gray-900 group/settings gap-x-4 hover:bg-gray-200">
                       {!!user?.emails?.[0].email ? (
                         <Gravatar

frontend/src/pages/Components.tsx

@@ -128,7 +128,7 @@ const ModulesList: React.FC<ModulesListProps> = ({
           >
             <div className="flex justify-center w-full h-64 md:w-48 md:h-48">
               {module.slug && (
-                <Link reloadDocument to={`/projects/${module.slug}`}>
+                <Link reloadDocument to={`/projects/${module.slug}/`}>
                   {module.thumb_image_webp && module.thumb_image_jpeg ? (
                     <picture>
                       <source
@@ -141,6 +141,7 @@ const ModulesList: React.FC<ModulesListProps> = ({
                       />
                       <LazyImage
                         alt={module.name}
+                        className=""
                         src={module.thumb_image_jpeg}
                       />
                     </picture>
@@ -151,7 +152,7 @@ const ModulesList: React.FC<ModulesListProps> = ({
             <div className="flex-1 p-4 md:px-4 md:py-5 sm:p-6">
               <div className="flex flex-col flex-wrap justify-between w-full md:flex-row">
                 {module.slug && (
-                  <Link reloadDocument to={`/projects/${module.slug}`}>
+                  <Link reloadDocument to={`/projects/${module.slug}/`}>
                     <h2 className="text-xl font-medium text-center text-gray-900 md:text-left">
                       {module.name}
                     </h2>
@@ -162,7 +163,7 @@ const ModulesList: React.FC<ModulesListProps> = ({
                     {"by "}
                     <a
                       className="text-gray-500 hover:text-gray-400"
-                      href={`/manufacturer/${module.manufacturer_slug}`}
+                      href={`/manufacturer/${module.manufacturer_slug}/`}
                     >
                       {module.manufacturer.name}
                     </a>
@@ -186,7 +187,7 @@ const ModulesList: React.FC<ModulesListProps> = ({
                   {"by "}
                   <a
                     className="text-gray-500 hover:text-gray-400"
-                    href={`/manufacturer/${module.manufacturer_slug}`}
+                    href={`/manufacturer/${module.manufacturer_slug}/`}
                   >
                     {module.manufacturer.name}
                   </a>

frontend/src/pages/UserPage.tsx

@@ -19,15 +19,15 @@ const useGetAllNotes = (moduleType) => {
   };
 
   const { data: notes, isLoading, isError } = useQuery({
-    queryKey: ['userNotes', moduleType],
-    queryFn: fetchAllNotes,
     enabled: !!moduleType,
     onError: (error) => {
       console.error('Error while fetching notes:', error);
     },
+    queryFn: fetchAllNotes,
+    queryKey: ['userNotes', moduleType],
   });
 
-  return { notes, isLoading, isError };
+  return { isError, isLoading, notes };
 };
 
 export default useGetAllNotes;

frontend/src/projects/ModulesList.tsx

@@ -0,0 +1,34 @@
+import { UseQueryResult } from "@tanstack/react-query";
+
+import { useQuery } from "@tanstack/react-query";
+
+import axios from "axios";
+import removeAfterUnderscore from "../utils/removeAfterUnderscore";
+
+/**
+ * Custom React Query hook to fetch the shopping list quantity for an anonymous user.
+ * 
+ * @param componentPk - The primary key (ID) of the component.
+ * @returns A React Query result containing the component quantity in the shopping list.
+ */
+const useGetUserAnonymousShoppingListQuantity = (componentPk: string): UseQueryResult<number, Error> => {
+  // Ensure `componentPk` is cleaned up before use
+  const componentPkCleaned = removeAfterUnderscore(String(componentPk));
+
+  return useQuery<number, Error>({
+    enabled: !!componentPkCleaned,  
+    queryFn: async () => {
+      try {
+        const response = await axios.get<{ quantity: number }>(
+          `/api/shopping-list/${componentPkCleaned}/component-quantity/`
+        );
+        return response.data.quantity; // Ensuring return type is `number`
+      } catch (error: any) {
+        throw new Error(error.response?.data?.error || "Unknown error");
+      }
+    },
+    queryKey: ["userAnonymousInventoryQuantity", componentPkCleaned],
+  });
+};
+
+export default useGetUserAnonymousShoppingListQuantity;

frontend/src/services/useGetAllNotes.js

@@ -39,6 +39,7 @@ const useGetUserCurrency = () => {
           currency_name: currencyLookup[currency].name,
           currency_symbol: currencyLookup[currency].symbol,
         };
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } catch (error) {
         // Fallback to localStorage
         const localCurrency = localStorage.getItem("currency") || "USD";

frontend/src/services/useGetUserAnonymousShoppingListQuantity.js

@@ -1,23 +1,26 @@
-import axios from "axios";
+import { Module } from "../types/modules";
+
 import { useQuery } from "@tanstack/react-query";
 
-const useModule = (slug) => {
-  const { data: module, isLoading: moduleIsLoading, isError: moduleIsError } = useQuery({
-    queryKey: ["module", slug],
+import axios from "axios";
+
+const useModule = (slug: string) => {
+  const { data: module, isLoading: moduleIsLoading, isError: moduleIsError } = useQuery<Module>({
     queryFn: async () => {
       try {
-        const response = await axios.get(`/api/module/${slug}/`, {
+        const response = await axios.get<Module>(`/api/module/${slug}/`, {
           withCredentials: true,
         });
         return response.data;
       } catch (error) {
         console.error("Error fetching data:", error);
         throw new Error("Network response was not ok");
       }
-    }
+    },
+    queryKey: ["module", slug]
   });
 
-  return { module, moduleIsLoading, moduleIsError };
+  return { module, moduleIsError, moduleIsLoading };
 };
 
 export default useModule;

frontend/src/services/useGetUserAnonymousShoppingListQuantity.ts

@@ -24,7 +24,7 @@ const RowWarning: React.FC<RowWarningProps> = ({
       {user_submitted_status === "pending" && (
         <Tippy content="This component is a user submission. User submissions are reviewed for accuracy and relevance, typically within 24 hours.">
           <div
-            className="flex justify-center align-middle text-2xl"
+            className="flex justify-center text-2xl align-middle"
             style={{
               backgroundColor: "#db2777",
               borderRadius: "12px",
@@ -49,7 +49,7 @@ const RowWarning: React.FC<RowWarningProps> = ({
       )}
       <a
         className="text-blue-500 hover:text-blue-700"
-        href={`${getBaseUrl()}/components/${id}`}
+        href={`${getBaseUrl()}/components/${id}/`}
       >
         {children}
       </a>

frontend/src/services/useGetUserCurrency.ts

@@ -21,7 +21,7 @@ const ErrorFallback: React.FC<{
     </p>
     <a
       className="text-sm font-medium text-blue-600 hover:underline"
-      href="https://github.com/PleatherStarfish/bomsquad/issues"
+      href="https://github.com/PleatherStarfish/bomsquad/issues/"
       rel="noopener noreferrer"
       target="_blank"
     >