martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

optimizing conversation load

Browse Source
This commit is contained in:
balzack 2023-03-02 23:55:36 -08:00
parent 65c0afb313
commit 74305a0994
8 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/mobile/src/api/getChannelTopics.js
View File

@ -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}`

2
app/mobile/src/context/useChannelContext.hook.js
View File

@ -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) => {

28
app/mobile/src/context/useConversationContext.hook.js
View File

@ -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
}

2
app/mobile/src/context/useStoreContext.hook.js
View File

@ -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({});

39
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -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: () => (
<View style={styles.title}>
<Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
{ state.loaded && (
<Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
)}
</View>
),
headerRight: () => (
@ -64,7 +66,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
<View style={styles.container}>
{ !navigation && (
<View style={styles.header}>
{ ready && (
{ state.loaded && (
<TouchableOpacity style={styles.headertitle} onPress={openDetails}>
<Logo src={state.logo} width={32} height={32} radius={2} />
<Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
@ -78,18 +80,25 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
)}
<View style={styles.thread}>
<View style={styles.messages}>
<FlatList style={styles.conversation}
contentContainerStyle={styles.topics}
data={state.topics}
inverted={true}
initialNumToRender={16}
renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus}
focus={() => 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 && (
<View style={styles.loading}>
<ActivityIndicator color={Colors.grey} size="large" />
</View>
)}
{ state.loaded && (
<FlatList style={styles.conversation}
contentContainerStyle={styles.topics}
data={state.topics}
inverted={true}
initialNumToRender={16}
renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus}
focus={() => 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}
/>
)}
</View>
<AddTopic />
</View>

6
app/mobile/src/session/conversation/Conversation.styled.js
View File

@ -61,5 +61,11 @@ export const styles = StyleSheet.create({
flexGrow: 1,
flexShrink: 1,
},
loading: {
display: 'flex',
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

1
app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
View File

@ -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;

5
app/mobile/src/session/conversation/useConversation.hook.js
View File

@ -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]);