Enable fetching paginated conversations in direct.js

src/components/pages/direct.js

@@ -9,6 +9,9 @@ import {
     Dimensions,
 } from "react-native";
 
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as requests from "src/requests";
+
 import { Ionicons } from "@expo/vector-icons";
 
 import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
@@ -35,31 +38,58 @@ function filterConversations(convs, query) {
 }
 
 const DirectJsx = ({ navigation }) => {
+    const FETCH_LIMIT = 1;
+
     const [state, setState] = useState({
         loaded: false,
-        query: ""
+        query: "",
+        fetchOffset: 0,
     });
 
     useEffect(() => {
-        setState({...state,
+        let instance, accessToken;
-            loaded: true,
+        AsyncStorage
-            conversations: [
+            .multiGet([
-                {
+                "@user_instance",
-                    id: 1,
+                "@user_token",
-                    unread: true,
+            ])
-                    accounts: [TEST_ACCOUNT_1],
+            .then(([instancePair, tokenPair]) => {
-                    last_status: TEST_STATUS,
+                instance = instancePair[1];
-                },
+                accessToken = JSON.parse(tokenPair[1]).access_token;
-                {
+
-                    id: 2,
+                return requests.fetchConversations(
-                    unread: false,
+                    instance,
-                    accounts: [TEST_ACCOUNT_1, TEST_ACCOUNT_2],
+                    accessToken,
-                    last_status: TEST_STATUS,
+                    { limit: FETCH_LIMIT, }
-                }
+                );
-            ],
+            })
-        });
+            .then(conversations => {
+                setState({...state,
+                    loaded: true,
+                    conversations,
+                    fetchOffset: FETCH_LIMIT,
+                    instance,
+                    accessToken,
+                });
+            });
     }, []);
 
+    const _handleShowMore = async () => {
+        const results = await requests.fetchConversations(
+            state.instance,
+            state.accessToken,
+            {
+                max_id: state.conversations[state.conversations.length - 1],
+                limit: FETCH_LIMIT,
+            }
+        );
+
+        setState({...state,
+            conversations: state.conversations.concat(results),
+            fetchOffset: state.fetchOffset + FETCH_LIMIT,
+        });
+    };
+
     const onPressConversationFactory = (conv) => {
         return () => {
             navigation.navigate("Conversation", {
@@ -114,29 +144,48 @@ const DirectJsx = ({ navigation }) => {
         <ScreenWithTrayJsx
               navigation = { navigation }
               originTab = "Direct">
-            <View style = { [ styles.row, styles.form.container ] }>
+            { state.loaded
-                <TextInput
+                ? <>
-                    placeholder = "Search..."
+                    <View style = { [ styles.row, styles.form.container ] }>
-                    value = { state.query }
+                        <TextInput
-                    style = { styles.form.searchBar }
+                            placeholder = "Search..."
-                    onChangeText = {
+                            value = { state.query }
-                        (value) => {
+                            style = { styles.form.searchBar }
-                            setState({...state,
+                            onChangeText = {
-                                query: value,
+                                (value) => {
-                            });
+                                    setState({...state,
+                                        query: value,
+                                    });
+                                }
+                            }/>
+                        <TouchableOpacity
+                              style = { styles.form.compose }
+                              onPress = { () => { navigation.navigate("Compose") } }>
+                            <Ionicons name = "md-create" size = { 24 } color = "black"/>
+                        </TouchableOpacity>
+                    </View>
+                    <>
+                        {
+                            filterConversations(
+                                state.conversations,
+                                state.query
+                            ).map(renderConversation)
                         }
-                    }/>
+                    </>
-                <TouchableOpacity
+                    <>
-                      style = { styles.form.compose }
+                        { state.conversations.length == state.fetchOffset
-                      onPress = { () => { navigation.navigate("Compose") } }>
+                            ? <View style = { styles.showMore.container }>
-                    <Ionicons name = "md-create" size = { 24 } color = "black"/>
+                                <TouchableOpacity
-                </TouchableOpacity>
+                                        onPress = { props.onShowMore }>
-            </View>
+                                    <View style = { styles.showMore.button }>
-            { state.loaded ?
+                                        <Text>Show more?</Text>
-                filterConversations(
+                                    </View>
-                    state.conversations,
+                                </TouchableOpacity>
-                    state.query
+                            </View>
-                ).map(renderConversation)
+                            : <></>
+                        }
+                    </>
+                </>
                 : <></>
             }
         </ScreenWithTrayJsx>
@@ -194,6 +243,19 @@ const styles = {
             height: 20,
         },
     },
+    showMore: {
+        container: {
+            justifyContent: "center",
+            alignItems: "center"
+        },
+        button: {
+            borderWidth: 1,
+            borderColor: "#888",
+            borderRadius: 5,
+            padding: 10,
+            margin: 20
+        },
+    },
     bold: { fontWeight: "bold" },
 };
 

src/requests.js

@@ -114,6 +114,15 @@ export async function fetchPublicTimeline(domain, token, params = false) {
     return resp.json();
 }
 
+export async function fetchConversations(domain, token, params = false) {
+    const resp = await get(
+        `https://${domain}/api/v1/conversations`,
+        token,
+        params
+    );
+    return resp.json();
+}
+
 export async function fetchSearchResults(domain, token, params) {
     const resp = await get(
         `https://${domain}/api/v2/search`,