dogpawhat.tech / preloading-example
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

live query pagination nav update

Ciarán Curley b16c1148 155bdc6c

+12 -63
+4 -3
src/components/pagination-nav.tsx
··· 5 5 prefetch?: "intent" | "viewport" | "render" | false; 6 6 prevOffset: number | null; 7 7 nextOffset: number | null; 8 + search?: Record<string, unknown>; 8 9 to: keyof FileRoutesByPath; 9 10 } 10 11 11 12 export function PaginationNav(props: PaginationNavProps) { 12 - const { prefetch, prevOffset, nextOffset, to } = props; 13 + const { prefetch, prevOffset, nextOffset, search, to } = props; 13 14 14 15 return ( 15 16 <nav className="flex items-center justify-center gap-1 mt-8 font-mono"> ··· 17 18 <Link 18 19 preload={prefetch} 19 20 to={to} 20 - search={{ offset: prevOffset }} 21 + search={{ ...search, offset: prevOffset ?? 0 }} 21 22 disabled={prevOffset == null} 22 23 className={cn( 23 24 "inline-flex items-center gap-2", ··· 42 43 <Link 43 44 preload={prefetch} 44 45 to={to} 45 - search={{ offset: nextOffset }} 46 + search={{ ...search, offset: nextOffset ?? 0 }} 46 47 disabled={nextOffset == null} 47 48 className={cn( 48 49 "inline-flex items-center gap-2",
+8 -60
src/routes/live-query-filters.tsx
··· 1 1 import { Suspense, useCallback, useState } from "react"; 2 - import { createFileRoute, Link } from "@tanstack/react-router"; 2 + import { createFileRoute } from "@tanstack/react-router"; 3 3 import { useLiveSuspenseQuery, eq, ilike, toArray } from "@tanstack/react-db"; 4 4 import * as v from "valibot"; 5 + import { PaginationNav } from "~/components/pagination-nav"; 5 6 import { StrategyPageLayout } from "~/components/strategy-page-layout"; 6 7 import { ConsoleCard } from "~/components/console/console-card"; 7 8 import { PokemonTableSkeleton } from "~/components/tables/pokemon-table-skeleton"; ··· 12 13 pokemonTypesCollection, 13 14 typesCollection, 14 15 } from "~/data/local/collections"; 15 - import { cn } from "~/lib/utils"; 16 16 import { POKEMON_LIMIT } from "~/constants"; 17 17 import { lazily } from "~/lib/lazily"; 18 18 import { getStrategyArticle } from "~/server/strategy-article.functions"; ··· 99 99 <div className="min-h-125"> 100 100 <PokemonTableSkeleton rowCount={POKEMON_LIMIT} /> 101 101 </div> 102 - <LiveQueryFiltersPagination 103 - nameFilter={nameFilter} 102 + <PaginationNav 103 + search={{ name: nameFilter }} 104 104 nextOffset={null} 105 105 prevOffset={null} 106 + to="/live-query-filters" 106 107 /> 107 108 </> 108 109 } ··· 177 178 </div> 178 179 )} 179 180 </div> 180 - <LiveQueryFiltersPagination 181 - nameFilter={nameFilter} 181 + <PaginationNav 182 + search={{ name: nameFilter }} 182 183 prevOffset={prevOffset} 183 184 nextOffset={nextOffset} 185 + to="/live-query-filters" 184 186 /> 185 187 </> 186 188 ); 187 189 } 188 - 189 - function LiveQueryFiltersPagination(props: { 190 - nameFilter: string; 191 - prevOffset: number | null; 192 - nextOffset: number | null; 193 - }) { 194 - const { nameFilter, prevOffset, nextOffset } = props; 195 - 196 - return ( 197 - <nav className="flex items-center justify-center gap-1 mt-8 font-mono"> 198 - <Link 199 - to="/live-query-filters" 200 - search={{ offset: prevOffset ?? 0, name: nameFilter }} 201 - disabled={prevOffset == null} 202 - className={cn( 203 - "inline-flex items-center gap-2", 204 - "px-3 py-2", 205 - "border border-(--border-default)", 206 - "bg-(--bg-secondary)", 207 - "font-mono text-sm", 208 - "text-(--text-primary)", 209 - "transition-all duration-fast ease-default", 210 - "hover:border-(--accent-default) hover:bg-(--accent-subtle)", 211 - prevOffset == null && "opacity-50 cursor-not-allowed pointer-events-none", 212 - )} 213 - > 214 - <span>&lt;</span> 215 - <span>prev</span> 216 - </Link> 217 - 218 - <span className="px-2 text-(--text-muted)">|</span> 219 - 220 - <Link 221 - to="/live-query-filters" 222 - search={{ offset: nextOffset ?? 0, name: nameFilter }} 223 - disabled={nextOffset == null} 224 - className={cn( 225 - "inline-flex items-center gap-2", 226 - "px-3 py-2", 227 - "border border-(--border-default)", 228 - "bg-(--bg-secondary)", 229 - "font-mono text-sm", 230 - "text-(--text-primary)", 231 - "transition-all duration-fast ease-default", 232 - "hover:border-(--accent-default) hover:bg-(--accent-subtle)", 233 - nextOffset == null && "opacity-50 cursor-not-allowed pointer-events-none", 234 - )} 235 - > 236 - <span>next</span> 237 - <span>&gt;</span> 238 - </Link> 239 - </nav> 240 - ); 241 - }