rendering channel icon and subject

net/web/src/session/Session.styled.js

@@ -79,6 +79,7 @@ export const SessionWrapper = styled.div`
     .bottom {
       height: 48px;
       position: relative;
+      box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.3);
     }
   }
 `;

net/web/src/session/channels/Channels.jsx

@@ -8,13 +8,12 @@ export function Channels() {
 
   const { state, actions } = useChannels();
 
-console.log(state);
-
   return (
     <ChannelsWrapper>
       <div class="search">
         <div class="filter">
-          <Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />} />
+          <Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />}
+              size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
         </div>
       </div>
       <div class="results">

net/web/src/session/channels/Channels.styled.js

@@ -8,9 +8,11 @@ export const ChannelsWrapper = styled.div`
   flex-direction: column;
   background-color: ${Colors.formBackground};
   min-height: 0;
+  overflow: scroll;
 
   .search {
-    padding: 8px;
+    padding: 16px;
+    border-bottom: 1px solid ${Colors.divider};
 
     .filter {
       border: 1px solid ${Colors.divider};
@@ -20,6 +22,5 @@ export const ChannelsWrapper = styled.div`
   }
 
   .results {
-    min-height: 0;
+  }
-    overflow: scroll;
 `;

net/web/src/session/channels/channelItem/ChannelItem.jsx

@@ -1,29 +1,36 @@
 import { ChannelItemWrapper } from './ChannelItem.styled';
-import { useChannelItem } from './useChannelItem.hook';
+import { Logo } from 'logo/Logo';
-import { SolutionOutlined } from '@ant-design/icons';
+import { AppstoreFilled, SolutionOutlined } from '@ant-design/icons';
 
 export function ChannelItem({ item }) {
 
-  const { state, actions } = useChannelItem(item);
+console.log(item.contacts);
 
   return (
     <ChannelItemWrapper>
-      { state.contacts.length === 0 && (
+      { item.contacts.length === 0 && (
-        <div class="notes">
+        <div class="item">
           <div class="logo">
             <SolutionOutlined />
           </div>
-          <div class="subject">
+          <div class="subject">{ item.subject }</div>
-          </div>
-          <div class="markup">
-          </div>
         </div>
       )}
-      { state.contacts.length === 1 && (
+      { item.contacts.length === 1 && (
-        <div>PERSONAL</div>
+        <div class="item">
+          <Logo url={item.logo} width={32} height={32} radius={8} />
+          <div class="subject">{ item.subject }</div>
+          <div class="markup"></div>
+        </div>
       )}
-      { state.contacts.length > 1 && (
+      { item.contacts.length > 1 && (
-        <div>GROUP</div>
+        <div class="item">
+          <div class="logo">
+            <AppstoreFilled />
+          </div>
+          <div class="subject">{ item.subject }</div>
+          <div class="markup"></div>
+        </div>
       )}
     </ChannelItemWrapper>
   )

net/web/src/session/channels/channelItem/ChannelItem.styled.js

@@ -5,25 +5,38 @@ export const ChannelItemWrapper = styled.div`
   height: 48px;
   width: 100%;
   display: flex;
-  flex-direction: row;
+  align-items: center;
-  flex-align: center;
   border-bottom: 1px solid ${Colors.divider};
+  padding-left: 16px;
+  padding-right: 16px;
 
-  .logo {
+  &:hover {
+    background-color: ${Colors.formHover};
+    cursor: pointer;
+  }
+
+  .item {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
-    border: 1px solid ${Colors.grey};
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    font-size: 18px;
-  }
 
-  .subject {
+    .logo {
-    flex-grow: 1;
+      display: flex;
-  }
+      align-items: center;
+      justify-content: center;
+      border: 1px solid ${Colors.grey};
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      font-size: 18px;
+    }
 
-  .markup {
+    .subject {
+      padding-left: 16px;
+      flex-grow: 1;
+    }
+
+    .markup {
+    }
   }
 `;

net/web/src/session/channels/channelItem/useChannelItem.hook.js

@@ -1,36 +0,0 @@
-import { useContext, useState, useEffect } from 'react';
-import { ProfileContext } from 'context/ProfileContext';
-import { CardContext } from 'context/CardContext';
-
-export function useChannelItem(item) {
-
-  const [state, setState] = useState({
-    contacts: [],
-  });
-
-  const profile = useContext(ProfileContext);
-  const card = useContext(CardContext);
-
-  const updateState = (value) => {
-    setState((s) => ({ ...s, ...value }));
-  }
-
-  const actions = {
-  };
-
-
-  useEffect(() => {
-    let contacts = [];
-    if (item.guid != null && profile.state.profile.guid != item.guid) {
-      contacts.push(card.actions.getCardByGuid(item.guid));
-    }
-    for (let guid of item.data.channelDetail?.members) {
-      if (guid != profile.state.profile.guid) {
-        contacts.push(card.actions.getCardByGuid(guid));
-      }
-    }
-    updateState({ contacts });
-  }, [profile, item]);
-
-  return { state, actions };
-}

net/web/src/session/channels/useChannels.hook.js

@@ -2,9 +2,12 @@ import { useContext, useState, useEffect } from 'react';
 import { StoreContext } from 'context/StoreContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { CardContext } from 'context/CardContext';
+import { ProfileContext } from 'context/ProfileContext';
 
 export function useChannels() {
 
+  const [filter, setFilter] = useState(null);
+
   const [state, setState] = useState({
     channels: [],
     busy: false }
@@ -13,12 +16,16 @@ export function useChannels() {
   const card = useContext(CardContext);
   const channel = useContext(ChannelContext);
   const store = useContext(StoreContext);
+  const profile = useContext(ProfileContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
   const actions = {
+    onFilter: (value) => {
+      setFilter(value.toUpperCase());
+    },
   };
 
   const setUpdated = (chan) => {
@@ -39,6 +46,46 @@ export function useChannels() {
     }
   }
 
+  const setContacts = (chan) => {
+    let contacts = [];
+    if (chan.guid != null && profile.state.profile.guid != chan.guid) {
+      contacts.push(card.actions.getCardByGuid(chan.guid));
+    }
+    for (let guid of chan.data.channelDetail?.members) {
+      if (guid != profile.state.profile.guid) {
+        contacts.push(card.actions.getCardByGuid(guid));
+      }
+    }
+    chan.contacts = contacts;
+    if (contacts.length === 1 && contacts[0]) {
+      chan.logo = card.actions.getImageUrl(contacts[0].id);
+    }
+  }
+
+  const setSubject = (chan) => {
+    let subject = "";
+    if (chan.data.channelDetail?.data) {
+      try {
+        subject = JSON.parse(chan.data.channelDetail?.data).subject;
+      }
+      catch (err) {
+        console.log(err);
+      }
+    }
+    if (!subject) {
+      let names = [];
+      for (let contact of chan.contacts) {
+        names.push(contact?.data?.cardProfile?.name);
+      }
+      subject = names.join(", ");
+    }
+    if (!subject && !chan.contacts?.length) {
+      subject = "notes";
+    }
+    
+    chan.subject = subject;  
+  }
+
   useEffect(() => {
     let merged = [];
     card.state.cards.forEach((value, key, map) => {
@@ -53,9 +100,20 @@ export function useChannels() {
       return 1;
     });
 
-    merged.forEach(chan => { setUpdated(chan) });
+    merged.forEach(chan => { 
-    updateState({ channels: merged }); 
+      setUpdated(chan);
-  }, [channel, card, store]);
+      setContacts(chan);
+      setSubject(chan);
+    }); 
+
+    const filtered = merged.filter((chan) => {
+      let subject = chan?.subject?.toUpperCase();
+      return !filter || subject?.includes(filter);    
+    });
+
+    updateState({ channels: filtered });
+
+  }, [channel, card, store, filter]);
 
   return { state, actions };
 }