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

formatting code

Browse Source
This commit is contained in:
balzack 2024-11-13 13:08:24 -08:00
parent aa49b1ef19
commit 4b52a8aa2c
6 changed files with 180 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/client/web/src/constants/Strings.ts
View File

@ -249,7 +249,7 @@ export const en = {
disable: 'Disable',
confirmDisable: 'Disabling Multi-Factor Authentication',
disablePrompt: 'Are you sure you want to disable multi-factor authentication',
};
}
export const fr = {
unknown: 'Inconnu',
@ -503,7 +503,7 @@ export const fr = {
disable: 'Désactiver',
confirmDisable: "Désactivation de l'authentification multi-facteurs",
disablePrompt: "Êtes-vous sûr de vouloir désactiver l'authentification multi-facteurs",
};
}
export const sp = {
unknown: 'Desconocido',
@ -756,7 +756,7 @@ export const sp = {
disable: 'Desactivar',
confirmDisable: 'Desactivación de la autenticación de dos factores',
disablePrompt: '¿Estás seguro de que quieres desactivar la autenticación de dos factores?',
};
}
export const pt = {
unknown: 'Desconhecido',
@ -765,7 +765,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',
@ -1009,7 +1009,7 @@ export const pt = {
disable: 'Desativar',
confirmDisable: 'Desativando Autenticação de Dois Fatores',
disablePrompt: 'Tem certeza de que deseja desativar a autenticação de dois fatores?',
};
}
export const de = {
unknown: 'Unbekannt',
@ -1262,7 +1262,7 @@ export const de = {
disable: 'Deaktivieren',
confirmDisable: 'Deaktivierung der Zwei-Faktor-Authentifizierung',
disablePrompt: 'Sind Sie sicher, dass Sie die Zwei-Faktor-Authentifizierung deaktivieren möchten?',
};
}
export const ru = {
unknown: 'Неизвестно',
@ -1515,5 +1515,4 @@ export const ru = {
disable: 'Отключить',
confirmDisable: 'Отключение двухфакторной аутентификации',
disablePrompt: 'Вы уверены, что хотите отключить двухфакторную аутентификацию?',
};
}

2
app/client/web/src/contacts/Contacts.tsx
View File

@ -8,7 +8,7 @@ import { ProfileParams } from '../profile/Profile'
import { Colors } from '../constants/Colors'
import { modals } from '@mantine/modals'
function Action({ icon, color, strings, select }: { icon: ReactNode; color: string; strings: { operationFailed: string, tryAgain: string}; select: () => Promise<void> }) {
function Action({ icon, color, strings, select }: { icon: ReactNode; color: string; strings: { operationFailed: string; tryAgain: string }; select: () => Promise<void> }) {
const [loading, setLoading] = useState(false)
const onClick = async () => {
setLoading(true)

2
app/client/web/src/content/Content.module.css
View File

@ -103,7 +103,7 @@
height: 128px;
align-items: center;
justify-content: center;
.noContactsLabel {
color: var(--mantine-color-text-6);
}

79
app/client/web/src/content/Content.tsx
View File

@ -1,36 +1,39 @@
import React, {useState} from 'react';
import React, { useState } from 'react'
import { useContent } from './useContent.hook'
import { Modal, Text, Switch, TextInput, Button } from '@mantine/core'
import { IconSearch, IconMessagePlus, IconLabel } from '@tabler/icons-react'
import classes from './Content.module.css'
import { Channel } from '../channel/Channel'
import { Focus } from 'databag-client-sdk'
import { Card } from '../card/Card';
import { Card } from '../card/Card'
import { modals } from '@mantine/modals'
export function Content({ select }: { select: (focus: Focus) => void }) {
const { state, actions } = useContent()
const [add, setAdd] = useState(false);
const [adding, setAdding] = useState(false);
const [sealed, setSealed] = useState(false);
const [subject, setSubject] = useState('');
const [added, setAdded] = useState([]);
const cards = (state.sealSet && sealed) ? state.sealable : state.connected;
const [add, setAdd] = useState(false)
const [adding, setAdding] = useState(false)
const [sealed, setSealed] = useState(false)
const [subject, setSubject] = useState('')
const [added, setAdded] = useState([])
const cards = state.sealSet && sealed ? state.sealable : state.connected
const addTopic = async () => {
setAdding(true);
setAdding(true)
try {
await actions.addTopic(sealed, subject, added.filter(id => Boolean(cards.find(card => card.cardId === id))))
setAdd(false);
setSealed(false);
setAdded([]);
setSubject('');
await actions.addTopic(
sealed,
subject,
added.filter((id) => Boolean(cards.find((card) => card.cardId === id)))
)
setAdd(false)
setSealed(false)
setAdded([])
setSubject('')
} catch (err) {
console.log(err)
showError()
}
catch (err) {
console.log(err);
showError();
}
setAdding(false);
setAdding(false)
}
const showError = () => {
@ -48,17 +51,23 @@ export function Content({ select }: { select: (focus: Focus) => void }) {
}
const contacts = cards.map((card, idx) => {
const enable = (<Switch key="add" className={classes.addMember} size="sm" checked={Boolean(added.find(id => id === card.cardId))} onChange={(ev) => {
if (ev.currentTarget.checked) {
setAdded([ ...added, card.cardId ]);
} else {
setAdded(added.filter(id => id !== card.cardId))
}
}} />)
return (
<Card key={idx} className={classes.card} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} actions={[enable]} />
const enable = (
<Switch
key="add"
className={classes.addMember}
size="sm"
checked={Boolean(added.find((id) => id === card.cardId))}
onChange={(ev) => {
if (ev.currentTarget.checked) {
setAdded([...added, card.cardId])
} else {
setAdded(added.filter((id) => id !== card.cardId))
}
}}
/>
)
});
return <Card key={idx} className={classes.card} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} actions={[enable]} />
})
const channels = state.filtered.map((channel, idx) => {
return (
@ -118,21 +127,19 @@ export function Content({ select }: { select: (focus: Focus) => void }) {
onChange={(event) => setSubject(event.currentTarget.value)}
/>
<div>
<Text className={classes.members}>{ state.strings.members }</Text>
<Text className={classes.members}>{state.strings.members}</Text>
<div className={classes.addMembers}>
{ cards.length === 0 && (
{cards.length === 0 && (
<div className={classes.noContacts}>
<Text className={classes.noContactsLabel}>{ state.strings.noContacts }</Text>
<Text className={classes.noContactsLabel}>{state.strings.noContacts}</Text>
</div>
)}
{ contacts }
{contacts}
</div>
</div>
<div className={classes.addControls}>
<div className={classes.addSealed}>
{ state.sealSet && (
<Switch label={state.strings.sealedTopic} size="md" labelPosition="left" onChange={(ev) => setSealed(ev.currentTarget.checked)} />
)}
{state.sealSet && <Switch label={state.strings.sealedTopic} size="md" labelPosition="left" onChange={(ev) => setSealed(ev.currentTarget.checked)} />}
</div>
<Button variant="default" onClick={() => setAdd(false)}>
{state.strings.cancel}

254
app/client/web/src/content/useContent.hook.ts
View File

@ -1,25 +1,25 @@
import {useState, useContext, useEffect, useRef} from 'react';
import {AppContext} from '../context/AppContext';
import {DisplayContext} from '../context/DisplayContext';
import {ContextType} from '../context/ContextType';
import {Channel, Card, Profile, Config} from 'databag-client-sdk';
import {notes, unknown, iii_group, iiii_group, iiiii_group, group} from '../constants/Icons';
import { useState, useContext, useEffect, useRef } from 'react'
import { AppContext } from '../context/AppContext'
import { DisplayContext } from '../context/DisplayContext'
import { ContextType } from '../context/ContextType'
import { Channel, Card, Profile, Config } from 'databag-client-sdk'
import { notes, unknown, iii_group, iiii_group, iiiii_group, group } from '../constants/Icons'
type ChannelParams = {
cardId: string;
channelId: string;
sealed: boolean;
hosted: boolean;
unread: boolean;
imageUrl: string;
subject: (string | null)[];
message: string;
};
cardId: string
channelId: string
sealed: boolean
hosted: boolean
unread: boolean
imageUrl: string
subject: (string | null)[]
message: string
}
export function useContent() {
const cardChannels = useRef(new Map<string | null, Channel[]>());
const app = useContext(AppContext) as ContextType;
const display = useContext(DisplayContext) as ContextType;
const cardChannels = useRef(new Map<string | null, Channel[]>())
const app = useContext(AppContext) as ContextType
const display = useContext(DisplayContext) as ContextType
const [state, setState] = useState({
strings: display.state.strings,
layout: null,
@ -31,213 +31,213 @@ export function useContent() {
filter: '',
topic: '',
sealSet: false,
});
})
const compare = (a: Card, b: Card) => {
const aval = `${a.handle}/${a.node}`;
const bval = `${b.handle}/${b.node}`;
const aval = `${a.handle}/${a.node}`
const bval = `${b.handle}/${b.node}`
if (aval < bval) {
return state.sortAsc ? 1 : -1;
return state.sortAsc ? 1 : -1
} else if (aval > bval) {
return state.sortAsc ? -1 : 1;
return state.sortAsc ? -1 : 1
}
return 0;
};
return 0
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updateState = (value: any) => {
setState(s => ({...s, ...value}));
};
setState((s) => ({ ...s, ...value }))
}
useEffect(() => {
const {layout} = display.state;
updateState({layout});
}, [display.state]);
const { layout } = display.state
updateState({ layout })
}, [display.state])
useEffect(() => {
const channels = state.sorted.map(channel => {
const {cardId, channelId, unread, sealed, members, dataType, data, lastTopic} = channel;
const contacts = [] as (Card | undefined)[];
const channels = state.sorted.map((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);
const card = state.cards.find((contact) => contact.cardId === cardId)
if (card) {
contacts.push(card);
contacts.push(card)
}
}
const guests = members.filter(contact => contact.guid !== state.guid);
const guests = members.filter((contact) => contact.guid !== state.guid)
const guestCards = guests
.map(contact => state.cards.find(card => card.guid === contact.guid))
.map((contact) => state.cards.find((card) => card.guid === contact.guid))
.sort((a, b) => {
if (!a && !b) {
return 0;
return 0
} else if (!a) {
return 1;
return 1
} else if (!b) {
return -1;
return -1
} else if (a.handle > b.handle) {
return 1;
return 1
} else {
return 0;
return 0
}
});
contacts.push(...guestCards);
})
contacts.push(...guestCards)
const buildSubject = () => {
if (contacts.length === 0) {
return [];
return []
}
return contacts.map(contact => (contact ? contact.handle : null));
};
return contacts.map((contact) => (contact ? contact.handle : null))
}
const selectImage = () => {
if (contacts.length == 0) {
return notes;
return notes
} else if (contacts.length == 1) {
if (contacts[0]) {
return contacts[0].imageUrl;
return contacts[0].imageUrl
} else {
return unknown;
return unknown
}
} else if (contacts.length == 2) {
return iii_group;
return iii_group
} else if (contacts.length == 3) {
return iiii_group;
return iiii_group
} else if (contacts.length == 4) {
return iiiii_group;
return iiiii_group
} else {
return group;
return group
}
};
}
const getMessage = () => {
if (!lastTopic || !lastTopic.status) {
return '';
return ''
}
if (lastTopic.dataType === 'superbasictopic') {
if (lastTopic.data?.text) {
return lastTopic.data.text;
return lastTopic.data.text
} else {
return ''
}
} else if (lastTopic.dataType === 'sealedtopic') {
if (lastTopic.data) {
if (lastTopic.data.message?.text) {
return lastTopic.data.message.text;
return lastTopic.data.message.text
} else {
return '';
return ''
}
} else {
return null;
return null
}
}
}
const hosted = cardId == null;
const subject = data?.subject ? [data.subject] : buildSubject();
const message = getMessage();
const imageUrl = selectImage();
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();
const filtered = channels.filter(item => {
const search = state.filter?.toLowerCase()
const filtered = channels.filter((item) => {
if (search) {
if (item.subject?.find(value => value?.toLowerCase().includes(search))) {
return true;
if (item.subject?.find((value) => value?.toLowerCase().includes(search))) {
return true
}
if (item.message?.toLowerCase().includes(search)) {
return true;
return true
}
return false;
return false
}
return true;
});
return true
})
updateState({filtered});
}, [state.sorted, state.cards, state.guid, state.filter]);
updateState({ filtered })
}, [state.sorted, state.cards, state.guid, state.filter])
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;
updateState({guid});
};
const { guid } = profile
updateState({ guid })
}
const setCards = (cards: Card[]) => {
const sorted = cards.sort(compare);
const connected = [];
const sealable = [];
sorted.forEach(card => {
const sorted = cards.sort(compare)
const connected = []
const sealable = []
sorted.forEach((card) => {
if (card.status === 'connected') {
connected.push(card);
connected.push(card)
if (card.sealable) {
sealable.push(card);
sealable.push(card)
}
}
});
updateState({cards, connected, sealable});
};
const setChannels = ({channels, cardId}: {channels: Channel[]; cardId: string | null}) => {
cardChannels.current.set(cardId, channels);
const merged = [] as Channel[];
cardChannels.current.forEach(values => {
merged.push(...values);
});
})
updateState({ cards, connected, sealable })
}
const setChannels = ({ channels, cardId }: { channels: Channel[]; cardId: string | null }) => {
cardChannels.current.set(cardId, channels)
const merged = [] as Channel[]
cardChannels.current.forEach((values) => {
merged.push(...values)
})
const sorted = merged.sort((a, b) => {
const aUpdated = a?.lastTopic?.created;
const bUpdated = b?.lastTopic?.created;
const aUpdated = a?.lastTopic?.created
const bUpdated = b?.lastTopic?.created
if (aUpdated == bUpdated) {
return 0;
return 0
} else if (!aUpdated) {
return 1;
return 1
} else if (!bUpdated) {
return -1;
return -1
} else if (aUpdated < bUpdated) {
return 1;
return 1
} else {
return -1;
return -1
}
});
updateState({sorted});
};
})
updateState({ sorted })
}
const {identity, contact, content, settings} = app.state.session;
identity.addProfileListener(setProfile);
contact.addCardListener(setCards);
content.addChannelListener(setChannels);
settings.addConfigListener(setConfig);
const { identity, contact, content, settings } = app.state.session
identity.addProfileListener(setProfile)
contact.addCardListener(setCards)
content.addChannelListener(setChannels)
settings.addConfigListener(setConfig)
return () => {
identity.removeProfileListener(setProfile);
contact.removeCardListener(setCards);
content.removeChannelListener(setChannels);
settings.removeConfigListener(setConfig);
};
}, []);
identity.removeProfileListener(setProfile)
contact.removeCardListener(setCards)
content.removeChannelListener(setChannels)
settings.removeConfigListener(setConfig)
}
}, [])
const actions = {
setFilter: (filter: string) => {
updateState({filter});
updateState({ filter })
},
setTopic: (topic: string) => {
updateState({topic});
updateState({ topic })
},
getFocus: (cardId: string | null, channelId: string) => {
return app.state.session.setFocus(cardId, channelId);
return app.state.session.setFocus(cardId, channelId)
},
addTopic: async (sealed: boolean, subject: string, contacts: string[]) => {
const content = app.state.session.getContent();
await new Promise(r => setTimeout(r, 2000));
const content = app.state.session.getContent()
await new Promise((r) => setTimeout(r, 2000))
if (sealed) {
await content.addChannel(true, 'sealed', {subject}, contacts);
await content.addChannel(true, 'sealed', { subject }, contacts)
} else {
await content.addChannel(false, 'superbasic', {subject}, contacts);
await content.addChannel(false, 'superbasic', { subject }, contacts)
}
},
};
}
return {state, actions};
return { state, actions }
}

2
app/client/web/src/conversation/Conversation.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Focus } from 'databag-client-sdk';
import { Focus } from 'databag-client-sdk'
export function Conversation({ focus }: { focus: Focus }) {
return <div>CONVERSATION</div>