Timmo Posts - Answer Overflow

Timmo

•Created by Timmo on 10/17/2024 in #questions

Keep page state on navigating back from a product to the product list

I have an e-commerce site which fetches product collections using trpc. I want to be able to keep this page state the same when navigating back, so that the user is back to the previous position they were at. I was thinking there has to be some way to cache the previous page so it does not reload but am not sure where to look. Here is the component in question:

"use client";
import { Suspense, useState } from "react";

import { api } from "~/trpc/react";
...

export function ProductList({ collection }: { collection: Collection }) {
  const [sortOption, setSortOption] = useState<SortOption>(sortOptions[1]!);

  const [products] = api.product.getFromCollection.useSuspenseQuery(
    {
      collection: collection.handle,
      sortKey: sortOption.key,
      reverse: sortOption.reverse,
    },
  );

...
          {/* Product List wrapped in a suspense */}
          <div className="grid w-full gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            <Suspense
              fallback={Array.from({ length: 12 }, (_, key) =>
                key.toString(),
              ).map((key) => (
                <Skeleton
                  key={key}
                  className="h-[20px] w-[100px] rounded-full"
                />
              ))}
            >
              {products.map((product, index) => (
                <ProductTile
                  key={product.handle}
                  product={product}
                  position={index}
                />
              ))}
            </Suspense>
          </div>
...

"use client";
import { Suspense, useState } from "react";

import { api } from "~/trpc/react";
...

export function ProductList({ collection }: { collection: Collection }) {
  const [sortOption, setSortOption] = useState<SortOption>(sortOptions[1]!);

  const [products] = api.product.getFromCollection.useSuspenseQuery(
    {
      collection: collection.handle,
      sortKey: sortOption.key,
      reverse: sortOption.reverse,
    },
  );

...
          {/* Product List wrapped in a suspense */}
          <div className="grid w-full gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            <Suspense
              fallback={Array.from({ length: 12 }, (_, key) =>
                key.toString(),
              ).map((key) => (
                <Skeleton
                  key={key}
                  className="h-[20px] w-[100px] rounded-full"
                />
              ))}
            >
              {products.map((product, index) => (
                <ProductTile
                  key={product.handle}
                  product={product}
                  position={index}
                />
              ))}
            </Suspense>
          </div>
...

4 replies

TTCTheo's Typesafe Cult

•Created by Timmo on 9/15/2024 in #questions

Looking for a calendar aggregation service with a decent API

I'm writing a dashboard which contains a calendar agenda and am looking for a good free aggregator service for google, outlook, slack etc. which has a good api to fetch the agenda of the user. Any good suggestions?

6 replies

Gaming

Programming