diff --git a/app/client/mobile/src/card/Card.tsx b/app/client/mobile/src/card/Card.tsx index 6d5d2151..0dc85d17 100644 --- a/app/client/mobile/src/card/Card.tsx +++ b/app/client/mobile/src/card/Card.tsx @@ -27,13 +27,21 @@ export function Card({ - {name && {name}} - {!name && {placeholder}} - {node ? `${handle}/${node}` : handle} - - - {actions} + {name && ( + + {name} + + )} + {!name && ( + + {placeholder} + + )} + + {node ? `${handle}/${node}` : handle} + + {actions} ); diff --git a/app/client/mobile/src/constants/Strings.ts b/app/client/mobile/src/constants/Strings.ts index 3cd407a8..3079f692 100644 --- a/app/client/mobile/src/constants/Strings.ts +++ b/app/client/mobile/src/constants/Strings.ts @@ -767,7 +767,7 @@ export const pt = { server: 'Servidor', token: 'Code', delayMessage: 'A geração da chave pode levar vários minutos.', - + code: 'pt', settings: 'Configurações', contacts: 'Contatos', diff --git a/app/client/mobile/src/contacts/useContacts.hook.ts b/app/client/mobile/src/contacts/useContacts.hook.ts index ddf01a9c..6f451a6c 100644 --- a/app/client/mobile/src/contacts/useContacts.hook.ts +++ b/app/client/mobile/src/contacts/useContacts.hook.ts @@ -16,40 +16,13 @@ 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 }); + const {layout} = display.state; + updateState({layout}); }, [display.state]); useEffect(() => { @@ -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]); diff --git a/app/client/mobile/src/content/Content.styled.ts b/app/client/mobile/src/content/Content.styled.ts index d871b9d9..aa294996 100644 --- a/app/client/mobile/src/content/Content.styled.ts +++ b/app/client/mobile/src/content/Content.styled.ts @@ -137,7 +137,7 @@ export const styles = StyleSheet.create({ position: 'absolute', right: 0, top: 0, - backgroundColor: 'transparent', + backgroundColor: 'transparent', }, addLabel: { flexGrow: 1, @@ -191,8 +191,7 @@ export const styles = StyleSheet.create({ members: { height: 200, }, - membersContainer: { - }, + membersContainer: {}, subjectInput: { flexGrow: 1, backgroundColor: 'transparent', diff --git a/app/client/mobile/src/content/Content.tsx b/app/client/mobile/src/content/Content.tsx index f49f8352..6f0f27f3 100644 --- a/app/client/mobile/src/content/Content.tsx +++ b/app/client/mobile/src/content/Content.tsx @@ -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,21 +26,25 @@ 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); setAlert(true); - } + } setAdding(false); }; @@ -61,11 +65,7 @@ export function Content({select}: {select: (focus: Focus) => void}) { /> {state.layout !== 'large' && ( - )} @@ -116,11 +116,7 @@ export function Content({select}: {select: (focus: Focus) => void}) { {state.layout === 'large' && ( - @@ -131,7 +127,7 @@ export function Content({select}: {select: (focus: Focus) => void}) { - { state.strings.newTopic } + {state.strings.newTopic} setAdd(false)} /> void}) { underlineStyle={styles.inputUnderline} placeholder={state.strings.subjectOptional} left={} - value={subject} - onChangeText={value => setSubject(value)} + value={subjectTopic} + onChangeText={value => setSubjectTopic(value)} /> @@ -154,13 +150,20 @@ export function Content({select}: {select: (focus: Focus) => void}) { data={cards} initialNumToRender={32} renderItem={({item}) => { - const enable = ( cardId === item.cardId))} onValueChange={flag => { - if (flag) { - setMembers([ item.cardId, ...members ]); - } else { - setMembers(members.filter(cardId => cardId != item.cardId)); - } - }} />) + const enable = ( + cardId === item.cardId))} + onValueChange={flag => { + if (flag) { + setMembers([item.cardId, ...members]); + } else { + setMembers(members.filter(cardId => cardId !== item.cardId)); + } + }} + /> + ); return ( void}) { - { state.sealSet && ( + {state.sealSet && ( - { state.strings.sealedTopic } - setSealed(flag)} /> + {state.strings.sealedTopic} + setSealedTopic(flag)} /> )} @@ -200,7 +203,7 @@ export function Content({select}: {select: (focus: Focus) => void}) { - + ); diff --git a/app/client/mobile/src/content/useContent.hook.ts b/app/client/mobile/src/content/useContent.hook.ts index f5a2b633..df0096bb 100644 --- a/app/client/mobile/src/content/useContent.hook.ts +++ b/app/client/mobile/src/content/useContent.hook.ts @@ -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(); @@ -159,8 +167,8 @@ export function useContent() { useEffect(() => { const setConfig = (config: Config) => { - const { sealSet, sealUnlocked } = config; - updateState({ sealSet: sealSet && sealUnlocked }); + const {sealSet, sealUnlocked} = config; + updateState({sealSet: sealSet && sealUnlocked}); }; const setProfile = (profile: Profile) => { const {guid} = profile; @@ -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 = { diff --git a/app/client/mobile/src/registry/useRegistry.hook.ts b/app/client/mobile/src/registry/useRegistry.hook.ts index 0ad98c2f..015a0641 100644 --- a/app/client/mobile/src/registry/useRegistry.hook.ts +++ b/app/client/mobile/src/registry/useRegistry.hook.ts @@ -45,8 +45,8 @@ export function useRegistry() { }; useEffect(() => { - const { layout } = display.state; - updateState({ layout }); + const {layout} = display.state; + updateState({layout}); }, [display.state]); useEffect(() => {