adding detail activity indicator

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

View File

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

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 { useDetails } from './useDetails.hook';
import { Logo } from 'utils/Logo';
@ -145,16 +145,31 @@ export function Details({ channel, clearConversation }) {
<View style={styles.controls}>
{ !state.hostId && (
<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>
)}
{ state.hostId && (
<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 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>
{ state.hostId && (
<TouchableOpacity style={styles.button} onPress={report}>

View File

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

View File

@ -26,6 +26,8 @@ export function useDetails() {
count: 0,
seals: null,
sealKey: null,
deleteBusy: false,
blockBusy: false,
});
const card = useContext(CardContext);
@ -139,10 +141,32 @@ export function useDetails() {
}
},
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() => {
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() => {
await conversation.actions.addChannelAlert();