orionplace-react 0.1.0 → 0.2.0

package/templates/hooks/useOrionplaceReviews.ts

@@ -0,0 +1,352 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type {
+  ProductReviewsLoadAction,
+  ProductReviewsProps,
+  ProductReviewsSubmitContext,
+} from '@/components/orionplace/products/ProductReviews';
+import type { ProductReviewFormValue } from '@/components/orionplace/products/ProductReviewForm';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import { mergePagination } from '@/lib/orionplace/featureData';
+import type {
+  IProductFeedbackCountersResponse,
+  IProductFeedbackCreateResponse,
+  IProductFeedbackImagesRequest,
+  IProductFeedbackImagesResponse,
+  IProductFeedbackListResponse,
+  IProductFeedbackPreloadResponse,
+  IProductFeedbackReactionRequest,
+  IProductReview,
+  IProductReviewImage,
+} from '@/interfaces/orionplace/products/IProductFeedbackApi';
+import { reviewScopeFilters } from '@/lib/orionplace/reviewScope';
+import { apiErrorMessage, type OrionplaceApi } from '@/lib/orionplace/api';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { useOrionplaceApi } from './useOrionplaceApi';
+
+type ReviewData = NonNullable<IProductFeedbackListResponse['page_data']>;
+type GalleryData = NonNullable<IProductFeedbackImagesResponse['page_data']>;
+type CountersData = NonNullable<IProductFeedbackCountersResponse['page_data']>;
+type SavedData = NonNullable<IProductFeedbackCreateResponse['page_data']>;
+
+
+export function useOrionplaceReviews(options: {
+  productId?: number;
+  sellerId?: number;
+  onSignInRequired?: () => void;
+  // Another client for the review requests, such as demonstration responses
+  // in a documentation preview; the storefront's API by default.
+  api?: Pick<OrionplaceApi, 'request'>;
+}): Omit<ProductReviewsProps, 'productId' | 'sellerId' | 'own'> {
+  const storefrontApi                             = useOrionplaceApi();
+  const locale                                    = useOrionplaceSelections(
+    (state) => state.localeCode,
+  );
+  // OrionMarketplace's messages, or the translated failure for any other error.
+  const errorMessage                              = (reason: unknown) =>
+    apiErrorMessage(reason) || featureLabels(locale).failed;
+  const api                                       = options.api ?? storefrontApi;
+  const request                                   = useRef<AbortController | undefined>(undefined);
+  const galleryRequest                            = useRef<AbortController | undefined>(undefined);
+  const busy                                      = useRef(false);
+  const [reviews, setReviews]                     = useState<IProductReview[]>([]);
+  const [parents, setParents]                     = useState<IProductReview[]>([]);
+  const [pagination, setPagination]               = useState<Partial<IApiPagination>>({});
+  const [stats, setStats]                         = useState<Record<string, number>>({});
+  const [loaded, setLoaded]                       = useState(false);
+  const [pending, setPending]                     = useState(false);
+  const [error, setError]                         = useState('');
+  const [galleryImages, setGalleryImages]         = useState<IProductReviewImage[]>([]);
+  const [galleryPagination, setGalleryPagination] = useState<
+    Partial<IApiPagination>
+  >({});
+  const [galleryLoaded, setGalleryLoaded]         = useState(false);
+  const [galleryPending, setGalleryPending]       = useState(false);
+  const [galleryError, setGalleryError]           = useState('');
+
+  useEffect(
+    () => () => {
+      request.current?.abort();
+      galleryRequest.current?.abort();
+    },
+    [],
+  );
+
+  async function loadReviews(action: ProductReviewsLoadAction) {
+    request.current?.abort();
+    const controller = new AbortController();
+    request.current = controller;
+    setPending(true);
+    setError('');
+    try {
+      const data = await api.request<ReviewData>(
+        action.endpoint,
+        action.request,
+        controller.signal,
+      );
+      if (controller.signal.aborted) {
+        return;
+      }
+      setReviews(data.feedbacks.data);
+      // The backend sends the unfiltered total with the first page only;
+      // later pages keep it, as in the other packages.
+      setPagination((current) =>
+        mergePagination(
+          (action.request.paginate?.page ?? 1) === 1 ? {} : current,
+          data.feedbacks.rpag,
+        ),
+      );
+      if (data.stats) {
+        setStats(data.stats);
+      }
+      setLoaded(true);
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setError(errorMessage(reason));
+      }
+    } finally {
+      if (request.current === controller) {
+        request.current = undefined;
+        setPending(false);
+      }
+    }
+  }
+
+  async function loadGallery(value: IProductFeedbackImagesRequest) {
+    galleryRequest.current?.abort();
+    const controller = new AbortController();
+    galleryRequest.current = controller;
+    setGalleryPending(true);
+    setGalleryError('');
+    try {
+      const data = await api.request<GalleryData>(
+        'products_view_feedbacks_images_get',
+        value,
+        controller.signal,
+      );
+      if (!controller.signal.aborted) {
+        setGalleryImages(data.data);
+        setGalleryPagination(data.rpag);
+        setGalleryLoaded(true);
+      }
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setGalleryError(errorMessage(reason));
+      }
+    } finally {
+      if (galleryRequest.current === controller) {
+        galleryRequest.current = undefined;
+        setGalleryPending(false);
+      }
+    }
+  }
+
+  // One request at a time besides the list itself, as Nuxt's task: a
+  // second click while a reaction or a preload is running is ignored.
+  async function exclusive<T>(work: () => Promise<T>) {
+    if (busy.current || request.current) {
+      return undefined;
+    }
+    busy.current = true;
+    setPending(true);
+    setError('');
+    try {
+      return await work();
+    } catch (reason) {
+      setError(errorMessage(reason));
+      return undefined;
+    } finally {
+      busy.current = false;
+      if (!request.current) {
+        setPending(false);
+      }
+    }
+  }
+
+  async function openReplies(
+    review: IProductReview,
+    action?: ProductReviewsLoadAction,
+  ) {
+    const counters = await exclusive(() =>
+      api.request<CountersData>(
+        'products_view_feedbacks_stats_get',
+        {},
+        undefined,
+        { feedback_id: review.id },
+      ),
+    );
+    if (!counters) {
+      return;
+    }
+    const parent = {
+      ...review,
+      total_c_approved_replies:
+        counters.total_c_approved_replies ?? counters.total_c_aprooved_replies,
+      total_c_approved_direct_replies:
+        counters.total_c_approved_direct_replies ??
+        review.total_c_approved_direct_replies,
+      total_c_replies: counters.total_c_replies,
+      total_c_likes: counters.total_c_likes,
+      total_c_dislikes: counters.total_c_dislikes,
+    };
+    setParents((current) => [...current, parent]);
+    await loadReviews(
+      action ?? {
+        endpoint: 'products_view_feedbacks_feedback_get',
+        request: {
+          filters: {
+            ...reviewScopeFilters(options),
+            reply_of_parent: review.id,
+            ordering: '-date_created',
+          },
+          paginate: { page: 1, pp_items: 10 },
+        },
+      },
+    );
+  }
+
+  async function back(action?: ProductReviewsLoadAction) {
+    const nextParents = parents.slice(0, -1);
+    setParents(nextParents);
+    await loadReviews(
+      action ?? {
+        endpoint: 'products_view_feedbacks_feedback_get',
+        request: {
+          filters: {
+            ...reviewScopeFilters(options),
+            ...(nextParents.at(-1)
+              ? { reply_of_parent: nextParents.at(-1)!.id }
+              : {}),
+            ordering: '-date_created',
+          },
+          paginate: { page: 1, pp_items: 10 },
+        },
+      },
+    );
+  }
+
+  async function preload(review: IProductReview) {
+    const saved = await exclusive(async () => {
+      const data = await api.request<
+        IProductFeedbackPreloadResponse['page_data']
+      >('products_feedbacks_reply_preload', { reply_id: review.id });
+      if (!data || data.id !== review.id) {
+        throw new Error('Review cannot be edited');
+      }
+      return data;
+    });
+    return saved ?? null;
+  }
+
+  function react(
+    reaction: IProductFeedbackReactionRequest,
+    review: IProductReview,
+  ) {
+    void exclusive(async () => {
+      const counters = await api.request<{ likes: number; dislikes: number }>(
+        'products_feedbacks_like_or_dislike',
+        reaction,
+      );
+      updateReaction(review, counters, reaction.like_or_dislike);
+    });
+  }
+
+  async function submit(
+    value: ProductReviewFormValue,
+    context: ProductReviewsSubmitContext,
+  ) {
+    const feedbackId = context.editing?.id;
+    const productId = context.productId ?? context.replyingTo?.product?.id;
+    if (!feedbackId && !productId) {
+      throw new Error('Missing product');
+    }
+    if (busy.current || request.current) {
+      return false;
+    }
+    busy.current = true;
+    setPending(true);
+    setError('');
+    const body = new FormData();
+    body.append(
+      'data',
+      JSON.stringify({
+        text: value.text,
+        rating: value.rating,
+        ...(feedbackId
+          ? { images_to_delete: value.remove }
+          : { for_product: productId, reply_to: context.replyingTo?.id }),
+      }),
+    );
+    for (const file of value.files) {
+      body.append('feedback_images', file, file.name);
+    }
+    try {
+      const data = await api.request<SavedData>(
+        feedbackId ? 'products_feedbacks_edit' : 'products_feedbacks_add',
+        body,
+        undefined,
+        feedbackId ? { feedback_id: feedbackId } : {},
+      );
+      if (!data.feedback.length) {
+        throw new Error('Missing saved review');
+      }
+      // ProductReviews then loads the customer's own reviews, where the
+      // saved review waits for moderation.
+      setParents([]);
+      return true;
+    } catch (reason) {
+      setError(errorMessage(reason));
+      throw reason;
+    } finally {
+      busy.current = false;
+      if (!request.current) {
+        setPending(false);
+      }
+    }
+  }
+
+  function updateReaction(
+    review: IProductReview,
+    counters: { likes: number; dislikes: number },
+    positive?: boolean,
+  ) {
+    setReviews((current) =>
+      current.map((item) =>
+        item.id === review.id
+          ? {
+              ...item,
+              total_c_likes: counters.likes,
+              total_c_dislikes: counters.dislikes,
+              user_like: item.user_like === positive ? null : positive,
+            }
+          : item,
+      ),
+    );
+  }
+
+  return {
+    reviews,
+    parents,
+    pagination,
+    stats,
+    loaded,
+    pending,
+    error,
+    galleryImages,
+    galleryPagination,
+    galleryLoaded,
+    galleryPending,
+    galleryError,
+    onLoad: (action) => void loadReviews(action),
+    onGalleryLoad: (value) => void loadGallery(value),
+    onPhotoReviewLoad: (action) => void loadReviews(action),
+    onOpenReplies: (review, action) => void openReplies(review, action),
+    onBack: (action) => void back(action),
+    onSignInRequired: options.onSignInRequired,
+    onEdit: preload,
+    onSubmit: submit,
+    onReaction: react,
+  };
+}

package/templates/hooks/useOrionplaceStableHeight.ts

@@ -0,0 +1,65 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
+
+// `mounted` re-attaches the observer when the element first appears after
+// the component's first render (a card that waits for its product), as the
+// Nuxt and Svelte helpers do by watching the element.
+export function useOrionplaceStableHeight(
+  element: RefObject<HTMLElement | null>,
+  mounted: unknown = true,
+) {
+  const [minHeight, setMinHeight] = useState<string>();
+  const retained = useRef(0);
+  const width = useRef(0);
+  const frame = useRef<number | undefined>(undefined);
+
+  const measure = useCallback(() => {
+    const node = element.current;
+    if (!node) {
+      return;
+    }
+    retained.current = Math.max(
+      retained.current,
+      Math.ceil(node.getBoundingClientRect().height),
+    );
+    setMinHeight(`${retained.current}px`);
+  }, [element]);
+
+  const reset = useCallback(() => {
+    retained.current = 0;
+    setMinHeight(undefined);
+    cancelAnimationFrame(frame.current ?? 0);
+    frame.current = requestAnimationFrame(measure);
+  }, [measure]);
+
+  useEffect(() => {
+    const node = element.current;
+    if (!node || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) {
+        return;
+      }
+      // A whole pixel of width can cross a container step (the compact
+      // card's 22rem), so it measures afresh; sub-pixel jitter keeps it.
+      if (Math.abs(entry.contentRect.width - width.current) > 0.5) {
+        width.current = entry.contentRect.width;
+        reset();
+      } else {
+        measure();
+      }
+    });
+    observer.observe(node);
+
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame.current ?? 0);
+    };
+  }, [element, measure, reset, mounted]);
+
+  return { minHeight, reset };
+}