@upstep/react-native 0.6.3 → 0.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.3",
+  "version": "0.6.7",
   "description": "Upstep feedback SDK for React Native",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/FeedbackContext.tsx

@@ -6,6 +6,7 @@ import React, {
   useCallback,
   type ReactNode,
 } from "react";
+import { LayoutAnimation, Platform, UIManager } from "react-native";
 import type {
   Feedback,
   FeedbackType,
@@ -15,6 +16,12 @@ import type {
 } from "@upstep/types";
 import { UpstepApiClient } from "./api";
 
+// Enable LayoutAnimation on Android
+if (Platform.OS === "android") {
+  const um = UIManager as unknown as { setLayoutAnimationEnabledExperimental?: (v: boolean) => void };
+  um.setLayoutAnimationEnabledExperimental?.(true);
+}
+
 const DEFAULT_ACCENT = "#D97757";
 
 interface UpstepContextValue {
@@ -74,6 +81,22 @@ export function FeedbackProvider({
   );
 
   const vote = useCallback(async (feedbackId: string, value: VoteValue) => {
+    // Optimistic update: flip vote + re-sort with a smooth animation
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFeedItems((prev) => {
+      const updated = prev.map((f) => {
+        if (f.id !== feedbackId) return f;
+        const wasVoted = f.userVote === "UP";
+        return {
+          ...f,
+          upvotes: wasVoted ? f.upvotes - 1 : f.upvotes + 1,
+          userVote: wasVoted ? null : ("UP" as VoteValue),
+        };
+      });
+      return [...updated].sort((a, b) => b.upvotes - a.upvotes);
+    });
+
+    // Confirm with server, then silently sync
     await client.vote(feedbackId, value);
     await loadFeed();
   }, [client, loadFeed]);

package/src/FeedbackSheet.tsx

@@ -66,6 +66,7 @@ export function FeedbackSheet() {
   const p = isDark ? DARK : LIGHT;
 
   const [nav, setNav] = useState<Nav>({ screen: "list" });
+  const [listTab, setListTab] = useState<"open" | "done">("open");
   const insets = useSafeAreaInsets();
 
   // Refresh list every time the modal opens
@@ -135,6 +136,30 @@ export function FeedbackSheet() {
             )}
           </View>
 
+          {/* Open / Completed tabs — only on list screen */}
+          {nav.screen === "list" && (
+            <View style={[styles.listTabBar, { borderBottomColor: p.border }]}>
+              <TouchableOpacity
+                onPress={() => setListTab("open")}
+                style={[styles.listTabBtn, listTab === "open" && { borderBottomColor: accentColor }]}
+                activeOpacity={0.7}
+              >
+                <Text style={[styles.listTabText, { color: listTab === "open" ? accentColor : p.textFaint }]}>
+                  Open
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => setListTab("done")}
+                style={[styles.listTabBtn, listTab === "done" && { borderBottomColor: accentColor }]}
+                activeOpacity={0.7}
+              >
+                <Text style={[styles.listTabText, { color: listTab === "done" ? accentColor : p.textFaint }]}>
+                  Completed
+                </Text>
+              </TouchableOpacity>
+            </View>
+          )}
+
           {/* Scrollable body */}
           <ScrollView
             style={styles.scroll}
@@ -146,6 +171,7 @@ export function FeedbackSheet() {
               <FeedListBody
                 p={p}
                 accent={accentColor}
+                tab={listTab}
                 onSelect={(id) => setNav({ screen: "detail", feedbackId: id })}
               />
             )}
@@ -189,12 +215,16 @@ export function FeedbackSheet() {
 // ─── FeedListBody ─────────────────────────────────────────────────────────────
 
 function FeedListBody({
-  p, accent, onSelect,
+  p, accent, tab, onSelect,
 }: {
-  p: Palette; accent: string; onSelect: (id: string) => void;
+  p: Palette; accent: string; tab: "open" | "done"; onSelect: (id: string) => void;
 }) {
   const { feedItems, feedLoading, vote } = useUpstep();
 
+  const displayItems = tab === "done"
+    ? feedItems.filter((f) => f.status === "DONE")
+    : feedItems.filter((f) => f.status === "OPEN" || f.status === "IN_PROGRESS" || f.status === "PENDING");
+
   if (feedLoading) {
     return (
       <View style={styles.centered}>
@@ -203,11 +233,13 @@ function FeedListBody({
     );
   }
 
-  if (feedItems.length === 0) {
+  if (displayItems.length === 0) {
     return (
       <View style={styles.centered}>
         <Text style={[styles.emptyText, { color: p.textFaint }]}>
-          No feedback yet. Be the first to add one.
+          {tab === "done"
+            ? "No completed items yet."
+            : "No open feedback yet. Be the first to add one."}
         </Text>
       </View>
     );
@@ -215,7 +247,7 @@ function FeedListBody({
 
   return (
     <>
-      {feedItems.map((f) => (
+      {displayItems.map((f) => (
         <FeedCard
           key={f.id}
           item={f}
@@ -271,7 +303,9 @@ function FeedCard({
         )}
         <View style={styles.cardMeta}>
           <TypeBadge type={item.type} p={p} />
-          <StatusDot status={item.status} />
+          {item.status === "PENDING"
+            ? <PendingBadge />
+            : <StatusDot status={item.status} />}
           <Text style={[styles.cardDate, { color: p.textFaint }]}>{fmtDate(item.createdAt)}</Text>
         </View>
       </View>
@@ -329,7 +363,9 @@ function FeedDetailBody({
       )}
       <View style={styles.badgeRow}>
         <TypeBadge type={item.type} p={p} />
-        <StatusBadge status={item.status} p={p} />
+        {item.status === "PENDING"
+          ? <PendingBadge />
+          : <StatusBadge status={item.status} p={p} />}
       </View>
 
       <Text style={[styles.detailContent, { color: p.textSoft }]}>{item.content}</Text>
@@ -377,7 +413,7 @@ function CommentBubble({ comment, p, accent }: { comment: Comment; p: Palette; a
       <View style={styles.commentMeta}>
         <View style={[styles.ownerBadge, { backgroundColor: accent + "20" }]}>
           <Text style={[styles.ownerBadgeText, { color: accent }]}>
-            {comment.authorName ?? "Team"}
+            Developer
           </Text>
         </View>
         <Text style={[styles.commentDate, { color: p.textFaint }]}>{fmtDate(comment.createdAt)}</Text>
@@ -517,6 +553,15 @@ const TYPE_FG: Record<FeedbackType, string> = {
   BUG: "#d6453d", FEATURE: "#3b76d6", GENERAL: "",
 };
 
+function PendingBadge() {
+  return (
+    <View style={styles.pendingBadge}>
+      <View style={styles.pendingDot} />
+      <Text style={styles.pendingBadgeText}>Pending review</Text>
+    </View>
+  );
+}
+
 function TypeBadge({ type, p }: { type: FeedbackType; p: Palette }) {
   return (
     <View style={[styles.badge, { backgroundColor: TYPE_BG[type] || p.bgSoft }]}>
@@ -593,6 +638,23 @@ const styles = StyleSheet.create({
   newBtn: { borderRadius: 20, paddingHorizontal: 14, paddingVertical: 7 },
   newBtnText: { color: "#fff", fontSize: 13, fontWeight: "700" },
 
+  // List tab bar
+  listTabBar: {
+    flexDirection: "row",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  listTabBtn: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 11,
+    borderBottomWidth: 2,
+    borderBottomColor: "transparent",
+  },
+  listTabText: {
+    fontSize: 13,
+    fontWeight: "600",
+  },
+
   // Scroll — flex: 1 fills all remaining space after the fixed header
   scroll: { flex: 1 },
   scrollContent: { flexGrow: 1, padding: 16, paddingBottom: 32 },
@@ -676,6 +738,30 @@ const styles = StyleSheet.create({
   successTitle: { fontSize: 20, fontWeight: "700", textAlign: "center", marginBottom: 6 },
   successSub: { fontSize: 14, textAlign: "center" },
 
+  // Pending badge
+  pendingBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: "#fff7ed",
+    borderWidth: 1,
+    borderColor: "#fed7aa",
+    borderRadius: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+  },
+  pendingDot: {
+    width: 5,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: "#ea580c",
+  },
+  pendingBadgeText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: "#ea580c",
+  },
+
   // Branding
   poweredBy: {
     alignItems: "center",

package/src/api.ts

@@ -40,7 +40,8 @@ export class UpstepApiClient {
   }
 
   async getItem(feedbackId: string): Promise<FeedbackWithComments> {
-    const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}`, {
+    const qs = this.userId ? `?endUserId=${encodeURIComponent(this.userId)}` : "";
+    const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}${qs}`, {
       headers: this.headers(),
     });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);