diff --git a/net/web/src/User/Contact/Contact.jsx b/net/web/src/User/Contact/Contact.jsx index b586394e..8d1b4894 100644 --- a/net/web/src/User/Contact/Contact.jsx +++ b/net/web/src/User/Contact/Contact.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useRef } from 'react' -import { CloseOutlined, UserOutlined } from '@ant-design/icons'; +import { ExclamationCircleOutlined, CloseOutlined, UserOutlined } from '@ant-design/icons'; import { useContact } from './useContact.hook'; import { Button, Checkbox, Modal } from 'antd' import { ContactWrapper, ProfileButton, CloseButton, ContactSpin } from './Contact.styled'; @@ -39,23 +39,53 @@ export function Contact() { return { state.description } } + const showDisconnect = () => { + Modal.confirm({ + title: 'Do you want to disconnect from this contact?', + icon: , + okText: 'Yes, Disconnect', + cancelText: 'No, Cancel', + onOk() { actions.disconnect() }, + }); + }; + const Disconnect = () => { if (state.showButtons.disconnect) { - return actions.disconnect()}>Disconnect + return showDisconnect()}>Disconnect } return <>> } + const showDisconnectRemove = () => { + Modal.confirm({ + title: 'Do you want to remove this contact?', + icon: , + okText: 'Yes, Remove', + cancelText: 'No, Cancel', + onOk() { actions.disconnectRemove() }, + }); + }; + const DisconnectRemove = () => { if (state.showButtons.disconnectRemove) { - return actions.disconnectRemove()}>Remove Contact + return showDisconnectRemove()}>Remove Contact } return <>> } + const showRemove = () => { + Modal.confirm({ + title: 'Do you want to remove this contact??', + icon: , + okText: 'Yes, Remove', + cancelText: 'No, Cancel', + onOk() { actions.remove() }, + }); + }; + const Remove = () => { if (state.showButtons.remove) { - return actions.remove()}>Remove Contact + return showRemove()}>Remove Contact } return <>> } diff --git a/net/web/src/User/Conversation/Conversation.jsx b/net/web/src/User/Conversation/Conversation.jsx index c9c9f00f..f5c19b69 100644 --- a/net/web/src/User/Conversation/Conversation.jsx +++ b/net/web/src/User/Conversation/Conversation.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useRef } from 'react' -import { CloseOutlined, UserOutlined } from '@ant-design/icons'; +import { ExclamationCircleOutlined, CloseOutlined, UserOutlined } from '@ant-design/icons'; import { useConversation } from './useConversation.hook'; import { Button, Input, Checkbox, Modal, Spin } from 'antd' import { ConversationWrapper, ConversationButton, EditButton, CloseButton, ListItem, BusySpin } from './Conversation.styled'; @@ -61,6 +61,16 @@ export function Conversation() { ) } + const showDelete = () => { + Modal.confirm({ + title: 'Do you want to delete this conversation?', + icon: , + okText: 'Yes, Delete', + cancelText: 'No, Cancel', + onOk() { actions.remove() }, + }); + }; + return ( @@ -72,7 +82,7 @@ export function Conversation() { onMembers()}>Members - actions.remove()}>Delete + showDelete()}>Delete actions.close()} icon={} /> diff --git a/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js b/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js index 3fdc6ef4..876950ce 100644 --- a/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js +++ b/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js @@ -4,7 +4,6 @@ import { CheckSquareOutlined, BorderOutlined } from '@ant-design/icons'; export const MemberItemWrapper = styled.div` display: flex; width: 100%; - background-color: #f6f5ed; flex-direction: row; overflow: hidden; padding-left: 16px; diff --git a/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js b/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js index 869bc29f..617e0984 100644 --- a/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js +++ b/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js @@ -1,5 +1,6 @@ import { useContext, useState, useEffect, useRef } from 'react'; import { CardContext } from 'context/CardContext'; +import { ProfileContext } from 'context/ProfileContext'; import { ConversationContext } from 'context/ConversationContext'; export function useMemberItem({ item }) { @@ -12,15 +13,20 @@ export function useMemberItem({ item }) { }); const card = useContext(CardContext); + const profile = useContext(ProfileContext); const conversation = useContext(ConversationContext); useEffect(() => { + let handle = item.card?.data.cardProfile.handle; + if (item.card?.data.cardProfile.node != profile.state?.profile.node) { + handle += '@' + item.card?.data.cardProfile.node; + } updateState({ imageUrl: card.actions.getImageUrl(item.card?.id), name: item.card?.data.cardProfile.name, - handle: item.card?.data.cardProfile.handle, + handle, }); - }, [item, card]); + }, [item, card, profile]); const updateState = (value) => { setState((s) => ({ ...s, ...value })); diff --git a/net/web/src/User/Conversation/Members/Members.styled.jsx b/net/web/src/User/Conversation/Members/Members.styled.jsx index 8e5e0854..a9fbeca1 100644 --- a/net/web/src/User/Conversation/Members/Members.styled.jsx +++ b/net/web/src/User/Conversation/Members/Members.styled.jsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; export const MembersWrapper = styled.div` width: 100%; max-height: 240px; - background-color: #f6f5ed; overflow: auto; `; diff --git a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx index fa80ea01..3176ce16 100644 --- a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx +++ b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx @@ -64,8 +64,8 @@ export function Cards({ showRegistry }) { imageSet={cardProfile(item).imageSet} /> - { cardHandle(item) } { cardProfile(item).name } + { cardHandle(item) } diff --git a/net/web/src/User/SideBar/Contacts/Channels/AddChannel/AddChannel.jsx b/net/web/src/User/SideBar/Contacts/Channels/AddChannel/AddChannel.jsx index c61fbc50..0f41255c 100644 --- a/net/web/src/User/SideBar/Contacts/Channels/AddChannel/AddChannel.jsx +++ b/net/web/src/User/SideBar/Contacts/Channels/AddChannel/AddChannel.jsx @@ -11,7 +11,11 @@ export function AddChannel({ state, actions }) { let contacts = []; let cards = actions.getCards(); for (let card of cards) { - contacts.push({ value: card.id, label: card.data.cardProfile.handle }); + let handle = card.data.cardProfile.handle; + if (state.node != card.data.cardProfile.node) { + handle += '@' + card.data.cardProfile.node; + } + contacts.push({ value: card.id, label: handle }); } setOptions(contacts); }, [actions]); diff --git a/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js b/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js index 592244b0..9ca11e8e 100644 --- a/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js +++ b/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js @@ -1,6 +1,7 @@ import { useContext, useState, useRef, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { CardContext } from 'context/CardContext'; +import { ProfileContext } from 'context/ProfileContext'; import { ChannelContext } from 'context/ChannelContext'; export function useChannels() { @@ -10,6 +11,7 @@ export function useChannels() { startCards: [], startSubject: '', startDescription: '', + node: null, busy: false, }); @@ -22,6 +24,7 @@ export function useChannels() { const navigate = useNavigate(); const card = useContext(CardContext); + const profile = useContext(ProfileContext); const channel = useContext(ChannelContext); const actions = { @@ -78,6 +81,10 @@ export function useChannels() { updateState({ channels: merged }); }, [channel]) + useEffect(() => { + updateState({ node: profile.state.profile.node }); + }, [profile]) + return { state, actions }; } diff --git a/net/web/src/User/SideBar/Identity/Identity.jsx b/net/web/src/User/SideBar/Identity/Identity.jsx index 54ac44fa..629a9d6e 100644 --- a/net/web/src/User/SideBar/Identity/Identity.jsx +++ b/net/web/src/User/SideBar/Identity/Identity.jsx @@ -1,7 +1,7 @@ import { Avatar, Space, Image, Modal, Form, Input, Button } from 'antd'; import React, { useState } from 'react' import { IdentityWrapper, IdentityDropdown, MenuWrapper } from './Identity.styled'; -import { RightOutlined, EditOutlined, UserOutlined, LockOutlined } from '@ant-design/icons'; +import { ExclamationCircleOutlined, RightOutlined, EditOutlined, UserOutlined, LockOutlined } from '@ant-design/icons'; import { useIdentity } from './useIdentity.hook'; import { Menu, Dropdown } from 'antd'; import { Logo } from '../../../Logo/Logo'; @@ -10,6 +10,16 @@ export function Identity() { const { state, actions } = useIdentity() + const showLogout = () => { + Modal.confirm({ + title: 'Do you want to logout?', + icon: , + okText: 'Yes, Logout', + cancelText: 'No, Cancel', + onOk() { actions.logout() }, + }); + }; + const menu = ( @@ -19,7 +29,7 @@ export function Identity() { actions.setShowLogin(true)}>Change Login - actions.logout()}>Sign Out + showLogout()}>Sign Out ); diff --git a/net/web/src/User/SideBar/Identity/useIdentity.hook.js b/net/web/src/User/SideBar/Identity/useIdentity.hook.js index 52b5a462..8dc35668 100644 --- a/net/web/src/User/SideBar/Identity/useIdentity.hook.js +++ b/net/web/src/User/SideBar/Identity/useIdentity.hook.js @@ -21,7 +21,7 @@ export function useIdentity() { confirm: null, confirmStatus: null, busy: false, - showLogin: false, + showLogin: false, }); const navigate = useNavigate(); @@ -39,9 +39,6 @@ export function useIdentity() { app.actions.logout(); navigate('/'); }, - editLabels: () => { - console.log("EDIT LABELS"); - }, editProfile: () => { navigate('/user/profile'); },