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

adding detail activity indicator

Browse Source
This commit is contained in:
balzack 2023-03-01 09:49:19 -08:00
parent a86d84de33
commit 1e4f1cf819
4 changed files with 54 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/mobile/src/session/channels/Channels.jsx
View File

@ -124,7 +124,9 @@ export function Channels({ cardId, channelId, navigation, openConversation }) {
{ state.busy && ( { state.busy && (
<ActivityIndicator color={Colors.white} /> <ActivityIndicator color={Colors.white} />
)} )}
<Text style={styles.saveText}>Create</Text> { !state.busy && (
<Text style={styles.saveText}>Create</Text>
)}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>

23
app/mobile/src/session/details/Details.jsx
View File

@ -1,4 +1,4 @@
import { KeyboardAvoidingView, FlatList, Alert, Modal, View, Text, Switch, TouchableOpacity, TextInput } from 'react-native'; import { ActivityIndicator, KeyboardAvoidingView, FlatList, Alert, Modal, View, Text, Switch, TouchableOpacity, TextInput } from 'react-native';
import { styles } from './Details.styled'; import { styles } from './Details.styled';
import { useDetails } from './useDetails.hook'; import { useDetails } from './useDetails.hook';
import { Logo } from 'utils/Logo'; import { Logo } from 'utils/Logo';
@ -145,16 +145,31 @@ export function Details({ channel, clearConversation }) {
<View style={styles.controls}> <View style={styles.controls}>
{ !state.hostId && ( { !state.hostId && (
<TouchableOpacity style={styles.button} onPress={remove}> <TouchableOpacity style={styles.button} onPress={remove}>
<Text style={styles.buttonText}>Delete Topic</Text> { state.deleteBusy && (
<ActivityIndicator color={Colors.white} />
)}
{ !state.deleteBusy && (
<Text style={styles.buttonText}>Delete Topic</Text>
)}
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.hostId && ( { state.hostId && (
<TouchableOpacity style={styles.button} onPress={remove}> <TouchableOpacity style={styles.button} onPress={remove}>
<Text style={styles.buttonText}>Leave Topic</Text> { state.deleteBusy && (
<ActivityIndicator color={Colors.white} />
)}
{ !state.deleteBusy && (
<Text style={styles.buttonText}>Leave Topic</Text>
)}
</TouchableOpacity> </TouchableOpacity>
)} )}
<TouchableOpacity style={styles.button} onPress={block}> <TouchableOpacity style={styles.button} onPress={block}>
<Text style={styles.buttonText}>Block Topic</Text> { state.blockBusy && (
<ActivityIndicator color={Colors.white} />
)}
{ !state.blockBusy && (
<Text style={styles.buttonText}>Block Topic</Text>
)}
</TouchableOpacity> </TouchableOpacity>
{ state.hostId && ( { state.hostId && (
<TouchableOpacity style={styles.button} onPress={report}> <TouchableOpacity style={styles.button} onPress={report}>

8
app/mobile/src/session/details/Details.styled.js
View File

@ -57,14 +57,18 @@ export const styles = StyleSheet.create({
paddingTop: 16, paddingTop: 16,
}, },
button: { button: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: 128, width: 128,
height: 28,
backgroundColor: Colors.primary, backgroundColor: Colors.primary,
borderRadius: 4, borderRadius: 4,
margin: 8, margin: 8,
padding: 2,
}, },
buttonText: { buttonText: {
width: '100%',
textAlign: 'center',
color: Colors.white, color: Colors.white,
padding: 4, padding: 4,
}, },

28
app/mobile/src/session/details/useDetails.hook.js
View File

@ -26,6 +26,8 @@ export function useDetails() {
count: 0, count: 0,
seals: null, seals: null,
sealKey: null, sealKey: null,
deleteBusy: false,
blockBusy: false,
}); });
const card = useContext(CardContext); const card = useContext(CardContext);
@ -139,10 +141,32 @@ export function useDetails() {
} }
}, },
remove: async () => { remove: async () => {
await conversation.actions.removeChannel(); if (!state.deleteBusy) {
try {
updateState({ deleteBusy: true });
await conversation.actions.removeChannel();
updateState({ deleteBusy: false });
}
catch(err) {
console.log(err);
updateState({ deleteBusy: false });
throw new Error("delete failed");
}
}
}, },
block: async() => { block: async() => {
await conversation.actions.setChannelFlag(); if (!state.deleteBusy) {
try {
updateState({ blockBusy: true });
await conversation.actions.setChannelFlag();
updateState({ blockBusy: false });
}
catch(err) {
console.log(err);
updateState({ blockBusy: false });
throw new Error("block failed");
}
}
}, },
report: async() => { report: async() => {
await conversation.actions.addChannelAlert(); await conversation.actions.addChannelAlert();