Enable fetching instance search results on improved search interface

src/components/pages/discover/search.js

@@ -1,96 +1,213 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
-import { View, TextInput, Text, Dimensions, Image } from "react-native";
+import {
+    View,
+    TextInput,
+    Text,
+    Dimensions,
+    Image,
+} from "react-native";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+import { FontAwesome } from '@expo/vector-icons';
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
+import * as requests from "src/requests";
 import { StatusBarSpace } from "src/interface/rendering";
 import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
 
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native-gesture-handler";
-
-const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
-const TEST_ACCOUNTS = [
-    {
-        id: 1,
-        avatar: TEST_IMAGE,
-        username: "njms",
-        acct: "njms",
-        display_name: "Nat🔆",
-    },
-    {
-        id: 2,
-        avatar: TEST_IMAGE,
-        username: "njms",
-        acct: "njms",
-        display_name: "Nat🔆",
-    }
-];
-
-const TEST_HASHTAGS = [
-    {
-        id: 1,
-        name: "hashtag1",
-    },
-    {
-        id: 2,
-        name: "hashtag2",
-    },
-];
 
 function navCallbackFactory(navigation, route) {
     return params => {
-        console.log("test")
         navigation.navigate(route, params);
     }
 }
 
 const SearchJsx = ({navigation}) => {
+    // The number of additional items to fetch each time
+    const FETCH_LIMIT = 5;
+
     let [state, setState] = useState({
         query: "",
+        loaded: false,
+        accountOffset: 0,
+        hashtagOffset: 0,
     });
 
-    const accountCallback = navCallbackFactory(navigation, "ViewProfile");
+    useEffect(() => {
-    const hashtagCallback = navCallbackFactory(navigation, "ViewHashtag");
+        let instance, accessToken;
+        AsyncStorage
+            .multiGet([
+                "@user_instance",
+                "@user_token",
+            ])
+            .then(([instancePair, tokenPair]) => {
+                instance = instancePair[1];
+                accessToken = JSON.parse(tokenPair[1]).access_token;
+
+                setState({...state,
+                    instance,
+                    accessToken,
+                    loaded: true,
+                });
+            });
+    }, []);
+
+    const _handleSearch = async () => {
+        const results = await requests.fetchSearchResults(
+            state.instance,
+            state.accessToken,
+            {
+                q: state.query,
+                limit: FETCH_LIMIT,
+            }
+        );
+
+        setState({...state,
+            results,
+            accountOffset: FETCH_LIMIT,
+            hashtagOffset: FETCH_LIMIT,
+        });
+    };
+
+    const _handleShowMoreAccounts = async () => {
+        const { accounts } = await requests.fetchSearchResults(
+            state.instance,
+            state.accessToken,
+            {
+                q: state.query,
+                type: "accounts",
+                offset: state.accountOffset,
+                limit: FETCH_LIMIT,
+            }
+        );
+
+        setState({...state,
+            results: {...state.results,
+                accounts: state.results.accounts.concat(accounts),
+            },
+            accountOffset: state.accountOffset + FETCH_LIMIT,
+        });
+    };
+
+    const _handleShowMoreHashtags = async () => {
+        const { hashtags } = await requests.fetchSearchResults(
+            state.instance,
+            state.accessToken,
+            {
+                q: state.query,
+                type: "hashtags",
+                offset: state.hashtagOffset,
+                limit: FETCH_LIMIT,
+            }
+        );
+
+        setState({...state,
+            results: {...state.results,
+                hashtags: state.results.hashtags.concat(hashtags),
+            },
+            hashtagOffset: state.hashtagOffset + FETCH_LIMIT,
+        });
+    };
+
+    const [ index, setIndex ] = useState(0);
+    const [ routes ] = useState([
+        {
+            key: "accounts",
+            icon: "user",
+        },
+        {
+            key: "hashtags",
+            icon: "hashtag",
+        },
+    ]);
+
+    const AccountRenderer = () => (
+        <AccountListJsx
+            callback = { navCallbackFactory(navigation, "ViewProfile") }
+            onShowMore = { _handleShowMoreAccounts }
+            data = { state.results.accounts }
+            offset = { state.accountOffset } />
+    );
+
+    const HashtagRenderer = () => (
+        <HashtagListJsx
+            callback = { navCallbackFactory(navigation, "ViewHashtag") }
+            onShowMore = { _handleShowMoreHashtags }
+            data = { state.results.hashtags }
+            offset = { state.hashtagOffset } />
+    );
+
+    const renderScene = SceneMap({
+        accounts: AccountRenderer,
+        hashtags: HashtagRenderer,
+    });
+
+    const renderTabBar = (props) => (
+        <TabBar
+            { ...props }
+            indicatorStyle = { styles.tabBar.indicator }
+            activeColor = "#000"
+            inactiveColor = "#888"
+            renderIcon = { renderIcon }
+            style = { styles.tabBar.tab } />
+    );
+
+    const renderIcon = ({ route, color }) => (
+        <FontAwesome
+            name = { route.icon }
+            size = { 24 }
+            color = { color } />
+    );
 
     return (
-        <ScreenWithTrayJsx
+        <>
-              active = "Discover"
+            { state.loaded
-              navigation = { navigation }>
+                ? <ScreenWithTrayJsx
-            <StatusBarSpace />
+                      active = "Discover"
-            <View style = { styles.form }>
+                      statusBarColor = "white"
-                <TextInput
+                      navigation = { navigation }>
-                    style = { styles.searchBar }
+                    <View style = { styles.form.container }>
-                    placeholder = "Search..."
+                        <TextInput
-                    autoFocus
+                            style = { styles.form.input }
-                    onChangeText = { q => setState({query: q}) }
+                            placeholder = "Search..."
-                    onBlur = {
+                            autoFocus
-                        () => {
+                            onChangeText = {
-                            if (state.query == "") {
+                                q => setState({ ...state, query: q })
-                                navigation.navigate("Discover");
                             }
-                        }
+                            onBlur = {
+                                () => {
+                                    if (state.query == "") {
+                                        navigation.navigate("Discover");
+                                    }
+                                }
+                            }
+                            value = { state.query } />
+                        <TouchableOpacity
+                              onPress = { _handleSearch }
+                              style = { styles.form.submit }>
+                            <FontAwesome name="search" size={24} color="black" />
+                        </TouchableOpacity>
+                    </View>
+                    { state.results
+                        ? <TabView
+                            navigationState = { { index, routes } }
+                            renderScene = { renderScene }
+                            renderTabBar =  { renderTabBar }
+                            onIndexChange = { setIndex }
+                            initialLayout = { { width: SCREEN_WIDTH } } />
+                        : <></>
                     }
-                    value = { state.query } />
+                </ScreenWithTrayJsx>
-            </View>
+                : <></>
-            { state.query == "" ?
-                <View></View>
-                : <View>
-                        <Text style = { styles.label }>Accounts</Text>
-                        <AccountsListJsx
-                            data = { TEST_ACCOUNTS }
-                            callback = { accountCallback } />
-                        <Text style = { styles.label }>Hashtags</Text>
-                        <HashtagListJsx
-                            data = { TEST_HASHTAGS }
-                            callback = { hashtagCallback } />
-                </View>
             }
-        </ScreenWithTrayJsx>
+        </>
     );
 };
 
 const SearchItemJsx = (props) => {
     return (
-        <TouchableWithoutFeedback
+        <TouchableOpacity
-             onPress = { () => props.callback(props.params) }>
+             onPress = { () => props.callback(props.navParams) }>
             <View style = { styles.searchResultContainer }>
                 <Image
                     style = { styles.thumbnail }
@@ -99,31 +216,46 @@ const SearchItemJsx = (props) => {
                     { props.children }
                 </View>
             </View>
-        </TouchableWithoutFeedback>
+        </TouchableOpacity>
     );
 };
 
-const AccountsListJsx = (props) => {
+const AccountListJsx = (props) => {
     return (
         <View style = { styles.searchList }>
-            {
+            <>
-                props.data.map(item => {
+                {
-                    return (
+                    props.data.map(item => {
-                        <SearchItemJsx
+                        return (
-                             key = { item.id }
+                            <SearchItemJsx
-                             thumbnail = { { uri: item.avatar } }
+                                 key = { item.id }
-                             callback = { props.callback }
+                                 thumbnail = { { uri: item.avatar } }
-                             params = { { acct: item.acct } }>
+                                 callback = { props.callback }
-                            <Text style = { styles.username }>
+                                 navParams = { { profile: item } }>
-                                { item.username }
+                                <Text style = { styles.username }>
-                            </Text>
+                                    { item.acct }
-                            <Text style = { styles.displayName }>
+                                </Text>
-                                { item.display_name }
+                                <Text style = { styles.displayName }>
-                            </Text>
+                                    { item.display_name }
-                        </SearchItemJsx>
+                                </Text>
-                    );
+                            </SearchItemJsx>
-                })
+                        );
-            }
+                    })
+                }
+            </>
+            <>
+                { props.data.length == props.offset
+                    ? <View style = { styles.showMore.container }>
+                        <TouchableOpacity
+                                onPress = { props.onShowMore }>
+                            <View style = { styles.showMore.button }>
+                                <Text>Show more?</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                    : <></>
+                }
+            </>
         </View>
     );
 };
@@ -131,36 +263,58 @@ const AccountsListJsx = (props) => {
 const HashtagListJsx = (props) => {
     return (
         <View style = { styles.searchList }>
-            {
+            <>
-                props.data.map(item => {
+                {
-                    return (
+                    props.data.map((item, i) => {
-                        <SearchItemJsx
+                        return (
-                             key = { item.id }
+                            <SearchItemJsx
-                             thumbnail = { require("assets/hashtag.png") }
+                                 key = { i }
-                             callback = { props.callback }
+                                 thumbnail = { require("assets/hashtag.png") }
-                             params = { { name: item.name } }>
+                                 callback = { props.callback }
-                            <Text style = { styles.username }>
+                                 navParams = { { hashtag: item } }>
-                                #{ item.name }
+                                <Text style = { styles.username }>
-                            </Text>
+                                    #{ item.name }
-                        </SearchItemJsx>
+                                </Text>
-                    );
+                            </SearchItemJsx>
-                })
+                        );
-            }
+                    })
+                }
+            </>
+            <>
+                { props.data.length == props.offset
+                    ? <View style = { styles.showMore.container }>
+                        <TouchableOpacity
+                                onPress = { props.onShowMore }>
+                            <View style = { styles.showMore.button }>
+                                <Text>Show more?</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                    :<></>
+                }
+            </>
         </View>
     );
 }
 
+const SCREEN_WIDTH = Dimensions.get("window").width;
 const styles = {
     form: {
-        display: "flex",
+        container: {
-        justifyContent: "center",
+            flexDirection: "row",
-        backgroundColor: "white",
+            justifyContent: "center",
-        padding: 20
+            backgroundColor: "white",
-    },
+            padding: 20,
-    searchBar: {
+        },
-        padding: 10,
+        input: {
-        fontSize: 17,
+            flexGrow: 1,
-        color: "#888"
+            padding: 10,
+            fontSize: 17,
+            color: "#888"
+        },
+        submit: {
+            padding: 20,
+        }
     },
     label: {
         padding: 10,
@@ -184,7 +338,25 @@ const styles = {
         height: 50,
         borderRadius: 25,
         marginRight: 10,
-    }
+    },
+    showMore: {
+        container: {
+            justifyContent: "center",
+            alignItems: "center"
+        },
+        button: {
+            borderWidth: 1,
+            borderColor: "#888",
+            borderRadius: 5,
+            padding: 10,
+            margin: 20
+        },
+    },
+
+    tabBar: {
+        indicator: { backgroundColor: "black" },
+        tab: { backgroundColor: "white" },
+    },
 }
 
 export default SearchJsx;

src/components/pages/profile.js

@@ -71,29 +71,22 @@ const ViewProfileJsx = ({navigation}) => {
             .multiGet(["@user_profile", "@user_instance", "@user_token"])
             .then(([ ownProfilePair, ownDomainPair, tokenPair ]) => {
                 ownProfile = JSON.parse(ownProfilePair[1]);
-                ownDomain = ownDomainPair[1];
+                instance = ownDomainPair[1];
                 accessToken = JSON.parse(tokenPair[1]).access_token;
 
-                const parsedAcct = state.profile.acct.split("@");
-                domain = parsedAcct.length == 1
-                    ? ownDomain // There's no @ in the acct, thus it's a local user
-                    : parsedAcct [1] // The part of profile.acct after the @
-
                 return Promise.all([
                     requests.fetchFollowing(
-                        ownDomain,
+                        instance,
                         ownProfile.id,
                         accessToken
                     ),
                     requests.fetchFollowers(
-                        domain,
+                        instance,
                         state.profile.id,
                         accessToken
                     ),
                     requests.fetchAccountStatuses(
-                        // NOTE: Should be fetched from remote instance if
+                        instance,
-                        // necessary Thus, we use domain and not ownDomain
-                        domain,
                         state.profile.id,
                         accessToken
                     )

src/requests.js

@@ -55,7 +55,7 @@ export async function postForm(url, data, token = false) {
 export async function get(url, token = false, data = false) {
     let completeURL;
     if (data) {
-        let params = new URLSearchParams(data)
+        let params = new URLSearchParams(data);
         completeURL = `${url}?${params.toString()}`;
     } else {
         completeURL = url;
@@ -113,3 +113,12 @@ export async function fetchPublicTimeline(domain, token, params = false) {
     );
     return resp.json();
 }
+
+export async function fetchSearchResults(domain, token, params) {
+    const resp = await get(
+        `https://${domain}/api/v2/search`,
+        token,
+        params
+    );
+    return resp.json();
+}