orionplace-react 0.7.7 → 0.8.0

package/templates/hooks/useOrionplaceBlogReading.ts

@@ -1,351 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import type { RefObject } from 'react';
-import type {
-  IBlogPost,
-  IBlogReadingData,
-  IBlogReadingRequest,
-} from '@/interfaces/orionplace/blog/IBlogApi';
-import { canTrackBlogReading } from '@/lib/orionplace/blogArticle';
-
-export interface BlogReadingAction {
-  endpoint: 'blog_reading_start' | 'blog_reading_heartbeat';
-  request: IBlogReadingRequest;
-  signal: AbortSignal;
-}
-
-export interface BlogReadingRequestError extends Error {
-  status?: number;
-  fields?: Record<string, unknown>;
-  form_errors?: Record<string, unknown> | null;
-  codes?: string[];
-}
-
-export interface UseOrionplaceBlogReadingOptions {
-  post: IBlogPost | undefined;
-  authenticated: boolean;
-  articleRef: RefObject<HTMLElement | null>;
-  onReading?: (
-    action: BlogReadingAction,
-  ) => Promise<IBlogReadingData> | IBlogReadingData;
-  onAccessLost: () => void;
-}
-
-function hasFields(value: unknown) {
-  return Boolean(
-    value &&
-    typeof value === 'object' &&
-    Object.keys(value as Record<string, unknown>).length,
-  );
-}
-
-function hasField(value: unknown, name: string) {
-  return Boolean(value && typeof value === 'object' && name in value);
-}
-
-// Only a lost subscription or article hides the full text. OrionMarketplace answers it
-// with `blog_access_lost`, or rejects the `post` field once the article left
-// the reader's access.
-export function isBlogReadingAccessError(error: unknown) {
-  if (!error || typeof error !== 'object') {
-    return false;
-  }
-
-  const requestError = error as BlogReadingRequestError;
-  return (
-    requestError.status === 401 ||
-    requestError.status === 403 ||
-    Boolean(requestError.codes?.includes('blog_access_lost')) ||
-    hasField(requestError.fields, 'post') ||
-    hasField(requestError.form_errors, 'post')
-  );
-}
-
-// Any other refusal (an invalidated statistic, an article without reading
-// time) only stops the statistic for this article; the text stays.
-export function isBlogReadingRefusal(error: unknown) {
-  if (!error || typeof error !== 'object') {
-    return false;
-  }
-
-  const requestError = error as BlogReadingRequestError;
-  return (
-    hasFields(requestError.fields) || hasFields(requestError.form_errors)
-  );
-}
-
-export function useOrionplaceBlogReading({
-  post,
-  authenticated,
-  articleRef,
-  onReading,
-  onAccessLost,
-}: UseOrionplaceBlogReadingOptions) {
-  const [reading, setReading] = useState<IBlogReadingData>();
-  const postRef = useRef(post);
-  const eligibleRef = useRef(false);
-  const readingRef = useRef(reading);
-  const onReadingRef = useRef(onReading);
-  const onAccessLostRef = useRef(onAccessLost);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const controllerRef = useRef<AbortController | undefined>(undefined);
-  const mountedRef = useRef(false);
-  const startedRef = useRef(false);
-  const activeUntilRef = useRef(0);
-  const lastConfirmedAtRef = useRef(0);
-  const refusedRef = useRef(false);
-  const startedPostIdRef = useRef<number | undefined>(undefined);
-
-  postRef.current = post;
-  readingRef.current = reading;
-  onReadingRef.current = onReading;
-  onAccessLostRef.current = onAccessLost;
-  eligibleRef.current = Boolean(
-    onReading && canTrackBlogReading(post, authenticated),
-  );
-
-  function visible() {
-    const element = articleRef.current;
-    if (!element || document.hidden || !document.hasFocus()) {
-      return false;
-    }
-
-    const rect = element.getBoundingClientRect();
-    const top = Math.max(0, rect.top);
-    const bottom = Math.min(window.innerHeight, rect.bottom);
-    const left = Math.max(0, rect.left);
-    const right = Math.min(window.innerWidth, rect.right);
-    if (bottom - top < Math.min(80, rect.height) || right <= left) {
-      return false;
-    }
-
-    const target = document.elementFromPoint(
-      (left + right) / 2,
-      (top + bottom) / 2,
-    );
-    return Boolean(target && element.contains(target));
-  }
-
-  // The reader was reading until this moment: one last heartbeat credits the
-  // seconds since the previous one (OrionMarketplace caps it at 20) instead of losing
-  // them. Skipped after idling, while a request is in flight, and once the
-  // article is complete.
-  function flush() {
-    const postId = startedPostIdRef.current;
-    const request = onReadingRef.current;
-    if (
-      !startedRef.current ||
-      !postId ||
-      !request ||
-      controllerRef.current ||
-      refusedRef.current ||
-      readingRef.current?.complete ||
-      !(performance.now() < activeUntilRef.current)
-    ) {
-      return;
-    }
-
-    Promise.resolve(
-      request({
-        endpoint: 'blog_reading_heartbeat',
-        request: { post: postId },
-        signal: new AbortController().signal,
-      }),
-    )
-      .then((response) => {
-        if (postRef.current?.id === postId && response.post === postId) {
-          setReading(response);
-          readingRef.current = response;
-        }
-      })
-      .catch(() => undefined);
-  }
-
-  function pause() {
-    flush();
-    clearTimeout(timerRef.current);
-    timerRef.current = undefined;
-    startedRef.current = false;
-    controllerRef.current?.abort();
-    controllerRef.current = undefined;
-  }
-
-  function canRead() {
-    return (
-      mountedRef.current &&
-      eligibleRef.current &&
-      !refusedRef.current &&
-      !readingRef.current?.complete &&
-      performance.now() < activeUntilRef.current &&
-      visible()
-    );
-  }
-
-  async function tick() {
-    if (!canRead()) {
-      pause();
-      return;
-    }
-    if (controllerRef.current || !onReadingRef.current || !postRef.current) {
-      return;
-    }
-
-    clearTimeout(timerRef.current);
-    const controller = new AbortController();
-    const postId = postRef.current.id;
-    const interval =
-      Math.max(1, readingRef.current?.heartbeat_interval_seconds ?? 10) * 1000;
-    const delayed =
-      performance.now() - lastConfirmedAtRef.current > interval * 1.5;
-    const timeout = setTimeout(() => controller.abort(), 8000);
-    controllerRef.current = controller;
-
-    try {
-      const response = await onReadingRef.current({
-        endpoint:
-          startedRef.current && !delayed
-            ? 'blog_reading_heartbeat'
-            : 'blog_reading_start',
-        request: { post: postId },
-        signal: controller.signal,
-      });
-      if (controller.signal.aborted || postRef.current?.id !== postId) {
-        return;
-      }
-      if (
-        response.post !== postId ||
-        !(response.heartbeat_interval_seconds > 0)
-      ) {
-        throw new Error('Invalid reading response');
-      }
-
-      setReading(response);
-      readingRef.current = response;
-      startedRef.current = true;
-      startedPostIdRef.current = postId;
-      lastConfirmedAtRef.current = performance.now();
-    } catch (error) {
-      startedRef.current = false;
-      if (!controller.signal.aborted && isBlogReadingAccessError(error)) {
-        activeUntilRef.current = 0;
-        onAccessLostRef.current();
-      } else if (!controller.signal.aborted && isBlogReadingRefusal(error)) {
-        refusedRef.current = true;
-      }
-    } finally {
-      clearTimeout(timeout);
-      if (controllerRef.current === controller) {
-        controllerRef.current = undefined;
-        if (canRead()) {
-          const seconds = Math.min(
-            300,
-            Math.max(1, readingRef.current?.heartbeat_interval_seconds ?? 10),
-          );
-          timerRef.current = setTimeout(() => void tick(), seconds * 1000);
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    mountedRef.current = true;
-
-    function interact(event: Event) {
-      if (!event.isTrusted || !eligibleRef.current) {
-        return;
-      }
-
-      const target = event.target;
-      const inside =
-        target instanceof Node && articleRef.current?.contains(target);
-      const readingKey =
-        event instanceof KeyboardEvent &&
-        [
-          ' ',
-          'ArrowDown',
-          'ArrowUp',
-          'PageDown',
-          'PageUp',
-          'Home',
-          'End',
-        ].includes(event.key) &&
-        !(
-          target instanceof HTMLElement &&
-          (target.isContentEditable || target.matches('input,textarea,select'))
-        );
-
-      if (!inside && !readingKey) {
-        if (event.type !== 'pointermove') {
-          pause();
-          activeUntilRef.current = 0;
-        }
-        return;
-      }
-      if (event instanceof KeyboardEvent && !readingKey) {
-        return;
-      }
-
-      activeUntilRef.current = performance.now() + 60000;
-      if (!timerRef.current) {
-        void tick();
-      }
-    }
-
-    function viewportChanged() {
-      if (!visible()) {
-        pause();
-      }
-    }
-
-    function leave() {
-      pause();
-      activeUntilRef.current = 0;
-    }
-
-    const interactions = [
-      'pointerdown',
-      'pointermove',
-      'wheel',
-      'touchmove',
-      'keydown',
-    ];
-    interactions.forEach((name) =>
-      document.addEventListener(name, interact, { passive: true }),
-    );
-    document.addEventListener('visibilitychange', leave);
-    document.addEventListener('scroll', viewportChanged, true);
-    window.addEventListener('resize', viewportChanged);
-    window.addEventListener('blur', leave);
-    window.addEventListener('pagehide', leave);
-
-    return () => {
-      mountedRef.current = false;
-      pause();
-      interactions.forEach((name) =>
-        document.removeEventListener(name, interact),
-      );
-      document.removeEventListener('visibilitychange', leave);
-      document.removeEventListener('scroll', viewportChanged, true);
-      window.removeEventListener('resize', viewportChanged);
-      window.removeEventListener('blur', leave);
-      window.removeEventListener('pagehide', leave);
-    };
-  }, [articleRef]);
-
-  useEffect(() => {
-    pause();
-    activeUntilRef.current = 0;
-    refusedRef.current = false;
-    setReading(undefined);
-  }, [post?.id]);
-
-  useEffect(() => {
-    if (!eligibleRef.current) {
-      activeUntilRef.current = 0;
-      pause();
-    }
-  }, [authenticated, onReading, post]);
-
-  return { reading };
-}

package/templates/hooks/useOrionplaceDialog.ts

@@ -1,85 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import {
-  createPageScrollLock,
-  focusedElement,
-  restoreFocus,
-} from '@/lib/orionplace/modalWindow';
-
-// A dialog applies its mode before the browser paints, so the classes of
-// the other mode never show for a frame. The server renders no open dialog
-// and runs no layout effects, so it uses useEffect instead.
-export const useDialogLayoutEffect =
-  typeof window === 'undefined' ? useEffect : useLayoutEffect;
-
-// The window is open while it has an `identity`. The element with the focus
-// outside the window is its opener: a modal window gives it the focus back
-// when it closes. An open window that switches between the modal and the
-// inline mode leaves the focus on the field the visitor is in.
-export function useOrionplaceDialog(
-  identity: string | number | undefined,
-  modal: boolean,
-) {
-  const dialog       = useRef<HTMLDialogElement>(null);
-  const initialFocus = useRef<HTMLButtonElement>(null);
-  const opener       = useRef<HTMLElement | undefined>(undefined);
-  const [pageScroll] = useState(() => createPageScrollLock());
-
-  useDialogLayoutEffect(() => {
-    const element   = dialog.current;
-    if (!element || identity === undefined) {
-      element?.close();
-      if (pageScroll.locked) {
-        pageScroll.unlock();
-        restoreFocus(opener.current);
-      }
-      return;
-    }
-    const switching = element.open && pageScroll.locked !== modal;
-    const focused   = focusedElement();
-    const inside    =
-      focused && element.contains(focused) ? focused : undefined;
-    if (!inside) {
-      opener.current = focused;
-    }
-    if (element.open) {
-      element.close();
-    }
-    if (modal) {
-      pageScroll.lock();
-      element.showModal();
-    } else {
-      // The page scrolls again once the window leaves the modal mode.
-      // Opened by its attribute, not show(): an inline dialog leaves focus
-      // where it is.
-      pageScroll.unlock();
-      element.setAttribute('open', '');
-    }
-    if (switching && inside) {
-      restoreFocus(inside, { reveal: true });
-    } else if (modal) {
-      initialFocus.current?.focus({ preventScroll: true });
-    }
-  }, [identity, modal]);
-
-  // Unmounting closes the window as a close does.
-  useDialogLayoutEffect(() => {
-    const element = dialog.current;
-
-    return () => {
-      element?.close();
-      if (pageScroll.locked) {
-        pageScroll.unlock();
-        restoreFocus(opener.current);
-      }
-    };
-  }, [pageScroll]);
-
-  return { dialog, initialFocus };
-}

package/templates/hooks/useOrionplaceHomeProducts.ts

@@ -1,97 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceProducts,
-  useOrionplaceProductsStore,
-} from '@/providers/OrionplaceProvider';
-import {
-  selectEndpoints,
-  selectInit,
-  selectIsReady,
-  selectProducts,
-} from '@/stores/orionplace';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import type {
-  IProduct,
-  IProductSearchSeller,
-} from '@/interfaces/orionplace/products/IProduct';
-import {
-  homeNewProductsRequest,
-  needsHomeNewProducts,
-} from '@/lib/orionplace/homeContent';
-
-interface HomeNewProductsPage {
-  products: { data: IProduct[] };
-  selects?: { sellers?: IProductSearchSeller[] };
-}
-
-/**
- * Loads the home page's New section when Application Load has no
- * new-flagged product. The loaded IDs stay in the product store until the
- * Application Load snapshot is reset.
- */
-export function useOrionplaceHomeProducts() {
-  const api                   = useOrionplaceApi();
-  const productsStore         = useOrionplaceProductsStore();
-  const init                  = useOrionplace(selectInit);
-  const ready                 = useOrionplace(selectIsReady);
-  const missingNewProducts    = useOrionplace((state) =>
-    needsHomeNewProducts(selectProducts(state), null, selectEndpoints(state)),
-  );
-  const loadedNewIds          = useOrionplaceProducts(
-    (state) => state.homeNewProductIds,
-  );
-  const [pending, setPending] = useState(false);
-  const [error, setError]     = useState(false);
-  const request               = useRef<AbortController | undefined>(undefined);
-  const needed                = useRef(false);
-  needed.current              =
-    ready && missingNewProducts && loadedNewIds === null;
-
-  const load                  = useCallback(async () => {
-    if (request.current || !needed.current) {
-      return;
-    }
-
-    const controller = new AbortController();
-    request.current  = controller;
-    setPending(true);
-    setError(false);
-    try {
-      const data = await api.request<HomeNewProductsPage>(
-        'products_search',
-        homeNewProductsRequest,
-        controller.signal,
-      );
-      if (!controller.signal.aborted) {
-        productsStore
-          .getState()
-          .setHomeNewProducts(data.products.data, data.selects?.sellers);
-      }
-    } catch {
-      if (!controller.signal.aborted) {
-        setError(true);
-      }
-    } finally {
-      if (request.current === controller) {
-        request.current = undefined;
-        setPending(false);
-      }
-    }
-  }, [api, productsStore]);
-
-  useEffect(() => {
-    void load();
-
-    return () => {
-      request.current?.abort();
-      request.current = undefined;
-      setPending(false);
-      setError(false);
-    };
-  }, [init, ready, load]);
-
-  return { pending, error, load };
-}