adding translations to contact component

2025-02-11 19:19:16 +00:00 · 2024-02-28 15:04:43 -08:00 · 2024-02-28 15:04:43 -08:00 · ee3e528337
commit ee3e528337
parent 5db44ebaff
5 changed files with 181 additions and 68 deletions
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@ -20,7 +20,8 @@ export const Colors = {
  link: '#0077CC',

  itemDivider: '#eeeeee',
-  
+
+  unsaved: '#ffff00',  
  connected: '#44cc44',
  connecting: '#dd88ff',
  requested: '#4488ff',
@ -66,6 +67,12 @@ export const LightTheme = {
  sectionBorder: '#bbbbbb',
  headerBorder: '#aaaaaa',
  drawerBorder: '#cccccc',
+  unsaved: '#ffff00',  
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
 };

 export const DarkTheme = {
@ -96,5 +103,11 @@ export const DarkTheme = {
  sectionBorder: '#777777',
  headerBorder: '#aaaaaa',
  drawerBorder: '#444444',
+  unsaved: '#ffff00',  
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
 };

--- a/net/web/src/constants/Strings.js
+++ b/net/web/src/constants/Strings.js
@ -22,7 +22,7 @@ export const en = {
  sealedTopic: 'Sealed Topic',
  start: 'Start',

-  communication: 'Communication for the decentralized web',
+  communication: 'Communication for the Decentralized Web',
  setupProfile: 'Setup your profile',
  connectPeople: 'Connect with people',
  startConversation: 'Start a conversation',
@ -42,6 +42,7 @@ export const en = {
  application: 'Application',
  account: 'Account',
  name: 'Name',
+  node: 'Node',
  location: 'Location',
  description: 'Description',
  timeFormat: 'Time Format',
@ -64,6 +65,7 @@ export const en = {
  confirmPassword: 'Confirm Password',
  deleteKey: 'Type \'delete\' to remove key',
  delete: 'delete',
+  remove: 'Delete',
  username: 'Username',
  updateProfile: 'Update Profile',

@ -75,6 +77,22 @@ export const en = {
  connectingTip: 'Connection Requested',
  pendingTip: 'Connection Requested by Unknown Contact',
  confirmedTip: 'Disconnected Contact',
+  unsavedTip: 'Unknown Contact',
+
+  actions: 'Actions',
+  resync: 'Resync',
+  connect: 'Connect',
+  disconnect: 'Disconnect',
+  disconnectContact: 'Disconnect Contact',
+  deleteContact: 'Delete Contact',
+  saveContact: 'Save Contact',
+  saveAccept: 'Save and Accept Connection',
+  saveRequest: 'Save and Request Connection',
+  ignoreRequest: 'Ignore Request',
+  acceptConnection: 'Accept Connection',
+  requestConnection: 'Request Connection',
+  cancelRequest: 'Cancel Request',
+  resyncContact: 'Resync Contact',
 };

 export const fr = {
@ -101,7 +119,7 @@ export const fr = {
  sealedTopic: 'Sujet Sécurisé',
  start: 'Commencer',

-  communication: 'Communication pour le web décentralisé',
+  communication: 'Communication pour le Web Décentralisé',
  setupProfile: 'Configurez votre profil',
  connectPeople: 'Connectez avec les gens',
  startConversation: 'Commencez une conversation',
@ -121,6 +139,7 @@ export const fr = {
  application: 'Application',
  account: 'Compte',
  name: 'Nom',
+  node: 'Serveur',
  location: 'Emplacement',
  description: 'Description',
  timeFormat: 'Format de l\'heure',
@ -143,16 +162,33 @@ export const fr = {
  confirmPassword: 'Confirmer le Mot de Passe',
  deleteKey: 'Tapez \'supprimer\' pour supprimer la clé',
  delete: 'supprimer',
+  remove: 'Supprimer',
  username: 'Nom d\'Utilisateur',
  updateProfile: 'Mettre à Jour le Profil',

-  syncError: 'Erreur de synchronisation',
+  syncError: 'Erreur de Synchronisation',
  callTip: 'Appeler le Contact',
-  messageTip: 'Envoyer un message au contact',
-  connectedTip: 'Contact connecté',
-  requestedTip: 'Demande de connexion envoyée par le contact',
-  connectingTip: 'Demande de connexion en cours',
-  pendingTip: 'Demande de connexion envoyée par un contact inconnu',
-  confirmedTip: 'Contact déconnecté'
+  messageTip: 'Envoyer un Message au Contact',
+  connectedTip: 'Contact Connecté',
+  requestedTip: 'Demande de Connexion Envoyée par le Contact',
+  connectingTip: 'Demande de Connexion en Cours',
+  pendingTip: 'Demande de Connexion Envoyée par un Contact Inconnu',
+  confirmedTip: 'Contact Déconnecté',
+  unsavedTip: 'Contact Inconnu',
+
+  actions: 'Actions',
+  resync: 'Resynchroniser',
+  connect: 'Connecter',
+  disconnect: 'Déconnecter',
+  disconnectContact: 'Déconnecter le Contact',
+  deleteContact: 'Supprimer le Contact',
+  saveContact: 'Enregistrer le Contact',
+  saveAccept: 'Enregistrer et Accepter la Connexion',
+  saveRequest: 'Enregistrer et Demander la Connexion',
+  ignoreRequest: 'Ignorer la Demande',
+  acceptConnection: 'Accepter la Connexion',
+  requestConnection: 'Demander une Connexion',
+  cancelRequest: 'Annuler la Demande',
+  resyncContact: 'Resynchroniser le Contact',
 };

--- a/net/web/src/session/contact/Contact.jsx
+++ b/net/web/src/session/contact/Contact.jsx
@ -1,5 +1,5 @@
 import { Modal, Button, Tooltip } from 'antd';
-import { ContactWrapper } from './Contact.styled';
+import { StatusConnected, StatusRequested, StatusConnecting, StatusPending, StatusConfirmed, StatusUnsaved, ContactWrapper } from './Contact.styled';
 import { useContact } from './useContact.hook';
 import { Logo } from 'logo/Logo';
 import { SyncOutlined, UserAddOutlined, UserDeleteOutlined, UserSwitchOutlined, StopOutlined, DeleteOutlined, DatabaseOutlined, CloseOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
@ -9,9 +9,6 @@ export function Contact({ close, guid, listing }) {
  const [ modal, modalContext ] = Modal.useModal();
  const { state, actions } = useContact(guid, listing, close);

-console.log(state.busy);
-
-
  const updateContact = async (action) => {
    try {
      await action();
@ -54,7 +51,7 @@ console.log(state.busy);
                <div className="data">{ state.name }</div>
              )}
              { !state.name && (
-                <div className="data notset">Name</div>
+                <div className="data notset">{ state.strings.name }</div>
              )}
            </div>
            { state.node && (
@ -69,7 +66,7 @@ console.log(state.busy);
                <div className="data">{ state.location }</div>
              )}
              { !state.location && (
-                <div className="data notset">Location</div>
+                <div className="data notset">{ state.strings.location }</div>
              )}
            </div>
            <div className="description">
@ -78,91 +75,124 @@ console.log(state.busy);
                <div className="data">{ state.description }</div>
              )}
              { !state.description && (
-                <div className="data notset">Description</div>
+                <div className="data notset">{ state.strings.description }</div>
              )}
            </div>
          </div>
        </div>

        <div className="actions">
-          <div className="label">Actions</div>
+          <div className="label">{ state.strings.actions }</div>
          <div className="controls">
            { state.status === 'connected' && (
-              <Tooltip placement="top" title="Disconnect Contact">
-                <Button className="button" type="primary" loading={state.busy} icon={<UserDeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>Disconnect</Button>
+              <Tooltip placement="top" title={state.strings.disconnectContact}>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserDeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.disconnect }</Button>
              </Tooltip>
            )}
            { state.status === 'connected' && (
-              <Tooltip placement="top" title="Delete Contact">
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>Delete</Button>
+              <Tooltip placement="top" title={state.strings.deleteContact}>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>{ state.strings.remove }</Button>
              </Tooltip>
            )}
            { state.status === 'pending' && (
-              <Tooltip placement="top" title="Save Contact">
-                <Button className="button" type="primary" loading={state.busy} icon={<UserAddOutlined />} size="medium"  onClick={() => updateContact(actions.confirmContact)}>Save</Button>
+              <Tooltip placement="top" title={state.strings.saveContact}>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserAddOutlined />} size="medium"  onClick={() => updateContact(actions.confirmContact)}>{ state.strings.save }</Button>
              </Tooltip>
            )}
            { state.status === 'pending' && (
-              <Tooltip placement="top" title="Save and Accept">
-                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.connect)}>Connect</Button>
+              <Tooltip placement="top" title={state.strings.saveAccept}>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.connect)}>{ state.strings.connect }</Button>
              </Tooltip>
            )}
            { state.status === 'pending' && (
-              <Tooltip placement="top" title="Ignore Request">
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>Cancel</Button>
+              <Tooltip placement="top" title={state.strings.ignoreRequest}>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>{ state.strings.cancel }</Button>
              </Tooltip>
            )}
-            { state.status === 'request received' && (
-              <Tooltip placement="top" title="Accept Connection">
-                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.saveConnect)}>Connect</Button>
+            { state.status === 'requested' && (
+              <Tooltip placement="top" title={state.strings.acceptConnection}>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.saveConnect)}>{ state.strings.cancel }</Button>
              </Tooltip>
            )}
-            { state.status === 'request received' && (
-              <Tooltip placement="top" title="Ignore Request">
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>Cancel</Button>
+            { state.status === 'requested' && (
+              <Tooltip placement="top" title={state.strings.ignoreRequest}>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.cancel }</Button>
              </Tooltip>
            )}
-            { state.status === 'request sent' && (
+            { state.status === 'connecting' && (
              <Tooltip placement="top" title="Cancel Request">
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>Cancel</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.cancel }</Button>
              </Tooltip>
            )}
-            { state.status === 'request sent' && (
-              <Tooltip placement="top" title="Delete Contact">
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>Delete</Button>
+            { state.status === 'connecting' && (
+              <Tooltip placement="top" title={state.strings.deleteContact}>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>{ state.strings.remove }</Button>
              </Tooltip>
            )}
-            { state.status === 'saved' && (
-              <Tooltip placement="top" title="Request Connection">
-                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.connect)}>Connect</Button>
+            { state.status === 'confirmed' && (
+              <Tooltip placement="top" title={state.strings.requestConnection}>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.connect)}>{ state.strings.connect }</Button>
              </Tooltip>
            )}
-            { state.status === 'saved' && (
-              <Tooltip placement="top" title="Delete Contact">
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>Delete</Button>
+            { state.status === 'confirmed' && (
+              <Tooltip placement="top" title={state.strings.deleteContact}>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>{ state.strings.remove }</Button>
              </Tooltip>
            )}
            { state.status === 'unsaved' && (
-              <Tooltip placement="top" title="Save Contact">
-                <Button className="button" type="primary" loading={state.busy} icon={<UserAddOutlined />} size="medium"  onClick={() => updateContact(actions.saveContact)}>Save</Button>
+              <Tooltip placement="top" title={state.strings.saveContact}>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserAddOutlined />} size="medium"  onClick={() => updateContact(actions.saveContact)}>{ state.strings.save }</Button>
              </Tooltip>
            )}
            { state.status === 'unsaved' && (
-              <Tooltip placement="top" title="Save and Request">
-                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.saveConnect)}>Connect</Button>
+              <Tooltip placement="top" title={state.strings.saveRequest}>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.saveConnect)}>{ state.strings.connect }</Button>
              </Tooltip>
            )}
            { state.offsync && (
-              <Tooltip placement="top" title="Resync Contact">
-                <Button className="button" type="primary" loading={state.busy} icon={<SyncOutlined />} size="medium"  onClick={() => updateContact(actions.resync)}>Resync</Button>
+              <Tooltip placement="top" title={state.strings.resyncContact}>
+                <Button className="button" type="primary" loading={state.busy} icon={<SyncOutlined />} size="medium"  onClick={() => updateContact(actions.resync)}>{ state.strings.resync }</Button>
              </Tooltip>
            )}
          </div>
        </div>

-        <div className="footer">
-          <div className="status">Status: { state.status }</div>
-        </div>
+        { state.status === 'connected' && (
+          <div className="footer">
+            <StatusConnected />
+            <div className="status">{state.strings.connectedTip}</div>
+          </div>
+        )}
+        { state.status === 'requested' && (
+          <div className="footer">
+            <StatusRequested />
+            <div className="status">{state.strings.requestedTip}</div>
+          </div>
+        )}
+        { state.status === 'connecting' && (
+          <div className="footer">
+            <StatusConnecting />
+            <div className="status">{state.strings.connectingTip}</div>
+          </div>
+        )}
+        { state.status === 'pending' && (
+          <div className="footer">
+            <StatusPending />
+            <div className="status">{state.strings.pendingTip}</div>
+          </div>
+        )}
+        { state.status === 'confirmed' && (
+          <div className="footer">
+            <StatusConfirmed />
+            <div className="status">{state.strings.confirmedTip}</div>
+          </div>
+        )}
+        { state.status === 'unsaved' && (
+          <div className="footer">
+            <StatusUnsaved />
+            <div className="status">{state.strings.unsavedTip}</div>
+          </div>
+        )}
      </div>
    </ContactWrapper>
  );
--- a/net/web/src/session/contact/Contact.styled.js
+++ b/net/web/src/session/contact/Contact.styled.js
@ -208,6 +208,8 @@ export const ContactWrapper = styled.div`
    display: flex;
    flex-direction: row;
    gap: 16px;
+    flex-wrap: wrap;
+    justify-content: space-evenly;

    .button {
      display: flex;
@ -241,6 +243,51 @@ export const ContactWrapper = styled.div`
    justify-content: center;
    padding-bottom: 16px;
    color: ${props => props.theme.hintText};
+    align-items: center;
+    gap: 8px;
  }
 `

+export const StatusConnected = styled.div`
+  background-color: ${props => props.theme.connected};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusConnecting = styled.div`
+  background-color: ${props => props.theme.connecting};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusRequested = styled.div`
+  background-color: ${props => props.theme.requested};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusPending = styled.div`
+  background-color: ${props => props.theme.pending};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusConfirmed = styled.div`
+  background-color: ${props => props.theme.confirmed};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusUnsaved = styled.div`
+  background-color: ${props => props.theme.unsaved};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+
--- a/net/web/src/session/contact/useContact.hook.js
+++ b/net/web/src/session/contact/useContact.hook.js
@ -30,26 +30,13 @@ export function useContact(guid, listing, close) {
    setState((s) => ({ ...s, ...value }));
  }

-  const statusMap = (status) => {
-    if (status === 'confirmed') {
-      return 'saved';
-    }
-    if (status === 'requested') {
-      return 'request received';
-    }
-    if (status === 'connecting') {
-      return 'request sent';
-    }
-    return status;
-  }
-
  useEffect(() => {
    const contact = getCardByGuid(card.state.cards, guid);
    if (contact) {
      const profile = contact?.data?.cardProfile;
      const detail = contact?.data?.cardDetail;
      const { imageSet, name, location, description, handle, node } = profile;      
-      const status = statusMap(detail.status);
+      const status = detail.status;
      const cardId = contact.id;
      const offsync = contact.offsync;
      const logo = imageSet ? card.actions.getCardImageUrl(cardId) : null;