[WIP]

okendo · Jul 9, 2024 · 1073840 · 1073840
1 parent 3d37fec
commit 1073840
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 30 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -6,6 +6,7 @@ import {
   Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
+  useFetcher,
   useLoaderData,
   useMatches,
   useRouteError,
@@ -17,6 +18,7 @@ import {
   type LoaderFunctionArgs,
   type SerializeFrom,
 } from '@shopify/remix-oxygen';
+import {useEffect, useRef} from 'react';
 import {Layout} from '~/components/Layout';
 import favicon from './assets/favicon.svg';
 import appStyles from './styles/app.css?url';
@@ -97,10 +99,6 @@ export async function loader({context}: LoaderFunctionArgs) {
       header: await headerPromise,
       isLoggedIn: isLoggedInPromise,
       publicStoreDomain,
-      okendoProviderData: await getOkendoProviderData({
-        context,
-        subscriberId: '<your-okendo-subscriber-id>',
-      }),
     },
     {
       headers: {
@@ -113,6 +111,15 @@ export async function loader({context}: LoaderFunctionArgs) {
 export default function App() {
   const nonce = useNonce();
   const data = useLoaderData<typeof loader>();
+  const fetcher = useFetcher<typeof getOkendoProviderData>();
+  const isFirstRender = useRef<boolean>(true);
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      fetcher.load('/okendo-data');
+    }
+  }, [fetcher]);
 
   return (
     <html lang="en">
@@ -124,12 +131,11 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <OkendoProvider
-          nonce={nonce}
-          okendoProviderData={data.okendoProviderData}
-        />
+        {fetcher.data && (
+          <OkendoProvider nonce={nonce} okendoProviderData={fetcher.data} />
+        )}
         <Layout {...data}>
-          <Outlet />
+          <Outlet context={{okendoDataLoaded: !!fetcher.data}} />
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -2,7 +2,13 @@ import {
   OkendoStarRating,
   type WithOkendoStarRatingSnippet,
 } from '@okendo/shopify-hydrogen';
-import {Await, Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {
+  Await,
+  Link,
+  useLoaderData,
+  useOutletContext,
+  type MetaFunction,
+} from '@remix-run/react';
 import {Image, Money} from '@shopify/hydrogen';
 import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Suspense} from 'react';
@@ -66,6 +72,7 @@ function RecommendedProducts({
     };
   }>;
 }) {
+  const {okendoDataLoaded} = useOutletContext();
   return (
     <div className="recommended-products">
       <h2>Recommended Products</h2>
@@ -85,10 +92,12 @@ function RecommendedProducts({
                     sizes="(min-width: 45em) 20vw, 50vw"
                   />
                   <h4>{product.title}</h4>
-                  <OkendoStarRating
-                    productId={product.id}
-                    okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-                  />
+                  {okendoDataLoaded && (
+                    <OkendoStarRating
+                      productId={product.id}
+                      okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+                    />
+                  )}
                   <small>
                     <Money data={product.priceRange.minVariantPrice} />
                   </small>

diff --git a/app/routes/collections.all.tsx b/app/routes/collections.all.tsx
@@ -1,5 +1,13 @@
-import { OkendoStarRating, WithOkendoStarRatingSnippet } from '@okendo/shopify-hydrogen';
-import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {
+  OkendoStarRating,
+  type WithOkendoStarRatingSnippet,
+} from '@okendo/shopify-hydrogen';
+import {
+  Link,
+  useLoaderData,
+  useOutletContext,
+  type MetaFunction,
+} from '@remix-run/react';
 import {
   Image,
   Money,
@@ -76,6 +84,8 @@ function ProductItem({
 }) {
   const variant = product.variants.nodes[0];
   const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+  const {okendoDataLoaded} = useOutletContext();
+
   return (
     <Link
       className="product-item"
@@ -93,10 +103,12 @@ function ProductItem({
         />
       )}
       <h4>{product.title}</h4>
-      <OkendoStarRating
-        productId={product.id}
-        okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-      />
+      {okendoDataLoaded && (
+        <OkendoStarRating
+          productId={product.id}
+          okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+        />
+      )}
       <small>
         <Money data={product.priceRange.minVariantPrice} />
       </small>

diff --git a/app/routes/okendo-data.tsx b/app/routes/okendo-data.tsx
@@ -0,0 +1,11 @@
+import {getOkendoProviderData} from '@okendo/shopify-hydrogen';
+import {json, type LoaderFunctionArgs} from '@remix-run/server-runtime';
+
+export async function loader({context}: LoaderFunctionArgs) {
+  return json(
+    await getOkendoProviderData({
+      context,
+      subscriberId: '<your-okendo-subscriber-id>',
+    }),
+  );
+}
diff --git a/app/routes/products.$handle.tsx b/app/routes/products.$handle.tsx
@@ -8,6 +8,7 @@ import {
   Await,
   Link,
   useLoaderData,
+  useOutletContext,
   type FetcherWithComponents,
   type MetaFunction,
 } from '@remix-run/react';
@@ -24,7 +25,7 @@ import type {
   SelectedOption,
 } from '@shopify/hydrogen/storefront-api-types';
 import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Suspense} from 'react';
+import {Suspense, useEffect, useState} from 'react';
 import type {
   ProductFragment,
   ProductVariantFragment,
@@ -121,6 +122,17 @@ function redirectToFirstVariant({
 export default function Product() {
   const {product, variants} = useLoaderData<typeof loader>();
   const {selectedVariant} = product;
+  const {okendoDataLoaded} = useOutletContext();
+  const [go, setGo] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (okendoDataLoaded) {
+      setTimeout(() => {
+        setGo(true);
+      }, 2000);
+    }
+  }, [okendoDataLoaded]);
+
   return (
     <>
       <div className="product">
@@ -132,10 +144,12 @@ export default function Product() {
         />
       </div>
 
-      <OkendoReviews
-        productId={product.id}
-        okendoReviewsSnippet={product.okendoReviewsSnippet}
-      />
+      {go && (
+        <OkendoReviews
+          productId={product.id}
+          okendoReviewsSnippet={product.okendoReviewsSnippet}
+        />
+      )}
     </>
   );
 }
@@ -169,13 +183,16 @@ function ProductMain({
   variants: Promise<ProductVariantsQuery>;
 }) {
   const {title, descriptionHtml} = product;
+  const {okendoDataLoaded} = useOutletContext();
   return (
     <div className="product-main">
       <h1>{title}</h1>
-      <OkendoStarRating
-        productId={product.id}
-        okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-      />
+      {okendoDataLoaded && (
+        <OkendoStarRating
+          productId={product.id}
+          okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+        />
+      )}
       <ProductPrice selectedVariant={selectedVariant} />
       <br />
       <Suspense

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "shopify-template-version": "1.0.7",
   "type": "module",
   "scripts": {
-    "prebuild": "sed -i \"s/<your-okendo-subscriber-id>/$OKENDO_SUBSCRIBER_ID/g\" app/root.tsx",
+    "prebuild": "sed -i \"s/<your-okendo-subscriber-id>/$OKENDO_SUBSCRIBER_ID/g\" app/root.tsx app/routes/okendo-data.tsx",
     "build": "shopify hydrogen build --codegen",
     "dev": "shopify hydrogen dev --codegen",
     "preview": "npm run build && shopify hydrogen preview",