convex-feedback-ui 0.1.2 → 0.1.4

package/src/native/shared/ui/CommentBranch.tsx

@@ -0,0 +1,122 @@
+import { useMemo, useState } from "react";
+import { Text, View } from "react-native";
+
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
+import type { FeedbackScreenCommentBranchProps } from "../../../shared/types";
+import { Button } from "./Button";
+import { Comment, FeedbackForm } from "./primitives.js";
+
+import type { FeedbackScreenReplyListProps } from "../../../shared/types";
+
+export function ReplyList({
+  entryId,
+  parentCommentId,
+}: FeedbackScreenReplyListProps) {
+  const { hooks, commentSort, transformComments } = useFeedbackBody();
+  const { messages } = useFeedbackUi();
+
+  const replies = hooks.useComments({
+    entryId,
+    parentCommentId,
+    sort: commentSort,
+  });
+
+  const visible = useMemo(
+    () => transformComments?.(replies.results) ?? replies.results,
+    [replies.results, transformComments],
+  );
+
+  return (
+    <Comment.Children>
+      {visible.map((reply) => (
+        <CommentBranch key={reply.id} comment={reply} entryId={entryId} />
+      ))}
+      {replies.status === "CanLoadMore" && (
+        <Button
+          label={messages.comments.loadMore}
+          onPress={() => replies.loadMore(hooks.pageSizes.replies)}
+        />
+      )}
+    </Comment.Children>
+  );
+}
+
+export function CommentBranch({
+  comment,
+  entryId,
+}: FeedbackScreenCommentBranchProps) {
+  const { hooks, maxCommentDepth, renderActor } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const [expanded, setExpanded] = useState(false);
+  const [replying, setReplying] = useState(false);
+  const [replyBody, setReplyBody] = useState("");
+  const setLike = hooks.useSetCommentLike();
+  const createComment = hooks.useCreateComment();
+
+  return (
+    <Comment.Root comment={comment}>
+      {renderActor === undefined ? null : (
+        <View>{renderActor(comment.actorId)}</View>
+      )}
+      <Comment.Body />
+      <View
+        style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: 4,
+        }}
+      >
+        <Comment.Like
+          onToggle={(active) =>
+            void setLike({ commentId: comment.id, desiredState: active })
+          }
+        />
+        {comment.body !== null && comment.depth < maxCommentDepth ? (
+          <Comment.Reply onActivate={() => setReplying((value) => !value)} />
+        ) : null}
+        <Comment.RepliesButton
+          expanded={expanded}
+          onExpandedChange={setExpanded}
+        />
+      </View>
+      {replying ? (
+        <FeedbackForm.Root>
+          <FeedbackForm.Textarea
+            value={replyBody}
+            onChangeText={setReplyBody}
+            placeholder={messages.comments.placeholder}
+          />
+          <FeedbackForm.Submit
+            onPress={async () => {
+              if (replyBody.trim().length === 0) return;
+              await createComment({
+                entryId,
+                parentCommentId: comment.id,
+                body: replyBody,
+              });
+              setReplyBody("");
+              setReplying(false);
+              setExpanded(true);
+            }}
+          >
+            {messages.comments.reply}
+          </FeedbackForm.Submit>
+          <Button
+            label={messages.comments.cancelReply}
+            onPress={() => setReplying(false)}
+          />
+        </FeedbackForm.Root>
+      ) : null}
+      {expanded ? (
+        <ReplyList entryId={entryId} parentCommentId={comment.id} />
+      ) : null}
+      {comment.deletedAt !== undefined ? (
+        <Text style={{ color: theme.colors.mutedText, fontSize: 11 }}>
+          {messages.comments.deleted}
+        </Text>
+      ) : null}
+    </Comment.Root>
+  );
+}

package/src/native/shared/ui/EntryCard.tsx

@@ -0,0 +1,37 @@
+import { Pressable, View } from "react-native";
+
+import type { FeedbackScreenEntryCardProps } from "../../../shared/types";
+import { FeedbackEntry } from "./primitives";
+
+export function EntryCard({
+  entry,
+  hooks,
+  onOpen,
+}: FeedbackScreenEntryCardProps) {
+  const setUpvote = hooks.useSetEntryUpvote();
+  return (
+    <FeedbackEntry.Root entry={entry}>
+      <FeedbackEntry.Upvote
+        onToggle={(active) =>
+          void setUpvote({ entryId: entry.id, desiredState: active })
+        }
+      />
+      <Pressable onPress={onOpen} style={{ flex: 1, gap: 4 }}>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+          }}
+        >
+          <FeedbackEntry.Kind />
+          <FeedbackEntry.Status />
+        </View>
+        <FeedbackEntry.Title />
+        <FeedbackEntry.Body numberOfLines={3} />
+        <FeedbackEntry.CommentCount />
+      </Pressable>
+    </FeedbackEntry.Root>
+  );
+}

package/src/native/shared/ui/EntryDetail.tsx

@@ -0,0 +1,103 @@
+import { useMemo, useState } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import type { FeedbackScreenEntryDetailProps } from "../../../shared/types";
+import { Button } from "./Button";
+import { CommentBranch } from "./CommentBranch";
+import { FeedbackEntry, FeedbackForm } from "./primitives";
+
+export function EntryDetail({
+  entryId,
+  onBack,
+  hideBackButton,
+}: FeedbackScreenEntryDetailProps) {
+  const { hooks, commentSort, transformComments } = useFeedbackBody();
+
+  const { messages, theme } = useFeedbackUi();
+  const entry = hooks.useEntry(entryId);
+  const comments = hooks.useComments({ entryId, sort: commentSort });
+  const setUpvote = hooks.useSetEntryUpvote();
+  const createComment = hooks.useCreateComment();
+  const [body, setBody] = useState("");
+  const visible = useMemo(
+    () => transformComments?.(comments.results) ?? comments.results,
+    [comments.results, transformComments],
+  );
+
+  if (entry === undefined)
+    return (
+      <View
+        style={{
+          flex: 1,
+          gap: 8,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <ActivityIndicator size="large" />
+        <Text style={{ color: theme.colors.mutedText }}>
+          {messages.board.loading}
+        </Text>
+      </View>
+    );
+
+  if (entry === null) {
+    if (hideBackButton) return;
+    return <Button label={messages.entry.back} onPress={onBack} />;
+  }
+
+  return (
+    <View style={{ gap: 12 }}>
+      {!hideBackButton && (
+        <Button label={messages.entry.back} onPress={onBack} />
+      )}
+      <FeedbackEntry.Root entry={entry}>
+        <FeedbackEntry.Upvote
+          onToggle={(active) =>
+            void setUpvote({ entryId, desiredState: active })
+          }
+        />
+        <FeedbackEntry.Content style={{ gap: 5 }}>
+          <FeedbackEntry.Status />
+          <FeedbackEntry.Title />
+          <FeedbackEntry.Body />
+          <FeedbackEntry.CommentCount />
+        </FeedbackEntry.Content>
+      </FeedbackEntry.Root>
+      <Text
+        style={{ color: theme.colors.text, fontSize: 18, fontWeight: "700" }}
+      >
+        {messages.comments.title}
+      </Text>
+      <FeedbackForm.Root>
+        <FeedbackForm.Textarea
+          value={body}
+          onChangeText={setBody}
+          placeholder={messages.comments.placeholder}
+        />
+        <FeedbackForm.Submit
+          onPress={async () => {
+            if (body.trim().length === 0) return;
+            await createComment({ entryId, body });
+            setBody("");
+          }}
+        >
+          {messages.comments.submit}
+        </FeedbackForm.Submit>
+      </FeedbackForm.Root>
+      <View style={{ gap: 8 }}>
+        {visible.map((comment) => (
+          <CommentBranch key={comment.id} comment={comment} entryId={entryId} />
+        ))}
+      </View>
+      {comments.status === "CanLoadMore" && (
+        <Button
+          label={messages.comments.loadMore}
+          onPress={() => comments.loadMore(hooks.pageSizes.comments)}
+        />
+      )}
+    </View>
+  );
+}

package/src/native/shared/ui/FeedbackScreenHeader.tsx

@@ -0,0 +1,42 @@
+import { Pressable, Text } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import { FeedbackBoard } from "./primitives";
+
+export function FeedbackScreenHeader() {
+  const { query, setShowForm, setQuery, enabledKinds } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const { top } = useSafeAreaInsets();
+
+  const pageTitle =
+    enabledKinds.length === 1
+      ? messages.kindsPlural[enabledKinds.at(0)!]
+      : messages.board.title;
+
+  return (
+    <FeedbackBoard.Header style={{ padding: theme.spacing, paddingTop: top }}>
+      <FeedbackBoard.Title>{pageTitle}</FeedbackBoard.Title>
+      <Text style={{ color: theme.colors.mutedText }}>
+        {messages.board.subtitle}
+      </Text>
+      <Pressable
+        onPress={() => setShowForm(true)}
+        style={{
+          alignSelf: "flex-start",
+          paddingVertical: 9,
+          paddingHorizontal: 12,
+          borderRadius: 9,
+          backgroundColor: theme.colors.primary,
+        }}
+      >
+        <Text
+          style={{ color: theme.colors.primaryForeground, fontWeight: "700" }}
+        >
+          {messages.board.createEntry}
+        </Text>
+      </Pressable>
+      <FeedbackBoard.Search value={query} onValueChange={(q) => setQuery(q)} />
+    </FeedbackBoard.Header>
+  );
+}

package/src/native/shared/ui/FeedbackScreenList.tsx

@@ -0,0 +1,61 @@
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
+import type { FeedbackScreenListProps } from "../../../shared/types/index.js";
+import { Button } from "./Button.js";
+import { EntryCard } from "./EntryCard.js";
+import { EntryDetail } from "./EntryDetail.js";
+import { FeedbackBoard } from "./primitives.js";
+
+export function FeedbackScreenList({
+  hideBackButton = false,
+  onEntryOpen,
+}: FeedbackScreenListProps) {
+  const {
+    hooks,
+    entrySort,
+    isSearching,
+    enabledKinds,
+    selectedEntryId,
+    debouncedQuery,
+    setSelectedEntryId,
+  } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+
+  const list = hooks.useEntries({ sort: entrySort, kinds: enabledKinds });
+  const search = hooks.useSearchEntries({
+    searchQuery: debouncedQuery,
+    kinds: enabledKinds,
+  });
+
+  const entries = isSearching ? search : list.results;
+
+  return (
+    <>
+      <FeedbackBoard.List style={{ padding: theme.spacing }}>
+        {selectedEntryId ? (
+          <EntryDetail
+            entryId={selectedEntryId}
+            hideBackButton={hideBackButton}
+            onBack={() => setSelectedEntryId(null)}
+          />
+        ) : (
+          (entries ?? []).map((entry) => (
+            <EntryCard
+              key={entry.id}
+              entry={entry}
+              hooks={hooks}
+              onOpen={() => onEntryOpen(entry.id)}
+            />
+          ))
+        )}
+      </FeedbackBoard.List>
+
+      {!isSearching && list.status === "CanLoadMore" && (
+        <Button
+          label={messages.board.loadMore}
+          onPress={() => list.loadMore(hooks.pageSizes.entries)}
+        />
+      )}
+    </>
+  );
+}