@upstep/react-native 0.6.6 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "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,9 +81,31 @@ export function FeedbackProvider({
   );
 
   const vote = useCallback(async (feedbackId: string, value: VoteValue) => {
-    await client.vote(feedbackId, value);
-    await loadFeed();
-  }, [client, loadFeed]);
+    // Capture snapshot for rollback, then animate into new sorted position
+    let snapshot: Feedback[] = [];
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFeedItems((prev) => {
+      snapshot = 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);
+    });
+
+    try {
+      await client.vote(feedbackId, value);
+    } catch {
+      // API failed — animate back to original order
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      setFeedItems(snapshot);
+    }
+  }, [client]);
 
   const getItem = useCallback(
     (feedbackId: string) => client.getItem(feedbackId),

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}
@@ -606,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 },