martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-03 06:55:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

formatting code

Browse Source
This commit is contained in:
balzack 2024-11-13 13:17:31 -08:00
parent 4b52a8aa2c
commit 99031af550
7 changed files with 103 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/client/mobile/src/card/Card.tsx
View File

@ -27,13 +27,21 @@ export function Card({
<SafeAreaView style={styles.card}> <SafeAreaView style={styles.card}>
<Image style={styles.image} resizeMode={'contain'} source={{uri: imageUrl}} /> <Image style={styles.image} resizeMode={'contain'} source={{uri: imageUrl}} />
<View style={styles.details}> <View style={styles.details}>
{name && <Text numberOfLines={1} style={styles.nameSet}>{name}</Text>} {name && (
{!name && <Text numberOfLines={1} style={styles.nameUnset}>{placeholder}</Text>} <Text numberOfLines={1} style={styles.nameSet}>
<Text numberOfLines={1} style={styles.handle}>{node ? `${handle}/${node}` : handle}</Text> {name}
</View> </Text>
<View style={styles.actions}> )}
{actions} {!name && (
<Text numberOfLines={1} style={styles.nameUnset}>
{placeholder}
</Text>
)}
<Text numberOfLines={1} style={styles.handle}>
{node ? `${handle}/${node}` : handle}
</Text>
</View> </View>
<View style={styles.actions}>{actions}</View>
</SafeAreaView> </SafeAreaView>
</Pressable> </Pressable>
); );

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

@ -16,37 +16,10 @@ export function useContacts() {
filter: '', filter: '',
}); });
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updateState = (value: any) => { const updateState = (value: any) => {
setState(s => ({...s, ...value})); setState(s => ({...s, ...value}));
}; };
const compare = (a: Card, b: Card) => {
const aval = `${a.handle}/${a.node}`;
const bval = `${b.handle}/${b.node}`;
if (aval < bval) {
return state.sortAsc ? 1 : -1;
} else if (aval > bval) {
return state.sortAsc ? -1 : 1;
}
return 0;
};
const select = (c: Card) => {
if (!state.filter) {
return true;
}
const value = state.filter.toLowerCase();
if (c.name && c.name.toLowerCase().includes(value)) {
return true;
}
const handle = c.node ? `${c.handle}/${c.node}` : c.handle;
if (handle.toLowerCase().includes(value)) {
return true;
}
return false;
};
useEffect(() => { useEffect(() => {
const {layout} = display.state; const {layout} = display.state;
updateState({layout}); updateState({layout});
@ -61,9 +34,34 @@ export function useContacts() {
return () => { return () => {
contact.removeCardListener(setCards); contact.removeCardListener(setCards);
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useEffect(() => { useEffect(() => {
const compare = (a: Card, b: Card) => {
const aval = `${a.handle}/${a.node}`;
const bval = `${b.handle}/${b.node}`;
if (aval < bval) {
return state.sortAsc ? 1 : -1;
} else if (aval > bval) {
return state.sortAsc ? -1 : 1;
}
return 0;
};
const select = (c: Card) => {
if (!state.filter) {
return true;
}
const value = state.filter.toLowerCase();
if (c.name && c.name.toLowerCase().includes(value)) {
return true;
}
const handle = c.node ? `${c.handle}/${c.node}` : c.handle;
if (handle.toLowerCase().includes(value)) {
return true;
}
return false;
};
const filtered = state.cards.sort(compare).filter(select); const filtered = state.cards.sort(compare).filter(select);
updateState({filtered}); updateState({filtered});
}, [state.sortAsc, state.filter, state.cards]); }, [state.sortAsc, state.filter, state.cards]);

3
app/client/mobile/src/content/Content.styled.ts
View File

@ -191,8 +191,7 @@ export const styles = StyleSheet.create({
members: { members: {
height: 200, height: 200,
}, },
membersContainer: { membersContainer: {},
},
subjectInput: { subjectInput: {
flexGrow: 1, flexGrow: 1,
backgroundColor: 'transparent', backgroundColor: 'transparent',

49
app/client/mobile/src/content/Content.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useRef } from 'react'; import React, {useState} from 'react';
import {Divider, Switch, Surface, IconButton, Button, Text, TextInput, useTheme} from 'react-native-paper'; import {Divider, Switch, Surface, IconButton, Button, Text, TextInput, useTheme} from 'react-native-paper';
import {SafeAreaView, Modal, FlatList, View} from 'react-native'; import {SafeAreaView, Modal, FlatList, View} from 'react-native';
import {styles} from './Content.styled'; import {styles} from './Content.styled';
@ -12,10 +12,10 @@ import {Confirm} from '../confirm/Confirm';
export function Content({select}: {select: (focus: Focus) => void}) { export function Content({select}: {select: (focus: Focus) => void}) {
const [add, setAdd] = useState(false); const [add, setAdd] = useState(false);
const [adding, setAdding] = useState(false); const [adding, setAdding] = useState(false);
const [sealed, setSealed] = useState(false); const [sealedTopic, setSealedTopic] = useState(false);
const {state, actions} = useContent(); const {state, actions} = useContent();
const theme = useTheme(); const theme = useTheme();
const [subject, setSubject] = useState(''); const [subjectTopic, setSubjectTopic] = useState('');
const [members, setMembers] = useState([]); const [members, setMembers] = useState([]);
const [alert, setAlert] = useState(false); const [alert, setAlert] = useState(false);
const [alertParams] = useState({ const [alertParams] = useState({
@ -26,16 +26,20 @@ export function Content({select}: {select: (focus: Focus) => void}) {
action: () => setAlert(false), action: () => setAlert(false),
}, },
}); });
const cards = (state.sealSet && sealed) ? state.sealable : state.connected; const cards = state.sealSet && sealedTopic ? state.sealable : state.connected;
const addTopic = async () => { const addTopic = async () => {
setAdding(true); setAdding(true);
try { try {
await actions.addTopic(sealed, subject, members.filter(id => Boolean(cards.find(card => card.cardId === id)))); await actions.addTopic(
sealedTopic,
subjectTopic,
members.filter(id => Boolean(cards.find(card => card.cardId === id))),
);
setAdd(false); setAdd(false);
setSubject(''); setSubjectTopic('');
setMembers([]); setMembers([]);
setSealed(false); setSealedTopic(false);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
setAdd(false); setAdd(false);
@ -61,11 +65,7 @@ export function Content({select}: {select: (focus: Focus) => void}) {
/> />
</Surface> </Surface>
{state.layout !== 'large' && ( {state.layout !== 'large' && (
<Button <Button icon="comment-plus" mode="contained" style={styles.button} onPress={() => setAdd(true)}>
icon="comment-plus"
mode="contained"
style={styles.button}
onPress={() => setAdd(true)}>
{state.strings.new} {state.strings.new}
</Button> </Button>
)} )}
@ -116,11 +116,7 @@ export function Content({select}: {select: (focus: Focus) => void}) {
{state.layout === 'large' && ( {state.layout === 'large' && (
<View style={styles.bar}> <View style={styles.bar}>
<Divider style={styles.divider} /> <Divider style={styles.divider} />
<Button <Button icon="comment-plus" mode="contained" style={styles.button} onPress={() => setAdd(true)}>
icon="comment-plus"
mode="contained"
style={styles.button}
onPress={() => setAdd(true)}>
{state.strings.new} {state.strings.new}
</Button> </Button>
</View> </View>
@ -141,8 +137,8 @@ export function Content({select}: {select: (focus: Focus) => void}) {
underlineStyle={styles.inputUnderline} underlineStyle={styles.inputUnderline}
placeholder={state.strings.subjectOptional} placeholder={state.strings.subjectOptional}
left={<TextInput.Icon style={styles.icon} icon="label-outline" />} left={<TextInput.Icon style={styles.icon} icon="label-outline" />}
value={subject} value={subjectTopic}
onChangeText={value => setSubject(value)} onChangeText={value => setSubjectTopic(value)}
/> />
<Divider style={styles.modalDivider} /> <Divider style={styles.modalDivider} />
</Surface> </Surface>
@ -154,13 +150,20 @@ export function Content({select}: {select: (focus: Focus) => void}) {
data={cards} data={cards}
initialNumToRender={32} initialNumToRender={32}
renderItem={({item}) => { renderItem={({item}) => {
const enable = (<Switch key="enable" style={styles.memberSwitch} value={Boolean(members.find(cardId => cardId === item.cardId))} onValueChange={flag => { const enable = (
<Switch
key="enable"
style={styles.memberSwitch}
value={Boolean(members.find(cardId => cardId === item.cardId))}
onValueChange={flag => {
if (flag) { if (flag) {
setMembers([item.cardId, ...members]); setMembers([item.cardId, ...members]);
} else { } else {
setMembers(members.filter(cardId => cardId != item.cardId)); setMembers(members.filter(cardId => cardId !== item.cardId));
} }
}} />) }}
/>
);
return ( return (
<Card <Card
containerStyle={{ containerStyle={{
@ -186,7 +189,7 @@ export function Content({select}: {select: (focus: Focus) => void}) {
{state.sealSet && ( {state.sealSet && (
<View style={styles.sealableContent}> <View style={styles.sealableContent}>
<Text style={styles.switchLabel}>{state.strings.sealedTopic}</Text> <Text style={styles.switchLabel}>{state.strings.sealedTopic}</Text>
<Switch style={styles.sealSwitch} value={sealed} onValueChange={flag => setSealed(flag)} /> <Switch style={styles.sealSwitch} value={sealedTopic} onValueChange={flag => setSealedTopic(flag)} />
</View> </View>
)} )}
</View> </View>

31
app/client/mobile/src/content/useContent.hook.ts
View File

@ -44,7 +44,6 @@ export function useContent() {
return 0; return 0;
}; };
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updateState = (value: any) => { const updateState = (value: any) => {
setState(s => ({...s, ...value})); setState(s => ({...s, ...value}));
}; };
@ -56,7 +55,7 @@ export function useContent() {
useEffect(() => { useEffect(() => {
const channels = state.sorted.map(channel => { const channels = state.sorted.map(channel => {
const {cardId, channelId, unread, sealed, members, dataType, data, lastTopic} = channel; const {cardId, channelId, unread, sealed, members, data, lastTopic} = channel;
const contacts = [] as (Card | undefined)[]; const contacts = [] as (Card | undefined)[];
if (cardId) { if (cardId) {
const card = state.cards.find(contact => contact.cardId === cardId); const card = state.cards.find(contact => contact.cardId === cardId);
@ -90,19 +89,19 @@ export function useContent() {
}; };
const selectImage = () => { const selectImage = () => {
if (contacts.length == 0) { if (contacts.length === 0) {
return notes; return notes;
} else if (contacts.length == 1) { } else if (contacts.length === 1) {
if (contacts[0]) { if (contacts[0]) {
return contacts[0].imageUrl; return contacts[0].imageUrl;
} else { } else {
return unknown; return unknown;
} }
} else if (contacts.length == 2) { } else if (contacts.length === 2) {
return iii_group; return iii_group;
} else if (contacts.length == 3) { } else if (contacts.length === 3) {
return iiii_group; return iiii_group;
} else if (contacts.length == 4) { } else if (contacts.length === 4) {
return iiiii_group; return iiiii_group;
} else { } else {
return group; return group;
@ -117,7 +116,7 @@ export function useContent() {
if (lastTopic.data?.text) { if (lastTopic.data?.text) {
return lastTopic.data.text; return lastTopic.data.text;
} else { } else {
return '' return '';
} }
} else if (lastTopic.dataType === 'sealedtopic') { } else if (lastTopic.dataType === 'sealedtopic') {
if (lastTopic.data) { if (lastTopic.data) {
@ -130,14 +129,23 @@ export function useContent() {
return null; return null;
} }
} }
} };
const hosted = cardId == null; const hosted = cardId == null;
const subject = data?.subject ? [data.subject] : buildSubject(); const subject = data?.subject ? [data.subject] : buildSubject();
const message = getMessage(); const message = getMessage();
const imageUrl = selectImage(); const imageUrl = selectImage();
return {cardId, channelId, sealed, hosted, unread, imageUrl, subject, message}; return {
cardId,
channelId,
sealed,
hosted,
unread,
imageUrl,
subject,
message,
};
}); });
const search = state.filter?.toLowerCase(); const search = state.filter?.toLowerCase();
@ -189,7 +197,7 @@ export function useContent() {
const sorted = merged.sort((a, b) => { const sorted = merged.sort((a, b) => {
const aUpdated = a?.lastTopic?.created; const aUpdated = a?.lastTopic?.created;
const bUpdated = b?.lastTopic?.created; const bUpdated = b?.lastTopic?.created;
if (aUpdated == bUpdated) { if (aUpdated === bUpdated) {
return 0; return 0;
} else if (!aUpdated) { } else if (!aUpdated) {
return 1; return 1;
@ -216,6 +224,7 @@ export function useContent() {
content.removeChannelListener(setChannels); content.removeChannelListener(setChannels);
settings.removeConfigListener(setConfig); settings.removeConfigListener(setConfig);
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
const actions = { const actions = {