diff --git a/src/components/pages/direct.js b/src/components/pages/direct.js index ebb5b36..e9db938 100644 --- a/src/components/pages/direct.js +++ b/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, - loaded: true, - conversations: [ - { - id: 1, - unread: true, - accounts: [TEST_ACCOUNT_1], - last_status: TEST_STATUS, - }, - { - id: 2, - unread: false, - accounts: [TEST_ACCOUNT_1, TEST_ACCOUNT_2], - last_status: TEST_STATUS, - } - ], - }); + let instance, accessToken; + AsyncStorage + .multiGet([ + "@user_instance", + "@user_token", + ]) + .then(([instancePair, tokenPair]) => { + instance = instancePair[1]; + accessToken = JSON.parse(tokenPair[1]).access_token; + + return requests.fetchConversations( + instance, + accessToken, + { 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 }) => { - - { - setState({...state, - query: value, - }); + { state.loaded + ? <> + + { + setState({...state, + query: value, + }); + } + }/> + { navigation.navigate("Compose") } }> + + + + <> + { + filterConversations( + state.conversations, + state.query + ).map(renderConversation) } - }/> - { navigation.navigate("Compose") } }> - - - - { state.loaded ? - filterConversations( - state.conversations, - state.query - ).map(renderConversation) + + <> + { state.conversations.length == state.fetchOffset + ? + + + Show more? + + + + : <> + } + + : <> } @@ -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" }, }; diff --git a/src/requests.js b/src/requests.js index e144110..ec1103a 100644 --- a/src/requests.js +++ b/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`,