From e405f463301a33603de5d1488fd3635c51f9b50c Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Wed, 18 Jan 2023 15:35:27 -0800 Subject: [PATCH] refactor add modal for webapp --- net/web/src/session/channels/Channels.jsx | 41 ++----- .../src/session/channels/Channels.styled.js | 19 ---- .../channels/addChannel/AddChannel.jsx | 39 ++++++- .../channels/addChannel/AddChannel.styled.js | 19 ++++ .../channels/addChannel/useAddChannel.hook.js | 105 ++++++++++++++++++ .../src/session/channels/useChannels.hook.js | 81 +------------- 6 files changed, 171 insertions(+), 133 deletions(-) create mode 100644 net/web/src/session/channels/addChannel/useAddChannel.hook.js diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx index 6926e567..f7f293c2 100644 --- a/net/web/src/session/channels/Channels.jsx +++ b/net/web/src/session/channels/Channels.jsx @@ -1,5 +1,5 @@ -import { Modal, Input, List, Button, Switch } from 'antd'; -import { ChannelsWrapper, AddFooter } from './Channels.styled'; +import { Modal, Input, List, Button } from 'antd'; +import { ChannelsWrapper } from './Channels.styled'; import { CommentOutlined, SearchOutlined } from '@ant-design/icons'; import { useChannels } from './useChannels.hook'; import { ChannelItem } from './channelItem/ChannelItem'; @@ -9,34 +9,14 @@ export function Channels({ open, active }) { const { state, actions } = useChannels(); - const addChannel = async () => { - try { - const id = await actions.addChannel(); - actions.clearShowAdd(); - open(id); - } - catch(err) { - Modal.error({ - title: 'Failed to Create Topic', - content: 'Please try again.', - }); - } + const added = (id) => { + actions.clearShowAdd(); + open(id); }; - const addFooter = ( - -
- { state.sealable && ( - <> - - Sealed Channel - - )} -
- - - - ); + const cancelled = () => { + actions.clearShowAdd(); + } return ( @@ -69,9 +49,8 @@ export function Channels({ open, active }) { )} - - + + ); diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js index 50796772..ab15d6ca 100644 --- a/net/web/src/session/channels/Channels.styled.js +++ b/net/web/src/session/channels/Channels.styled.js @@ -87,22 +87,3 @@ export const ChannelsWrapper = styled.div` } `; -export const AddFooter = styled.div` - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - - .seal { - display: flex; - flex-grow: 1; - flex-direction: row; - align-items: center; - - .sealText { - padding-left: 8px; - } - } -` - diff --git a/net/web/src/session/channels/addChannel/AddChannel.jsx b/net/web/src/session/channels/addChannel/AddChannel.jsx index b83ab6c8..3e9e422e 100644 --- a/net/web/src/session/channels/addChannel/AddChannel.jsx +++ b/net/web/src/session/channels/addChannel/AddChannel.jsx @@ -1,11 +1,30 @@ -import { Input } from 'antd'; -import { AddChannelWrapper } from './AddChannel.styled'; +import { Input, Space, Modal, Switch, Button } from 'antd'; +import { AddChannelWrapper, AddFooter } from './AddChannel.styled'; import { CardSelect } from '../../cardSelect/CardSelect'; +import { useAddChannel } from './useAddChannel.hook'; -export function AddChannel({ state, actions }) { +export function AddChannel({ added, cancelled }) { + + const [ modal, modalContext ] = Modal.useModal(); + const { state, actions } = useAddChannel(); + + const addChannel = async () => { + try { + const id = await actions.addChannel(); + added(id); + } + catch(err) { + console.log(err); + modal.error({ + title: 'Failed to Create Topic', + content: 'Please try again.', + }); + } + } return ( + { modalContext } actions.setSubject(e.target.value)} />
@@ -23,6 +42,20 @@ export function AddChannel({ state, actions }) { unknown={0} />
+ +
+ { state.sealable && ( + <> + + Sealed Channel + + )} +
+ + + + + ); } diff --git a/net/web/src/session/channels/addChannel/AddChannel.styled.js b/net/web/src/session/channels/addChannel/AddChannel.styled.js index 752d825c..3f63f1e8 100644 --- a/net/web/src/session/channels/addChannel/AddChannel.styled.js +++ b/net/web/src/session/channels/addChannel/AddChannel.styled.js @@ -23,4 +23,23 @@ export const AddChannelWrapper = styled.div` } `; +export const AddFooter = styled.div` + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding-top: 8px; + + .seal { + display: flex; + flex-grow: 1; + flex-direction: row; + align-items: center; + + .sealText { + padding-left: 8px; + } + } +` diff --git a/net/web/src/session/channels/addChannel/useAddChannel.hook.js b/net/web/src/session/channels/addChannel/useAddChannel.hook.js new file mode 100644 index 00000000..aff17b95 --- /dev/null +++ b/net/web/src/session/channels/addChannel/useAddChannel.hook.js @@ -0,0 +1,105 @@ +import { useContext, useState, useEffect } from 'react'; +import { ChannelContext } from 'context/ChannelContext'; +import { CardContext } from 'context/CardContext'; +import { AccountContext } from 'context/AccountContext'; + +export function useAddChannel() { + + const [state, setState] = useState({ + sealable: false, + busy: false, + + showAdd: false, + subject: null, + members: new Set(), + seal: false, + }); + + const card = useContext(CardContext); + const channel = useContext(ChannelContext); + const account = useContext(AccountContext); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + useEffect(() => { + const { seal, sealKey } = account.state; + if (seal?.publicKey && sealKey?.public && sealKey?.private && seal.publicKey === sealKey.public) { + updateState({ seal: false, sealable: true }); + } + else { + updateState({ seal: false, sealable: false }); + } + }, [account.state]); + + const actions = { + addChannel: async () => { + let conversation; + if (!state.busy) { + try { + updateState({ busy: true }); + const cards = Array.from(state.members.values()); + if (state.seal) { + const keys = [ account.state.sealKey.public ]; + cards.forEach(id => { + keys.push(card.state.cards.get(id).data.cardProfile.seal); + }); + + throw new Error("TODO"); + } + else { + conversation = await channel.actions.addChannel('superbasic', state.subject, cards); + } + updateState({ busy: false }); + } + catch(err) { + console.log(err); + updateState({ busy: false }); + throw new Error("failed to create new channel"); + } + } + else { + throw new Error("operation in progress"); + } + return conversation.id; + }, + setSeal: (seal) => { + if (seal) { + const cards = Array.from(state.members.values()); + const members = new Set(state.members); + cards.forEach(id => { + if (!(card.state.cards.get(id)?.data?.cardProfile?.seal)) { + members.delete(id); + } + }); + updateState({ seal: true, members }); + } + else { + updateState({ seal: false }); + } + }, + onMember: (string) => { + const members = new Set(state.members); + if (members.has(string)) { + members.delete(string); + } + else { + members.add(string); + } + updateState({ members }); + }, + setSubject: (subject) => { + updateState({ subject }); + }, + cardFilter: (card) => { + if (state.seal) { + return card?.data?.cardDetail?.status === 'connected' && card?.data?.cardProfile?.seal; + } + return card?.data?.cardDetail?.status === 'connected'; + }, + }; + + return { state, actions }; +} + diff --git a/net/web/src/session/channels/useChannels.hook.js b/net/web/src/session/channels/useChannels.hook.js index 1b4c895c..4c47df78 100644 --- a/net/web/src/session/channels/useChannels.hook.js +++ b/net/web/src/session/channels/useChannels.hook.js @@ -15,13 +15,7 @@ export function useChannels() { const [state, setState] = useState({ display: null, channels: [], - sealable: false, - busy: false, - showAdd: false, - subject: null, - members: new Set(), - seal: false, }); const profile = useContext(ProfileContext); @@ -172,16 +166,6 @@ export function useChannels() { item.topicRevision = channelValue.data.topicRevision; }; - useEffect(() => { - const { seal, sealKey } = account.state; - if (seal?.publicKey && sealKey?.public && sealKey?.private && seal.publicKey === sealKey.public) { - updateState({ seal: false, sealable: true }); - } - else { - updateState({ seal: false, sealable: false }); - } - }, [account.state]); - useEffect(() => { const login = store.state['login:timestamp']; const conversations = new Map(); @@ -278,78 +262,15 @@ export function useChannels() { }, [viewport]); const actions = { - addChannel: async () => { - let added; - if (!state.busy) { - try { - updateState({ busy: true }); - const cards = Array.from(state.members.values()); - if (state.seal) { - const keys = [ account.state.sealKey.public ]; - cards.forEach(id => { - keys.push(card.state.cards.get(id).data.cardProfile.seal); - }); - added = await channel.actions.addSealedChannel(cards, state.subject, keys); - } - else { - added = await channel.actions.addBasicChannel(cards, state.subject); - } - updateState({ busy: false }); - } - catch(err) { - console.log(err); - updateState({ busy: false }); - throw new Error("failed to create new channel"); - } - } - else { - throw new Error("operation in progress"); - } - return added.id; - }, - setSeal: (seal) => { - if (seal) { - const cards = Array.from(state.members.values()); - const members = new Set(state.members); - cards.forEach(id => { - if (!(card.state.cards.get(id)?.data?.cardProfile?.seal)) { - members.delete(id); - } - }); - updateState({ seal: true, members }); - } - else { - updateState({ seal: false }); - } - }, onFilter: (value) => { setFilter(value?.toUpperCase()); }, setShowAdd: () => { - updateState({ showAdd: true, seal: false, members: new Set(), subject: null }); + updateState({ showAdd: true }); }, clearShowAdd: () => { updateState({ showAdd: false }); }, - onMember: (string) => { - const members = new Set(state.members); - if (members.has(string)) { - members.delete(string); - } - else { - members.add(string); - } - updateState({ members }); - }, - setSubject: (subject) => { - updateState({ subject }); - }, - cardFilter: (card) => { - if (state.seal) { - return card?.data?.cardDetail?.status === 'connected' && card?.data?.cardProfile?.seal; - } - return card?.data?.cardDetail?.status === 'connected'; - }, }; return { state, actions };