P312:[{"_325":87,"_326":91,"_327":328},"app1","app2","diffCode","var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),g=(t,a)=>{for(var l in a)s(t,l,{get:a[l],enumerable:!0})},i=(t,a,l,r)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let n of f(a))!v.call(t,n)&&n!==l&&s(t,n,{get:()=>a[n],enumerable:!(r=u(a,n))||r.enumerable});return t};var x=(t,a,l)=>(l=t!=null?b(m(t)):{},i(a||!t||!t.__esModule?s(l,\"default\",{value:t,enumerable:!0}):l,t)),k=t=>i(s({},\"__esModule\",{value:!0}),t);var d=y((P,c)=>{c.exports=_jsx_runtime});var w={};g(w,{default:()=>h,frontmatter:()=>N});var e=x(d()),N=void 0;function p(t){let a={code:\"code\",pre:\"pre\",span:\"span\",...t.components},{Accordion:l,Icon:r,LaunchEditor:n}=a;return l||o(\"Accordion\",!0),r||o(\"Icon\",!0),n||o(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(l,{title:\"app/routes/_landing.products._index/route.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"51\",\"data-remove\":\"54,58,59,63,64,65\",\"data-add\":\"66,67\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-diff-line-number\":\"51\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"ProductsPage\"}),\"({ \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),\" }\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ComponentProps\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-diff-line-number\":\"52\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setSearchParams\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useSearchParams\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-diff-line-number\":\"53\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"navigation\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useNavigation\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-remove\":!0,\"data-diff-line-number\":\"53\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} use the useInfiniteProductFetcher returned properties to fetch infinite data\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-diff-line-number\":\"54\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loadMoreProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-diff-line-number\":\"55\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useInfiniteProductFetcher\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-diff-line-number\":\"56\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isPageLoading\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"navigation\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"!==\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"idle\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-remove\":!0,\"data-diff-line-number\":\"56\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A3} We won't be needing this when we finish pagination\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-remove\":!0,\"data-diff-line-number\":\"56\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-diff-line-number\":\"57\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"viewMode\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setViewMode\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"<\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"list\"}),\"'\",\">(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-diff-line-number\":\"58\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"showFilters\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setShowFilters\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-diff-line-number\":\"59\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observerRef\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useRef\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"HTMLDivElement\"}),\">(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-remove\":!0,\"data-diff-line-number\":\"59\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} use the useIntersectionObserver to call a load of more products when end of screen is reached\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-remove\":!0,\"data-diff-line-number\":\"59\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} pass in loadMoreProducts instead of the arrow function\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-remove\":!0,\"data-diff-line-number\":\"59\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useIntersectionObserver\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observerRef\"}),\", () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-add\":!0,\"data-diff-line-number\":\"60\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useIntersectionObserver\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observerRef\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loadMoreProducts\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-add\":!0,\"data-diff-line-number\":\"61\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-diff-line-number\":\"62\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-diff-line-number\":\"63\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"min-h-screen bg-stone-50 dark:bg-gray-900\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-diff-line-number\":\"64\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Header */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:51,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:51,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"75\",\"data-remove\":\"78,79\",\"data-add\":\"80\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"75\",\"data-diff-line-number\":\"75\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"76\",\"data-diff-line-number\":\"76\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mt-2 text-gray-600 dark:text-gray-300\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"77\",\"data-diff-line-number\":\"77\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"totalCount\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" products total (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"78\",\"data-remove\":!0,\"data-diff-line-number\":\"77\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F428} use the allProducts variable instead of products to show the number of allProducts */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"79\",\"data-remove\":!0,\"data-diff-line-number\":\"77\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\".length\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" shown)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"80\",\"data-add\":!0,\"data-diff-line-number\":\"78\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\".length\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" shown)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"81\",\"data-diff-line-number\":\"79\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"82\",\"data-diff-line-number\":\"80\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"83\",\"data-diff-line-number\":\"81\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mt-4 flex items-center space-x-4 md:mt-0\"}),'\"',\">\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:75,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:71,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"154\",\"data-remove\":\"157,158,159\",\"data-add\":\"160\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"154\",\"data-diff-line-number\":\"154\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"155\",\"data-diff-line-number\":\"155\",children:[\"\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Products Grid/List */\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"156\",\"data-diff-line-number\":\"156\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"flex-1\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"157\",\"data-remove\":!0,\"data-diff-line-number\":\"156\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F428} we should show a loading UI when needed */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"158\",\"data-remove\":!0,\"data-diff-line-number\":\"156\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F4B0} use isPageLoading */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"159\",\"data-remove\":!0,\"data-diff-line-number\":\"156\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"160\",\"data-add\":!0,\"data-diff-line-number\":\"157\",children:[\"\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"isPageLoading\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"161\",\"data-diff-line-number\":\"158\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mb-4 text-center text-gray-500 dark:text-gray-400\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"162\",\"data-diff-line-number\":\"159\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Loading\"}),\"...\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"163\",\"data-diff-line-number\":\"160\",children:[\"\t\t\t\t\t\t\t\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:154,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:149,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"169\",\"data-remove\":\"172,173\",\"data-add\":\"174\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"169\",\"data-diff-line-number\":\"169\",children:[\"\t\t\t\t\t\t\t\t\t\t\t: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"space-y-6\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"170\",\"data-diff-line-number\":\"170\",children:[\"\t\t\t\t\t\t\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"171\",\"data-diff-line-number\":\"171\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"172\",\"data-remove\":!0,\"data-diff-line-number\":\"171\",children:[\"\t\t\t\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F428} we should use allProducts instead of products to show all fetched products */\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"173\",\"data-remove\":!0,\"data-diff-line-number\":\"171\",children:[\"\t\t\t\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"174\",\"data-add\":!0,\"data-diff-line-number\":\"172\",children:[\"\t\t\t\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"175\",\"data-diff-line-number\":\"173\",children:[\"\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ProductCard\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"key\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"product\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"176\",\"data-diff-line-number\":\"174\",children:[\"\t\t\t\t\t\t\t\t\t))}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"177\",\"data-diff-line-number\":\"175\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:169,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:162,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"197\",\"data-remove\":\"200,201\",\"data-add\":\"202,203\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"197\",\"data-diff-line-number\":\"197\",children:[\"\t\t\t\t\t\t\t\t)}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"198\",\"data-diff-line-number\":\"198\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"199\",\"data-diff-line-number\":\"199\",children:[\"\t\t\t\t\t\t)}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"200\",\"data-remove\":!0,\"data-diff-line-number\":\"199\",children:[\"\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F428} we should use allProducts instead of products to show no products found */\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"201\",\"data-remove\":!0,\"data-diff-line-number\":\"199\",children:[\"\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\".length \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" (\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"202\",\"data-add\":!0,\"data-diff-line-number\":\"200\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"203\",\"data-add\":!0,\"data-diff-line-number\":\"201\",children:[\"\t\t\t\t\t\t{allProducts.\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"length\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"204\",\"data-diff-line-number\":\"202\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"py-16 text-center\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"205\",\"data-diff-line-number\":\"203\",children:[\"\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mb-4 text-gray-400 dark:text-gray-600\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"206\",\"data-diff-line-number\":\"204\",children:[\"\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Filter\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mx-auto h-16 w-16\"}),'\"',\" />\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:197,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:189,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})]}),`\n`,(0,e.jsxs)(l,{title:\"app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",\"data-start\":\"1\",\"data-remove\":\"3,7,8,9,12,13,14,15,19\",\"data-add\":\"10,16,17\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useState\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useEffect\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useCallback\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useFetcher\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useSearchParams\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"href\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} use this to type the route\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Route\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./+types/route\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useInfiniteProductFetcher\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} we want to type the loader data to be the type of the returned loader data of the products listing page\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Route.ComponentProps['loaderData']\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"any\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ComponentProps\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"loaderData\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-diff-line-number\":\"7\",children:[\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we are fetching from the same loader, so we can type this fetcher with the same type as loader-data\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useFetcher\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"any\"}),\">({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's define a fetcher key for this fetch\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} key should be infinite-product-fetcher\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\tconst \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useFetcher\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ComponentProps\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"loaderData\"}),\"'\",\"]>({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\tkey: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"infinite-product-fetcher\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"10\",children:[\"\t})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-remove\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we are extracting the initial data we fetched and then we will load more from the server\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"11\",children:[\"\tconst { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\" } = \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"12\",children:[\"\tconst [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setAllProducts\"}),\"] = useState(products)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-diff-line-number\":\"13\",children:[\"\tconst [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentPage\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setCurrentPage\"}),\"] = useState(pagination.page)\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",\"data-start\":\"21\",\"data-remove\":\"24,26,27,28,29,38,40,41,42,43,44,45,46,47,48,49,61,62,63,64,65,66,67,68,69,70,71,72,73\",\"data-add\":\"30,31,32,50,51,52,53,54,74,75,76,77,78,79,80,81\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"21\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setIsLoadingMore\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-diff-line-number\":\"22\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useSearchParams\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-diff-line-number\":\"23\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} whenever we change the filters we should start from the beginning again\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-diff-line-number\":\"24\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"resetStateOnLoaderRefire\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} whenever we reset the URL and the loader returns new products, we want to reset the state to the initial values\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setAllProducts(products)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setCurrentPage(pagination.page)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setHasMore(pagination.hasMore)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setAllProducts\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setCurrentPage\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setHasMore\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-diff-line-number\":\"28\",children:[\"\t\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-diff-line-number\":\"29\",children:[\"\t\t[\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-diff-line-number\":\"30\",children:[\"\t)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-diff-line-number\":\"31\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-diff-line-number\":\"32\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-remove\":!0,\"data-diff-line-number\":\"32\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} whenever we load the new products we want to append them to the existing array\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-diff-line-number\":\"33\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setNewlyLoadedProducts\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we want to make sure that the fetcher has returned some data and it's defined, and it is idle and we were loading more products\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we append the newly loaded products to the existing array\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setAllProducts((prev) => [...prev, ...(fetcher.data.? ??[])])\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we update the current page\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setCurrentPage(fetcher.data.?)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we update the hasMore flag\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setHasMore(fetcher.data.?)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we set isLoadingMore to false\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setIsLoadingMore(false)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"data\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"idle\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setAllProducts\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"prev\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"prev\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"??\"}),\" [])])\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setCurrentPage\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setHasMore\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setIsLoadingMore\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-diff-line-number\":\"39\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-diff-line-number\":\"40\",children:[\"\t\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-diff-line-number\":\"41\",children:[\"\t\t[\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"data\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-diff-line-number\":\"42\",children:[\"\t)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-diff-line-number\":\"43\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-diff-line-number\":\"44\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loadMoreProducts\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useCallback\"}),\"(() \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} we want to create the new search params so we can submit that to the loader so it gives us the next page of results\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we set the flag to true\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setIsLoadingMore(true)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we use the current page to create the next page\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// const nextPage = currentPage + 1\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Create URL params for the fetch\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// const params = new URLSearchParams(searchParams)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// params.set('page', nextPage.toString())\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} finally we want to load the next page using the fetcher\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} use the `load` function and call the /products page in a type-safe manner (href function) and append the search params\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// \\u{1F4B0} + \"?\" + params.toString()'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"72\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} don't forget to remove this ignore hook, it's going to be invalid once you implement this!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"73\",\"data-remove\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// eslint-disable-next-line react-hooks/exhaustive-deps\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"74\",\"data-add\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setIsLoadingMore\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"75\",\"data-add\":!0,\"data-diff-line-number\":\"46\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"nextPage\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentPage\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"76\",\"data-add\":!0,\"data-diff-line-number\":\"47\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"77\",\"data-add\":!0,\"data-diff-line-number\":\"48\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Create URL params for the fetch\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"78\",\"data-add\":!0,\"data-diff-line-number\":\"49\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"URLSearchParams\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"79\",\"data-add\":!0,\"data-diff-line-number\":\"50\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"set\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"page\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"nextPage\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"toString\"}),\"())\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"80\",\"data-add\":!0,\"data-diff-line-number\":\"51\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"81\",\"data-add\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"void\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"load\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"href\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/products\"}),\"'\",\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"?\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"toString\"}),\"())\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"82\",\"data-diff-line-number\":\"53\",children:[\"\t}, [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentPage\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\"])\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"83\",\"data-diff-line-number\":\"54\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"84\",\"data-diff-line-number\":\"55\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loadMoreProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\" }\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",line:21,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",line:15,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})]})]})}function h(t={}){let{wrapper:a}=t.components||{};return a?(0,e.jsx)(a,{...t,children:(0,e.jsx)(p,{...t})}):p(t)}function o(t,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(w);})();\n;return Component;"]