clear last tickets

src/screens/Playbacks/Playbacks.js

@@ -1,5 +1,5 @@
 import { useIsFocused, useRoute } from "@react-navigation/native";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
 import { responsiveHeight } from "react-native-responsive-dimensions";
@@ -9,16 +9,30 @@ import PlaybackItem from "./components/PlaybackItem";
 
 const Playbacks = () => {
   const [activeIndex, setActiveIndex] = useState(0);
-  const carouselRef = useRef(null);
   const userCache = useRef(new Map());
   const isFocused = useIsFocused();
-  const { data: playbacks = [], loadMore } = useDataFromRef({
+  const route = useRoute();
+  const focusProjectId =
+    route?.params?.projectId || route?.params?.focusId || null;
+  const { data: rawPlaybacks = [], loadMore } = useDataFromRef({
     ref: projectsRef.where("playbackUrl", "!=", null),
     simpleRef: false,
     listener: false,
     usePagination: true,
     batchSize: 6,
   });
+  const focusIndex = useMemo(() => {
+    if (!focusProjectId) return -1;
+    return rawPlaybacks.findIndex((p) => p?.id === focusProjectId);
+  }, [focusProjectId, rawPlaybacks]);
+
+  const playbacks = useMemo(() => {
+    if (focusIndex < 0) return rawPlaybacks;
+    const target = rawPlaybacks[focusIndex];
+    const before = rawPlaybacks.slice(0, focusIndex);
+    const after = rawPlaybacks.slice(focusIndex + 1);
+    return [target, ...after, ...before];
+  }, [focusIndex, rawPlaybacks]);
 
   const onSnap = useCallback(
     (index) => {
@@ -31,6 +45,17 @@ const Playbacks = () => {
   );
 
   const triedLoadMoreRef = useRef(0);
+  const focusLoadAttemptsRef = useRef(0);
+  const hasAppliedFocusRef = useRef(false);
+
+  useEffect(() => {
+    focusLoadAttemptsRef.current = 0;
+    hasAppliedFocusRef.current = false;
+    if (!focusProjectId) {
+      setActiveIndex(0);
+    }
+  }, [focusProjectId]);
+
   useEffect(() => {
     if (loadMore && triedLoadMoreRef.current < 6) {
       triedLoadMoreRef.current += 1;
@@ -38,10 +63,22 @@ const Playbacks = () => {
     }
   }, [loadMore, playbacks]);
 
+  useEffect(() => {
+    if (!focusProjectId) return;
+    if (focusIndex >= 0 && !hasAppliedFocusRef.current) {
+      hasAppliedFocusRef.current = true;
+      setActiveIndex(0);
+      return;
+    }
+    if (loadMore && focusLoadAttemptsRef.current < 6) {
+      focusLoadAttemptsRef.current += 1;
+      loadMore();
+    }
+  }, [focusIndex, focusProjectId, loadMore, playbacks]);
+
   return (
     <View style={{ flex: 1, backgroundColor: "black" }}>
       <Carousel
-        ref={carouselRef}
         data={playbacks}
         vertical
         height={responsiveHeight(100)}