fix immutability errors

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.tsx

@@ -16,13 +16,13 @@ export function VideoEmbedInnerWeb({
   active,
   setActive,
   onScreen,
-  lastKnownTime,
+  lastKnownTime: lastKnownTimeRef,
 }: {
   embed: AppBskyEmbedVideo.View
   active: boolean
   setActive: () => void
   onScreen: boolean
-  lastKnownTime: React.MutableRefObject<number | undefined>
+  lastKnownTime: React.RefObject<number | undefined>
 }) {
   const containerRef = useRef<HTMLDivElement>(null)
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -47,10 +47,10 @@ export function VideoEmbedInnerWeb({
   })
 
   useEffect(() => {
-    if (lastKnownTime.current && videoRef.current) {
-      videoRef.current.currentTime = lastKnownTime.current
+    if (lastKnownTimeRef.current && videoRef.current) {
+      videoRef.current.currentTime = lastKnownTimeRef.current
     }
-  }, [lastKnownTime])
+  }, [lastKnownTimeRef])
 
   return (
     <View
@@ -68,7 +68,7 @@ export function VideoEmbedInnerWeb({
             muted={!focused}
             aria-labelledby={embed.alt ? figId : undefined}
             onTimeUpdate={e => {
-              lastKnownTime.current = e.currentTarget.currentTime
+              lastKnownTimeRef.current = e.currentTarget.currentTime
             }}
           />
           {embed.alt && (

src/components/ProgressGuide/FollowDialog.tsx

@@ -195,14 +195,15 @@ function DialogInner({guide}: {guide: Follow10ProgressGuide}) {
     resultsKey,
   ])
 
-  if (
+  const isEmpty =
     searchText &&
     !isFetchingSearchResults &&
     !items.length &&
     !isSearchResultsError
-  ) {
-    items.push({type: 'empty', key: 'empty', message: _(msg`No results`)})
-  }
+
+  const allItems = isEmpty
+    ? [{type: 'empty', key: 'empty', message: _(msg`No results`)}]
+    : items
 
   const renderItems = useCallback(
     ({item, index}: {item: Item; index: number}) => {
@@ -260,7 +261,7 @@ function DialogInner({guide}: {guide: Follow10ProgressGuide}) {
   return (
     <Dialog.InnerFlatList
       ref={listRef}
-      data={items}
+      data={allItems}
       renderItem={renderItems}
       ListHeaderComponent={listHeader}
       stickyHeaderIndices={[0]}

src/components/moderation/ModerationDetailsDialog.tsx

@@ -9,6 +9,7 @@ import {makeProfileLink} from '#/lib/routes/links'
 import {listUriToHref} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {useSession} from '#/state/session'
+import {useTickEveryMinute} from '#/state/shell'
 import {atoms as a, useGutters, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
@@ -44,6 +45,7 @@ function ModerationDetailsDialogInner({
   const {_} = useLingui()
   const desc = useModerationCauseDescription(modcause)
   const {currentAccount} = useSession()
+  const tick = useTickEveryMinute()
   const timeDiff = useGetTimeAgo({future: true})
 
   let name
@@ -208,7 +210,7 @@ function ModerationDetailsDialogInner({
                         t.atoms.text_contrast_medium,
                       ]}>
                       <Trans>
-                        Expires in {timeDiff(Date.now(), modcause.label.exp)}
+                        Expires in {timeDiff(tick, modcause.label.exp)}
                       </Trans>
                     </Text>
                   </View>

src/state/queries/actor-autocomplete.ts

@@ -29,19 +29,19 @@ export function useActorAutocompleteQuery(
   const moderationOpts = useModerationOpts()
   const agent = useAgent()
 
-  prefix = prefix.toLowerCase().trim()
-  if (prefix.endsWith('.')) {
+  let cleanPrefix = prefix.toLowerCase().trim()
+  if (cleanPrefix.endsWith('.')) {
     // Going from "foo" to "foo." should not clear matches.
-    prefix = prefix.slice(0, -1)
+    cleanPrefix = cleanPrefix.slice(0, -1)
   }
 
   return useQuery<AppBskyActorDefs.ProfileViewBasic[]>({
     staleTime: STALE.MINUTES.ONE,
-    queryKey: RQKEY(prefix || ''),
+    queryKey: RQKEY(cleanPrefix || ''),
     async queryFn() {
-      const res = prefix
+      const res = cleanPrefix
         ? await agent.searchActorsTypeahead({
-            q: prefix,
+            q: cleanPrefix,
             limit: limit || 8,
           })
         : undefined
@@ -50,12 +50,12 @@ export function useActorAutocompleteQuery(
     select: React.useCallback(
       (data: AppBskyActorDefs.ProfileViewBasic[]) => {
         return computeSuggestions({
-          q: prefix,
+          q: cleanPrefix,
           searched: data,
           moderationOpts: moderationOpts || DEFAULT_MOD_OPTS,
         })
       },
-      [prefix, moderationOpts],
+      [cleanPrefix, moderationOpts],
     ),
     placeholderData: maintainData ? keepPreviousData : undefined,
   })

src/view/com/pager/TabBar.tsx

@@ -331,7 +331,7 @@ export function TabBar({
             syncScrollState.set('unsynced')
           }}
           onScroll={e => {
-            scrollX.value = Math.round(e.nativeEvent.contentOffset.x)
+            scrollX.set(Math.round(e.nativeEvent.contentOffset.x))
           }}>
           <Animated.View
             onLayout={e => {

src/view/com/posts/PostFeed.tsx

@@ -226,7 +226,8 @@ let PostFeed = ({
   const initialNumToRender = useInitialNumToRender()
   const feedFeedback = useFeedFeedbackContext()
   const [isPTRing, setIsPTRing] = useState(false)
-  const lastFetchRef = useRef<number>(Date.now())
+  const [firstFetchTime] = useState(() => Date.now())
+  const lastFetchRef = useRef<number>(firstFetchTime)
   const [feedType, feedUriOrActorDid, feedTab] = feed.split('|')
   const {gtMobile} = useBreakpoints()
   const {rightNavVisible} = useLayoutBreakpoints()
@@ -263,9 +264,11 @@ let PostFeed = ({
     fetchNextPage,
   } = usePostFeedQuery(feed, feedParams, opts)
   const lastFetchedAt = data?.pages[0].fetchedAt
-  if (lastFetchedAt) {
-    lastFetchRef.current = lastFetchedAt
-  }
+  useEffect(() => {
+    if (lastFetchedAt) {
+      lastFetchRef.current = lastFetchedAt
+    }
+  }, [lastFetchedAt])
   const isEmpty = useMemo(
     () => !isFetching && !data?.pages?.some(page => page.slices.length),
     [isFetching, data],

src/view/com/util/Views.web.tsx

@@ -103,6 +103,8 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>(
       paddingTop: Math.abs(contentOffset.y),
     })
   }
+  // @ts-expect-error web only
+  let dataSet = props.dataSet || {}
   if (desktopFixedHeight) {
     if (typeof desktopFixedHeight === 'number') {
       // @ts-expect-error Web only -prf
@@ -121,10 +123,7 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>(
       // around this, we set data-stable-gutters which can then be
       // styled in our external CSS.
       // -prf
-      // @ts-expect-error web only -prf
-      props.dataSet = props.dataSet || {}
-      // @ts-expect-error web only -prf
-      props.dataSet.stableGutters = '1'
+      dataSet = {...dataSet, stableGutters: '1'}
     }
   }
   return (
@@ -133,6 +132,8 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>(
       contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
       style={style}
       contentOffset={contentOffset}
+      // @ts-expect-error web only
+      dataSet={dataSet}
       {...props}
     />
   )