orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/blog/BlogComments.tsx

@@ -1,590 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-} from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectIsAuthenticated } from '@/stores/orionplace';
-import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
-import {
-  EBlogCommentStatus,
-  type IBlogComment,
-  type IBlogCommentCreateRequest,
-  type IBlogCommentEditRequest,
-  type IBlogCommentsRequest,
-} from '@/interfaces/orionplace/blog/IBlogApi';
-import {
-  blogCommentAuthor,
-  blogCommentMaxIndent,
-  flattenBlogCommentThread,
-  withLocalBlogComments,
-  type BlogCommentReplies,
-  type BlogCommentThreadItem,
-} from '@/lib/orionplace/blogComments';
-import { blogLabels } from '@/lib/orionplace/blogLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { safePublicUrl } from '@/lib/orionplace/presentation';
-import { BlogCommentForm } from '@/components/orionplace/blog/BlogCommentForm';
-import { OrionplaceAvatar } from '@/components/orionplace/shared/OrionplaceAvatar';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
-import styles from './BlogComments.module.css';
-
-export interface BlogCommentsLoadAction {
-  endpoint: 'blog_comments_get' | 'blog_comments_mine_get';
-  mode: 'discussion' | 'mine' | 'replies';
-  request: IBlogCommentsRequest;
-  parentId?: number;
-}
-
-export interface BlogCommentSubmitAction {
-  endpoint: 'blog_comments_add' | 'blog_comments_edit';
-  commentId?: number;
-  request: IBlogCommentCreateRequest | IBlogCommentEditRequest;
-}
-
-export interface BlogCommentDeleteAction {
-  endpoint: 'blog_comments_remove';
-  commentId: number;
-  request: Record<string, never>;
-}
-
-export interface BlogReplyPage {
-  page: number;
-  hasNext: boolean;
-}
-
-export interface BlogCommentsProps {
-  postId: number;
-  roots?: readonly IBlogComment[];
-  replies?: BlogCommentReplies;
-  localComments?: readonly IBlogComment[];
-  replyPages?: Readonly<Record<number, BlogReplyPage>>;
-  pagination?: Partial<IApiPagination>;
-  loaded?: boolean;
-  pending?: boolean;
-  error?: string;
-  onLoad?: (action: BlogCommentsLoadAction) => Promise<void> | void;
-  onSubmit?: (
-    action: BlogCommentSubmitAction,
-  ) => Promise<IBlogComment | void> | IBlogComment | void;
-  onSaved?: (comment: IBlogComment, action: BlogCommentSubmitAction) => void;
-  onDelete?: (action: BlogCommentDeleteAction) => Promise<void> | void;
-  onDeleted?: (comment: IBlogComment) => void;
-  onRequireSignIn?: (postId: number) => void;
-}
-
-export function BlogComments({
-  postId,
-  roots = [],
-  replies = {},
-  localComments = [],
-  replyPages = {},
-  pagination = {},
-  loaded = false,
-  pending = false,
-  error = '',
-  onLoad,
-  onSubmit,
-  onSaved,
-  onDelete,
-  onDeleted,
-  onRequireSignIn,
-}: BlogCommentsProps) {
-  const authenticated = useOrionplace(selectIsAuthenticated);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = blogLabels(locale);
-  const common = featureLabels(locale);
-  const requestedPost = useRef<number | undefined>(undefined);
-  const previousAuthentication = useRef(authenticated);
-  const [mine, setMine] = useState(false);
-  const [editing, setEditing] = useState<IBlogComment>();
-  const [replying, setReplying] = useState<IBlogComment>();
-  const [removing, setRemoving] = useState<number>();
-  // A failed send shows its error in the form and a failed delete in the
-  // comment: the top of a long list may be off screen. 'closed' keeps the
-  // error of a form the customer closed hidden until the next request.
-  const [failed, setFailed] = useState<'send' | 'closed' | number>();
-  const [localPending, setLocalPending] = useState(false);
-  const [revision, setRevision] = useState(0);
-  const busy = pending || localPending;
-  const page = pagination.page ?? 1;
-  const shownRoots = mine || page !== 1
-    ? roots
-    : withLocalBlogComments(roots, localComments, null, 'start');
-  const thread: BlogCommentThreadItem[] = mine
-    ? roots.map((comment) => ({
-        comment,
-        depth: 0,
-        indent: 0,
-        closes: [],
-      }))
-    : flattenBlogCommentThread(shownRoots, replies, localComments);
-
-  useEffect(() => {
-    if (requestedPost.current !== postId) {
-      requestedPost.current = postId;
-      setMine(false);
-      resetComposer();
-      void load(false, 1);
-    }
-  }, [postId]);
-
-  useEffect(() => {
-    if (previousAuthentication.current === authenticated) {
-      return;
-    }
-    previousAuthentication.current = authenticated;
-    setMine(false);
-    resetComposer();
-    void load(false, 1);
-  }, [authenticated]);
-
-  function load(own: boolean, requestedPage: number) {
-    setFailed(undefined);
-    return onLoad?.({
-      endpoint: own ? 'blog_comments_mine_get' : 'blog_comments_get',
-      mode: own ? 'mine' : 'discussion',
-      request: {
-        filters: {
-          for_post: postId,
-          ordering: '-date_created',
-          ...(own ? {} : { show_only_main: true }),
-        },
-        paginate: { page: requestedPage, pp_items: 20 },
-      },
-    });
-  }
-
-  function resetComposer() {
-    setEditing(undefined);
-    setReplying(undefined);
-    setRevision((current) => current + 1);
-    setFailed((current) => (current === 'send' ? 'closed' : current));
-  }
-
-  function compose(comment: IBlogComment, edit: boolean) {
-    if (!authenticated) {
-      onRequireSignIn?.(postId);
-      return;
-    }
-    setEditing(edit ? comment : undefined);
-    setReplying(edit ? undefined : comment);
-    setRevision((current) => current + 1);
-    setFailed((current) => (current === 'send' ? 'closed' : current));
-  }
-
-  async function selectMine(value: boolean) {
-    if (busy || (value && !authenticated)) {
-      return;
-    }
-    setMine(value);
-    resetComposer();
-    await load(value, 1);
-  }
-
-  async function submit(text: string) {
-    if (!onSubmit || busy) {
-      return;
-    }
-    const action: BlogCommentSubmitAction = editing
-      ? {
-          endpoint: 'blog_comments_edit',
-          commentId: editing.id,
-          request: { text },
-        }
-      : {
-          endpoint: 'blog_comments_add',
-          request: {
-            for_post: postId,
-            parent: replying?.id ?? null,
-            text,
-          },
-        };
-    setFailed(undefined);
-    setLocalPending(true);
-    try {
-      const saved = await onSubmit(action);
-      if (saved?.id) {
-        resetComposer();
-        onSaved?.(saved, action);
-      }
-    } catch {
-      setFailed('send');
-      return;
-    } finally {
-      setLocalPending(false);
-    }
-  }
-
-  async function remove(comment: IBlogComment) {
-    if (!onDelete || busy) {
-      return;
-    }
-    const action: BlogCommentDeleteAction = {
-      endpoint: 'blog_comments_remove',
-      commentId: comment.id,
-      request: {},
-    };
-    // As in Nuxt and Svelte the confirmation closes first; a refusal is shown
-    // in the comment.
-    setRemoving(undefined);
-    setFailed(undefined);
-    setLocalPending(true);
-    try {
-      await onDelete(action);
-      onDeleted?.(comment);
-      await load(mine, page);
-    } catch {
-      setFailed(comment.id);
-      return;
-    } finally {
-      setLocalPending(false);
-    }
-  }
-
-  function loadMore(parent: IBlogComment) {
-    setFailed(undefined);
-    const nextPage = (replyPages[parent.id]?.page ?? 1) + 1;
-    return onLoad?.({
-      endpoint: 'blog_comments_get',
-      mode: 'replies',
-      parentId: parent.id,
-      request: {
-        filters: {
-          for_post: postId,
-          parent: parent.id,
-          ordering: 'date_created',
-        },
-        paginate: { page: nextPage, pp_items: 50 },
-      },
-    });
-  }
-
-  function moreRepliesAfter(item: BlogCommentThreadItem) {
-    if (mine) {
-      return [];
-    }
-    return item.closes.filter(
-      (closed) => replyPages[closed.comment.id]?.hasNext,
-    );
-  }
-
-  return (
-    <section className={styles.section} data-feature-part="BlogComments">
-      <div className={styles.heading}>
-        <h2>{labels.comments}</h2>
-        {authenticated ? (
-          <div className={styles.actions}>
-            <button
-              className={styles.button}
-              type="button"
-              disabled={busy}
-              aria-pressed={!mine}
-              onClick={() => void selectMine(false)}
-            >
-              {labels.everyone}
-            </button>
-            <button
-              className={styles.button}
-              type="button"
-              disabled={busy}
-              aria-pressed={mine}
-              onClick={() => void selectMine(true)}
-            >
-              {labels.mine}
-            </button>
-          </div>
-        ) : null}
-      </div>
-      {error && failed === undefined ? (
-        <div className={styles.error} role="alert">
-          <span>{error}</span>
-          <button
-            className={styles.button}
-            type="button"
-            disabled={busy}
-            onClick={() => void load(mine, page)}
-          >
-            {common.refresh}
-          </button>
-        </div>
-      ) : null}
-      {busy ? (
-        <p
-          className="op-feature-loading"
-          role="status"
-        >
-          <span className={styles.srOnly}>{common.loading}</span>
-        </p>
-      ) : null}
-      {!busy && loaded && !thread.length ? (
-        <OrionplaceEmptyState
-          kind="journal"
-          message={mine ? labels.noMine : labels.emptyComments}
-        />
-      ) : null}
-      <ol className={styles.comments} aria-busy={busy}>
-        {thread.map((item) => (
-          <CommentThreadItem
-            key={item.comment.id}
-            item={item}
-            busy={busy}
-            editing={editing}
-            replying={replying}
-            removing={removing}
-            failed={failed}
-            error={error}
-            revision={revision}
-            labels={labels}
-            common={common}
-            more={moreRepliesAfter(item)}
-            onCompose={compose}
-            onRemove={setRemoving}
-            onConfirmRemove={(comment) => void remove(comment)}
-            onCancelRemove={() => setRemoving(undefined)}
-            onSubmit={(text) => void submit(text)}
-            onCancelCompose={resetComposer}
-            onMore={(comment) => void loadMore(comment)}
-          />
-        ))}
-      </ol>
-      <StorefrontPagination
-        pagination={pagination}
-        pending={busy}
-        onChange={(nextPage) => void load(mine, nextPage)}
-      />
-      {authenticated && !editing && !replying ? (
-        <BlogCommentForm
-          key={revision}
-          pending={busy}
-          error={failed === 'send' ? error : ''}
-          onSubmit={(text) => void submit(text)}
-          onCancel={resetComposer}
-        />
-      ) : null}
-      {!authenticated ? (
-        <button
-          type="button"
-          className={`${styles.button} ${styles.write}`}
-          data-blog-comment-write
-          onClick={() => onRequireSignIn?.(postId)}
-        >
-          {labels.writeComment}
-        </button>
-      ) : null}
-    </section>
-  );
-}
-
-interface CommentThreadItemProps {
-  item: BlogCommentThreadItem;
-  busy: boolean;
-  editing?: IBlogComment;
-  replying?: IBlogComment;
-  removing?: number;
-  failed?: 'send' | 'closed' | number;
-  error: string;
-  revision: number;
-  labels: ReturnType<typeof blogLabels>;
-  common: ReturnType<typeof featureLabels>;
-  more: BlogCommentThreadItem[];
-  onCompose: (comment: IBlogComment, edit: boolean) => void;
-  onRemove: (id: number) => void;
-  onConfirmRemove: (comment: IBlogComment) => void;
-  onCancelRemove: () => void;
-  onSubmit: (text: string) => void;
-  onCancelCompose: () => void;
-  onMore: (comment: IBlogComment) => void;
-}
-
-function CommentThreadItem({
-  item,
-  busy,
-  editing,
-  replying,
-  removing,
-  failed,
-  error,
-  revision,
-  labels,
-  common,
-  more,
-  onCompose,
-  onRemove,
-  onConfirmRemove,
-  onCancelRemove,
-  onSubmit,
-  onCancelCompose,
-  onMore,
-}: CommentThreadItemProps) {
-  const comment = item.comment;
-  const composing = editing?.id === comment.id || replying?.id === comment.id;
-  const approved = comment.status.int === EBlogCommentStatus.APPROVED;
-  const author = blogCommentAuthor(comment);
-  const indent = {
-    '--comment-indent-wide': `${item.indent * 2}rem`,
-    '--comment-indent-narrow': `${item.indent}rem`,
-  } as CSSProperties;
-  return (
-    <>
-      <li
-        className={styles.comment}
-        style={indent}
-        data-blog-comment={comment.id}
-        data-blog-comment-depth={item.depth}
-      >
-        {/* The reader's own comment has the muted background of their own
-            support messages. */}
-        <article
-          className={styles.panel}
-          data-reply={item.depth > 0 || undefined}
-          data-blog-comment-own={comment.is_owner || undefined}
-        >
-          <div className={styles.heading}>
-            <span className={styles.author} data-blog-comment-author>
-              <OrionplaceAvatar
-                src={safePublicUrl(comment.user.avatar)}
-                name={author}
-                size="small"
-              />
-              <span>
-                {author}
-                {comment.is_owner ? (
-                  <span className={styles.hidden}> ({labels.own})</span>
-                ) : null}
-              </span>
-            </span>
-            <time className={styles.time}>
-              {comment.date_created.date} {comment.date_created.time}
-            </time>
-          </div>
-          {item.parent && item.depth > blogCommentMaxIndent ? (
-            <p className={styles.muted} data-blog-comment-reply-to>
-              {labels.replyTo}: {blogCommentAuthor(item.parent)}
-            </p>
-          ) : null}
-          <p className={styles.text}>{comment.text}</p>
-          {!approved ? (
-            <p className={styles.muted}>
-              {comment.status.int === EBlogCommentStatus.PENDING
-                ? labels.pending
-                : labels.denied}
-            </p>
-          ) : null}
-          <div className={styles.actions}>
-            {approved ? (
-              <button
-                className={styles.button}
-                type="button"
-                disabled={busy}
-                aria-expanded={replying?.id === comment.id}
-                data-blog-comment-reply
-                onClick={() => onCompose(comment, false)}
-              >
-                {labels.reply}
-              </button>
-            ) : null}
-            {comment.can_edit ? (
-              <button
-                className={styles.button}
-                type="button"
-                disabled={busy}
-                data-blog-comment-edit
-                onClick={() => onCompose(comment, true)}
-              >
-                {common.edit}
-              </button>
-            ) : null}
-            {comment.can_remove ? (
-              <button
-                className={styles.button}
-                type="button"
-                disabled={busy}
-                data-blog-comment-delete
-                onClick={() => onRemove(comment.id)}
-              >
-                {common.delete}
-              </button>
-            ) : null}
-          </div>
-          {removing === comment.id ? (
-            <div
-              className={styles.confirmation}
-              role="group"
-              aria-label={labels.deleteQuestion}
-            >
-              <p>{labels.deleteQuestion}</p>
-              <div className={styles.actions}>
-                <button
-                  className={styles.button}
-                  type="button"
-                  disabled={busy}
-                  onClick={() => onConfirmRemove(comment)}
-                >
-                  {common.delete}
-                </button>
-                <button
-                  className={styles.button}
-                  type="button"
-                  disabled={busy}
-                  onClick={() => onCancelRemove?.()}
-                >
-                  {common.cancel}
-                </button>
-              </div>
-            </div>
-          ) : null}
-          {failed === comment.id && error ? (
-            <p className={styles.error} role="alert">
-              {error}
-            </p>
-          ) : null}
-        </article>
-        {composing ? (
-          <BlogCommentForm
-            key={revision}
-            initialText={editing?.text}
-            editing={Boolean(editing)}
-            replyingTo={replying ? blogCommentAuthor(replying) : undefined}
-            pending={busy}
-            error={failed === 'send' ? error : ''}
-            onSubmit={onSubmit}
-            onCancel={onCancelCompose}
-          />
-        ) : null}
-      </li>
-      {more.map((closed) => {
-        const depth = Math.min(closed.depth + 1, blogCommentMaxIndent);
-        const moreIndent = {
-          '--comment-indent-wide': `${depth * 2}rem`,
-          '--comment-indent-narrow': `${depth}rem`,
-        } as CSSProperties;
-        return (
-          <li
-            key={`more-${closed.comment.id}`}
-            className={styles.more}
-            style={moreIndent}
-          >
-            <button
-              className={styles.button}
-              type="button"
-              disabled={busy}
-              aria-label={labels.moreReplies}
-              data-blog-comment-more={closed.comment.id}
-              onClick={() => onMore(closed.comment)}
-            >
-              {labels.more}
-            </button>
-          </li>
-        );
-      })}
-    </>
-  );
-}

package/templates/components/orionplace/blog/BlogPostCard.README.md

@@ -1,51 +0,0 @@
-# BlogPostCard
-
-## English
-
-`BlogPostCard` uses `post` when supplied for server rendering; otherwise it
-reads the post identified by `postId` from the browse store. It
-shows the localized plain-text title and preview, publication date, reading
-time and a subscription mark for a non-public article. The earliest ordered
-preview image is lazy loaded at a reserved 3:2 size. A missing or failed image
-uses a deterministic pattern and the title's first letter.
-
-`layout` selects the portrait, list or hero arrangement. With `articlePath`,
-the card is a normal link to `<articlePath>/<postId>` with the current locale;
-modifier clicks retain browser behavior. Without it, the card is a button.
-Both forms call `onSelect` with the complete post from the browse store.
-
-### Props
-
-| Prop                                          | Meaning                                                                                                  |
-| --------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `postId: number`                              | ID of the post handled by BlogPostCard.                                                                  |
-| `post?: IBlogPostPreview`                     | Journal article rendered by the component.                                                               |
-| `layout?: "portrait" \| "list" \| "hero"`     | Selects the supported component layout.                                                                  |
-| `articlePath?: string`                        | Base storefront path used to build article links.                                                        |
-| `onSelect?: (post: IBlogPostPreview) => void` | Passes the article object when its card is selected. |
-
-## Русский
-
-`BlogPostCard` использует `post`, если публикация передана для серверной
-отрисовки; иначе он получает из browse store публикацию с указанным `postId`.
-Карточка показывает локализованные название и анонс без HTML, дату публикации,
-время чтения и отметку подписки для непубличной статьи. Первое по порядку
-изображение загружается лениво в зарезервированной области 3:2. Если изображения
-нет или оно не загрузилось, компонент показывает постоянный узор и первую букву
-названия.
-
-`layout` выбирает вертикальный вид, строку или крупную карточку. Если передан
-`articlePath`, карточка становится обычной ссылкой на
-`<articlePath>/<postId>` с текущим языком, поэтому щелчок с модификатором
-работает как обычно в браузере. Без пути используется кнопка. В обоих случаях
-`onSelect` получает полную публикацию из browse store.
-
-### Свойства
-
-| Свойство                                      | Назначение                                                                                                |
-| --------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `postId: number`                              | ID статьи, с которым работает BlogPostCard.                                                               |
-| `post?: IBlogPostPreview`                     | Статья журнала, которую показывает компонент.                                                             |
-| `layout?: "portrait" \| "list" \| "hero"`     | Выбирает поддерживаемый вариант компоновки.                                                               |
-| `articlePath?: string`                        | Базовый путь магазина для ссылок на статьи.                                                               |
-| `onSelect?: (post: IBlogPostPreview) => void` | Передаёт объект статьи при выборе её карточки. |