martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-15 04:59:16 +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'; import { checkResponse, fetchWithTimeout } from './fetchUtil';
export async function getChannelTopics(server, token, channelId, revision, count, begin, end) { export async function getChannelTopics(server, token, channelId, revision, count, begin, end) {
let rev = '' let rev = ''
if (revision != null) { if (revision != null) {
rev = `&revision=${revision}` 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) => { setMarkerAndSync: async (channelId, marker, revision) => {
const { guid } = access.current; 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); setChannelField(channelId, 'topicMarker', marker, 'syncRevision', revision);
}, },
setChannelFlag: async (channelId) => { setChannelFlag: async (channelId) => {

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

@ -10,6 +10,7 @@ export function useConversationContext() {
const COUNT = 64; const COUNT = 64;
const [state, setState] = useState({ const [state, setState] = useState({
loaded: false,
offsync: false, offsync: false,
topics: new Map(), topics: new Map(),
card: null, card: null,
@ -51,9 +52,7 @@ export function useConversationContext() {
reset.current = false; reset.current = false;
loaded.current = false; loaded.current = false;
topics.current = new Map(); topics.current = new Map();
if (!conversation) { updateState({ loaded: false, offsync: false, topics: topics.current, card: null, channel: null });
updateState({ offsync: false, topics: topics.current, card: null, channel: null });
}
} }
if (conversation) { if (conversation) {
@ -68,13 +67,15 @@ export function useConversationContext() {
for (let topic of topicItems) { for (let topic of topicItems) {
topics.current.set(topic.topicId, topic); topics.current.set(topic.topicId, topic);
} }
updateState({ offsync: false, topics: topics.current, card: cardValue, channel: channelValue });
const { syncRevision, topicMarker } = channelValue; const { syncRevision, topicMarker } = channelValue;
curSyncRevision.current = syncRevision; curSyncRevision.current = syncRevision;
curTopicMarker.current = topicMarker; curTopicMarker.current = topicMarker;
loaded.current = true; loaded.current = true;
} }
else {
setChannel = true;
}
} }
else { else {
console.log("failed to load conversation"); console.log("failed to load conversation");
@ -86,27 +87,34 @@ export function useConversationContext() {
if (!curTopicMarker.current) { if (!curTopicMarker.current) {
const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, null); const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, null);
await setTopicDelta(cardId, channelId, delta.topics); 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; 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); const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, curTopicMarker.current);
await setTopicDelta(cardId, channelId, delta.topics); await setTopicDelta(cardId, channelId, delta.topics);
await setTopicMarker(cardId, channelId, delta.marker); await setTopicMarker(cardId, channelId, delta.marker);
curTopicMarker.current = 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); const delta = await getTopicDelta(cardId, channelId, curSyncRevision.current, null, curTopicMarker.current, null);
await setTopicDelta(cardId, channelId, delta.topics); await setTopicDelta(cardId, channelId, delta.topics);
await setSyncRevision(cardId, channelId, delta.revision); await setSyncRevision(cardId, channelId, delta.revision);
curSyncRevision.current = 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) { catch(err) {
console.log(err); console.log(err);
updateState({ offysnc: true }); updateState({ loaded: true, offysnc: true });
syncing.current = false; syncing.current = false;
return return
} }

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

@ -1,7 +1,7 @@
import { useEffect, useState, useRef, useContext } from 'react'; import { useEffect, useState, useRef, useContext } from 'react';
import SQLite from "react-native-sqlite-storage"; import SQLite from "react-native-sqlite-storage";
const DATABAG_DB = 'db_v_116.db'; const DATABAG_DB = 'db_v_123.db';
export function useStoreContext() { export function useStoreContext() {
const [state, setState] = useState({}); const [state, setState] = useState({});

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

@ -1,5 +1,5 @@
import { useRef, useEffect, useState, useContext } from 'react'; 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 { ConversationContext } from 'context/ConversationContext';
import { useConversation } from './useConversation.hook'; import { useConversation } from './useConversation.hook';
import { styles } from './Conversation.styled'; import { styles } from './Conversation.styled';
@ -44,7 +44,9 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
navigation.setOptions({ navigation.setOptions({
headerTitle: () => ( headerTitle: () => (
<View style={styles.title}> <View style={styles.title}>
{ state.loaded && (
<Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text> <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
)}
</View> </View>
), ),
headerRight: () => ( headerRight: () => (
@ -64,7 +66,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
<View style={styles.container}> <View style={styles.container}>
{ !navigation && ( { !navigation && (
<View style={styles.header}> <View style={styles.header}>
{ ready && ( { state.loaded && (
<TouchableOpacity style={styles.headertitle} onPress={openDetails}> <TouchableOpacity style={styles.headertitle} onPress={openDetails}>
<Logo src={state.logo} width={32} height={32} radius={2} /> <Logo src={state.logo} width={32} height={32} radius={2} />
<Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text> <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
@ -78,6 +80,12 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
)} )}
<View style={styles.thread}> <View style={styles.thread}>
<View style={styles.messages}> <View style={styles.messages}>
{ !state.loaded && (
<View style={styles.loading}>
<ActivityIndicator color={Colors.grey} size="large" />
</View>
)}
{ state.loaded && (
<FlatList style={styles.conversation} <FlatList style={styles.conversation}
contentContainerStyle={styles.topics} contentContainerStyle={styles.topics}
data={state.topics} data={state.topics}
@ -90,6 +98,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
report={actions.reportTopic} />} report={actions.reportTopic} />}
keyExtractor={item => item.topicId} keyExtractor={item => item.topicId}
/> />
)}
</View> </View>
<AddTopic /> <AddTopic />
</View> </View>

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

@ -61,5 +61,11 @@ export const styles = StyleSheet.create({
flexGrow: 1, flexGrow: 1,
flexShrink: 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) => { const unsealTopic = async (topicId, revision, topicDetail) => {
try { try {
console.log("UNSEAL", topicId);
const channelDetail = conversation.state.channel?.detail; const channelDetail = conversation.state.channel?.detail;
const seals = getChannelSeals(channelDetail?.data); const seals = getChannelSeals(channelDetail?.data);
const sealKey = account.state.sealKey; 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({ const [state, setState] = useState({
subject: null, subject: null,
logo: null, logo: null,
topic: [],
loaded: false,
}); });
const updateState = (value) => { const updateState = (value) => {
@ -21,6 +23,7 @@ export function useConversation() {
const account = useContext(AccountContext); const account = useContext(AccountContext);
useEffect(() => { useEffect(() => {
const loaded = conversation.state.loaded;
const cardId = conversation.state.card?.cardId; const cardId = conversation.state.card?.cardId;
const profileGuid = profile.state.identity?.guid; const profileGuid = profile.state.identity?.guid;
const channel = conversation.state.channel; const channel = conversation.state.channel;
@ -42,7 +45,7 @@ export function useConversation() {
}); });
const filtered = sorted.filter(item => !(item.blocked === 1)); const filtered = sorted.filter(item => !(item.blocked === 1));
updateState({ logo, subject, topics: filtered }); updateState({ loaded, logo, subject, topics: filtered });
}, [conversation.state, profile.state]); }, [conversation.state, profile.state]);