adding modal to start conversations

net/web/src/AppContext/useAppContext.hook.js

@@ -141,6 +141,16 @@ export function useAppContext() {
     return card;
   }
 
+  const getConnectedCards = () => {
+    let connected = []
+    cards.current.forEach((value, key, map) => {
+      if(value?.data?.cardDetail?.status === 'connected') {
+        connected.push(value);
+      }
+    });
+    return connected;
+  }
+
   const resetData = () => {
     revision.current = null;
     accountRevision.current = null;
@@ -171,6 +181,7 @@ export function useAppContext() {
     getRegistryImageUrl: (server, guid, revision) => getListingImageUrl(server, guid, revision),
     getCardImageUrl: (cardId, revision) => getCardImageUrl(state.token, cardId, revision),
     getCard: getCard,
+    getConnectedCards: getConnectedCards,
   }
 
   const adminActions = {

net/web/src/User/Contact/Contact.jsx

@@ -46,6 +46,13 @@ export function Contact() {
     return <></>
   }
 
+  const DisconnectRemove = () => {
+    if (state.showButtons.disconnectRemove) {
+      return <ProfileButton ghost onClick={() => actions.disconnectRemove()}>Remove Contact</ProfileButton>
+    }
+    return <></>
+  }
+
   const Remove = () => {
     if (state.showButtons.remove) {
       return <ProfileButton ghost onClick={() => actions.remove()}>Remove Contact</ProfileButton>
@@ -116,6 +123,7 @@ export function Contact() {
         <div class="buttons">
           <ContactSpin size="large" spinning={state.busy} />
           <Remove />
+          <DisconnectRemove />
           <Disconnect />
           <Confirm />
           <Cancel />

net/web/src/User/Contact/useContact.hook.js

@@ -112,6 +112,27 @@ export function useContact() {
         updateState({ busy: false });
       }
     },
+    disconnectRemove: async () => {
+      if (!state.busy) {
+        updateState({ busy: true });
+        try {
+          await setCardConfirmed(app.state.token, state.cardId);
+          try {
+            let message = await getCardCloseMessage(app.state.token, state.cardId);
+            await setCardCloseMessage(state.node, message);
+            await removeCard(app.state.token, state.cardId);
+            navigate('/user');
+          }
+          catch (err) {
+            console.log(err);
+          }
+        }
+        catch (err) {
+          window.alert(err);
+        }
+        updateState({ busy: false });
+      }
+    },
     saveConnect: async () => {
       if (!state.busy) {
         updateState({ busy: true });
@@ -153,11 +174,11 @@ export function useContact() {
         let status = card.data.cardDetail.status;
         if (status === 'connected') {
           updateState({ status: 'connected' });
-          updateState({ showButtons: { disconnect: true, remove: true }});
+          updateState({ showButtons: { disconnect: true, disconnectRemove: true }});
         }
         if (status === 'connecting') {
           updateState({ status: 'connecting' });
-          updateState({ showButtons: { cancel: true, remove: true }});
+          updateState({ showButtons: { cancel: true, disconnectRemove: true }});
         }
         if (status === 'pending') {
           updateState({ status: 'pending' });

net/web/src/User/SideBar/Contacts/Channels/AddChannel/AddChannel.jsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react'
+import { Button, Select, Modal } from 'antd';
+import { SelectItem } from './AddChannel.styled';
+import { Logo } from '../../../../../Logo/Logo';
+
+export function AddChannel({ state, actions }) {
+
+  const [ options, setOptions ] = useState([]);
+
+  useEffect(() => {
+    let contacts = [];
+    let cards = actions.getCards();
+    for (let card of cards) {
+      contacts.push({ value: card.id, label: card.data.cardProfile.handle });
+    }
+    setOptions(contacts);
+  }, [actions]);
+
+  return (
+    <Select
+      mode="multiple"
+      style={{ width: '100%' }}
+      placeholder="Select Contacts"
+      defaultValue={[]}
+      options={options}
+      onChange={(value) => console.log(value)}
+      optionLabelProp="label"
+    />
+  )
+}

net/web/src/User/SideBar/Contacts/Channels/AddChannel/AddChannel.styled.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const SelectItem = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+`;
+

net/web/src/User/SideBar/Contacts/Channels/Channels.jsx

@@ -1,7 +1,19 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { ChannelsWrapper } from './Channels.styled';
+import { Button, Select, Modal } from 'antd';
+import { useChannels } from './useChannels.hook';
+import { AddChannel } from './AddChannel/AddChannel';
 
-export function Channels() {
+export function Channels({ showAdd, setShowAdd }) {
 
-  return <ChannelsWrapper />
+  const { state, actions } = useChannels();
+
+  return (
+    <ChannelsWrapper>
+      <Modal title="Start Conversation" visible={showAdd} centered
+          onOk={() => setShowAdd(false)} onCancel={() => setShowAdd(false)}>
+        <AddChannel state={state} actions={actions} />
+      </Modal>
+    </ChannelsWrapper>
+  )
 }

net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js

@@ -0,0 +1,29 @@
+import { useContext, useState, useEffect } from 'react';
+import { AppContext } from '../../../../AppContext/AppContext';
+import { useNavigate } from 'react-router-dom';
+
+export function useChannels() {
+
+  const [state, setState] = useState({
+    startCards: [],
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const navigate = useNavigate();
+  const app = useContext(AppContext);
+
+  const actions = {
+    getCardImageUrl: app?.actions?.getCardImageurl,
+    getCards: app?.actions?.getConnectedCards,
+    setStartCards: (cards) => updateState({ startCards: cards }),
+  };
+
+  useEffect(() => {
+  }, [app])
+
+  return { state, actions };
+}
+

net/web/src/User/SideBar/Contacts/Contacts.jsx

@@ -14,6 +14,7 @@ export function Contacts() {
   const { state, actions } = useContacts()
   const [addButton, setAddButton] = useState(<></>);
   const [showRegistry, setShowRegistry] = useState(false);
+  const [startConversation, setStartConversation] = useState(false);
   let registry = useRef(false);
 
   const onShowRegistry = () => {
@@ -29,7 +30,7 @@ export function Contacts() {
 
   const addConversation = (
     <Tooltip placement="right" title="Add Conversation">
-      <AddButton type="primary" icon={<CommentOutlined />} />
+      <AddButton type="primary" onClick={() => setStartConversation(true)} icon={<CommentOutlined />} />
     </Tooltip>
   ) 
 
@@ -50,12 +51,12 @@ export function Contacts() {
 
   return (
     <ContactsWrapper>
-      <Tabs onChange={onTab} tabBarStyle={{ marginBottom: 0, paddingLeft: 16, paddingRight: 16 }} tabBarExtraContent={addButton}>>
+      <Tabs onChange={onTab} tabBarStyle={{ marginBottom: 0, paddingLeft: 16, paddingRight: 16 }} tabBarExtraContent={addButton} defaultActiveKey="conversation">
         <TabPane tab="Contacts" key="contact">
           <Cards showRegistry={showRegistry} />
         </TabPane>
         <TabPane tab="Conversations" key="conversation">
-          <Channels style={{ backgroundColor: 'red' }} />
+          <Channels showAdd={startConversation} setShowAdd={setStartConversation} />
         </TabPane>
       </Tabs>
     </ContactsWrapper>