Tavano/show more (#152)

* add show more button * improve showmore component * fmt * remove console log * use pageHref instead * remove showMore * fix type errors * back to use ctx.invoke * use app version * create better types * attempt to use fresh append partial * partialsssssss * fmt * rollback some changes * fmt * add partial-mode param * bump deco * fmt * refactor * some fixes to work in another integrations * fmt
deco-sites · Mar 6, 2024 · d9a4fc4 · d9a4fc4
1 parent 717196b
commit d9a4fc4
Show file tree

Hide file tree

Showing 11 changed files with 228 additions and 43 deletions.
diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx
@@ -2,7 +2,12 @@ import ProductCard, {
   Layout as CardLayout,
 } from "$store/components/product/ProductCard.tsx";
 import { usePlatform } from "$store/sdk/usePlatform.tsx";
-import { Product } from "apps/commerce/types.ts";
+import { PageInfo, Product } from "apps/commerce/types.ts";
+import ShowMore from "$store/islands/ShowMore.tsx";
+import { Head } from "$fresh/runtime.ts";
+import { Format } from "$store/components/search/SearchResult.tsx";
+import { usePartialSection } from "deco/hooks/usePartialSection.ts";
+import Spinner from "$store/components/ui/Spinner.tsx";
 
 export interface Columns {
   mobile?: 1 | 2;
@@ -11,11 +16,14 @@ export interface Columns {
 
 export interface Props {
   products: Product[] | null;
+  pageInfo: PageInfo;
   offset: number;
   layout?: {
     card?: CardLayout;
     columns?: Columns;
+    format?: Format;
   };
+  url: URL;
 }
 
 const MOBILE_COLUMNS = {
@@ -30,22 +38,70 @@ const DESKTOP_COLUMNS = {
   5: "sm:grid-cols-5",
 };
 
-function ProductGallery({ products, layout, offset }: Props) {
+function ProductGallery(
+  { products, pageInfo, layout, offset, url }: Props,
+) {
   const platform = usePlatform();
   const mobile = MOBILE_COLUMNS[layout?.columns?.mobile ?? 2];
   const desktop = DESKTOP_COLUMNS[layout?.columns?.desktop ?? 4];
 
+  const nextPage = pageInfo.nextPage
+    ? new URL(pageInfo.nextPage, url.href)
+    : null;
+  const partialUrl = nextPage ? new URL(nextPage.href) : null;
+  if (pageInfo.nextPage && nextPage) {
+    partialUrl?.searchParams.set("partial", "true");
+  }
+
   return (
-    <div class={`grid ${mobile} gap-2 items-center ${desktop} sm:gap-10`}>
+    <div
+      class={`grid ${mobile} gap-2 items-center ${desktop} sm:gap-10`}
+    >
+      {layout?.format == "Show More" && (
+        <Head>
+          {pageInfo.nextPage && <link rel="next" href={pageInfo.nextPage} />}
+          {pageInfo.previousPage && (
+            <link rel="prev" href={pageInfo.previousPage} />
+          )}
+        </Head>
+      )}
+
       {products?.map((product, index) => (
         <ProductCard
+          key={`product-card-${product.productID}`}
           product={product}
           preload={index === 0}
           index={offset + index}
           layout={layout?.card}
           platform={platform}
         />
       ))}
+
+      {(layout && layout?.format === "Show More") && (
+        <>
+          <ShowMore
+            pageInfo={pageInfo}
+          >
+            {partialUrl && (
+              <div>
+                <div class="mt-2">
+                  <Spinner size={24} />
+                </div>
+                <button
+                  id={`show-more-button-${pageInfo.currentPage}`}
+                  class="btn cursor-pointer hidden w-0 h-0 absolute"
+                  {...usePartialSection({
+                    href: partialUrl.href,
+                    mode: "append",
+                  })}
+                >
+                  Show More
+                </button>
+              </div>
+            )}
+          </ShowMore>
+        </>
+      )}
     </div>
   );
 }

diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx
@@ -9,6 +9,8 @@ import type { ProductListingPage } from "apps/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
 import ProductGallery, { Columns } from "../product/ProductGallery.tsx";
 
+export type Format = "Show More" | "Pagination";
+
 export interface Layout {
   /**
    * @description Use drawer for mobile like behavior on desktop. Aside for rendering the filters alongside the products
@@ -18,6 +20,10 @@ export interface Layout {
    * @description Number of products per line on grid
    */
   columns?: Columns;
+  /**
+   * @description Format of the pagination
+   */
+  format?: Format;
 }
 
 export interface Props {
@@ -43,27 +49,40 @@ function Result({
   layout,
   cardLayout,
   startingPage = 0,
-}: Omit<Props, "page"> & { page: ProductListingPage }) {
+  url: _url,
+}: Omit<Props, "page"> & {
+  page: ProductListingPage;
+  url: string;
+}) {
   const { products, filters, breadcrumb, pageInfo, sortOptions } = page;
-  const perPage = pageInfo.recordPerPage || products.length;
+  const perPage = pageInfo?.recordPerPage || products.length;
+  const url = new URL(_url);
+
+  const { format = "Show More" } = layout ?? {};
 
   const id = useId();
 
   const zeroIndexedOffsetPage = pageInfo.currentPage - startingPage;
   const offset = zeroIndexedOffsetPage * perPage;
 
+  const isPartial = url.searchParams.get("partial") === "true";
+  const isFirstPage = !pageInfo.previousPage;
+
   return (
     <>
       <div class="container px-4 sm:py-10">
-        <SearchControls
-          sortOptions={sortOptions}
-          filters={filters}
-          breadcrumb={breadcrumb}
-          displayFilter={layout?.variant === "drawer"}
-        />
+        {(isFirstPage || !isPartial) && (
+          <SearchControls
+            sortOptions={sortOptions}
+            filters={filters}
+            breadcrumb={breadcrumb}
+            displayFilter={layout?.variant === "drawer"}
+          />
+        )}
 
         <div class="flex flex-row">
-          {layout?.variant === "aside" && filters.length > 0 && (
+          {layout?.variant === "aside" && filters.length > 0 &&
+            (isFirstPage || !isPartial) && (
             <aside class="hidden sm:block w-min min-w-[250px]">
               <Filters filters={filters} />
             </aside>
@@ -72,34 +91,38 @@ function Result({
             <ProductGallery
               products={products}
               offset={offset}
-              layout={{ card: cardLayout, columns: layout?.columns }}
+              layout={{ card: cardLayout, columns: layout?.columns, format }}
+              pageInfo={pageInfo}
+              url={url}
             />
           </div>
         </div>
 
-        <div class="flex justify-center my-4">
-          <div class="join">
-            <a
-              aria-label="previous page link"
-              rel="prev"
-              href={pageInfo.previousPage ?? "#"}
-              class="btn btn-ghost join-item"
-            >
-              <Icon id="ChevronLeft" size={24} strokeWidth={2} />
-            </a>
-            <span class="btn btn-ghost join-item">
-              Page {zeroIndexedOffsetPage + 1}
-            </span>
-            <a
-              aria-label="next page link"
-              rel="next"
-              href={pageInfo.nextPage ?? "#"}
-              class="btn btn-ghost join-item"
-            >
-              <Icon id="ChevronRight" size={24} strokeWidth={2} />
-            </a>
+        {format == "Pagination" && (
+          <div class="flex justify-center my-4">
+            <div class="join">
+              <a
+                aria-label="previous page link"
+                rel="prev"
+                href={pageInfo.previousPage ?? "#"}
+                class="btn btn-ghost join-item"
+              >
+                <Icon id="ChevronLeft" size={24} strokeWidth={2} />
+              </a>
+              <span class="btn btn-ghost join-item">
+                Page {zeroIndexedOffsetPage + 1}
+              </span>
+              <a
+                aria-label="next page link"
+                rel="next"
+                href={pageInfo.nextPage ?? "#"}
+                class="btn btn-ghost join-item"
+              >
+                <Icon id="ChevronRight" size={24} strokeWidth={2} />
+              </a>
+            </div>
           </div>
-        </div>
+        )}
       </div>
       <SendEventOnView
         id={id}
@@ -124,12 +147,21 @@ function Result({
   );
 }
 
-function SearchResult({ page, ...props }: Props) {
+function SearchResult(
+  { page, ...props }: ReturnType<typeof loader>,
+) {
   if (!page) {
     return <NotFound />;
   }
 
   return <Result {...props} page={page} />;
 }
 
+export const loader = (props: Props, req: Request) => {
+  return {
+    ...props,
+    url: req.url,
+  };
+};
+
 export default SearchResult;
diff --git a/components/search/Sort.tsx b/components/search/Sort.tsx
@@ -3,6 +3,7 @@ import { ProductListingPage } from "apps/commerce/types.ts";
 import type { JSX } from "preact";
 
 const SORT_QUERY_PARAM = "sort";
+const PAGE_QUERY_PARAM = "page";
 
 const useSort = () =>
   useMemo(() => {
@@ -18,6 +19,7 @@ const applySort = (e: JSX.TargetedEvent<HTMLSelectElement, Event>) => {
     globalThis.window.location.search,
   );
 
+  urlSearchParams.delete(PAGE_QUERY_PARAM);
   urlSearchParams.set(SORT_QUERY_PARAM, e.currentTarget.value);
   globalThis.window.location.search = urlSearchParams.toString();
 };

diff --git a/components/wishlist/WishlistGallery.tsx b/components/wishlist/WishlistGallery.tsx
@@ -1,10 +1,13 @@
 import SearchResult, {
   Props as SearchResultProps,
 } from "$store/components/search/SearchResult.tsx";
+import { ProductListingPage } from "apps/commerce/types.ts";
+import { AppContext } from "$store/apps/site.ts";
+import { SectionProps } from "deco/mod.ts";
 
 export type Props = SearchResultProps;
 
-function WishlistGallery(props: Props) {
+function WishlistGallery(props: SectionProps<typeof loader>) {
   const isEmpty = !props.page || props.page.products.length === 0;
 
   if (isEmpty) {
@@ -24,4 +27,11 @@ function WishlistGallery(props: Props) {
   return <SearchResult {...props} />;
 }
 
+export const loader = (props: Props, req: Request) => {
+  return {
+    ...props,
+    url: req.url,
+  };
+};
+
 export default WishlistGallery;
diff --git a/deno.json b/deno.json
@@ -1,9 +1,9 @@
 {
   "imports": {
     "$store/": "./",
-    "deco/": "https://denopkg.com/deco-cx/deco@1.55.0/",
-    "apps/": "https://denopkg.com/deco-cx/apps@0.34.6/",
-    "$fresh/": "https://deno.land/x/[email protected].3/",
+    "deco/": "https://denopkg.com/deco-cx/deco@1.57.2/",
+    "apps/": "https://denopkg.com/deco-cx/apps@0.35.2/",
+    "$fresh/": "https://deno.land/x/[email protected].5/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "preact-render-to-string": "https://esm.sh/*[email protected]",

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -23,6 +23,7 @@ import * as $OutOfStock from "./islands/OutOfStock.tsx";
 import * as $ProductImageZoom from "./islands/ProductImageZoom.tsx";
 import * as $SearchControls from "./islands/SearchControls.tsx";
 import * as $ShippingSimulation from "./islands/ShippingSimulation.tsx";
+import * as $ShowMore from "./islands/ShowMore.tsx";
 import * as $SliderJS from "./islands/SliderJS.tsx";
 import * as $WishlistButton_vtex from "./islands/WishlistButton/vtex.tsx";
 import * as $WishlistButton_wake from "./islands/WishlistButton/wake.tsx";
@@ -53,6 +54,7 @@ const manifest = {
     "./islands/ProductImageZoom.tsx": $ProductImageZoom,
     "./islands/SearchControls.tsx": $SearchControls,
     "./islands/ShippingSimulation.tsx": $ShippingSimulation,
+    "./islands/ShowMore.tsx": $ShowMore,
     "./islands/SliderJS.tsx": $SliderJS,
     "./islands/WishlistButton/vtex.tsx": $WishlistButton_vtex,
     "./islands/WishlistButton/wake.tsx": $WishlistButton_wake,

diff --git a/islands/ShowMore.tsx b/islands/ShowMore.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useMemo } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+import { useShowMore } from "$store/sdk/useShowMore.ts";
+import { PageInfo } from "apps/commerce/types.ts";
+
+export interface Props {
+  children: ComponentChildren;
+  pageInfo: PageInfo;
+}
+
+export default function ShowMore(
+  { children, pageInfo }: Props,
+) {
+  const { currentPage, loading } = useShowMore();
+
+  const loadedPage = pageInfo.currentPage;
+  const isFirstPage = !pageInfo.previousPage;
+  const isAtPage = useMemo(() => currentPage.value === loadedPage, [
+    currentPage.value,
+  ]);
+
+  useEffect(() => {
+    if (!isFirstPage) {
+      loading.value = false;
+    }
+    currentPage.value = loadedPage;
+  }, []);
+
+  return (
+    <div
+      class={(isAtPage && pageInfo.nextPage)
+        ? "flex justify-center col-span-full"
+        : "hidden"}
+    >
+      {children}
+      <button
+        class={`btn cursor-pointer absolute ${loading.value ? "hidden" : ""}`}
+        onClick={() => {
+          loading.value = true;
+          const element = document.getElementById(
+            `show-more-button-${loadedPage}`,
+          );
+          if (element) {
+            element.click();
+          }
+          if (pageInfo.nextPage) {
+            const url = new URL(pageInfo.nextPage, window.location.href);
+            url.searchParams.delete("partial");
+            window.history.replaceState({}, "", url.toString());
+          }
+        }}
+      >
+        Show More
+      </button>
+    </div>
+  );
+}