Merge branch 'main' of https://github.com/balzack/databag

net/web/src/api/getListing.js

@@ -1,12 +1,10 @@
 import { checkResponse, fetchWithTimeout } from './fetchUtil';
 
-export async function getListing(server) {
+export async function getListing(server, filter) {
-  let host = "";
+  const host = server ? `https://${server}` : '';
-  if (server) {
+  const param = filter ? `?filter=${filter}` : '';
-    host = `https://${server}`;
-  }
 
-  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();
 }

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

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';

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

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 (
     <ListingWrapper>
       <div class="search">
-        <div class="node">
+        { !state.showFilter && (
-          <Input bordered={false} allowClear={true} placeholder="Server" 
+          <div class="showfilter" onClick={actions.showFilter}>
-              prefix={<DatabaseOutlined />} value={state.node} spellCheck="false" 
+            <FilterOutlined />
-              disabled={state.disabled} onChange={(e) => actions.onNode(e.target.value)} />
+          </div> 
+        )}
+        { state.showFilter && (
+          <div class="hidefilter" onClick={actions.hideFilter}>
+            <FilterOutlined />
+          </div> 
+        )}
+        <div class="params">
+          <div class="node">
+            <Input bordered={false} allowClear={true} placeholder="Server" 
+                prefix={<DatabaseOutlined />} value={state.node} spellCheck="false" 
+                disabled={state.disabled} onChange={(e) => actions.onNode(e.target.value)} />
+          </div>
+          { state.showFilter && (
+            <div class="username">
+              <Input bordered={false} allowClear={true} placeholder="Username" 
+                  prefix={<UserOutlined />} value={state.username} spellCheck="false" 
+                  onChange={(e) => actions.setUsername(e.target.value)} />
+            </div>
+          )}
         </div>
         <div class="inline">
           <Button type="text" icon={<SearchOutlined />} loading={state.busy} onClick={getListing}></Button>

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;

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) {