formatting code

app/client/web/src/constants/Strings.ts

@@ -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: 'Вы уверены, что хотите отключить двухфакторную аутентификацию?',
-};
+}
-

app/client/web/src/contacts/Contacts.tsx

@@ -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)

app/client/web/src/content/Content.module.css

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

app/client/web/src/content/Content.tsx

@@ -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 [add, setAdd] = useState(false)
-  const [adding, setAdding] = useState(false);
+  const [adding, setAdding] = useState(false)
-  const [sealed, setSealed] = useState(false);
+  const [sealed, setSealed] = useState(false)
-  const [subject, setSubject] = useState('');
+  const [subject, setSubject] = useState('')
-  const [added, setAdded] = useState([]);
+  const [added, setAdded] = useState([])
-  const cards = (state.sealSet && sealed) ? state.sealable : state.connected;
+  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))))
+      await actions.addTopic(
-      setAdd(false);
+        sealed,
-      setSealed(false);
+        subject,
-      setAdded([]);
+        added.filter((id) => Boolean(cards.find((card) => card.cardId === id)))
-      setSubject('');
+      )
+      setAdd(false)
+      setSealed(false)
+      setAdded([])
+      setSubject('')
+    } catch (err) {
+      console.log(err)
+      showError()
     }
-    catch (err) {
+    setAdding(false)
-      console.log(err);
-      showError();
-    }
-    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) => {
+    const enable = (
-      if (ev.currentTarget.checked) {
+      <Switch
-        setAdded([ ...added, card.cardId ]);
+        key="add"
-      } else {
+        className={classes.addMember}
-        setAdded(added.filter(id => id !== card.cardId))
+        size="sm"
-      }
+        checked={Boolean(added.find((id) => id === card.cardId))}
-    }} />)
+        onChange={(ev) => {
-    return (
+          if (ev.currentTarget.checked) {
-      <Card key={idx} className={classes.card} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} actions={[enable]} />
+            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 && (
+              {state.sealSet && <Switch label={state.strings.sealedTopic} size="md" labelPosition="left" onChange={(ev) => setSealed(ev.currentTarget.checked)} />}
-                <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}

app/client/web/src/content/useContent.hook.ts

@@ -1,25 +1,25 @@
-import {useState, useContext, useEffect, useRef} from 'react';
+import { useState, useContext, useEffect, useRef } from 'react'
-import {AppContext} from '../context/AppContext';
+import { AppContext } from '../context/AppContext'
-import {DisplayContext} from '../context/DisplayContext';
+import { DisplayContext } from '../context/DisplayContext'
-import {ContextType} from '../context/ContextType';
+import { ContextType } from '../context/ContextType'
-import {Channel, Card, Profile, Config} from 'databag-client-sdk';
+import { Channel, Card, Profile, Config } from 'databag-client-sdk'
-import {notes, unknown, iii_group, iiii_group, iiiii_group, group} from '../constants/Icons';
+import { notes, unknown, iii_group, iiii_group, iiiii_group, group } from '../constants/Icons'
 
 type ChannelParams = {
-  cardId: string;
+  cardId: string
-  channelId: string;
+  channelId: string
-  sealed: boolean;
+  sealed: boolean
-  hosted: boolean;
+  hosted: boolean
-  unread: boolean;
+  unread: boolean
-  imageUrl: string;
+  imageUrl: string
-  subject: (string | null)[];
+  subject: (string | null)[]
-  message: string;
+  message: string
-};
+}
 
 export function useContent() {
-  const cardChannels = useRef(new Map<string | null, Channel[]>());
+  const cardChannels = useRef(new Map<string | null, Channel[]>())
-  const app = useContext(AppContext) as ContextType;
+  const app = useContext(AppContext) as ContextType
-  const display = useContext(DisplayContext) 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 aval = `${a.handle}/${a.node}`
-    const bval = `${b.handle}/${b.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;
+    const { layout } = display.state
-    updateState({layout});
+    updateState({ layout })
-  }, [display.state]);
+  }, [display.state])
 
   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) {
-        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 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()
-    const filtered = channels.filter(item => {
+    const filtered = channels.filter((item) => {
       if (search) {
-        if (item.subject?.find(value => value?.toLowerCase().includes(search))) {
+        if (item.subject?.find((value) => value?.toLowerCase().includes(search))) {
-          return true;
+          return true
         }
         if (item.message?.toLowerCase().includes(search)) {
-          return true;
+          return true
         }
-        return false;
+        return false
       }
-      return true;
+      return true
-    });
+    })
 
-    updateState({filtered});
+    updateState({ filtered })
-  }, [state.sorted, state.cards, state.guid, state.filter]);
+  }, [state.sorted, state.cards, state.guid, state.filter])
 
   useEffect(() => {
     const setConfig = (config: Config) => {
-      const { sealSet, sealUnlocked } = config;
+      const { sealSet, sealUnlocked } = config
-      updateState({ sealSet: sealSet && sealUnlocked });
+      updateState({ sealSet: sealSet && sealUnlocked })
-    };
+    }
     const setProfile = (profile: Profile) => {
-      const {guid} = profile;
+      const { guid } = profile
-      updateState({guid});
+      updateState({ guid })
-    };
+    }
     const setCards = (cards: Card[]) => {
-      const sorted = cards.sort(compare);
+      const sorted = cards.sort(compare)
-      const connected = [];
+      const connected = []
-      const sealable = [];
+      const sealable = []
-      sorted.forEach(card => {
+      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});
+      updateState({ cards, connected, sealable })
-    };
+    }
-    const setChannels = ({channels, cardId}: {channels: Channel[]; cardId: string | null}) => {
+    const setChannels = ({ channels, cardId }: { channels: Channel[]; cardId: string | null }) => {
-      cardChannels.current.set(cardId, channels);
+      cardChannels.current.set(cardId, channels)
-      const merged = [] as Channel[];
+      const merged = [] as Channel[]
-      cardChannels.current.forEach(values => {
+      cardChannels.current.forEach((values) => {
-        merged.push(...values);
+        merged.push(...values)
-      });
+      })
       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) {
-          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;
+    const { identity, contact, content, settings } = app.state.session
-    identity.addProfileListener(setProfile);
+    identity.addProfileListener(setProfile)
-    contact.addCardListener(setCards);
+    contact.addCardListener(setCards)
-    content.addChannelListener(setChannels);
+    content.addChannelListener(setChannels)
-    settings.addConfigListener(setConfig);
+    settings.addConfigListener(setConfig)
 
     return () => {
-      identity.removeProfileListener(setProfile);
+      identity.removeProfileListener(setProfile)
-      contact.removeCardListener(setCards);
+      contact.removeCardListener(setCards)
-      content.removeChannelListener(setChannels);
+      content.removeChannelListener(setChannels)
-      settings.removeConfigListener(setConfig);
+      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();
+      const content = app.state.session.getContent()
-      await new Promise(r => setTimeout(r, 2000));
+      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 }
 }

app/client/web/src/conversation/Conversation.tsx

@@ -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>