diff --git a/net/web/src/api/getListing.js b/net/web/src/api/getListing.js index 4a77ff10..8352e489 100644 --- a/net/web/src/api/getListing.js +++ b/net/web/src/api/getListing.js @@ -1,12 +1,10 @@ import { checkResponse, fetchWithTimeout } from './fetchUtil'; -export async function getListing(server) { - let host = ""; - if (server) { - host = `https://${server}`; - } +export async function getListing(server, filter) { + const host = server ? `https://${server}` : ''; + const param = filter ? `?filter=${filter}` : ''; - let listing = await fetchWithTimeout(`${host}/account/listing`, { method: 'GET' }); + let listing = await fetchWithTimeout(`${host}/account/listing${param}`, { method: 'GET' }); checkResponse(listing); return await listing.json(); } diff --git a/net/web/src/context/useAppContext.hook.js b/net/web/src/context/useAppContext.hook.js index 7c462a9f..5fb21023 100644 --- a/net/web/src/context/useAppContext.hook.js +++ b/net/web/src/context/useAppContext.hook.js @@ -17,7 +17,6 @@ export function useAppContext() { const [state, setState] = useState({}); const [appRevision, setAppRevision] = useState(); - const delay = useRef(2); const ws = useRef(null); const revision = useRef(null); @@ -158,11 +157,8 @@ export function useAppContext() { ws.current.onopen = () => {} ws.current.onerror = () => {} setWebsocket(token); - if (delay.current < 15) { - delay.current += 1; - } } - }, delay.current * 1000) + }, 1000) } ws.current.onopen = () => { ws.current.send(JSON.stringify({ AppToken: token })) diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx index a4482d96..4a43cd9b 100644 --- a/net/web/src/session/conversation/Conversation.jsx +++ b/net/web/src/session/conversation/Conversation.jsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useRef } from 'react'; import { ConversationWrapper, StatusError } from './Conversation.styled'; import { ExclamationCircleOutlined, SettingOutlined, CloseOutlined } from '@ant-design/icons'; import ReactResizeDetector from 'react-resize-detector'; diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js index d3cf680c..ef77858e 100644 --- a/net/web/src/session/conversation/useConversation.hook.js +++ b/net/web/src/session/conversation/useConversation.hook.js @@ -41,7 +41,7 @@ export function useConversation(cardId, channelId) { let active = false; let uploadError = false; let uploadPercent = 0; - let uploadIndex = 0; + let uploadComplete = 0; let uploadCount = 0; let uploadActive = { loaded: 0, total: 0 }; let uploadActiveCount = 0; @@ -54,15 +54,15 @@ export function useConversation(cardId, channelId) { if (entry.error) { uploadError = true; } - uploadIndex += entry.uploaded; uploadCount += entry.count; + uploadComplete += (entry.index - 1); if (entry.active) { uploadActiveCount += 1; uploadActive.loaded += entry.active.loaded; uploadActive.total += entry.active.total; } }); - uploadPercent = (uploadIndex + (uploadActiveCount * (uploadActive.loaded / uploadActive.total)) / uploadCount); + uploadPercent = (uploadComplete + (uploadActiveCount * (uploadActive.loaded / uploadActive.total))) / uploadCount; uploadPercent = Math.floor(uploadPercent * 100); } diff --git a/net/web/src/session/listing/Listing.jsx b/net/web/src/session/listing/Listing.jsx index e9e2d55a..0ebd458e 100644 --- a/net/web/src/session/listing/Listing.jsx +++ b/net/web/src/session/listing/Listing.jsx @@ -1,6 +1,6 @@ import { Modal, Button, Input, List } from 'antd'; import { ListingWrapper } from './Listing.styled'; -import { DownOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons'; +import { UserOutlined, FilterOutlined, DownOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons'; import { useListing } from './useListing.hook'; import { ListingItem } from './listingItem/ListingItem'; @@ -24,10 +24,29 @@ export function Listing({ closeListing, openContact }) { return (
-
- } value={state.node} spellCheck="false" - disabled={state.disabled} onChange={(e) => actions.onNode(e.target.value)} /> + { !state.showFilter && ( +
+ +
+ )} + { state.showFilter && ( +
+ +
+ )} +
+
+ } value={state.node} spellCheck="false" + disabled={state.disabled} onChange={(e) => actions.onNode(e.target.value)} /> +
+ { state.showFilter && ( +
+ } value={state.username} spellCheck="false" + onChange={(e) => actions.setUsername(e.target.value)} /> +
+ )}
diff --git a/net/web/src/session/listing/Listing.styled.js b/net/web/src/session/listing/Listing.styled.js index 1c8b97e8..56736fe6 100644 --- a/net/web/src/session/listing/Listing.styled.js +++ b/net/web/src/session/listing/Listing.styled.js @@ -27,21 +27,50 @@ export const ListingWrapper = styled.div` border-bottom: 1px solid ${Colors.divider}; display: flex; flex-direction: row; - height: 48px; + min-height: 48px; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; + flex-shrink: 0; + + .showfilter { + color: ${Colors.disabled}; + font-size: 18px; + padding-right: 8px; + display: flex; + align-items: center; + cursor: pointer; + } + + .hidefilter { + color: ${Colors.enabled}; + font-size: 18px; + padding-right: 8px; + display: flex; + align-items: center; + cursor: pointer; + } + + .params { + flex-grow: 1; + } + + .username { + border: 1px solid ${Colors.divider}; + background-color: ${Colors.white}; + border-radius: 8px; + margin-top: 4px; + } .node { border: 1px solid ${Colors.divider}; background-color: ${Colors.white}; border-radius: 8px; - flex-grow: 1; } .inline { - padding-left: 8px; + padding-left: 4px; display: flex; flex-shrink: 0; align-items: center; diff --git a/net/web/src/session/listing/useListing.hook.js b/net/web/src/session/listing/useListing.hook.js index 83c14351..8fcf577d 100644 --- a/net/web/src/session/listing/useListing.hook.js +++ b/net/web/src/session/listing/useListing.hook.js @@ -11,6 +11,8 @@ export function useListing() { busy: false, disabled: true, display: null, + showFilter: false, + username: null, }); const profile = useContext(ProfileContext); @@ -25,13 +27,22 @@ export function useListing() { }, [state.node]); const actions = { + showFilter: () => { + updateState({ showFilter: true }); + }, + hideFilter: () => { + updateState({ showFilter: false }); + }, + setUsername: (username) => { + updateState({ username }); + }, onNode: (value) => { updateState({ node: value }); }, getListing: async () => { updateState({ busy: true }); try { - let contacts = await getListing(state.node); + let contacts = await getListing(state.node, state.username); let filtered = contacts.filter(contact => (contact.guid !== profile.state.profile.guid)); let sorted = filtered.sort((a, b) => { if (a?.name < b?.name) {