martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding message and call shortcuts to contact list

Browse Source
This commit is contained in:
Roland Osborne 2023-04-05 13:10:30 -07:00
parent d7a264c7ee
commit 6a9fd8c133
8 changed files with 90 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/context/useViewportContext.hook.js
View File

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

6
net/web/src/session/Session.jsx
View File

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

39
net/web/src/session/cards/Cards.jsx
View File

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

26
net/web/src/session/cards/cardItem/CardItem.jsx
View File

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

14
net/web/src/session/cards/cardItem/CardItem.styled.js
View File

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

16
net/web/src/session/cards/useCards.hook.js
View File

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

1
net/web/src/session/contact/Contact.jsx
View File

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

10
net/web/src/session/contact/useContact.hook.js
View File

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