orionplace-react 0.7.7 → 0.8.0

package/templates/hooks/useOrionplaceReviews.ts

@@ -1,352 +0,0 @@
-'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

@@ -1,65 +0,0 @@
-'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 };
-}