fixing disconnected indicator

This commit is contained in:
Roland Osborne 2022-10-19 11:15:01 -07:00
parent fc53b9e7c9
commit 83869c7e5e
3 changed files with 26 additions and 13 deletions

View File

@ -21,6 +21,7 @@ export function useAppContext() {
const profile = useContext(ProfileContext);
const card = useContext(CardContext);
const channel = useContext(ChannelContext);
const count = useRef(0);
const ws = useRef(null);
@ -101,14 +102,17 @@ export function useAppContext() {
catch(err) {
console.log(err);
}
updateState({ disconnected: 0 });
count.current = 0;
updateState({ disconnected: count.current });
}
catch (err) {
console.log(err);
}
}
ws.current.onclose = (e) => {
updateState({ disconnected: state.disconnected + 1 });
count.current += 1;
console.log("CURRENT1: ", count.current);
updateState({ disconnected: count.current });
console.log(e)
setTimeout(() => {
if (ws.current != null) {
@ -124,7 +128,9 @@ export function useAppContext() {
ws.current.send(JSON.stringify({ AppToken: token }))
}
ws.current.error = (e) => {
updateState({ disconnected: state.disconnected + 1 });
count.current += 1;
console.log("CURRENT2: ", count.current);
updateState({ disconnected: count.current });
console.log(e)
}
}

View File

@ -8,8 +8,14 @@ export function ImageAsset({ topicId, asset, dismiss }) {
return (
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={dismiss}>
<Image source={{ uri: state.url }} onLoad={actions.loaded} style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
{ !state.loaded && (
<Image source={{ uri: state.url }} onLoad={actions.loaded} onError={actions.failed}
style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
{ state.failed && (
<View style={styles.loading}>
<ActivityIndicator color={Colors.alert} size="large" />
</View>
)}
{ !state.loaded && !state.failed && (
<View style={styles.loading}>
<ActivityIndicator color={Colors.white} size="large" />
</View>

View File

@ -13,6 +13,7 @@ export function useImageAsset(topicId, asset) {
imageHeight: 1,
url: null,
loaded: false,
failed: false,
});
const conversation = useContext(ConversationContext);
@ -44,17 +45,17 @@ export function useImageAsset(topicId, asset) {
useEffect(() => {
const url = conversation.actions.getTopicAssetUrl(topicId, asset.full);
if (url) {
Image.getSize(url, (width, height) => {
updateState({ url, imageRatio: width / height });
});
}
updateState({ url });
}, [topicId, conversation, asset]);
const actions = {
loaded: () => {
updateState({ loaded: true });
}
loaded: (e) => {
const { width, height } = e.nativeEvent.source;
updateState({ loaded: true, imageRatio: width / height });
},
failed: () => {
updateState({ failed: true });
},
};
return { state, actions };