orionplace-react 0.7.8 → 0.8.0

package/templates/app/_storefront/useAccountWallet.ts

@@ -1,27 +0,0 @@
-'use client';
-
-import { useOrionplaceStore } from '@/providers/OrionplaceProvider';
-import { selectProfile } from '@/stores/orionplace';
-import type { IProfileResponse } from '@/interfaces/orionplace/accounts/IProfileData';
-
-type ProfilePage = NonNullable<IProfileResponse['page_data']>;
-
-/**
- * After a purchase or a subscription change the page reloads the customer's
- * profile; its wallet replaces the balance in the shared state, as Nuxt's
- * `store.patchWallet()` does. A new Application Load would unmount the page
- * with its confirmation.
- */
-export function useAccountWallet() {
-  const store = useOrionplaceStore();
-
-  return (profile: ProfilePage) => {
-    const state   = store.getState();
-    const current = profile.profile_info.find(
-      (item) => item.id === selectProfile(state)?.id,
-    );
-    if (current?.wallet) {
-      state.patchWallet(current.wallet);
-    }
-  };
-}

package/templates/app/_storefront/useBlogComments.ts

@@ -1,389 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import type {
-  BlogCommentDeleteAction,
-  BlogCommentsLoadAction,
-  BlogCommentSubmitAction,
-  BlogReplyPage,
-} from '@/components/orionplace/blog/BlogComments';
-import { EBlogCommentStatus } from '@/interfaces/orionplace/blog/IBlogApi';
-import type {
-  IBlogComment,
-  IBlogCommentsResponse,
-} from '@/interfaces/orionplace/blog/IBlogApi';
-import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
-import type { BlogCommentReplies } from '@/lib/orionplace/blogComments';
-import { withNewBlogReply } from '@/lib/orionplace/blogComments';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { fieldErrorText, OrionplaceApiError } from '@/lib/orionplace/api';
-import type { OrionplaceApi } from '@/lib/orionplace/api';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectIsAuthenticated } from '@/stores/orionplace';
-import { useStorefrontNavigation } from './useStorefrontNavigation';
-
-type CommentsPage = NonNullable<IBlogCommentsResponse['page_data']>;
-type ReplyPages   = Record<number, BlogReplyPage>;
-
-const replyPageSize = 50;
-
-function replaceComment(
-  list: readonly IBlogComment[],
-  comment: IBlogComment,
-) {
-  return list.map((item) => (item.id === comment.id ? comment : item));
-}
-
-function countReply(list: readonly IBlogComment[], reply: IBlogComment) {
-  return list.map((item) =>
-    item.id === reply.parent_id ? withNewBlogReply(item, reply) : item,
-  );
-}
-
-function mapReplies(
-  replies: BlogCommentReplies,
-  update: (list: readonly IBlogComment[]) => IBlogComment[],
-) {
-  return Object.fromEntries(
-    Object.entries(replies).map(([id, list]) => [id, update(list)]),
-  ) as BlogCommentReplies;
-}
-
-/*
- * The discussion pages through root comments (`show_only_main`), newest
- * first. Replies to every shown comment are loaded with `filters.parent`,
- * oldest first, level by level, so each reply appears beneath its target
- * whatever page OrionMarketplace would list it on. `localComments` keeps the customer's
- * confirmed comments that await moderation and are missing from
- * blog_comments_get. `client` replaces the storefront's own API client, as
- * `api` does in useOrionplaceReviews (the documentation previews pass theirs).
- */
-export function useBlogComments(
-  postId: number,
-  initial?: CommentsPage,
-  client?: Pick<OrionplaceApi, 'request'>,
-) {
-  const storefrontApi               = useOrionplaceApi();
-  const api                         = client ?? storefrontApi;
-  const navigation                  = useStorefrontNavigation();
-  const authenticated               = useOrionplace(selectIsAuthenticated);
-  const locale                      = useOrionplaceSelections(
-    (state) => state.localeCode,
-  );
-  const request                     = useRef<AbortController | undefined>(
-    undefined,
-  );
-  const lastLoad                    = useRef<BlogCommentsLoadAction | undefined>(
-    undefined,
-  );
-  const [roots, setRoots]           = useState(initial?.data ?? []);
-  const [replies, setReplies]       = useState<BlogCommentReplies>({});
-  const [replyPages, setReplyPages] = useState<ReplyPages>({});
-  const [local, setLocal]           = useState<IBlogComment[]>([]);
-  const [pagination, setPagination] = useState<Partial<IApiPagination>>(
-    initial?.rpag ?? {},
-  );
-  const [loaded, setLoaded]         = useState(Boolean(initial));
-  const [pending, setPending]       = useState(false);
-  const [error, setError]           = useState('');
-
-  useEffect(() => () => request.current?.abort(), []);
-
-  useEffect(() => {
-    setLocal([]);
-  }, [postId, authenticated]);
-
-  function errorMessage(reason: unknown) {
-    const fields = reason instanceof OrionplaceApiError ? reason.fields : {};
-
-    return (
-      fieldErrorText(fields) ||
-      featureLabels(locale).failed
-    );
-  }
-
-  function requestReplies(
-    parentId: number,
-    page: number,
-    signal: AbortSignal,
-  ) {
-    return api.request<CommentsPage>(
-      'blog_comments_get',
-      {
-        filters: {
-          for_post: postId,
-          parent: parentId,
-          ordering: 'date_created',
-        },
-        paginate: { page, pp_items: replyPageSize },
-      },
-      signal,
-    );
-  }
-
-  /** Loads replies level by level until no loaded comment reports more. */
-  async function loadDescendants(
-    parents: readonly IBlogComment[],
-    target: Record<number, IBlogComment[]>,
-    pages: ReplyPages,
-    signal: AbortSignal,
-  ) {
-    const visited = new Set(parents.map((comment) => comment.id));
-    let level     = parents.filter((comment) => comment.total_c_replies > 0);
-
-    while (level.length) {
-      const next: IBlogComment[] = [];
-      const results              = await Promise.all(
-        level.map((comment) => requestReplies(comment.id, 1, signal)),
-      );
-
-      results.forEach((data, index) => {
-        const parentId = level[index]!.id;
-        const children = data.data.filter((child) => !visited.has(child.id));
-
-        target[parentId] = children;
-        pages[parentId]  = { page: 1, hasNext: Boolean(data.rpag?.has_next) };
-
-        for (const child of children) {
-          visited.add(child.id);
-          if (child.total_c_replies > 0) {
-            next.push(child);
-          }
-        }
-      });
-
-      level = next;
-    }
-  }
-
-  async function fetchPage(action: BlogCommentsLoadAction, signal: AbortSignal) {
-    const data   = await api.request<CommentsPage>(
-      action.endpoint,
-      action.request,
-      signal,
-    );
-    const nested = {} as Record<number, IBlogComment[]>;
-    const pages  = {} as ReplyPages;
-
-    if (action.mode === 'discussion') {
-      await loadDescendants(data.data, nested, pages, signal);
-    }
-    if (signal.aborted) {
-      return;
-    }
-
-    setRoots(data.data);
-    setReplies(nested);
-    setReplyPages(pages);
-    setPagination(data.rpag);
-  }
-
-  async function fetchReplies(
-    action: BlogCommentsLoadAction,
-    parentId: number,
-    signal: AbortSignal,
-  ) {
-    const data     = await api.request<CommentsPage>(
-      action.endpoint,
-      action.request,
-      signal,
-    );
-    const known    = new Set(
-      (replies[parentId] ?? []).map((comment) => comment.id),
-    );
-    const children = data.data.filter((child) => !known.has(child.id));
-    const nested   = {} as Record<number, IBlogComment[]>;
-    const pages    = {} as ReplyPages;
-
-    await loadDescendants(children, nested, pages, signal);
-    if (signal.aborted) {
-      return;
-    }
-
-    setReplies((current) => ({
-      ...current,
-      ...nested,
-      [parentId]: [...(current[parentId] ?? []), ...children],
-    }));
-    setReplyPages((current) => ({
-      ...current,
-      ...pages,
-      [parentId]: {
-        page: data.rpag.page,
-        hasNext: Boolean(data.rpag.has_next),
-      },
-    }));
-  }
-
-  async function load(action: BlogCommentsLoadAction) {
-    request.current?.abort();
-    const controller = new AbortController();
-    request.current  = controller;
-    if (action.mode !== 'replies') {
-      lastLoad.current = action;
-    }
-    setPending(true);
-    setError('');
-    try {
-      if (action.mode === 'replies' && action.parentId) {
-        await fetchReplies(action, action.parentId, controller.signal);
-      } else {
-        await fetchPage(action, controller.signal);
-      }
-      if (!controller.signal.aborted) {
-        setLoaded(true);
-      }
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setError(errorMessage(reason));
-      }
-    } finally {
-      if (request.current === controller) {
-        request.current = undefined;
-        setPending(false);
-      }
-    }
-  }
-
-  // Errors are shown by the list and rethrown, so the form keeps the draft.
-  async function submit(action: BlogCommentSubmitAction) {
-    setError('');
-    try {
-      const comment = await api.request<IBlogComment>(
-        action.endpoint,
-        action.request,
-        undefined,
-        action.commentId ? { comment_id: action.commentId } : {},
-      );
-
-      if (!comment?.id) {
-        throw new Error('Missing confirmed comment');
-      }
-
-      return comment;
-    } catch (reason) {
-      setError(errorMessage(reason));
-      throw reason;
-    }
-  }
-
-  async function remove(action: BlogCommentDeleteAction) {
-    setError('');
-    try {
-      const result = await api.request<{ id: number }>(
-        action.endpoint,
-        action.request,
-        undefined,
-        { comment_id: action.commentId },
-      );
-
-      if (result?.id !== action.commentId) {
-        throw new Error('Missing removed comment');
-      }
-
-      setLocal((current) =>
-        current.filter((item) => item.id !== action.commentId),
-      );
-    } catch (reason) {
-      setError(errorMessage(reason));
-      throw reason;
-    }
-  }
-
-  function rememberLocal(comment: IBlogComment) {
-    setLocal((current) => {
-      const others = current.filter((item) => item.id !== comment.id);
-
-      return comment.status.int === EBlogCommentStatus.APPROVED
-        ? others
-        : [...others, comment];
-    });
-  }
-
-  function countNewReply(reply: IBlogComment) {
-    setRoots((current) => countReply(current, reply));
-    setReplies((current) =>
-      mapReplies(current, (list) => countReply(list, reply)),
-    );
-  }
-
-  function reloadFirstPage() {
-    const action = lastLoad.current;
-
-    if (!action) {
-      return;
-    }
-
-    void load({
-      ...action,
-      request: {
-        ...action.request,
-        paginate: { ...action.request.paginate, page: 1 },
-      },
-    });
-  }
-
-  function saved(comment: IBlogComment, action: BlogCommentSubmitAction) {
-    const isNew     = !action.commentId;
-    const isNewRoot = isNew && comment.parent_id === null;
-    const mine      = lastLoad.current?.mode === 'mine';
-    const page      = pagination.page ?? 1;
-
-    rememberLocal(comment);
-
-    if (mine || (isNewRoot && page !== 1)) {
-      reloadFirstPage();
-      return;
-    }
-
-    if (!isNew) {
-      setRoots((current) => replaceComment(current, comment));
-      setReplies((current) =>
-        mapReplies(current, (list) => replaceComment(list, comment)),
-      );
-      return;
-    }
-
-    if (comment.parent_id === null) {
-      setRoots((current) => [
-        comment,
-        ...current.filter((item) => item.id !== comment.id),
-      ]);
-      return;
-    }
-
-    const parentId  = comment.parent_id;
-
-    setReplies((current) => ({
-      ...current,
-      [parentId]: [
-        ...(current[parentId] ?? []).filter((item) => item.id !== comment.id),
-        comment,
-      ],
-    }));
-    countNewReply(comment);
-  }
-
-  return {
-    roots,
-    replies,
-    replyPages,
-    localComments: local,
-    pagination,
-    loaded,
-    pending,
-    error,
-    onLoad: load,
-    onSubmit: submit,
-    onSaved: saved,
-    onDelete: remove,
-    onRequireSignIn: () =>
-      navigation.push('/profile', {
-        return: `/journal/${postId}`,
-      }),
-  };
-}

package/templates/app/_storefront/useProductSearch.ts

@@ -1,242 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import {
-  useOrionplaceBrowseStore,
-  useOrionplaceProductsStore,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { ProductFacetSelection } from '@/interfaces/orionplace/products/IProductSearchFacets';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import {
-  loadProductListPage,
-  productListFacetData,
-  type ProductListPage,
-  type ProductSearchScope,
-} from '@/lib/orionplace/productSearch';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import {
-  productListLocationFromQuery,
-  productListLocationQuery,
-  sameProductListLocation,
-  type ProductListLocation,
-} from '@/lib/orionplace/productListLocation';
-
-/*
- * A search needs a category, a fixed scope or a 3-letter query, as in the
- * other packages: the sellers list (no seller) sent an empty search that the
- * backend refused.
- */
-function searchable(scope: ProductSearchScope) {
-  return Boolean(
-    scope.categoryId || scope.sellerId || scope.manufacturerId ||
-      scope.storeId || scope.featured || (scope.query?.length ?? 0) >= 3,
-  );
-}
-
-const firstListPage: ProductListLocation = { page: 1, filters: {} };
-
-function listSignature(location: ProductListLocation) {
-  return JSON.stringify(productListLocationQuery({}, location));
-}
-
-function addressQuery(): Record<string, string> {
-  return Object.fromEntries(new URL(window.location.href).searchParams);
-}
-
-/*
- * `scrollToTop: false` keeps the scroll position on a page turn, for a page
- * whose pagination scrolls to its own list (the seller page).
- * `location` is the page and filters `initial` was loaded with (the URL of the
- * server render). The page and filters stay in the URL, so Back from a
- * product or a reload opens the list the visitor left; `rememberInAddress:
- * false` keeps them out of it.
- */
-export function useProductSearch(
-  scope: ProductSearchScope,
-  initial?: ProductListPage,
-  initialError = '',
-  options: {
-    scrollToTop?: boolean;
-    location?: ProductListLocation;
-    rememberInAddress?: boolean;
-  } = {},
-) {
-  const remember              = options.rememberInAddress !== false;
-  const serverLocation        = remember
-    ? (options.location ?? firstListPage)
-    : firstListPage;
-  // The page and filters in the URL; the server render reads them from the
-  // request, the browser from the address bar.
-  function addressLocation(): ProductListLocation {
-    if (!remember) {
-      return firstListPage;
-    }
-    return typeof window === 'undefined'
-      ? serverLocation
-      : productListLocationFromQuery(addressQuery());
-  }
-  // `initial` belongs to the URL it was loaded for.
-  function fromServer(location: ProductListLocation) {
-    return listSignature(location) === listSignature(serverLocation);
-  }
-  const [opening]             = useState(addressLocation);
-  const openedFromServer      = fromServer(opening);
-  const api                   = useOrionplaceApi();
-  const locale                = useOrionplaceSelections(
-    (state) => state.localeCode,
-  );
-  const productsStore         = useOrionplaceProductsStore();
-  const browseStore           = useOrionplaceBrowseStore();
-  const [data, setData]       = useState(openedFromServer ? initial : undefined);
-  const [filters, setFilters] = useState<ProductFacetSelection>(opening.filters);
-  const [page, setPage]       = useState(
-    openedFromServer ? (initial?.products?.rpag.page ?? opening.page) : opening.page,
-  );
-  const [pending, setPending] = useState(false);
-  const [loaded, setLoaded]   = useState(openedFromServer && Boolean(initial));
-  const [error, setError]     = useState(openedFromServer ? initialError : '');
-  // Filter choices of the scope's first response; a filtered response must
-  // not shrink them, so the visitor can still pick another seller or price.
-  const [facets, setFacets]   = useState(() =>
-    productListFacetData(openedFromServer ? initial : undefined),
-  );
-  const request               = useRef<AbortController | undefined>(undefined);
-  const signature             = JSON.stringify(scope);
-
-  function apply(next: ProductListPage) {
-    // The backend sends the unfiltered total with the first page only;
-    // later pages keep it, as in the Nuxt and Svelte packages.
-    setData((previous) =>
-      next.products && previous?.products
-        ? {
-            ...next,
-            products: {
-              ...next.products,
-              rpag: {
-                ...previous.products.rpag,
-                ...Object.fromEntries(
-                  Object.entries(next.products.rpag ?? {}).filter(
-                    ([, value]) => value !== undefined,
-                  ),
-                ),
-              },
-            },
-          }
-        : next,
-    );
-    setLoaded(true);
-    const incoming = productListFacetData(next);
-    if (incoming) {
-      browseStore.getState().preserveSearchFacets(incoming);
-      setFacets((previous) => productListFacetData(next, previous));
-    }
-    for (const product of next.products?.data ?? []) {
-      productsStore
-        .getState()
-        .setProduct(product, 'products', next.selects?.sellers);
-    }
-  }
-
-  // Replaces the URL, so Back from the list still leaves it in one step.
-  function rememberLocation(next: ProductListLocation) {
-    const query = addressQuery();
-    if (
-      !remember ||
-      sameProductListLocation(productListLocationFromQuery(query), next)
-    ) {
-      return;
-    }
-    const search = new URLSearchParams(productListLocationQuery(query, next));
-    window.history.replaceState(
-      null,
-      '',
-      `${window.location.pathname}?${search}${window.location.hash}`,
-    );
-  }
-
-  async function load(nextPage = page, nextFilters = filters) {
-    rememberLocation({ page: nextPage, filters: nextFilters });
-    request.current?.abort();
-    const controller = new AbortController();
-    request.current  = controller;
-    setPending(true);
-    setError('');
-    try {
-      const next = await loadProductListPage(
-        api,
-        scope,
-        nextFilters,
-        nextPage,
-        controller.signal,
-        // Only a list without its filter choices yet needs the full ones.
-        !browseStore.getState().searchFacets,
-      );
-      if (!controller.signal.aborted) {
-        setPage(nextPage);
-        apply(next);
-      }
-    } catch (reason) {
-      if (!(reason instanceof Error && reason.name === 'AbortError')) {
-        setError(apiErrorMessage(reason) || featureLabels(locale).failed);
-      }
-    } finally {
-      if (request.current === controller) {
-        request.current = undefined;
-        setPending(false);
-      }
-    }
-  }
-
-  // A new scope starts from the page and filters of its URL: none after a
-  // link, the ones the visitor left after Back or a reload.
-  useEffect(() => {
-    const location = addressLocation();
-    const server   = fromServer(location) ? initial : undefined;
-    browseStore.getState().setSearchQuery(scope.query ?? '');
-    browseStore.getState().setSearchFilters(location.filters);
-    browseStore.getState().setSearchFacets(productListFacetData(server));
-    setFacets(productListFacetData(server));
-    setData(server);
-    setFilters(location.filters);
-    setPage(server?.products?.rpag.page ?? location.page);
-    setLoaded(Boolean(server));
-    setError(fromServer(location) ? initialError : '');
-    if (!server && searchable(scope)) {
-      void load(location.page, location.filters);
-    }
-    return () => request.current?.abort();
-  }, [signature]);
-
-  return {
-    data,
-    facets,
-    filters,
-    page,
-    pending,
-    loaded,
-    failed: Boolean(error),
-    error,
-    changeFilters(next: ProductFacetSelection) {
-      setFilters(next);
-      browseStore.getState().setSearchFilters(next);
-      void load(1, next);
-    },
-    clearFilters() {
-      setFilters({});
-      browseStore.getState().setSearchFilters({});
-      void load(1, {});
-    },
-    turnPage(next: number) {
-      if (options.scrollToTop !== false) {
-        // The next page starts at the top, as in the Nuxt and Svelte packages.
-        window.scrollTo({ top: 0, behavior: 'instant' });
-      }
-      void load(next);
-    },
-    retry() {
-      void load(page);
-    },
-  };
-}

package/templates/app/_storefront/useStorefrontNavigation.ts

@@ -1,36 +0,0 @@
-'use client';
-
-import { useStorefrontRouter } from '@/lib/orionplace/navigation';
-import {
-  useOrionplaceSelections,
-  useOrionplaceSelectionsStore,
-} from '@/providers/OrionplaceProvider';
-
-export function useStorefrontNavigation() {
-  const router     = useStorefrontRouter();
-  const selections = useOrionplaceSelectionsStore();
-  const locale     = useOrionplaceSelections((state) => state.localeCode);
-
-  function href(path: string, values: Record<string, string | number> = {}) {
-    const url            = new URL(path, 'http://orionplace.invalid');
-    const query          = url.searchParams;
-    // A session refresh can finish before React renders its new selections.
-    const selectedLocale = selections.getState().localeCode || locale;
-    if (selectedLocale) {
-      query.set('locale', selectedLocale);
-    }
-    for (const [name, value] of Object.entries(values)) {
-      query.set(name, String(value));
-    }
-    return `${url.pathname}?${query}${url.hash}`;
-  }
-
-  return {
-    locale,
-    href,
-    push: (path: string, values?: Record<string, string | number>) =>
-      router.push(href(path, values)),
-    replace: (path: string, values?: Record<string, string | number>) =>
-      router.replace(href(path, values)),
-  };
-}

package/templates/app/activity/page.tsx

@@ -1,9 +0,0 @@
-import {
-  renderStorefrontRoute,
-  type StorefrontPageProps,
-} from '@/lib/orionplace/serverRoute';
-
-// The page and its first data: app/_storefront/storefrontRoutes.tsx.
-export default function Page(props: StorefrontPageProps) {
-  return renderStorefrontRoute('/activity', props);
-}