sync demo

.github/workflows/oxygen-deployment-1000010106.yml

@@ -36,7 +36,7 @@ jobs:
             ${{ runner.os }}-
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
       - name: Build and Publish to Oxygen
         id: deploy

.npmrc

@@ -1,4 +1,5 @@
 @weaverse:registry=https://registry.npmjs.com
 @shopify:registry=https://registry.npmjs.com
+progress=false
 legacy-peer-deps=true
 

app/sections/single-product/judgeme-review.tsx → app/components/product-form/judgeme-review.tsx

@@ -4,29 +4,32 @@ import type {
 } from '@weaverse/hydrogen';
 import StarsRating from 'react-star-rate';
 import {useParentInstance} from '@weaverse/hydrogen';
-import {useFetcher} from '@remix-run/react';
+import {useFetcher, useLoaderData} from '@remix-run/react';
 import {forwardRef, useEffect} from 'react';
 import {usePrefixPathWithLocale} from '~/lib/utils';
+type JudgemeReviewsData = {
+  rating: number;
+  reviewNumber: number;
+  error?: string;
+};
 
 let JudgemeReview = forwardRef<HTMLDivElement, HydrogenComponentProps>(
   (props, ref) => {
-    let {load, data} = useFetcher<{
-      rating: number;
-      reviewNumber: number;
-      error?: string;
+    let loaderData = useLoaderData<{
+      judgemeReviews: JudgemeReviewsData;
     }>();
-
+    let judgemeReviews = loaderData?.judgemeReviews;
+    let {load, data: fetchData} = useFetcher<JudgemeReviewsData>();
     let context = useParentInstance();
     let handle = context?.data?.product?.handle!;
     let api = usePrefixPathWithLocale(`/api/review/${handle}`);
 
     useEffect(() => {
-      if (handle) {
-        load(api);
-      }
+      if (judgemeReviews || !handle) return;
+      load(api);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [handle, api]);
-
+    let data = judgemeReviews || fetchData;
     if (!data) return null;
     if (data.error) {
       return (

app/lib/judgeme.ts

@@ -0,0 +1,59 @@
+
+type JudgemeProductData = {
+  product: {
+    id: string;
+    handle: string;
+  };
+};
+
+type JudgemeReviewsData = {
+  reviews: {
+    rating: number;
+  }[];
+};
+
+async function getInternalIdByHandle(
+  api_token: string,
+  shop_domain: string,
+  handle: string,
+) {
+  let api =
+    `https://judge.me/api/v1/products/-1?` +
+    new URLSearchParams({
+      api_token,
+      shop_domain,
+      handle: handle,
+    });
+  let data = (await fetch(api).then((res) => res.json())) as JudgemeProductData;
+  return data?.product?.id;
+}
+
+export let getJudgemeReviews = async(api_token: string, shop_domain: string, handle: string) => {
+  if (!api_token) {
+    return {
+      error: 'Missing JUDGEME_PUBLIC_TOKEN',
+    };
+  }
+  let internalId = await getInternalIdByHandle(api_token, shop_domain, handle);
+  if (internalId) {
+    let data = (await fetch(
+      `https://judge.me/api/v1/reviews?` +
+        new URLSearchParams({
+          api_token,
+          shop_domain,
+          product_id: internalId,
+        }),
+    ).then((res) => res.json())) as JudgemeReviewsData;
+    let reviews = data.reviews;
+    let rating =
+      reviews.reduce((acc, review) => acc + review.rating, 0) /
+      (reviews.length || 1);
+    return {
+      rating,
+      reviewNumber: reviews.length,
+    };
+  }
+  return {
+    rating: 0,
+  };
+}

app/routes/($locale).api.review.$productHandle.tsx

@@ -1,34 +1,6 @@
 import {type RouteLoaderArgs} from '@weaverse/hydrogen';
 import invariant from 'tiny-invariant';
-
-type JudgemeProductData = {
-  product: {
-    id: string;
-    handle: string;
-  };
-};
-
-type JudgemeReviewsData = {
-  reviews: {
-    rating: number;
-  }[];
-};
-
-async function getInternalIdByHandle(
-  api_token: string,
-  shop_domain: string,
-  handle: string,
-) {
-  let api =
-    `https://judge.me/api/v1/products/-1?` +
-    new URLSearchParams({
-      api_token,
-      shop_domain,
-      handle: handle,
-    });
-  let data = (await fetch(api).then((res) => res.json())) as JudgemeProductData;
-  return data?.product?.id;
-}
+import { getJudgemeReviews } from '~/lib/judgeme';
 
 export async function loader(args: RouteLoaderArgs) {
   let {params, context} = args;
@@ -37,30 +9,6 @@ export async function loader(args: RouteLoaderArgs) {
   let api_token = env.JUDGEME_PUBLIC_TOKEN;
   let shop_domain = env.PUBLIC_STORE_DOMAIN;
   invariant(handle, 'Missing product handle');
-  if (!api_token)
-    return {
-      error: 'Missing JUDGEME_PUBLIC_TOKEN',
-    };
-  let internalId = await getInternalIdByHandle(api_token, shop_domain, handle);
-  if (internalId) {
-    let data = (await fetch(
-      `https://judge.me/api/v1/reviews?` +
-        new URLSearchParams({
-          api_token,
-          shop_domain,
-          product_id: internalId,
-        }),
-    ).then((res) => res.json())) as JudgemeReviewsData;
-    let reviews = data.reviews;
-    let rating =
-      reviews.reduce((acc, review) => acc + review.rating, 0) /
-      (reviews.length || 1);
-    return {
-      rating,
-      reviewNumber: reviews.length,
-    };
-  }
-  return {
-    rating: 0,
-  };
+  let reviews = await getJudgemeReviews(api_token, shop_domain, handle);
+  return reviews
 }