Native formSheet for GIF select on iOS (#4328)

* native formsheet for gif select

* trigger confirm discard if have gif

* give modal a background color

* fix web top bar - unrelated but I cba to make a separate PR

src/components/dialogs/GifSelect.ios.tsx

@@ -0,0 +1,255 @@
+import React, {
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {Modal, ScrollView, TextInput, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {cleanError} from '#/lib/strings/errors'
+import {
+  Gif,
+  useFeaturedGifsQuery,
+  useGifSearchQuery,
+} from '#/state/queries/tenor'
+import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {FlatList_INTERNAL} from '#/view/com/util/Views'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import * as TextField from '#/components/forms/TextField'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+import {Button, ButtonText} from '../Button'
+import {Handle} from '../Dialog'
+import {useThrottledValue} from '../hooks/useThrottledValue'
+import {ListFooter, ListMaybePlaceholder} from '../Lists'
+import {GifPreview} from './GifSelect.shared'
+
+export function GifSelectDialog({
+  controlRef,
+  onClose,
+  onSelectGif: onSelectGifProp,
+}: {
+  controlRef: React.RefObject<{open: () => void}>
+  onClose: () => void
+  onSelectGif: (gif: Gif) => void
+}) {
+  const t = useTheme()
+  const [open, setOpen] = useState(false)
+
+  useImperativeHandle(controlRef, () => ({
+    open: () => setOpen(true),
+  }))
+
+  const close = useCallback(() => {
+    setOpen(false)
+    onClose()
+  }, [onClose])
+
+  const onSelectGif = useCallback(
+    (gif: Gif) => {
+      onSelectGifProp(gif)
+      close()
+    },
+    [onSelectGifProp, close],
+  )
+
+  const renderErrorBoundary = useCallback(
+    (error: any) => <ModalError details={String(error)} close={close} />,
+    [close],
+  )
+
+  return (
+    <Modal
+      visible={open}
+      animationType="slide"
+      presentationStyle="formSheet"
+      onRequestClose={close}
+      aria-modal
+      accessibilityViewIsModal>
+      <View style={[a.flex_1, t.atoms.bg]}>
+        <Handle />
+        <ErrorBoundary renderError={renderErrorBoundary}>
+          <GifList onSelectGif={onSelectGif} close={close} />
+        </ErrorBoundary>
+      </View>
+    </Modal>
+  )
+}
+
+function GifList({
+  onSelectGif,
+}: {
+  close: () => void
+  onSelectGif: (gif: Gif) => void
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  const textInputRef = useRef<TextInput>(null)
+  const listRef = useRef<FlatList_INTERNAL>(null)
+  const [undeferredSearch, setSearch] = useState('')
+  const search = useThrottledValue(undeferredSearch, 500)
+
+  const isSearching = search.length > 0
+
+  const trendingQuery = useFeaturedGifsQuery()
+  const searchQuery = useGifSearchQuery(search)
+
+  const {
+    data,
+    fetchNextPage,
+    isFetchingNextPage,
+    hasNextPage,
+    error,
+    isLoading,
+    isError,
+    refetch,
+  } = isSearching ? searchQuery : trendingQuery
+
+  const flattenedData = useMemo(() => {
+    return data?.pages.flatMap(page => page.results) || []
+  }, [data])
+
+  const renderItem = useCallback(
+    ({item}: {item: Gif}) => {
+      return <GifPreview gif={item} onSelectGif={onSelectGif} />
+    },
+    [onSelectGif],
+  )
+
+  const onEndReached = React.useCallback(() => {
+    if (isFetchingNextPage || !hasNextPage || error) return
+    fetchNextPage()
+  }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
+
+  const hasData = flattenedData.length > 0
+
+  const onGoBack = useCallback(() => {
+    if (isSearching) {
+      // clear the input and reset the state
+      textInputRef.current?.clear()
+      setSearch('')
+    } else {
+      close()
+    }
+  }, [isSearching])
+
+  const listHeader = useMemo(() => {
+    return (
+      <View style={[a.relative, a.mb_lg, a.pt_4xl, a.flex_row, a.align_center]}>
+        {/* cover top corners */}
+        <View
+          style={[
+            a.absolute,
+            a.inset_0,
+            {
+              borderBottomLeftRadius: 8,
+              borderBottomRightRadius: 8,
+            },
+            t.atoms.bg,
+          ]}
+        />
+
+        <TextField.Root>
+          <TextField.Icon icon={Search} />
+          <TextField.Input
+            label={_(msg`Search GIFs`)}
+            placeholder={_(msg`Search Tenor`)}
+            onChangeText={text => {
+              setSearch(text)
+              listRef.current?.scrollToOffset({offset: 0, animated: false})
+            }}
+            returnKeyType="search"
+            clearButtonMode="while-editing"
+            inputRef={textInputRef}
+            maxLength={50}
+          />
+        </TextField.Root>
+      </View>
+    )
+  }, [t.atoms.bg, _])
+
+  return (
+    <FlatList_INTERNAL
+      ref={listRef}
+      key={gtMobile ? '3 cols' : '2 cols'}
+      data={flattenedData}
+      renderItem={renderItem}
+      numColumns={gtMobile ? 3 : 2}
+      columnWrapperStyle={a.gap_sm}
+      contentContainerStyle={a.px_lg}
+      ListHeaderComponent={
+        <>
+          {listHeader}
+          {!hasData && (
+            <ListMaybePlaceholder
+              isLoading={isLoading}
+              isError={isError}
+              onRetry={refetch}
+              onGoBack={onGoBack}
+              emptyType="results"
+              sideBorders={false}
+              topBorder={false}
+              errorTitle={_(msg`Failed to load GIFs`)}
+              errorMessage={_(msg`There was an issue connecting to Tenor.`)}
+              emptyMessage={
+                isSearching
+                  ? _(msg`No search results found for "${search}".`)
+                  : _(
+                      msg`No featured GIFs found. There may be an issue with Tenor.`,
+                    )
+              }
+            />
+          )}
+        </>
+      }
+      stickyHeaderIndices={[0]}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={4}
+      keyExtractor={(item: Gif) => item.id}
+      keyboardDismissMode="on-drag"
+      ListFooterComponent={
+        hasData ? (
+          <ListFooter
+            isFetchingNextPage={isFetchingNextPage}
+            error={cleanError(error)}
+            onRetry={fetchNextPage}
+            style={{borderTopWidth: 0}}
+          />
+        ) : null
+      }
+    />
+  )
+}
+
+function ModalError({details, close}: {details?: string; close: () => void}) {
+  const {_} = useLingui()
+
+  return (
+    <ScrollView
+      style={[a.flex_1, a.gap_md]}
+      centerContent
+      contentContainerStyle={a.px_lg}>
+      <ErrorScreen
+        title={_(msg`Oh no!`)}
+        message={_(
+          msg`There was an unexpected issue in the application. Please let us know if this happened to you!`,
+        )}
+        details={details}
+      />
+      <Button
+        label={_(msg`Close dialog`)}
+        onPress={close}
+        color="primary"
+        size="medium"
+        variant="solid">
+        <ButtonText>
+          <Trans>Close</Trans>
+        </ButtonText>
+      </Button>
+    </ScrollView>
+  )
+}