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

merging back refactored topic update

Browse Source
This commit is contained in:
balzack 2023-03-03 16:36:11 -08:00
parent 49f23be418
commit ace042bf0c
7 changed files with 158 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { useRef, useEffect, useState, useContext } from 'react';
import { ActivityIndicator, FlatList, View, Text, TouchableOpacity } from 'react-native';
import { Alert, Modal, KeyboardAvoidingView, ActivityIndicator, FlatList, View, TextInput, Text, TouchableOpacity } from 'react-native';
import { ConversationContext } from 'context/ConversationContext';
import { useConversation } from './useConversation.hook';
import { styles } from './Conversation.styled';
@ -11,17 +11,7 @@ import { TopicItem } from './topicItem/TopicItem';
export function Conversation({ navigation, cardId, channelId, closeConversation, openDetails }) {
const [ready, setReady] = useState(true);
const conversation = useContext(ConversationContext);
const { state, actions } = useConversation();
const ref = useRef();
const latch = () => {
if (!state.momentum) {
actions.latch();
ref.current.scrollToIndex({ animated: true, index: 0 });
}
}
const updateTopic = async () => {
try {
@ -106,6 +96,36 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
</View>
<AddTopic contentKey={state.contentKey} />
</View>
<Modal
animationType="fade"
transparent={true}
visible={state.editing}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideEdit}
>
<KeyboardAvoidingView behavior="height" style={styles.modal}>
<View style={styles.editContainer}>
<Text style={styles.editHeader}>Edit Message Text:</Text>
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editMessage} onChangeText={actions.setEditMessage}
autoCapitalize="sentences" placeholder="Message Text" multiline={true} />
</View>
<View style={styles.editControls}>
<TouchableOpacity style={styles.cancel} onPress={actions.hideEdit}>
<Text>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.save} onPress={updateTopic}>
{ state.updateBusy && (
<ActivityIndicator size="small" color={Colors.white} />
)}
{ !state.updateBusy && (
<Text style={styles.saveText}>Save</Text>
)}
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
</View>
);
}

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

@ -87,5 +87,74 @@ export const styles = StyleSheet.create({
minHeight: 0,
paddingTop: 8,
},
save: {
borderRadius: 4,
backgroundColor: Colors.primary,
width: 72,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
saveText: {
color: Colors.white,
},
cancel: {
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 4,
padding: 8,
marginRight: 8,
width: 72,
display: 'flex',
alignItems: 'center',
},
inputField: {
width: '100%',
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 4,
padding: 8,
marginBottom: 8,
maxHeight: 92,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
input: {
fontSize: 14,
flexGrow: 1,
},
editControls: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
},
editWrapper: {
display: 'flex',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(52, 52, 52, 0.8)'
},
editContainer: {
backgroundColor: Colors.formBackground,
padding: 16,
width: '80%',
maxWidth: 400,
},
editHeader: {
fontSize: 18,
paddingBottom: 16,
},
modal: {
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.9)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
});

2
app/mobile/src/session/conversation/topicItem/TopicItem.jsx
View File

@ -179,7 +179,7 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
{ focused && (
<View style={styles.focused}>
{ state.editable && (
<TouchableOpacity style={styles.icon} onPress={() => update(item.topicId, state.editData)}>
<TouchableOpacity style={styles.icon} onPress={() => update(item.topicId, state.editType, state.editData)}>
<AntIcons name="edit" size={24} color={Colors.white} />
</TouchableOpacity>
)}

2
app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
View File

@ -30,8 +30,10 @@ export function AudioAsset({ topicId, asset, dismiss }) {
<TouchableOpacity style={styles.close} onPress={dismiss}>
<Icons name="window-close" size={32} color={Colors.text} />
</TouchableOpacity>
{ state.url && (
<Video ref={player} source={{ uri: state.url }} isLooping={true}
paused={!state.playing} onLoad={actions.loaded} style={styles.player} />
)}
</View>
);
}

10
app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View File

@ -14,21 +14,21 @@ export function ImageAsset({ topicId, asset, dismiss }) {
style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
)}
{ state.controls && (
{ state.loaded && state.controls && (
<TouchableOpacity style={styles.close} onPress={dismiss}>
<Ionicons name={'close'} size={32} color={Colors.white} />
</TouchableOpacity>
)}
{ state.failed && (
<View style={styles.loading}>
<TouchableOpacity style={styles.loading} onPress={dismiss}>
<ActivityIndicator color={Colors.alert} size="large" />
</View>
</TouchableOpacity>
)}
{ !state.loaded && !state.failed && (
<View style={styles.loading}>
<TouchableOpacity style={styles.loading} onPress={dismiss}>
<ActivityIndicator color={Colors.white} size="large" />
</View>
</TouchableOpacity>
)}
</TouchableOpacity>
);

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

@ -177,7 +177,7 @@ export function useTopicItem(item, hosting, remove, contentKey) {
const editable = guid === identity?.guid && parsed;
const deletable = editable || hosting;
updateState({ logo, name, nameSet, known, sealed, message, fontSize, fontColor, timestamp, transform, status, assets, deletable, editable, editData: parsed, editMessage: message });
updateState({ logo, name, nameSet, known, sealed, message, fontSize, fontColor, timestamp, transform, status, assets, deletable, editable, editData: parsed, editMessage: message, editType: dataType });
}, [conversation.state, card.state, account.state, item, contentKey]);
const unsealTopic = async (topicId, revision, topicDetail) => {

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

@ -4,7 +4,7 @@ import { CardContext } from 'context/CardContext';
import { AccountContext } from 'context/AccountContext';
import { ConversationContext } from 'context/ConversationContext';
import { getChannelSubjectLogo } from 'context/channelUtil';
import { getChannelSeals, isUnsealed, getContentKey, decryptTopicSubject } from 'context/sealUtil';
import { getChannelSeals, isUnsealed, getContentKey, encryptTopicSubject, decryptTopicSubject } from 'context/sealUtil';
export function useConversation() {
const [state, setState] = useState({
@ -13,6 +13,13 @@ export function useConversation() {
topic: [],
loaded: false,
contentKey: null,
focus: null,
editing: false,
editTopicId: null,
editType: null,
editMessage: null,
editData: null,
updateBusy: false,
});
const updateState = (value) => {
@ -87,7 +94,45 @@ export function useConversation() {
}, [conversation.state, profile.state]);
const actions = {};
const actions = {
setFocus: (focus) => {
updateState({ focus });
},
editTopic: async (topicId, type, data) => {
console.log("EDIT:", topicId, type, data);
updateState({ editing: true, editTopicId: topicId, editType: type, editMessage: data?.text, editData: data });
},
hideEdit: () => {
updateState({ editing: false });
},
setEditMessage: (editMessage) => {
updateState({ editMessage });
},
updateTopic: async () => {
if (!state.updateBusy) {
try {
updateState({ updateBusy: true });
const message = { ...state.editData, text: state.editMessage };
if (state.editType === 'superbasictopic') {
await conversation.actions.setTopicSubject(state.editTopicId, state.editType, message);
}
else {
const sealed = encryptTopicSubject({ message }, state.contentKey);
await conversation.actions.setTopicSubject(state.editTopicId, state.editType, sealed);
}
updateState({ updateBusy: false });
}
catch(err) {
console.log(err);
updateState({ updateBusy: false });
throw new Error("failed to update");
}
}
},
removeTopic: async (topicId) => {
await conversation.actions.removeTopic(topicId);
},
};
return { state, actions };
}