Merge pull request #21 from alexmarqs/fix/fix-category-location-pagination

fix: make category and location pages work correclty

Author: alexmarqs

.gitignore

@@ -42,3 +42,5 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
+.cursor/mcp.json
+

apps/web/src/app/category/[category]/page.tsx

@@ -75,13 +75,14 @@ export default async function CategoryPage({
 
   return (
     <section className="mx-auto flex w-full max-w-5xl p-3 relative flex-1">
-      <div className="flex flex-col gap-5 w-full">
+      <div className="flex flex-col w-full">
         <h1 className="text-2xl font-bold">Tech Companies | {category} </h1>
         <Suspense fallback={<CompaniesListSkeleton />}>
           <CompaniesList
             allCompanies={filteredCompanies}
             updatedAtISODate={updatedAtISODate}
-            allowSearchParams={false}
+            showHeader={true}
+            hideUpdatedAt={true}
           />
         </Suspense>
       </div>

apps/web/src/app/location/[location]/page.tsx

@@ -75,14 +75,15 @@ export default async function LocationPage({
 
   return (
     <section className="mx-auto flex w-full max-w-5xl p-3 relative">
-      <div className="flex flex-col gap-5 w-full">
+      <div className="flex flex-col w-full">
         <h1 className="text-2xl font-bold">Tech Companies in {location}</h1>
 
         <Suspense fallback={<CompaniesListSkeleton />}>
           <CompaniesList
             allCompanies={filteredCompanies}
             updatedAtISODate={updatedAtISODate}
-            allowSearchParams={false}
+            showHeader={true}
+            hideUpdatedAt={true}
           />
         </Suspense>
       </div>

apps/web/src/components/CompaniesList.tsx

@@ -16,17 +16,19 @@ const PAGE_SIZE = 15;
 type CompaniesListProps = {
   allCompanies: Company[];
   updatedAtISODate: string;
-  allowSearchParams?: boolean;
+  showHeader?: boolean;
+  hideUpdatedAt?: boolean;
 };
 
 export default function CompaniesList({
   allCompanies,
   updatedAtISODate,
-  allowSearchParams = true,
+  showHeader = false,
+  hideUpdatedAt,
 }: CompaniesListProps) {
   const {
     searchParams: { query, category, location, page },
-  } = useSearchQueryParams(allowSearchParams);
+  } = useSearchQueryParams();
 
   const start = (page - 1) * PAGE_SIZE;
   const end = start + PAGE_SIZE;
@@ -56,7 +58,7 @@ export default function CompaniesList({
         </motion.div>
       ) : (
         <div className="flex-1 font-mono" aria-label="Companies list">
-          {allowSearchParams && (
+          {showHeader && (
             <motion.div
               className="mb-2 text-xs w-full flex flex-wrap items-center justify-between gap-2 text-muted-foreground"
               initial={{ opacity: 0, y: -10 }}
@@ -67,11 +69,12 @@ export default function CompaniesList({
                 updatedAtISODate={updatedAtISODate}
                 totalPages={totalPages}
                 filteredCompanies={filteredCompanies}
+                hideUpdatedAt={hideUpdatedAt}
               />
             </motion.div>
           )}
           <div className="flex-1 space-y-4" data-testid="companies-list">
-            {paginatedCompanies.map((company, index) => (
+            {paginatedCompanies.map((company, _index) => (
               <motion.div
                 key={company.slug}
                 initial={{ opacity: 0, y: 20 }}

apps/web/src/components/CompaniesListHeader.tsx

@@ -15,12 +15,14 @@ type CompaniesListHeaderProps = {
   updatedAtISODate: string;
   totalPages: number;
   filteredCompanies: Company[];
+  hideUpdatedAt?: boolean;
 };
 
 export const CompaniesListHeader = ({
   updatedAtISODate,
   totalPages,
   filteredCompanies,
+  hideUpdatedAt,
 }: CompaniesListHeaderProps) => {
   const {
     setSearchParams,
@@ -32,13 +34,17 @@ export const CompaniesListHeader = ({
 
   return (
     <>
-      <Badge
-        variant="outline"
-        className="rounded-none bg-white px-1 gap-1 h-8 whitespace-nowrap"
-      >
-        <Clock size={14} />
-        {formatDistanceToNow(new Date(updatedAtISODate))} ago
-      </Badge>
+      {!hideUpdatedAt ? (
+        <Badge
+          variant="outline"
+          className="rounded-none bg-white px-1 gap-1 h-8 whitespace-nowrap"
+        >
+          <Clock size={14} />
+          {formatDistanceToNow(new Date(updatedAtISODate))} ago
+        </Badge>
+      ) : (
+        <div className="h-8" />
+      )}
       <Badge
         variant="outline"
         className="rounded-none bg-white px-1 flex items-center justify-center h-8 whitespace-nowrap"

apps/web/src/components/hooks/useSearchQueryParams.tsx

@@ -1,11 +1,8 @@
-import {
-  defaultSearchParams,
-  searchParamsQueryStateKeys,
-} from "@/lib/search-params";
+import { searchParamsQueryStateKeys } from "@/lib/search-params";
 import { useQueryStates } from "nuqs";
 import { useMemo } from "react";
 
-export const useSearchQueryParams = (enabled = true) => {
+export const useSearchQueryParams = () => {
   const [searchParams, setSearchParams] = useQueryStates(
     searchParamsQueryStateKeys,
     {
@@ -15,17 +12,15 @@ export const useSearchQueryParams = (enabled = true) => {
 
   const appliedFilters = useMemo(
     () =>
-      enabled
-        ? Object.entries(searchParams).filter(
-            ([key, value]) => key != "page" && !!value,
-          )
-        : [],
-    [searchParams, enabled],
+      Object.entries(searchParams).filter(
+        ([key, value]) => key != "page" && !!value,
+      ),
+    [searchParams],
   );
 
   return {
-    searchParams: enabled ? searchParams : defaultSearchParams,
-    setSearchParams: enabled ? setSearchParams : () => {},
+    searchParams,
+    setSearchParams,
     appliedFilters,
   };
 };