feat: mobile app package (#1075)

packages/mobile/src/Screens/NoteHistory/RemoteHistory.tsx

@@ -0,0 +1,82 @@
+import { ApplicationContext } from '@Root/ApplicationContext'
+import { LoadingContainer, LoadingText } from '@Root/Screens/Notes/NoteList.styled'
+import { NoteHistoryEntry, RevisionListEntry, SNNote } from '@standardnotes/snjs'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
+import { FlatList, ListRenderItem } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { NoteHistoryCell } from './NoteHistoryCell'
+
+type Props = {
+  note: SNNote
+  onPress: (uuid: string, revision: NoteHistoryEntry, title: string) => void
+}
+export const RemoteHistory: React.FC<Props> = ({ note, onPress }) => {
+  // Context
+  const application = useContext(ApplicationContext)
+  const insets = useSafeAreaInsets()
+
+  // State
+  const [remoteHistoryList, setRemoteHistoryList] = useState<RevisionListEntry[]>()
+  const [fetchingRemoteHistory, setFetchingRemoteHistory] = useState(false)
+
+  useEffect(() => {
+    let isMounted = true
+
+    const fetchRemoteHistoryList = async () => {
+      if (note) {
+        setFetchingRemoteHistory(true)
+        const newRemoteHistory = await application?.historyManager?.remoteHistoryForItem(note)
+        if (isMounted) {
+          setFetchingRemoteHistory(false)
+          setRemoteHistoryList(newRemoteHistory)
+        }
+      }
+    }
+    void fetchRemoteHistoryList()
+
+    return () => {
+      isMounted = false
+    }
+  }, [application?.historyManager, note])
+
+  const onItemPress = useCallback(
+    async (item: RevisionListEntry) => {
+      const remoteRevision = await application?.historyManager!.fetchRemoteRevision(note, item)
+      if (remoteRevision) {
+        onPress(item.uuid, remoteRevision as NoteHistoryEntry, new Date(item.updated_at).toLocaleString())
+      } else {
+        void application?.alertService!.alert(
+          'The remote revision could not be loaded. Please try again later.',
+          'Error',
+        )
+        return
+      }
+    },
+    [application?.alertService, application?.historyManager, note, onPress],
+  )
+
+  const renderItem: ListRenderItem<RevisionListEntry> | null | undefined = ({ item }) => {
+    return <NoteHistoryCell onPress={() => onItemPress(item)} title={new Date(item.updated_at).toLocaleString()} />
+  }
+
+  if (fetchingRemoteHistory || !remoteHistoryList || (remoteHistoryList && remoteHistoryList.length === 0)) {
+    const placeholderText = fetchingRemoteHistory ? 'Loading entries...' : 'No entries.'
+    return (
+      <LoadingContainer>
+        <LoadingText>{placeholderText}</LoadingText>
+      </LoadingContainer>
+    )
+  }
+
+  return (
+    <FlatList<RevisionListEntry>
+      keyExtractor={item => item.uuid}
+      contentContainerStyle={{ paddingBottom: insets.bottom }}
+      initialNumToRender={10}
+      windowSize={10}
+      keyboardShouldPersistTaps={'never'}
+      data={remoteHistoryList}
+      renderItem={renderItem}
+    />
+  )
+}