sync demo

Weaverse · Jan 31, 2024 · f0490d0 · f0490d0
1 parent bf7db61
commit f0490d0
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 39 deletions.
diff --git a/app/components/Icon.tsx b/app/components/Icon.tsx
@@ -370,8 +370,71 @@ export function IconVideoBlank(props: IconProps) {
 export function IconArrowInput(props: IconProps) {
   return (
     <Icon {...props} fill="transparent" stroke={props.stroke || 'currentColor'}>
-      <path d="M2.5 8H13.5" stroke="#0F0F0F" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M9 3.5L13.5 8L9 12.5" stroke="#0F0F0F" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M2.5 8H13.5"
+        stroke="#0F0F0F"
+        stroke-opacity="0.7"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9 3.5L13.5 8L9 12.5"
+        stroke="#0F0F0F"
+        stroke-opacity="0.7"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </Icon>
+  );
+}
+
+export function IconFilledStar(props: IconProps) {
+  return (
+    <Icon
+      {...props}
+      viewBox="0 0 24 24"
+      stroke={props.stroke || 'currentColor'}
+      stroke-width="2"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
+        stroke-width="0"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}
+export function IconStar(props: IconProps) {
+  return (
+    <Icon
+      {...props}
+      viewBox="0 0 24 24"
+      stroke={props.stroke || 'currentColor'}
+      stroke-width="2"
+      fill='none'
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
+    </Icon>
+  );
+}
+export function IconHalfFilledStar(props: IconProps) {
+  return (
+    <Icon
+      {...props}
+      viewBox="0 0 24 24"
+      stroke={props.stroke || 'currentColor'}
+      stroke-width="2"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M12 1a.993 .993 0 0 1 .823 .443l.067 .116l2.852 5.781l6.38 .925c.741 .108 1.08 .94 .703 1.526l-.07 .095l-.078 .086l-4.624 4.499l1.09 6.355a1.001 1.001 0 0 1 -1.249 1.135l-.101 -.035l-.101 -.046l-5.693 -3l-5.706 3c-.105 .055 -.212 .09 -.32 .106l-.106 .01a1.003 1.003 0 0 1 -1.038 -1.06l.013 -.11l1.09 -6.355l-4.623 -4.5a1.001 1.001 0 0 1 .328 -1.647l.113 -.036l.114 -.023l6.379 -.925l2.853 -5.78a.968 .968 0 0 1 .904 -.56zm0 3.274v12.476a1 1 0 0 1 .239 .029l.115 .036l.112 .05l4.363 2.299l-.836 -4.873a1 1 0 0 1 .136 -.696l.07 -.099l.082 -.09l3.546 -3.453l-4.891 -.708a1 1 0 0 1 -.62 -.344l-.073 -.097l-.06 -.106l-2.183 -4.424z"
+        stroke-width="0"
+        fill="currentColor"
+      />
     </Icon>
   );
 }
diff --git a/app/components/StarRating.tsx b/app/components/StarRating.tsx
@@ -0,0 +1,20 @@
+import { IconFilledStar, IconHalfFilledStar, IconStar } from "."
+
+export function StarRating({ rating }: { rating: number }) {
+  let filledStar = (
+    <IconFilledStar className="w-4 h-4"/>
+  )
+  let halfFilledStar = (
+    <IconHalfFilledStar className="w-4 h-4" />
+  )
+  let star = <IconStar className="w-4 h-4" />
+  return (
+    <div className="inline-flex gap-0.5">
+      {rating >= 1 ? filledStar : rating >= 0.5 ? halfFilledStar : star}
+      {rating >= 2 ? filledStar : rating >= 1.5 ? halfFilledStar : star}
+      {rating >= 3 ? filledStar : rating >= 2.5 ? halfFilledStar : star}
+      {rating >= 4 ? filledStar : rating >= 3.5 ? halfFilledStar : star}
+      {rating >= 5 ? filledStar : rating >= 4.5 ? halfFilledStar : star}
+    </div>
+  )
+}
diff --git a/app/components/product-form/judgeme-review.tsx b/app/components/product-form/judgeme-review.tsx
@@ -2,11 +2,11 @@ import type {
   HydrogenComponentProps,
   HydrogenComponentSchema,
 } from '@weaverse/hydrogen';
-import StarsRating from 'react-star-rate';
 import {useParentInstance} from '@weaverse/hydrogen';
 import {useFetcher, useLoaderData} from '@remix-run/react';
 import {forwardRef, useEffect} from 'react';
 import {usePrefixPathWithLocale} from '~/lib/utils';
+import {StarRating} from '../StarRating';
 type JudgemeReviewsData = {
   rating: number;
   reviewNumber: number;
@@ -44,16 +44,10 @@ let JudgemeReview = forwardRef<HTMLDivElement, HydrogenComponentProps>(
 
     return (
       <div {...props} ref={ref}>
-        <StarsRating
-          style={{
-            style: {
-              fontSize: '16px',
-            },
-          }}
-          allowClear={false}
-          value={rating}
-        />{' '}
-        ({reviewNumber})
+        <div className="space-x-2">
+          <StarRating rating={rating} />
+          <span className='align-top'>({reviewNumber})</span>
+        </div>
       </div>
     );
   },

diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx
@@ -13,11 +13,35 @@ interface ProductMediaProps {
 }
 
 export function ProductMedia(props: ProductMediaProps) {
-  let {selectedVariant, media, showThumbnails, numberOfThumbnails, spacing} =
-    props;
+  let {
+    selectedVariant,
+    media: _media,
+    showThumbnails,
+    numberOfThumbnails,
+    spacing,
+  } = props;
+  let media = _media.filter((med) => med.__typename === 'MediaImage');
+
+  let slideOptions = {
+    initial: 0,
+    loop: true,
+    slides: {
+      perView: 1,
+      spacing: 0,
+    },
+  };
+
+  let thumbnailOptions = {
+    initial: 0,
+    slides: {
+      perView: numberOfThumbnails,
+      spacing: spacing,
+    },
+  };
+
   let [activeInd, setAcitveInd] = useState(0);
   const [sliderRef, instanceRef] = useKeenSlider({
-    loop: true,
+    ...slideOptions,
     slideChanged(slider) {
       let pos = slider.track.details.rel;
       setAcitveInd(pos);
@@ -39,26 +63,29 @@ export function ProductMedia(props: ProductMediaProps) {
     },
     [instanceRef],
   );
-  const [thumbnailRef, thumbnailInstance] = useKeenSlider({
-    initial: 0,
-    slides: {
-      perView: numberOfThumbnails,
-      spacing: spacing,
-    },
-  });
+  const [thumbnailRef, thumbnailInstance] = useKeenSlider(thumbnailOptions);
   let handleClickThumbnail = (idx: number) => {
     moveToIdx(idx);
   };
+
   useEffect(() => {
+    // instanceRef.current?.update(slideOptions);
+    // thumbnailInstance.current?.update(thumbnailOptions);
     let selectedInd = media.findIndex((med) => {
       if (med.__typename !== 'MediaImage') return false;
       return med.image?.url === selectedVariant.image.url;
     });
     moveToIdx(selectedInd);
-  }, [selectedVariant, media, moveToIdx]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedVariant?.id, moveToIdx]);
   return (
-    <div>
-      <div ref={sliderRef} className="keen-slider vt-product-image">
+    <div
+      className="grid vt-product-image"
+      style={{
+        gap: spacing,
+      }}
+    >
+      <div ref={sliderRef} className="keen-slider">
         {media.map((med, i) => {
           let image =
             med.__typename === 'MediaImage'

diff --git a/app/routes/($locale).products.$productHandle.tsx b/app/routes/($locale).products.$productHandle.tsx
@@ -1,10 +1,6 @@
-import type {
-  ShopifyAnalyticsProduct} from '@shopify/hydrogen';
-import {
-  AnalyticsPageType,
-  getSelectedProductOptions
-} from '@shopify/hydrogen';
-import type { LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen';
+import {AnalyticsPageType, getSelectedProductOptions} from '@shopify/hydrogen';
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {defer} from '@shopify/remix-oxygen';
 import type {ProductRecommendationsQuery} from 'storefrontapi.generated';
 import invariant from 'tiny-invariant';
@@ -20,7 +16,7 @@ import {WeaverseContent} from '~/weaverse';
 import {useLoaderData, useSearchParams} from '@remix-run/react';
 import type {SelectedOptionInput} from '@shopify/hydrogen/storefront-api-types';
 import {useEffect} from 'react';
-import { getJudgemeReviews } from '~/lib/judgeme';
+import {getJudgemeReviews} from '~/lib/judgeme';
 
 export const headers = routeHeaders;
 
@@ -88,7 +84,11 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
   let judgemeReviews = null;
   if (judgeme_API_TOKEN) {
     let shop_domain = context.env.PUBLIC_STORE_DOMAIN;
-    judgemeReviews = await getJudgemeReviews(judgeme_API_TOKEN, shop_domain, productHandle);
+    judgemeReviews = await getJudgemeReviews(
+      judgeme_API_TOKEN,
+      shop_domain,
+      productHandle,
+    );
   }
 
   return defer({
@@ -105,7 +105,7 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
     },
     seo,
     weaverseData: await context.weaverse.loadPage(),
-    judgemeReviews
+    judgemeReviews,
   });
 }
 
@@ -141,7 +141,9 @@ let useApplyFirstVariant = () => {
       selectedOptions?.forEach((option: SelectedOptionInput) => {
         searchParams.set(option.name, option.value);
       });
-      setSearchParams(searchParams);
+      setSearchParams(searchParams, {
+        replace: true, // prevent adding a new entry to the history stack
+      });
     }
     // eslint-disable-next-line
   }, [product]);

diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx
@@ -72,8 +72,11 @@ let ProductInformation = forwardRef<HTMLDivElement, ProductInformationProps>(
     useEffect(() => {
       if (!selectedVariant) {
         setSelectedVariant(variants?.nodes?.[0]);
+      } else if (selectedVariant?.id !== product?.selectedVariant?.id) {
+        setSelectedVariant(product?.selectedVariant);
       }
-    }, [selectedVariant, variants?.nodes]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [product?.id]);
     let {swatches} = useThemeSettings();
 
     let handleSelectedVariantChange = (variant: any) => {

diff --git a/package.json b/package.json
@@ -38,7 +38,6 @@
     "react-dom": "18.2.0",
     "react-intersection-observer": "9.5.3",
     "react-player": "^2.14.1",
-    "react-star-rate": "^0.2.0",
     "react-use": "17.4.2",
     "schema-dts": "1.1.2",
     "tiny-invariant": "1.3.1",