orionplace-react 0.1.0 → 0.2.0

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

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

@@ -0,0 +1,51 @@
+# 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` | Передаёт объект статьи при выборе её карточки. |