adding message and call shortcuts to contact list

net/web/src/context/useViewportContext.hook.js

@@ -10,7 +10,7 @@ export function useViewportContext() {
 
   const SMALL_MEDIUM = 650;
   const MEDIUM_LARGE = 1000;
-  const LARGE_XLARGE = 1400;
+  const LARGE_XLARGE = 1600;
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));

net/web/src/session/Session.jsx

@@ -197,7 +197,7 @@ console.log(" SET REMOTE STREAM");
             )}
             { state.cards && (
               <div class="reframe">
-                <Cards closeCards={closeCards} openContact={actions.openContact} openListing={actions.openListing} />
+                <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
                 <Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
                     onClose={actions.closeListing} getContainer={false} height={'100%'}
                     style={{ position: 'absolute', overflow: 'hidden' }}>
@@ -249,7 +249,7 @@ console.log(" SET REMOTE STREAM");
             </Drawer>
             <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={closeCards} visible={state.cards} zIndex={20} push={state.contact}>
               { state.cards && (
-                <Cards closeCards={closeCards} openContact={actions.openContact} openListing={actions.openListing} />
+                <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
               )}
               <Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
                   onClose={actions.closeListing} getContainer={false} height={'100%'}
@@ -294,7 +294,7 @@ console.log(" SET REMOTE STREAM");
             )}
             { state.cards && (
               <div class="reframe">
-                <Cards openContact={actions.openContact} openListing={actions.openListing} />
+                <Cards openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
               </div>
             )}
             { state.listing && (

net/web/src/session/cards/Cards.jsx

@@ -1,12 +1,42 @@
-import { Input, List, Button } from 'antd';
+import { Input, Modal, List, Button } from 'antd';
 import { CardsWrapper } from './Cards.styled';
 import { SortAscendingOutlined, UpOutlined, DoubleRightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
 import { useCards } from './useCards.hook';
 import { CardItem } from './cardItem/CardItem';
 
-export function Cards({ closeCards, openContact, openListing }) {
+export function Cards({ closeCards, openContact, openChannel, openListing }) {
 
-  const { state, actions } = useCards();
+  const [ modal, modalContext ] = Modal.useModal();
+  const { state, actions } = useCards(openChannel);
+
+  const message = async (cardId) => {
+    try {
+      const id = await actions.message(cardId);
+      openChannel(id);
+    }
+    catch (err) {
+      console.log(err);
+      modal.error({
+        title: 'Failed to Create Topic',
+        content: 'Please try again.',
+        bodyStyle: { padding: 16 },
+      });
+    };
+  };
+
+  const call = async (contact) => {
+    try {
+      const id = await actions.call(contact);
+    }
+    catch (err) {
+      console.log(err);
+      modal.error({
+        title: 'Failed to Start Call',
+        content: 'Please try again.',
+        bodyStyle: { padding: 16 },
+      });
+    };
+  };
 
   return (
     <CardsWrapper>
@@ -43,7 +73,8 @@ export function Cards({ closeCards, openContact, openListing }) {
           <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
             renderItem={item => (
               <CardItem item={item} tooltip={state.tooltip} resync={() => actions.resync(item.cardId)}
-                  open={() => openContact(item.guid)} />
+                  open={() => openContact(item.guid)} message={() => message(item.cardId)} 
+                  call={() => call(item)} />
             )} />
         )}
         { state.cards.length === 0 && (

net/web/src/session/cards/cardItem/CardItem.jsx

@@ -1,18 +1,28 @@
 import { CardItemWrapper, StatusError,
         StatusConnected, StatusConnecting, 
         StatusRequested, StatusPending, 
-        StatusConfirmed} from './CardItem.styled';
+        StatusConfirmed, ComOptions } from './CardItem.styled';
 import { Logo } from 'logo/Logo';
 import { Tooltip } from 'antd';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { MessageOutlined, PhoneOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 
-export function CardItem({ item, tooltip, resync, open }) {
+export function CardItem({ item, tooltip, resync, open, call, message }) {
 
   const onResync = (e) => {
     e.stopPropagation();
     resync();
   };
 
+  const onMessage = (e) => {
+    e.stopPropagation();
+    message();
+  }
+
+  const onCall = (e) => {
+    e.stopPropagation();
+    call();
+  }
+
   return (
     <CardItemWrapper onClick={open}>
       <Logo url={item.logo} width={32} height={32} radius={4} />
@@ -33,6 +43,16 @@ export function CardItem({ item, tooltip, resync, open }) {
             </StatusError>
           </Tooltip>
         )}
+        { item.status === 'connected' && (
+          <ComOptions>
+            <Tooltip className="option" placement="left" title="start a new topic">
+              <MessageOutlined onClick={onMessage} />
+            </Tooltip>
+            <Tooltip className="option" placement="left" title="start a call">
+              <PhoneOutlined onClick={onCall} />
+            </Tooltip>
+          </ComOptions>
+        )}
         { item.status === 'connected' && (
           <Tooltip placement="left" title="connected contact">
             <StatusConnected />

net/web/src/session/cards/cardItem/CardItem.styled.js

@@ -52,7 +52,19 @@ export const CardItemWrapper = styled.div`
 export const StatusError = styled.div`
   color: ${Colors.error};
   font-size: 14px;
-  padding-right: 8px;
+  padding-right: 12px;
+`
+
+export const ComOptions = styled.div`
+  color: ${Colors.primary};
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+
+  .option {
+    padding-right: 12px;
+    cursor: pointer;
+  }
 `
 
 export const StatusConnected = styled.div`

net/web/src/session/cards/useCards.hook.js

@@ -2,6 +2,8 @@ import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
 import { ViewportContext } from 'context/ViewportContext';
 import { StoreContext } from 'context/StoreContext';
+import { ChannelContext } from 'context/ChannelContext';
+import { RingContext } from 'context/RingContext';
 
 export function useCards() {
 
@@ -14,7 +16,9 @@ export function useCards() {
     cards: [],
   });
 
+  const ring = useContext(RingContext);
   const card = useContext(CardContext);
+  const channel = useContext(ChannelContext);
   const store = useContext(StoreContext);
   const viewport = useContext(ViewportContext);
 
@@ -38,9 +42,11 @@ export function useCards() {
       const offsync = item.offsync;
       const guid = profile?.guid;
       const name = profile?.name;
+      const node = profile?.node;
+      const token = detail?.token;
       const handle = profile?.node ? `${profile.handle}@${profile.node}` : profile.handle;
       const logo = profile?.imageSet ? card.actions.getCardImageUrl(item.id) : null;
-      return { cardId, guid, updated, offsync, status, name, handle, logo };
+      return { cardId, guid, updated, offsync, status, name, node, token, handle, logo };
     });
 
     let latest = 0;
@@ -112,6 +118,14 @@ export function useCards() {
     resync: async (cardId) => {
       await card.actions.resyncCard(cardId);
     },
+    message: async (cardId) => {
+      const conversation = await channel.actions.addChannel('superbasic', { subject: null }, [ cardId ]);
+      return conversation.id;
+    },
+    call: async (contact) => {
+      const { cardId, node, guid, token } = contact;
+      await ring.actions.call(contact.cardId, node, `${guid}.${token}`);
+    },
   };
 
   return { state, actions };

net/web/src/session/contact/Contact.jsx

@@ -94,7 +94,6 @@ export function Contact({ close, guid, listing }) {
             <div className="controls">
               <div className={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Disconnect</div>
               <div className={ state.buttonStatus } onClick={() => updateContact(actions.disconnectRemove)}>Delete Contact</div>
-              <div className={ state.buttonStatus } onClick={actions.ring}>Call Contact</div>
             </div>
           )}
 

net/web/src/session/contact/useContact.hook.js

@@ -1,10 +1,8 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
-import { RingContext } from 'context/RingContext';
 import { ViewportContext } from 'context/ViewportContext';
 import { getListingMessage } from 'api/getListingMessage';
 import { getCardByGuid } from 'context/cardUtil';
-import { addContactRing } from 'api/addContactRing';
 
 export function useContact(guid, listing, close) {
 
@@ -22,7 +20,6 @@ export function useContact(guid, listing, close) {
   });
 
   const card = useContext(CardContext);
-  const ring = useContext(RingContext);
   const viewport = useContext(ViewportContext);  
 
   const updateState = (value) => {
@@ -158,13 +155,6 @@ export function useContact(guid, listing, close) {
         close();
       });
     },
-    ring: async () => {
-      console.log("calling!!");
-      const contact = card.state.cards.get(state.cardId);
-      const { node, guid } = contact.data.cardProfile;
-      const { token } = contact.data.cardDetail;
-      await ring.actions.call(state.cardId, node, `${guid}.${token}`);
-    },
   };
 
   return { state, actions };