hh

Author: gottasellemall69

hooks/useSorting.ts

@@ -12,11 +12,33 @@ export const useSorting = <T extends Record<string, any>>( data: T[] ) => {
   } );
 
   const handleSort = ( key: string ) => {
-    let direction = 'ascending';
-    if ( sortConfig.key === key && sortConfig.direction === 'ascending' ) {
-      direction = 'descending';
+    const isSameKey = sortConfig.key === key;
+    const nextDirection =
+      isSameKey && sortConfig.direction === 'ascending' ? 'descending' : 'ascending';
+    setSortConfig( { key, direction: nextDirection } );
+  };
+
+  const parseNumericValue = ( value: unknown ) => {
+    if ( typeof value === 'number' && Number.isFinite( value ) ) {
+      return value;
+    }
+
+    if ( value === null || value === undefined ) {
+      return null;
+    }
+
+    const text = String( value ).trim();
+    if ( !text ) {
+      return null;
     }
-    setSortConfig( { key, direction: "descending" } );
+
+    const normalized = text.replace( /[^0-9.-]+/g, '' );
+    if ( !normalized || normalized === '-' || normalized === '.' ) {
+      return null;
+    }
+
+    const parsed = Number( normalized );
+    return Number.isFinite( parsed ) ? parsed : null;
   };
 
   const sortedData = useMemo( () => {
@@ -25,34 +47,33 @@ export const useSorting = <T extends Record<string, any>>( data: T[] ) => {
     return [ ...data ].sort( ( a, b ) => {
       const valueA = a[ sortConfig.key! ];
       const valueB = b[ sortConfig.key! ];
-
-      const isNumericA = !isNaN( parseFloat( valueA ) );
-      const isNumericB = !isNaN( parseFloat( valueB ) );
+      const numericA = parseNumericValue( valueA );
+      const numericB = parseNumericValue( valueB );
+      const isNumericA = numericA !== null;
+      const isNumericB = numericB !== null;
 
       if ( isNumericA && isNumericB ) {
-        const numericA = parseFloat( valueA );
-        const numericB = parseFloat( valueB );
         return sortConfig.direction === 'ascending'
           ? numericA - numericB
           : numericB - numericA;
       }
 
-      if ( isNumericA ) return sortConfig.direction === 'ascending' ? -1 : 1;
-      if ( isNumericB ) return sortConfig.direction === 'descending' ? 1 : -1;
+      if ( isNumericA && !isNumericB ) return -1;
+      if ( !isNumericA && isNumericB ) return 1;
 
-      const result = String( valueA || '' ).localeCompare( String( valueB || '' ) );
+      const result = String( valueA ?? '' ).localeCompare( String( valueB ?? '' ) );
       return sortConfig.direction === 'ascending' ? result : -result;
     } );
   }, [ data, sortConfig ] );
 
   const getSortIcon = ( key: string ) => {
     if ( sortConfig.key !== key ) return null;
-    return sortConfig.direction === 'ascending' ? '▲' : '▼';
+    return sortConfig.direction === 'ascending' ? '^' : 'v';
   };
 
   return {
     sortedData,
     handleSort,
     getSortIcon
   };
-};
+};

next.config.js

@@ -1,4 +1,20 @@
 /** @type {import('next').NextConfig} */
+const isDev = process.env.NODE_ENV === "development";
+
+const cspHeader = `
+  default-src 'self';
+  script-src 'self' 'unsafe-inline'${isDev ? " 'unsafe-eval'" : ""} https://va.vercel-scripts.com;
+  style-src 'self' 'unsafe-inline';
+  img-src 'self' blob: data: https://images.ygoprodeck.com https://images.unsplash.com https://tailwindcss.com;
+  font-src 'self' data:;
+  connect-src 'self' https://mpapi.tcgplayer.com https://infinite-api.tcgplayer.com https://db.ygoprodeck.com https://www.sportscardspro.com;
+  object-src 'none';
+  base-uri 'self';
+  form-action 'self';
+  frame-ancestors 'none';
+  upgrade-insecure-requests;
+`;
+
 const nextConfig = {
   reactStrictMode: true,
   productionBrowserSourceMaps: false,
@@ -10,36 +26,36 @@ const nextConfig = {
         headers: [
           {
             key: "Content-Security-Policy",
-            value: "script-src 'self' 'unsafe-inline' 'unsafe-eval' mpapi.tcgplayer.com infinite-api.tcgplayer.com card-test-ashy.vercel.app va.vercel-scripts.com db.ygoprodeck.com sportscardspro.com; style-src 'self' 'unsafe-inline' card-test-ashy.vercel.app; img-src 'self' images.ygoprodeck.com data:; object-src 'none'; default-src 'self' mpapi.tcgplayer.com db.ygoprodeck.com sportscardspro.com card-test-ashy.vercel.app infinite-api.tcgplayer.com va.vercel-scripts.com; font-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;"
+            value: cspHeader.replace(/\s{2,}/g, " ").trim(),
           },
           {
             key: "X-Content-Type-Options",
-            value: "nosniff"
+            value: "nosniff",
           },
           {
             key: "X-Frame-Options",
-            value: "DENY"
+            value: "DENY",
           },
           {
             key: "Referrer-Policy",
-            value: "strict-origin-when-cross-origin"
+            value: "strict-origin-when-cross-origin",
           },
           {
             key: "Permissions-Policy",
-            value: "geolocation=(), camera=(), microphone=(), fullscreen=*, payment=()"
+            value: "geolocation=(), camera=(), microphone=(), fullscreen=*, payment=()",
           },
           {
             key: "X-Permitted-Cross-Domain-Policies",
-            value: "none"
+            value: "none",
           },
           {
             key: "Expect-CT",
-            value: "max-age=86400, enforce"
-          }
-        ]
-      }
+            value: "max-age=86400, enforce",
+          },
+        ],
+      },
     ];
-  }
+  },
 };
 
 module.exports = nextConfig;