From 74305a0994f1e0dfce48c0759e76144c4a787a75 Mon Sep 17 00:00:00 2001 From: balzack Date: Thu, 2 Mar 2023 23:55:36 -0800 Subject: [PATCH] optimizing conversation load --- app/mobile/src/api/getChannelTopics.js | 1 + .../src/context/useChannelContext.hook.js | 2 +- .../context/useConversationContext.hook.js | 28 ++++++++----- .../src/context/useStoreContext.hook.js | 2 +- .../src/session/conversation/Conversation.jsx | 39 ++++++++++++------- .../conversation/Conversation.styled.js | 6 +++ .../topicItem/useTopicItem.hook.js | 1 + .../conversation/useConversation.hook.js | 5 ++- 8 files changed, 56 insertions(+), 28 deletions(-) diff --git a/app/mobile/src/api/getChannelTopics.js b/app/mobile/src/api/getChannelTopics.js index ba9c5a2f..f5f2e0b4 100644 --- a/app/mobile/src/api/getChannelTopics.js +++ b/app/mobile/src/api/getChannelTopics.js @@ -1,6 +1,7 @@ import { checkResponse, fetchWithTimeout } from './fetchUtil'; export async function getChannelTopics(server, token, channelId, revision, count, begin, end) { + let rev = '' if (revision != null) { rev = `&revision=${revision}` diff --git a/app/mobile/src/context/useChannelContext.hook.js b/app/mobile/src/context/useChannelContext.hook.js index e2da65bf..c1056846 100644 --- a/app/mobile/src/context/useChannelContext.hook.js +++ b/app/mobile/src/context/useChannelContext.hook.js @@ -230,7 +230,7 @@ export function useChannelContext() { }, setMarkerAndSync: async (channelId, marker, revision) => { const { guid } = access.current; - await store.actions.setChannelItemMarkerAndSync(guid, channelId, revision); + await store.actions.setChannelItemMarkerAndSync(guid, channelId, marker, revision); setChannelField(channelId, 'topicMarker', marker, 'syncRevision', revision); }, setChannelFlag: async (channelId) => { diff --git a/app/mobile/src/context/useConversationContext.hook.js b/app/mobile/src/context/useConversationContext.hook.js index c4d3da0b..c9712b67 100644 --- a/app/mobile/src/context/useConversationContext.hook.js +++ b/app/mobile/src/context/useConversationContext.hook.js @@ -10,6 +10,7 @@ export function useConversationContext() { const COUNT = 64; const [state, setState] = useState({ + loaded: false, offsync: false, topics: new Map(), card: null, @@ -51,9 +52,7 @@ export function useConversationContext() { reset.current = false; loaded.current = false; topics.current = new Map(); - if (!conversation) { - updateState({ offsync: false, topics: topics.current, card: null, channel: null }); - } + updateState({ loaded: false, offsync: false, topics: topics.current, card: null, channel: null }); } if (conversation) { @@ -68,13 +67,15 @@ export function useConversationContext() { for (let topic of topicItems) { topics.current.set(topic.topicId, topic); } - updateState({ offsync: false, topics: topics.current, card: cardValue, channel: channelValue }); const { syncRevision, topicMarker } = channelValue; curSyncRevision.current = syncRevision; curTopicMarker.current = topicMarker; loaded.current = true; } + else { + setChannel = true; + } } else { console.log("failed to load conversation"); @@ -86,27 +87,34 @@ export function useConversationContext() { if (!curTopicMarker.current) { const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, null); await setTopicDelta(cardId, channelId, delta.topics); - await setMarkerAndSync(cardId, channelId, delta.marker, topicRevision); + await setMarkerAndSync(cardId, channelId, delta.marker, delta.revision); curTopicMarker.current = delta.marker; - curSyncRevision.current = topicRevision; + curSyncRevision.current = delta.revision; + updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue }); } - if (loadMore && marker) { + else if (loadMore && marker) { const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, curTopicMarker.current); await setTopicDelta(cardId, channelId, delta.topics); await setTopicMarker(cardId, channelId, delta.marker); curTopicMarker.current = delta.marker; + updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue }); } - if (ignoreRevision || topicRevision > curSyncRevision.current) { + else if (ignoreRevision || topicRevision > curSyncRevision.current) { const delta = await getTopicDelta(cardId, channelId, curSyncRevision.current, null, curTopicMarker.current, null); await setTopicDelta(cardId, channelId, delta.topics); await setSyncRevision(cardId, channelId, delta.revision); curSyncRevision.current = delta.revision; + updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue }); + +console.log("HEADER", delta); + } + else { + updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue }); } - updateState({ offsync: false, topics: topics.current, card: cardValue, channel: channelValue }); } catch(err) { console.log(err); - updateState({ offysnc: true }); + updateState({ loaded: true, offysnc: true }); syncing.current = false; return } diff --git a/app/mobile/src/context/useStoreContext.hook.js b/app/mobile/src/context/useStoreContext.hook.js index 5c62e707..a66dbfa9 100644 --- a/app/mobile/src/context/useStoreContext.hook.js +++ b/app/mobile/src/context/useStoreContext.hook.js @@ -1,7 +1,7 @@ import { useEffect, useState, useRef, useContext } from 'react'; import SQLite from "react-native-sqlite-storage"; -const DATABAG_DB = 'db_v_116.db'; +const DATABAG_DB = 'db_v_123.db'; export function useStoreContext() { const [state, setState] = useState({}); diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx index 6f226433..cca13115 100644 --- a/app/mobile/src/session/conversation/Conversation.jsx +++ b/app/mobile/src/session/conversation/Conversation.jsx @@ -1,5 +1,5 @@ import { useRef, useEffect, useState, useContext } from 'react'; -import { FlatList, View, Text, TouchableOpacity } from 'react-native'; +import { ActivityIndicator, FlatList, View, Text, TouchableOpacity } from 'react-native'; import { ConversationContext } from 'context/ConversationContext'; import { useConversation } from './useConversation.hook'; import { styles } from './Conversation.styled'; @@ -44,7 +44,9 @@ export function Conversation({ navigation, cardId, channelId, closeConversation, navigation.setOptions({ headerTitle: () => ( - { state.subject } + { state.loaded && ( + { state.subject } + )} ), headerRight: () => ( @@ -64,7 +66,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation, { !navigation && ( - { ready && ( + { state.loaded && ( { state.subject } @@ -78,18 +80,25 @@ export function Conversation({ navigation, cardId, channelId, closeConversation, )} - actions.setFocus(item.topicId)} hosting={state.host == null} - sealed={state.sealed} sealKey={state.sealKey} - remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} - report={actions.reportTopic} />} - keyExtractor={item => item.topicId} - /> + { !state.loaded && ( + + + + )} + { state.loaded && ( + actions.setFocus(item.topicId)} hosting={state.host == null} + sealed={state.sealed} sealKey={state.sealKey} + remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} + report={actions.reportTopic} />} + keyExtractor={item => item.topicId} + /> + )} diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js index c857305b..18b595a6 100644 --- a/app/mobile/src/session/conversation/Conversation.styled.js +++ b/app/mobile/src/session/conversation/Conversation.styled.js @@ -61,5 +61,11 @@ export const styles = StyleSheet.create({ flexGrow: 1, flexShrink: 1, }, + loading: { + display: 'flex', + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + }, }); diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js index 9165ca1f..c1029ca2 100644 --- a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js +++ b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js @@ -166,6 +166,7 @@ export function useTopicItem(item, hosting, remove, contentKey) { const unsealTopic = async (topicId, revision, topicDetail) => { try { +console.log("UNSEAL", topicId); const channelDetail = conversation.state.channel?.detail; const seals = getChannelSeals(channelDetail?.data); const sealKey = account.state.sealKey; diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js index 26cfefb6..7c6abd6d 100644 --- a/app/mobile/src/session/conversation/useConversation.hook.js +++ b/app/mobile/src/session/conversation/useConversation.hook.js @@ -9,6 +9,8 @@ export function useConversation() { const [state, setState] = useState({ subject: null, logo: null, + topic: [], + loaded: false, }); const updateState = (value) => { @@ -21,6 +23,7 @@ export function useConversation() { const account = useContext(AccountContext); useEffect(() => { + const loaded = conversation.state.loaded; const cardId = conversation.state.card?.cardId; const profileGuid = profile.state.identity?.guid; const channel = conversation.state.channel; @@ -42,7 +45,7 @@ export function useConversation() { }); const filtered = sorted.filter(item => !(item.blocked === 1)); - updateState({ logo, subject, topics: filtered }); + updateState({ loaded, logo, subject, topics: filtered }); }, [conversation.state, profile.state]);