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 contact controls

Browse Source
This commit is contained in:
Roland Osborne 2022-09-26 12:14:06 -07:00
parent 7e72e68f5a
commit d3782750ea
13 changed files with 342 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/mobile/src/api/addCard.js
View File

@ -1,7 +1,7 @@
import { checkResponse, fetchWithTimeout } from './fetchUtil';
export async function addCard(token, message) {
let card = await fetchWithTimeout(`/contact/cards?agent=${token}`, { method: 'POST', body: JSON.stringify(message)} );
export async function addCard(server, token, message) {
let card = await fetchWithTimeout(`https://${server}/contact/cards?agent=${token}`, { method: 'POST', body: JSON.stringify(message)} );
checkResponse(card);
return await card.json();
}

4
app/mobile/src/api/getCardCloseMessage.js
View File

@ -1,7 +1,7 @@
import { checkResponse, fetchWithTimeout } from './fetchUtil';
export async function getCardCloseMessage(token, cardId) {
let message = await fetchWithTimeout(`/contact/cards/${cardId}/closeMessage?agent=${token}`, { method: 'GET' });
export async function getCardCloseMessage(server, token, cardId) {
let message = await fetchWithTimeout(`https://${server}/contact/cards/${cardId}/closeMessage?agent=${token}`, { method: 'GET' });
checkResponse(message);
return await message.json();
}

4
app/mobile/src/api/getCardOpenMessage.js
View File

@ -1,7 +1,7 @@
import { checkResponse, fetchWithTimeout } from './fetchUtil';
export async function getCardOpenMessage(token, cardId) {
let message = await fetchWithTimeout(`/contact/cards/${cardId}/openMessage?agent=${token}`, { method: 'GET' });
export async function getCardOpenMessage(server, token, cardId) {
let message = await fetchWithTimeout(`https://${server}/contact/cards/${cardId}/openMessage?agent=${token}`, { method: 'GET' });
checkResponse(message);
return await message.json();
}

4
app/mobile/src/api/removeCard.js
View File

@ -1,7 +1,7 @@
import { checkResponse, fetchWithTimeout } from './fetchUtil';
export async function removeCard(token, cardId) {
let card = await fetchWithTimeout(`/contact/cards/${cardId}?agent=${token}`, { method: 'DELETE' } );
export async function removeCard(server, token, cardId) {
let card = await fetchWithTimeout(`https://${server}/contact/cards/${cardId}?agent=${token}`, { method: 'DELETE' } );
checkResponse(card);
return await card.json();
}

7
app/mobile/src/api/setCardCloseMessage.js
View File

@ -1,12 +1,7 @@
import { checkResponse, fetchWithTimeout } from './fetchUtil';
export async function setCardCloseMessage(server, message) {
let host = "";
if (server) {
host = `https://${server}`;
}
let status = await fetchWithTimeout(`${host}/contact/closeMessage`, { method: 'PUT', body: JSON.stringify(message) });
let status = await fetchWithTimeout(`https://${server}/contact/closeMessage`, { method: 'PUT', body: JSON.stringify(message) });
checkResponse(status);
return await status.json();
}

7
app/mobile/src/api/setCardOpenMessage.js
View File

@ -1,12 +1,7 @@
import { checkResponse, fetchWithTimeout } from './fetchUtil';
export async function setCardOpenMessage(server, message) {
let host = "";
if (server) {
host = `https://${server}`;
}
let status = await fetchWithTimeout(`${host}/contact/openMessage`, { method: 'PUT', body: JSON.stringify(message) });
let status = await fetchWithTimeout(`https://${server}/contact/openMessage`, { method: 'PUT', body: JSON.stringify(message) });
checkResponse(status);
return await status.json();
}

12
app/mobile/src/api/setCardStatus.js
View File

@ -1,19 +1,19 @@
import { checkResponse, fetchWithTimeout } from './fetchUtil';
export async function setCardConnecting(token, cardId) {
let card = await fetchWithTimeout(`/contact/cards/${cardId}/status?agent=${token}`, { method: 'PUT', body: JSON.stringify('connecting') } );
export async function setCardConnecting(server, token, cardId) {
let card = await fetchWithTimeout(`https://${server}/contact/cards/${cardId}/status?agent=${token}`, { method: 'PUT', body: JSON.stringify('connecting') } );
checkResponse(card);
return await card.json();
}
export async function setCardConnected(token, cardId, access, view, article, channel, profile) {
let card = await fetchWithTimeout(`/contact/cards/${cardId}/status?agent=${token}&token=${access}&viewRevision=${view}&articleRevision=${article}&channelRevision=${channel}&profileRevision=${profile}`, { method: 'PUT', body: JSON.stringify('connected') } );
export async function setCardConnected(server, token, cardId, access, view, article, channel, profile) {
let card = await fetchWithTimeout(`https://${server}/contact/cards/${cardId}/status?agent=${token}&token=${access}&viewRevision=${view}&articleRevision=${article}&channelRevision=${channel}&profileRevision=${profile}`, { method: 'PUT', body: JSON.stringify('connected') } );
checkResponse(card);
return await card.json();
}
export async function setCardConfirmed(token, cardId) {
let card = await fetchWithTimeout(`/contact/cards/${cardId}/status?agent=${token}`, { method: 'PUT', body: JSON.stringify('confirmed') } );
export async function setCardConfirmed(server, token, cardId) {
let card = await fetchWithTimeout(`https://${server}/contact/cards/${cardId}/status?agent=${token}`, { method: 'PUT', body: JSON.stringify('confirmed') } );
checkResponse(card);
return await card.json();
}

44
app/mobile/src/context/useCardContext.hook.js
View File

@ -10,6 +10,14 @@ import { getContactChannelDetail } from 'api/getContactChannelDetail';
import { getContactChannelSummary } from 'api/getContactChannelSummary';
import { getCardImageUrl } from 'api/getCardImageUrl';
import { addCard } from 'api/addCard';
import { removeCard } from 'api/removeCard';
import { setCardConnecting, setCardConnected, setCardConfirmed } from 'api/setCardStatus';
import { getCardOpenMessage } from 'api/getCardOpenMessage';
import { setCardOpenMessage } from 'api/setCardOpenMessage';
import { getCardCloseMessage } from 'api/getCardCloseMessage';
import { setCardCloseMessage } from 'api/setCardCloseMessage';
export function useCardContext() {
const [state, setState] = useState({
cards: new Map(),
@ -174,7 +182,6 @@ export function useCardContext() {
else {
const view = await store.actions.getCardItemView(guid, card.id);
if (view == null) {
console.log('alert: expected card not synced');
let assembled = JSON.parse(JSON.stringify(card));
assembled.data.cardDetail = await getCardDetail(server, appToken, card.id);
assembled.data.cardProfile = await getCardProfile(server, appToken, card.id);
@ -343,6 +350,41 @@ export function useCardContext() {
});
return card;
},
addCard: async (message) => {
const { server, appToken } = session.current;
return await addCard(server, appToken, message);
},
removeCard: async (cardId) => {
const { server, appToken } = session.current;
return await removeCard(server, appToken, cardId);
},
setCardConnecting: async (cardId) => {
const { server, appToken } = session.current;
return await setCardConnecting(server, appToken, cardId);
},
setCardConnected: async (cardId, token, rev) => {
const { server, appToken } = session.current;
return await setCardConnected(server, appToken, cardId, token,
rev.viewRevision, rev.articleRevision, rev.channelRevision, rev.profileRevision);
},
setCardConfirmed: async (cardId) => {
const { server, appToken } = session.current;
return await setCardConfirmed(server, appToken, cardId);
},
getCardOpenMessage: async (cardId) => {
const { server, appToken } = session.current;
return await getCardOpenMessage(server, appToken, cardId);
},
setCardOpenMessage: async (server, message) => {
return await setCardOpenMessage(server, message);
},
getCardCloseMessage: async (cardId) => {
const { server, appToken } = session.current;
return await getCardCloseMessage(server, appToken, cardId);
},
setCardCloseMessage: async (server, message) => {
return await setCardCloseMessage(server, message);
},
}
return { state, actions }

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

@ -58,7 +58,7 @@ export function useProfileContext() {
},
clearSession: () => {
session.current = {};
updateState({ profile: null });
updateState({ profile: {} });
},
setRevision: (rev) => {
curRevision.current = rev;

192
app/mobile/src/session/contact/Contact.jsx
View File

@ -1,5 +1,5 @@
import { useState, useContext } from 'react';
import { ScrollView, View, TouchableOpacity, Text } from 'react-native';
import { ScrollView, View, Alert, TouchableOpacity, Text } from 'react-native';
import { useContact } from './useContact.hook';
import { styles } from './Contact.styled';
import { SafeAreaView } from 'react-native-safe-area-context';
@ -9,22 +9,114 @@ import Colors from 'constants/Colors';
export function Contact({ contact, closeContact }) {
const { state, actions } = useContact(contact);
const { state, actions } = useContact(contact, closeContact);
const getStatusText = (status) => {
if (status === 'confirmed') {
return 'Saved';
return 'saved';
}
if (status === 'pending') {
return 'Request Reveived';
return 'request reveived';
}
if (status === 'connecting') {
return 'Request Sent';
return 'request sent';
}
if (status === 'connected') {
return 'Connected';
return 'connected';
}
return 'Unsaved';
if (status === 'requested') {
return 'request received';
}
return 'unsaved';
}
const setContact = async (action) => {
try {
await action();
}
catch (err) {
console.log(err);
Alert.alert(
'Failed to Update Contact',
'Please try again.',
);
}
}
const disconnectContact = () => {
Alert.alert(
"Disconnecting Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Disconnect", onPress: () => {
setContact(actions.disconnectContact);
}}
]
);
}
const saveAndConnect = () => {
setContact(actions.saveAndConnect);
}
const saveContact = () => {
setContact(actions.saveContact);
}
const ignoreContact = () => {
setContact(actions.ignoreContact);
}
const deleteContact = () => {
Alert.alert(
"Deleting Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Delete", onPress: () => {
setContact(actions.deleteContact);
}}
]
);
}
const closeDelete = () => {
Alert.alert(
"Deleting Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Delete", onPress: () => {
setContact(actions.closeDelete);
}}
]
);
}
const blockContact = () => {
Alert.alert(
"Blocking Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Block", onPress: () => {
setContact(actions.blockContact);
}}
]
);
}
const connectContact = () => {
setContact(actions.connectContact);
}
return (
@ -40,7 +132,7 @@ export function Contact({ contact, closeContact }) {
<View style={styles.header}>
<Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
</View>
<Text style={styles.status}>{ getStatusText(state.status) }</Text>
<Text style={styles.status}>{ `[${getStatusText(state.status)}]` }</Text>
<View style={{ width: 128 }}>
<Logo src={state.logo} width={128} height={128} radius={8} />
</View>
@ -60,36 +152,90 @@ export function Contact({ contact, closeContact }) {
<View style={styles.controls}>
{ state.status === 'connected' && (
<>
<TouchableOpacity style={styles.button}>
<TouchableOpacity style={styles.button} onPress={disconnectContact}>
<Text style={styles.buttonText}>Disconnect</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<TouchableOpacity style={styles.button} onPress={closeDelete}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status === 'connecting' && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block</Text>
</TouchableOpacity>
<>
<TouchableOpacity style={styles.button} onPress={disconnectContact}>
<Text style={styles.buttonText}>Cancel Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={closeDelete}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status === 'confirmed' && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block</Text>
</TouchableOpacity>
<>
<TouchableOpacity style={styles.button} onPress={connectContact}>
<Text style={styles.buttonText}>Request Connection</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={deleteContact}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status === 'pending' && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block</Text>
</TouchableOpacity>
<>
<TouchableOpacity style={styles.button} onPress={saveAndConnect}>
<Text style={styles.buttonText}>Save and Connect</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={saveContact}>
<Text style={styles.buttonText}>Save Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={deleteContact}>
<Text style={styles.buttonText}>Ignore Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status === 'requested' && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block</Text>
</TouchableOpacity>
<>
<TouchableOpacity style={styles.button} onPress={connectContact}>
<Text style={styles.buttonText}>Accept Connection</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={ignoreContact}>
<Text style={styles.buttonText}>Ignore Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={disconnectContact}>
<Text style={styles.buttonText}>Deny Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={deleteContact}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status == null && (
<>
<TouchableOpacity style={styles.button} onPress={saveAndConnect}>
<Text style={styles.buttonText}>Save and Connect</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={saveContact}>
<Text style={styles.buttonText}>Save Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
</>
)}
</View>
</SafeAreaView>

3
app/mobile/src/session/contact/Contact.styled.js
View File

@ -25,7 +25,8 @@ export const styles = StyleSheet.create({
},
status: {
color: Colors.grey,
paddingBottom: 24,
paddingBottom: 20,
paddingTop: 4,
},
headerText: {
fontSize: 16,

102
app/mobile/src/session/contact/useContact.hook.js
View File

@ -2,9 +2,10 @@ import { useState, useEffect, useRef, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { CardContext } from 'context/CardContext';
import { useWindowDimensions } from 'react-native'
import { getListingMessage } from 'api/getListingMessage';
import config from 'constants/Config';
export function useContact(contact) {
export function useContact(contact, close) {
const [state, setState] = useState({
tabbed: null,
@ -15,6 +16,9 @@ export function useContact(contact) {
description: null,
logo: null,
status: null,
cardId: null,
guid: null,
busy: false
});
const dimensions = useWindowDimensions();
@ -39,9 +43,9 @@ export function useContact(contact) {
const selected = card.state.cards.get(contact.card);
if (selected) {
const { profile, detail, cardId } = selected;
const { name, handle, node, location, description, imageSet, revision } = profile;
const { name, handle, node, location, description, guid, imageSet, revision } = profile;
const logo = imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar';
updateState({ name, handle, node, location, description, logo, status: detail.status });
updateState({ name, handle, node, location, description, logo, cardId, guid, status: detail.status });
stateSet = true;
}
}
@ -50,14 +54,14 @@ export function useContact(contact) {
const selected = card.actions.getByGuid(guid);
if (selected) {
const { cardId, profile, detail } = selected;
const { name, handle, node, location, description, imageSet, revision } = profile;
const { name, handle, node, location, description, guid, imageSet, revision } = profile;
const logo = imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar';
updateState({ name, handle, node, location, description, logo, status: detail.status });
updateState({ name, handle, node, location, description, logo, cardId, guid, status: detail.status });
stateSet = true;
}
else {
const { name, handle, node, location, description, logo } = contact.account;
updateState({ name, handle, node, location, description, logo, status: null });
const { name, handle, node, location, description, logo, guid } = contact.account;
updateState({ name, handle, node, location, description, logo, guid, cardId: null, status: null });
stateSet = true;
}
}
@ -66,7 +70,91 @@ export function useContact(contact) {
}
}, [contact, card]);
const applyAction = async (action) => {
if (!state.busy) {
try {
updateState({ busy: true });
await action();
updateState({ busy: false });
}
catch (err) {
console.log(err);
updateState({ busy: false });
throw new Error("failed to update contact");
}
}
else {
throw new Error("operation in progress");
}
}
const actions = {
saveAndConnect: async () => {
await applyAction(async () => {
let profile = await getListingMessage(state.node, state.guid);
let added = await card.actions.addCard(profile);
await card.actions.setCardConnecting(added.id);
let open = await card.actions.getCardOpenMessage(added.id);
let contact = await card.actions.setCardOpenMessage(state.node, open);
if (contact.status === 'connected') {
await card.actions.setCardConnected(added.id, contact.token, contact);
}
});
},
saveContact: async () => {
await applyAction(async () => {
let message = await getListingMessage(state.node, state.guid);
await card.actions.addCard(message);
});
},
disconnectContact: async () => {
await applyAction(async () => {
await card.actions.setCardConfirmed(state.cardId);
try {
let message = await card.actions.getCardCloseMessage(state.cardId);
await card.actions.setCardCloseMessage(state.node, message);
}
catch (err) {
console.log(err);
}
});
},
ignoreContact: async () => {
await applyAction(async () => {
await card.actions.setCardConfirmed(state.cardId);
});
},
closeDelete: async () => {
await applyAction(async () => {
await card.actions.setCardConfirmed(state.cardId);
try {
let message = await card.actions.getCardCloseMessage(state.cardId);
await card.actions.setCardCloseMessage(state.node, message);
}
catch (err) {
console.log(err);
}
await card.actions.removeCard(state.cardId);
close();
});
},
deleteContact: async () => {
await applyAction(async () => {
await card.actions.removeCard(state.cardId);
close();
});
},
connectContact: async () => {
await applyAction(async () => {
await card.actions.setCardConnecting(state.cardId);
let message = await card.actions.getCardOpenMessage(state.cardId);
let contact = await card.actions.setCardOpenMessage(state.node, message);
if (contact.status === 'connected') {
await card.actions.setCardConnected(state.cardId, contact.token, contact);
}
});
},
blockContact: async () => {},
};
return { state, actions };

17
app/mobile/src/session/profile/Profile.jsx
View File

@ -53,6 +53,21 @@ export function Profile() {
}
}
const logout = async () => {
Alert.alert(
"Logging Out",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Logout", onPress: () => {
actions.logout();
}}
]
);
}
const onGallery = async () => {
try {
const full = await ImagePicker.openPicker({ mediaType: 'photo', width: 256, height: 256 });
@ -112,7 +127,7 @@ export function Profile() {
</TouchableOpacity>
<Switch style={styles.visibleSwitch} value={state.searchable} onValueChange={setVisible} trackColor={styles.switch}/>
</View>
<TouchableOpacity style={styles.logout} onPress={actions.logout}>
<TouchableOpacity style={styles.logout} onPress={logout}>
<Ionicons name="logout" size={14} color={Colors.white} />
<Text style={styles.logoutText}>Logout</Text>
</TouchableOpacity>