martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-02 14:35:18 +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}>
<Image style={styles.image} resizeMode={'contain'} source={{uri: imageUrl}} />
<View style={styles.details}>
{name && <Text numberOfLines={1} style={styles.nameSet}>{name}</Text>}
{!name && <Text numberOfLines={1} style={styles.nameUnset}>{placeholder}</Text>}
<Text numberOfLines={1} style={styles.handle}>{node ? `${handle}/${node}` : handle}</Text>
</View>
<View style={styles.actions}>
{actions}
{name && (
<Text numberOfLines={1} style={styles.nameSet}>
{name}
</Text>
)}
{!name && (
<Text numberOfLines={1} style={styles.nameUnset}>
{placeholder}
</Text>
)}
<Text numberOfLines={1} style={styles.handle}>
{node ? `${handle}/${node}` : handle}
</Text>
</View>
<View style={styles.actions}>{actions}</View>
</SafeAreaView>
</Pressable>
);

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

@ -16,37 +16,10 @@ export function useContacts() {
filter: '',
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updateState = (value: any) => {
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(() => {
const {layout} = display.state;
updateState({layout});
@ -61,9 +34,34 @@ export function useContacts() {
return () => {
contact.removeCardListener(setCards);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
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);
updateState({filtered});
}, [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: {
height: 200,
},
membersContainer: {
},
membersContainer: {},
subjectInput: {
flexGrow: 1,
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 {SafeAreaView, Modal, FlatList, View} from 'react-native';
import {styles} from './Content.styled';
@ -12,10 +12,10 @@ import {Confirm} from '../confirm/Confirm';
export function Content({select}: {select: (focus: Focus) => void}) {
const [add, setAdd] = useState(false);
const [adding, setAdding] = useState(false);
const [sealed, setSealed] = useState(false);
const [sealedTopic, setSealedTopic] = useState(false);
const {state, actions} = useContent();
const theme = useTheme();
const [subject, setSubject] = useState('');
const [subjectTopic, setSubjectTopic] = useState('');
const [members, setMembers] = useState([]);
const [alert, setAlert] = useState(false);
const [alertParams] = useState({
@ -26,16 +26,20 @@ export function Content({select}: {select: (focus: Focus) => void}) {
action: () => setAlert(false),
},
});
const cards = (state.sealSet && sealed) ? state.sealable : state.connected;
const cards = state.sealSet && sealedTopic ? state.sealable : state.connected;
const addTopic = async () => {
setAdding(true);
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);
setSubject('');
setSubjectTopic('');
setMembers([]);
setSealed(false);
setSealedTopic(false);
} catch (err) {
console.log(err);
setAdd(false);
@ -61,11 +65,7 @@ export function Content({select}: {select: (focus: Focus) => void}) {
/>
</Surface>
{state.layout !== 'large' && (
<Button
icon="comment-plus"
mode="contained"
style={styles.button}
onPress={() => setAdd(true)}>
<Button icon="comment-plus" mode="contained" style={styles.button} onPress={() => setAdd(true)}>
{state.strings.new}
</Button>
)}
@ -116,11 +116,7 @@ export function Content({select}: {select: (focus: Focus) => void}) {
{state.layout === 'large' && (
<View style={styles.bar}>
<Divider style={styles.divider} />
<Button
icon="comment-plus"
mode="contained"
style={styles.button}
onPress={() => setAdd(true)}>
<Button icon="comment-plus" mode="contained" style={styles.button} onPress={() => setAdd(true)}>
{state.strings.new}
</Button>
</View>
@ -141,8 +137,8 @@ export function Content({select}: {select: (focus: Focus) => void}) {
underlineStyle={styles.inputUnderline}
placeholder={state.strings.subjectOptional}
left={<TextInput.Icon style={styles.icon} icon="label-outline" />}
value={subject}
onChangeText={value => setSubject(value)}
value={subjectTopic}
onChangeText={value => setSubjectTopic(value)}
/>
<Divider style={styles.modalDivider} />
</Surface>
@ -154,13 +150,20 @@ export function Content({select}: {select: (focus: Focus) => void}) {
data={cards}
initialNumToRender={32}
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) {
setMembers([item.cardId, ...members]);
} else {
setMembers(members.filter(cardId => cardId != item.cardId));
setMembers(members.filter(cardId => cardId !== item.cardId));
}
}} />)
}}
/>
);
return (
<Card
containerStyle={{
@ -186,7 +189,7 @@ export function Content({select}: {select: (focus: Focus) => void}) {
{state.sealSet && (
<View style={styles.sealableContent}>
<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>

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

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