orionplace-react 0.1.0 → 0.2.1

package/templates/hooks/useOrionplaceBlogReading.ts

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

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

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