martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-24 02:25:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

linting mobile app

Browse Source
This commit is contained in:
balzack 2024-10-26 22:58:19 -07:00
parent f3b839f96b
commit efda85f07e
17 changed files with 226 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/mobile/package.json
View File

@ -5,7 +5,7 @@
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"lint": "eslint --fix .",
"format": "prettier --single-quote true --print-width 200 --write src",
"start": "react-native start",
"test": "jest"
@ -50,8 +50,9 @@
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"eslint-plugin-prettier": "5.0.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"prettier": "3.3.3",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},

1
app/client/mobile/src/confirm/Confirm.styled.ts
View File

@ -1,5 +1,4 @@
import {StyleSheet} from 'react-native';
import {Colors} from '../constants/Colors';
export const styles = StyleSheet.create({
modal: {

1
app/client/mobile/src/confirm/Confirm.tsx
View File

@ -1,3 +1,4 @@
import React from 'react';
import {Modal, View} from 'react-native';
import {BlurView} from '@react-native-community/blur';
import {Surface, Text, Button} from 'react-native-paper';

7
app/client/mobile/src/contacts/Contacts.styled.ts
View File

@ -1,5 +1,4 @@
import {StyleSheet} from 'react-native';
import {Colors} from '../constants/Colors';
export const styles = StyleSheet.create({
contacts: {
@ -9,6 +8,12 @@ export const styles = StyleSheet.create({
width: '100%',
height: '100%',
},
button: {
borderRadius: 8,
},
indicator: {
borderRightWidth: 2,
},
header: {
position: 'relative',
display: 'flex',

22
app/client/mobile/src/contacts/Contacts.tsx
View File

@ -30,7 +30,7 @@ export function Contacts({openRegistry, openContact}: {openRegistry: () => void;
/>
</Surface>
<Button icon="account-plus" mode="contained" style={{borderRadius: 8}} onPress={openRegistry}>
<Button icon="account-plus" mode="contained" style={styles.button} onPress={openRegistry}>
{state.strings.add}
</Button>
</SafeAreaView>
@ -49,14 +49,28 @@ export function Contacts({openRegistry, openContact}: {openRegistry: () => void;
const options = item.status === 'connected' && !item.offsync ? [message, call] : [];
const select = () => {
const {guid, handle, node, name, location, description, offsync, imageUrl, cardId, status} = item;
const params = {guid, handle, node, name, location, description, offsync, imageUrl, cardId, status};
const params = {
guid,
handle,
node,
name,
location,
description,
offsync,
imageUrl,
cardId,
status,
};
openContact(params);
};
const status = item.offsync ? 'offsync' : item.status;
return (
<View style={{borderRightWidth: 2, borderColor: Colors[status]}}>
<View style={{...styles.indicator, borderColor: Colors[status]}}>
<Card
containerStyle={{...styles.card, borderColor: theme.colors.outlineVariant}}
containerStyle={{
...styles.card,
borderColor: theme.colors.outlineVariant,
}}
imageUrl={item.imageUrl}
name={item.name}
handle={item.handle}

5
app/client/mobile/src/contacts/useContacts.hook.ts
View File

@ -2,7 +2,7 @@ import {useState, useContext, useEffect} from 'react';
import {AppContext} from '../context/AppContext';
import {DisplayContext} from '../context/DisplayContext';
import {ContextType} from '../context/ContextType';
import {Card, Channel} from 'databag-client-sdk';
import {Card} from 'databag-client-sdk';
export function useContacts() {
const app = useContext(AppContext) as ContextType;
@ -15,7 +15,6 @@ export function useContacts() {
filter: '',
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updateState = (value: any) => {
setState(s => ({...s, ...value}));
};
@ -55,11 +54,13 @@ export function useContacts() {
return () => {
contact.removeCardListener(setCards);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
const filtered = state.cards.sort(compare).filter(select);
updateState({filtered});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [state.sortAsc, state.filter, state.cards]);
const actions = {

10
app/client/mobile/src/context/useAppContext.hook.ts
View File

@ -6,7 +6,15 @@ import {LocalStore} from '../LocalStore';
const DATABAG_DB = 'db_v213.db';
const SETTINGS_DB = 'ls_v001.db';
const databag = new DatabagSDK({tagBatch: 32, topicBatch: 32, articleTypes: [], channelTypes: ['sealed', 'superbasic']}, new NativeCrypto());
const databag = new DatabagSDK(
{
tagBatch: 32,
topicBatch: 32,
articleTypes: [],
channelTypes: ['sealed', 'superbasic'],
},
new NativeCrypto(),
);
export function useAppContext() {
const local = useRef(new LocalStore());

90
app/client/mobile/src/profile/Profile.tsx
View File

@ -1,9 +1,8 @@
import React, {useState} from 'react';
import {Button, Surface, Icon, Text, IconButton, Divider} from 'react-native-paper';
import {ScrollView, Modal, Image, SafeAreaView, View} from 'react-native';
import {Icon, Text, IconButton, Divider} from 'react-native-paper';
import {ScrollView, Image, SafeAreaView, View} from 'react-native';
import {styles} from './Profile.styled';
import {useProfile} from './useProfile.hook';
import {BlurView} from '@react-native-community/blur';
import {Confirm} from '../confirm/Confirm';
export type ContactParams = {
@ -19,8 +18,7 @@ export type ContactParams = {
offsync?: boolean;
};
export function Profile({close, params}) {
const [alert, setAlert] = useState(false);
export function Profile({close, params}: {close: () => void; params: ContactParams}) {
const {state, actions} = useProfile(params);
const [confirmShow, setConfirmShow] = useState(false);
const [busy, setBusy] = useState(false);
@ -31,18 +29,18 @@ export function Profile({close, params}) {
const [denying, setDenying] = useState(false);
const [reporting, setReporting] = useState(false);
const [saving, setSaving] = useState(false);
const [connecting, setConnecting] = useState(false);
const [disconnecting, setDisconnecting] = useState(false);
const [resyncing, setResyncing] = useState(false);
const [canceling, setCanceling] = useState(false);
const [accepting, setAccepting] = useState(false);
const [confirming, setConfirming] = useState(false);
const confirmAction = (title: string, prompt: string, label: string, loading: (boolean) => void, action: () => Promise<void>) => {
setConfirmParams({
title,
prompt,
cancel: {label: state.strings.cancel, action: () => setConfirmShow(false)},
cancel: {
label: state.strings.cancel,
action: () => setConfirmShow(false),
},
confirm: {
label,
action: async () => {
@ -75,7 +73,14 @@ export function Profile({close, params}) {
setConfirmShow(false);
} catch (err) {
console.log(err);
setConfirmParams({title: state.strings.error, prompt: state.strings.tryAgain, cancel: {label: state.strings.cancel, action: () => setConfirmShow(false)}});
setConfirmParams({
title: state.strings.error,
prompt: state.strings.tryAgain,
cancel: {
label: state.strings.cancel,
action: () => setConfirmShow(false),
},
});
}
};
@ -88,7 +93,7 @@ export function Profile({close, params}) {
</View>
)}
<Text style={styles.headerLabel} adjustsFontSizeToFit={true} numberOfLines={1}>{`${state.handle}${state.node ? '/' + state.node : ''}`}</Text>
{close && <View style={styles.spaceHolder}></View>}
{close && <View style={styles.spaceHolder} />}
</SafeAreaView>
<View style={styles.image}>
@ -149,8 +154,7 @@ export function Profile({close, params}) {
icon="alert-octagon-outline"
size={32}
onPress={() => {
const {reporting, confirmReporting, report} = state.strings;
confirmAction(reporting, confirmReporting, report, setReporting, actions.report);
confirmAction(state.strings.reporting, state.strings.confirmReporting, state.strings.report, setReporting, actions.report);
}}
/>
<Text style={styles.actionLabel}>{state.strings.report}</Text>
@ -183,8 +187,7 @@ export function Profile({close, params}) {
icon="account-remove"
size={32}
onPress={() => {
const {removing, confirmRemove, remove} = state.strings;
confirmAction(removing, confirmRemove, remove, setRemoving, actions.remove);
confirmAction(state.strings.removing, state.strings.confirmRemove, state.strings.remove, setRemoving, actions.remove);
}}
/>
<Text style={styles.actionLabel}>{state.strings.remove}</Text>
@ -198,8 +201,7 @@ export function Profile({close, params}) {
icon="eye-remove-outline"
size={32}
onPress={() => {
const {blocking, confirmBlocking, block} = state.strings;
confirmAction(blocking, confirmBlocking, block, setBlocking, actions.block);
confirmAction(state.strings.blocking, state.strings.confirmBlocking, state.strings.block, setBlocking, actions.block);
}}
/>
<Text style={styles.actionLabel}>{state.strings.block}</Text>
@ -213,8 +215,7 @@ export function Profile({close, params}) {
icon="alert-octagon-outline"
size={32}
onPress={() => {
const {reporting, confirmReporting, report} = state.strings;
confirmAction(reporting, confirmReporting, report, setReporting, actions.report);
confirmAction(state.strings.reporting, state.strings.confirmReporting, state.strings.report, setReporting, actions.report);
}}
/>
<Text style={styles.actionLabel}>{state.strings.report}</Text>
@ -289,8 +290,7 @@ export function Profile({close, params}) {
icon="account-remove"
size={32}
onPress={() => {
const {removing, confirmRemove, remove} = state.strings;
confirmAction(removing, confirmRemove, remove, setRemoving, actions.remove);
confirmAction(state.strings.removing, state.strings.confirmRemove, state.strings.remove, setRemoving, actions.remove);
}}
/>
<Text style={styles.actionLabel}>{state.strings.remove}</Text>
@ -304,8 +304,7 @@ export function Profile({close, params}) {
icon="eye-remove-outline"
size={32}
onPress={() => {
const {blocking, confirmBlocking, block} = state.strings;
confirmAction(blocking, confirmBlocking, block, setBlocking, actions.block);
confirmAction(state.strings.blocking, state.strings.confirmBlocking, state.strings.block, setBlocking, actions.block);
}}
/>
<Text style={styles.actionLabel}>{state.strings.block}</Text>
@ -319,8 +318,7 @@ export function Profile({close, params}) {
icon="alert-octagon-outline"
size={32}
onPress={() => {
const {reporting, confirmReporting, report} = state.strings;
confirmAction(reporting, confirmReporting, report, setReporting, actions.report);
confirmAction(state.strings.reporting, state.strings.confirmReporting, state.strings.report, setReporting, actions.report);
}}
/>
<Text style={styles.actionLabel}>{state.strings.report}</Text>
@ -381,8 +379,7 @@ export function Profile({close, params}) {
icon="account-remove"
size={32}
onPress={() => {
const {removing, confirmRemove, remove} = state.strings;
confirmAction(removing, confirmRemove, remove, setRemoving, actions.remove);
confirmAction(state.strings.removing, state.strings.confirmRemove, state.strings.remove, setRemoving, actions.remove);
}}
/>
<Text style={styles.actionLabel}>{state.strings.remove}</Text>
@ -396,8 +393,7 @@ export function Profile({close, params}) {
icon="eye-remove-outline"
size={32}
onPress={() => {
const {blocking, confirmBlocking, block} = state.strings;
confirmAction(blocking, confirmBlocking, block, setBlocking, actions.block);
confirmAction(state.strings.blocking, state.strings.confirmBlocking, state.strings.block, setBlocking, actions.block);
}}
/>
<Text style={styles.actionLabel}>{state.strings.block}</Text>
@ -411,8 +407,7 @@ export function Profile({close, params}) {
icon="alert-octagon-outline"
size={32}
onPress={() => {
const {reporting, confirmReporting, report} = state.strings;
confirmAction(reporting, confirmReporting, report, setReporting, actions.report);
confirmAction(state.strings.reporting, state.strings.confirmReporting, state.strings.report, setReporting, actions.report);
}}
/>
<Text style={styles.actionLabel}>{state.strings.report}</Text>
@ -445,8 +440,7 @@ export function Profile({close, params}) {
icon="account-remove"
size={32}
onPress={() => {
const {removing, confirmRemove, remove} = state.strings;
confirmAction(removing, confirmRemove, remove, setRemoving, actions.remove);
confirmAction(state.strings.removing, state.strings.confirmRemove, state.strings.remove, setRemoving, actions.remove);
}}
/>
<Text style={styles.actionLabel}>{state.strings.remove}</Text>
@ -460,8 +454,7 @@ export function Profile({close, params}) {
icon="eye-remove-outline"
size={32}
onPress={() => {
const {blocking, confirmBlocking, block} = state.strings;
confirmAction(blocking, confirmBlocking, block, setBlocking, actions.block);
confirmAction(state.strings.blocking, state.strings.confirmBlocking, state.strings.block, setBlocking, actions.block);
}}
/>
<Text style={styles.actionLabel}>{state.strings.block}</Text>
@ -475,8 +468,7 @@ export function Profile({close, params}) {
icon="alert-octagon-outline"
size={32}
onPress={() => {
const {reporting, confirmReporting, report} = state.strings;
confirmAction(reporting, confirmReporting, report, setReporting, actions.report);
confirmAction(state.strings.reporting, state.strings.confirmReporting, state.strings.report, setReporting, actions.report);
}}
/>
<Text style={styles.actionLabel}>{state.strings.report}</Text>
@ -495,8 +487,7 @@ export function Profile({close, params}) {
icon="electric-switch"
size={32}
onPress={() => {
const {disconnecting, confirmDisconnecting, disconnect} = state.strings;
confirmAction(disconnecting, confirmDisconnect, disconnect, setDisconnecting, actions.disconnect);
confirmAction(state.strings.disconnecting, state.strings.confirmDisconnect, state.strings.disconnect, setDisconnecting, actions.disconnect);
}}
/>
<Text style={styles.actionLabel}>{state.strings.disconnect}</Text>
@ -510,8 +501,7 @@ export function Profile({close, params}) {
icon="account-remove"
size={32}
onPress={() => {
const {removing, confirmRemove, remove} = state.strings;
confirmAction(removing, confirmRemove, remove, setRemoving, actions.remove);
confirmAction(state.strings.removing, state.strings.confirmRemove, state.strings.remove, setRemoving, actions.remove);
}}
/>
<Text style={styles.actionLabel}>{state.strings.remove}</Text>
@ -525,8 +515,7 @@ export function Profile({close, params}) {
icon="eye-remove-outline"
size={32}
onPress={() => {
const {blocking, confirmBlocking, block} = state.strings;
confirmAction(blocking, confirmBlocking, block, setBlocking, actions.block);
confirmAction(state.strings.blocking, state.strings.confirmBlocking, state.strings.block, setBlocking, actions.block);
}}
/>
<Text style={styles.actionLabel}>{state.strings.block}</Text>
@ -540,8 +529,7 @@ export function Profile({close, params}) {
icon="alert-octagon-outline"
size={32}
onPress={() => {
const {reporting, confirmReporting, report} = state.strings;
confirmAction(reporting, confirmReporting, report, setReporting, actions.report);
confirmAction(state.strings.reporting, state.strings.confirmReporting, state.strings.report, setReporting, actions.report);
}}
/>
<Text style={styles.actionLabel}>{state.strings.report}</Text>
@ -574,8 +562,7 @@ export function Profile({close, params}) {
icon="electric-switch"
size={32}
onPress={() => {
const {disconnecting, confirmDisconnecting, disconnect} = state.strings;
confirmAction(disconnecting, confirmDisconnect, disconnect, setDisconnecting, actions.disconnect);
confirmAction(state.strings.disconnecting, state.strings.confirmDisconnect, state.strings.disconnect, setDisconnecting, actions.disconnect);
}}
/>
<Text style={styles.actionLabel}>{state.strings.disconnect}</Text>
@ -589,8 +576,7 @@ export function Profile({close, params}) {
icon="account-remove"
size={32}
onPress={() => {
const {removing, confirmRemove, remove} = state.strings;
confirmAction(removing, confirmRemove, remove, setRemoving, actions.remove);
confirmAction(state.strings.removing, state.strings.confirmRemove, state.strings.remove, setRemoving, actions.remove);
}}
/>
<Text style={styles.actionLabel}>{state.strings.remove}</Text>
@ -604,8 +590,7 @@ export function Profile({close, params}) {
icon="eye-remove-outline"
size={32}
onPress={() => {
const {blocking, confirmBlocking, block} = state.strings;
confirmAction(blocking, confirmBlocking, block, setBlocking, actions.block);
confirmAction(state.strings.blocking, state.strings.confirmBlocking, state.strings.block, setBlocking, actions.block);
}}
/>
<Text style={styles.actionLabel}>{state.strings.block}</Text>
@ -619,8 +604,7 @@ export function Profile({close, params}) {
icon="alert-octagon-outline"
size={32}
onPress={() => {
const {reporting, confirmReporting, report} = state.strings;
confirmAction(reporting, confirmReporting, report, setReporting, actions.report);
confirmAction(state.strings.reporting, state.strings.confirmReporting, state.strings.report, setReporting, actions.report);
}}
/>
<Text style={styles.actionLabel}>{state.strings.report}</Text>

38
app/client/mobile/src/profile/useProfile.hook.ts
View File

@ -5,7 +5,7 @@ import {ContextType} from '../context/ContextType';
import {Card} from 'databag-client-sdk';
import {ContactParams} from './Profile';
export function useProfile(params: ProfileParams) {
export function useProfile(params: ContactParams) {
const app = useContext(AppContext) as ContextType;
const display = useContext(DisplayContext) as ContextType;
const [state, setState] = useState({
@ -24,7 +24,6 @@ export function useProfile(params: ProfileParams) {
statusLabel: '',
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updateState = (value: any) => {
setState(s => ({...s, ...value}));
};
@ -40,7 +39,18 @@ export function useProfile(params: ProfileParams) {
const cardId = params.cardId ? params.cardId : null;
const status = params.status ? params.status : '';
const offsync = params.offsync ? params.offsync : false;
updateState({guid, handle, node, name, location, description, imageUrl, cardId, status, offsync});
updateState({
guid,
handle,
node,
name,
location,
description,
imageUrl,
cardId,
status,
offsync,
});
}, [params]);
const getStatusLabel = (card?: Card) => {
@ -69,11 +79,22 @@ export function useProfile(params: ProfileParams) {
};
useEffect(() => {
const card = state.cards.find(card => card.guid === state.guid);
const statusLabel = getStatusLabel(card);
if (card) {
const {handle, node, name, location, description, imageUrl, cardId, status, offsync} = card;
updateState({handle, node, name, location, description, imageUrl, cardId, status, offsync, statusLabel});
const saved = state.cards.find(card => card.guid === state.guid);
const statusLabel = getStatusLabel(saved);
if (saved) {
const {handle, node, name, location, description, imageUrl, cardId, status, offsync} = saved;
updateState({
handle,
node,
name,
location,
description,
imageUrl,
cardId,
status,
offsync,
statusLabel,
});
} else {
updateState({cardId: null, status: '', offsync: false, statusLabel});
}
@ -88,6 +109,7 @@ export function useProfile(params: ProfileParams) {
return () => {
contact.removeCardListener(setCards);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const actions = {

12
app/client/mobile/src/registry/Registry.styled.ts
View File

@ -1,5 +1,4 @@
import {StyleSheet} from 'react-native';
import {Colors} from '../constants/Colors';
export const styles = StyleSheet.create({
registry: {
@ -26,17 +25,6 @@ export const styles = StyleSheet.create({
marginLeft: 0,
backgroundColor: 'transparent',
},
input: {
flex: 3,
flexGrow: 1,
backgroundColor: 'transparent',
paddingTop: 0,
paddingBottom: 0,
display: 'flex',
height: 40,
maxHeight: 40,
borderRadius: 8,
},
divider: {
width: '100%',
height: 2,

17
app/client/mobile/src/registry/Registry.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import {SafeAreaView, View, FlatList} from 'react-native';
import {Text, IconButton, Icon, Divider, Button, TextInput, Surface, useTheme} from 'react-native-paper';
import {Text, IconButton, Divider, TextInput, Surface, useTheme} from 'react-native-paper';
import {ContactParams} from '../profile/Profile';
import {styles} from './Registry.styled';
import {useRegistry} from './useRegistry.hook';
@ -53,12 +53,23 @@ export function Registry({close, openContact}: {close: () => void; openContact:
renderItem={({item}) => {
const select = () => {
const {guid, handle, node, name, location, description, imageUrl} = item;
const params = {guid, handle, node, name, location, description, imageUrl};
const params = {
guid,
handle,
node,
name,
location,
description,
imageUrl,
};
openContact(params);
};
return (
<Card
containerStyle={{...styles.card, borderColor: theme.colors.outlineVariant}}
containerStyle={{
...styles.card,
borderColor: theme.colors.outlineVariant,
}}
imageUrl={item.imageUrl}
name={item.name}
handle={item.handle}

8
app/client/mobile/src/registry/useRegistry.hook.ts
View File

@ -17,7 +17,6 @@ export function useRegistry() {
profiles: [] as Profile[],
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updateState = (value: any) => {
setState(s => ({...s, ...value}));
};
@ -31,9 +30,9 @@ export function useRegistry() {
update.current = null;
try {
const contact = app.state.session?.getContact();
const username = params.username ? params.username : null;
const server = params.server ? params.server : null;
const profiles = await contact.getRegistry(username, server);
const handle = params.username ? params.username : null;
const node = params.server ? params.server : null;
const profiles = await contact.getRegistry(handle, node);
updateState({profiles});
} catch (err) {
console.log(err);
@ -54,6 +53,7 @@ export function useRegistry() {
getRegistry(state.username, state.server);
}, 1000);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [state.username, state.server]);
const actions = {

4
app/client/mobile/src/session/Session.styled.ts
View File

@ -5,6 +5,10 @@ export const styles = StyleSheet.create({
width: '100%',
height: '100%',
},
full: {
width: '100%',
height: '100%',
},
frame: {
display: 'flex',
flexDirection: 'row',

57
app/client/mobile/src/session/Session.tsx
View File

@ -3,7 +3,6 @@ import {SafeAreaView, View, useColorScheme} from 'react-native';
import {styles} from './Session.styled';
import {IconButton, Surface, Text} from 'react-native-paper';
import {Settings} from '../settings/Settings';
import {Channels} from '../channels/Channels';
import {Contacts} from '../contacts/Contacts';
import {Registry} from '../registry/Registry';
import {Profile, ContactParams} from '../profile/Profile';
@ -23,7 +22,6 @@ const ProfileDrawer = createDrawerNavigator();
const DetailsDrawer = createDrawerNavigator();
const ContactStack = createStackNavigator();
const ContentStack = createStackNavigator();
export function Session() {
const {state} = useSession();
@ -31,24 +29,35 @@ export function Session() {
const [tab, setTab] = useState('content');
const sessionNav = {strings: state.strings};
const ChannelsRoute = () => <Channels />;
const ContactsRoute = () => <ContactTab />;
const SettingsRoute = () => <Settings showLogout={true} />;
const showContent = {display: tab === 'content' ? 'flex' : 'none'};
const showContact = {display: tab === 'contacts' ? 'flex' : 'none'};
const showSettings = {display: tab === 'settings' ? 'flex' : 'none'};
return (
<View style={styles.session}>
{state.layout !== 'large' && (
<Surface elevation={2}>
<SafeAreaView style={{width: '100%', height: '100%'}}>
<SafeAreaView style={styles.full}>
<View style={styles.screen}>
<View style={{...styles.body, display: tab === 'content' ? 'flex' : 'none'}}>
<View
style={{
...styles.body,
...showContent,
}}>
<ContentTab scheme={scheme} />
</View>
<View style={{...styles.body, display: tab === 'contacts' ? 'flex' : 'none'}}>
<View
style={{
...styles.body,
...showContact,
}}>
<ContactTab scheme={scheme} />
</View>
<View style={{...styles.body, display: tab === 'settings' ? 'flex' : 'none'}}>
<View
style={{
...styles.body,
...showSettings,
}}>
<Surface elevation={0}>
<Settings showLogout={true} />
</Surface>
@ -141,7 +150,7 @@ function ContentTab({scheme}: {scheme: string}) {
<NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
<ContactStack.Navigator initialRouteName="contacts" screenOptions={{headerShown: false}}>
<ContactStack.Screen name="content" options={{headerBackTitleVisible: false}}>
{props => <Text>CONTENT</Text>}
{() => <Text>CONTENT</Text>}
</ContactStack.Screen>
</ContactStack.Navigator>
</NavigationContainer>
@ -149,11 +158,9 @@ function ContentTab({scheme}: {scheme: string}) {
}
function ContactTab({scheme}: {scheme: string}) {
const [contactParams, setContactParams] = useState({guid: ''} as ContactParams);
const openContact = (params: ContactParams, nav) => {
setContactParams(params);
nav.navigate('profile');
};
const [contactParams, setContactParams] = useState({
guid: '',
} as ContactParams);
return (
<NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
@ -171,7 +178,12 @@ function ContactTab({scheme}: {scheme: string}) {
/>
)}
</ContactStack.Screen>
<ContactStack.Screen name="registry" options={{headerBackTitleVisible: false, ...TransitionPresets.ScaleFromCenterAndroid}}>
<ContactStack.Screen
name="registry"
options={{
headerBackTitleVisible: false,
...TransitionPresets.ScaleFromCenterAndroid,
}}>
{props => (
<Registry
close={props.navigation.goBack}
@ -182,7 +194,12 @@ function ContactTab({scheme}: {scheme: string}) {
/>
)}
</ContactStack.Screen>
<ContactStack.Screen name="profile" options={{headerBackTitleVisible: false, ...TransitionPresets.ScaleFromCenterAndroid}}>
<ContactStack.Screen
name="profile"
options={{
headerBackTitleVisible: false,
...TransitionPresets.ScaleFromCenterAndroid,
}}>
{props => <Profile close={props.navigation.goBack} params={contactParams} />}
</ContactStack.Screen>
</ContactStack.Navigator>
@ -206,7 +223,9 @@ function DetailsScreen({nav}) {
}
function ProfileScreen({nav}) {
const [contactParams, setContactParams] = useState({guid: ''} as ContactParams);
const [contactParams, setContactParams] = useState({
guid: '',
} as ContactParams);
const openContact = (params: ContactParams, open: () => {}) => {
setContactParams(params);
open();

4
app/client/mobile/src/settings/Settings.styled.ts
View File

@ -18,6 +18,10 @@ export const styles = StyleSheet.create({
inputIcon: {
backgroundColor: 'transparent',
},
full: {
width: '100%',
height: '100%',
},
container: {
width: 600,
maxWidth: '80%',

9
app/client/mobile/src/settings/Settings.tsx
View File

@ -1,6 +1,6 @@
import React, {useState} from 'react';
import {Surface, Button, Text, IconButton, Divider, Icon, TextInput, RadioButton, Switch} from 'react-native-paper';
import {SafeAreaView, TouchableOpacity, Modal, View, Image, ScrollView} from 'react-native';
import {TouchableOpacity, Modal, View, Image, ScrollView} from 'react-native';
import {styles} from './Settings.styled';
import {useSettings} from './useSettings.hook';
import ImagePicker from 'react-native-image-crop-picker';
@ -37,7 +37,8 @@ export function Settings({showLogout}: {showLogout: boolean}) {
const [secretCopy, setSecretCopy] = useState(false);
const [confirmingAuth, setConfirmingAuth] = useState(false);
const [authMessage, setAuthMessage] = useState('');
const [alertParams, setAlertParams] = useState({
const alertParams = {
title: state.strings.error,
prompt: state.strings.tryAgain,
cancel: {
@ -46,7 +47,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
setAlert(false);
},
},
});
};
const changeLogin = () => {
actions.setPassword('');
@ -321,7 +322,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
return (
<View>
<ScrollView showsVerticalScrollIndicator={false} style={{width: '100%', height: '100%'}}>
<ScrollView showsVerticalScrollIndicator={false} style={styles.full}>
<View style={styles.settings}>
<Text style={styles.header} adjustsFontSizeToFit={true} numberOfLines={1}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
<View style={styles.image}>

56
app/client/mobile/yarn.lock
View File

@ -2167,6 +2167,13 @@ __metadata:
languageName: node
linkType: hard
"@pkgr/core@npm:^0.1.0":
version: 0.1.1
resolution: "@pkgr/core@npm:0.1.1"
checksum: 6f25fd2e3008f259c77207ac9915b02f1628420403b2630c92a07ff963129238c9262afc9e84344c7a23b5cc1f3965e2cd17e3798219f5fd78a63d144d3cceba
languageName: node
linkType: hard
"@react-native-clipboard/clipboard@npm:^1.14.2":
version: 1.14.2
resolution: "@react-native-clipboard/clipboard@npm:1.14.2"
@ -3192,9 +3199,10 @@ __metadata:
crypto-js: ^4.2.0
databag-client-sdk: ^0.0.22
eslint: ^8.19.0
eslint-plugin-prettier: 5.0.0
jest: ^29.6.3
jsencrypt: ^3.3.2
prettier: 2.8.8
prettier: 3.3.3
react: 18.2.0
react-dom: ^18.3.1
react-native: 0.74.3
@ -4783,6 +4791,25 @@ __metadata:
languageName: node
linkType: hard
"eslint-plugin-prettier@npm:5.0.0":
version: 5.0.0
resolution: "eslint-plugin-prettier@npm:5.0.0"
dependencies:
prettier-linter-helpers: ^1.0.0
synckit: ^0.8.5
peerDependencies:
"@types/eslint": ">=8.0.0"
eslint: ">=8.0.0"
prettier: ">=3.0.0"
peerDependenciesMeta:
"@types/eslint":
optional: true
eslint-config-prettier:
optional: true
checksum: 84e88744b9050f2d5ef31b94e85294dda16f3a53c2449f9d33eac8ae6264889b459bf35a68e438fb6b329c2a1d6491aac4bfa00d86317e7009de3dad0311bec6
languageName: node
linkType: hard
"eslint-plugin-prettier@npm:^4.2.1":
version: 4.2.1
resolution: "eslint-plugin-prettier@npm:4.2.1"
@ -8108,12 +8135,12 @@ __metadata:
languageName: node
linkType: hard
"prettier@npm:2.8.8":
version: 2.8.8
resolution: "prettier@npm:2.8.8"
"prettier@npm:3.3.3":
version: 3.3.3
resolution: "prettier@npm:3.3.3"
bin:
prettier: bin-prettier.js
checksum: b49e409431bf129dd89238d64299ba80717b57ff5a6d1c1a8b1a28b590d998a34e083fa13573bc732bb8d2305becb4c9a4407f8486c81fa7d55100eb08263cf8
prettier: bin/prettier.cjs
checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e
languageName: node
linkType: hard
@ -9516,6 +9543,16 @@ __metadata:
languageName: node
linkType: hard
"synckit@npm:^0.8.5":
version: 0.8.8
resolution: "synckit@npm:0.8.8"
dependencies:
"@pkgr/core": ^0.1.0
tslib: ^2.6.2
checksum: 9ed5d33abb785f5f24e2531efd53b2782ca77abf7912f734d170134552b99001915531be5a50297aa45c5701b5c9041e8762e6cd7a38e41e2461c1e7fccdedf8
languageName: node
linkType: hard
"tar@npm:^6.1.11, tar@npm:^6.2.1":
version: 6.2.1
resolution: "tar@npm:6.2.1"
@ -9655,6 +9692,13 @@ __metadata:
languageName: node
linkType: hard
"tslib@npm:^2.6.2":
version: 2.8.0
resolution: "tslib@npm:2.8.0"
checksum: de852ecd81adfdb4870927e250763345f07dc13fe7f395ce261424966bb122a0992ad844c3ec875c9e63e72afe2220a150712984e44dfd1a8a7e538a064e3d46
languageName: node
linkType: hard
"tsutils@npm:^3.21.0":
version: 3.21.0
resolution: "tsutils@npm:3.21.0"