rendering card list

net/web/src/constants/Colors.js

@@ -12,6 +12,12 @@ const Colors = {
   enabled: '#444444',
   disabled: '#aaaaaa',
   text: '#444444',
+
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
 };
 
 export default Colors;

net/web/src/session/cards/cardItem/CardItem.jsx

@@ -1,3 +1,55 @@
+import { CardItemWrapper, StatusConnected, StatusConnecting, StatusRequested, StatusPending, StatusConfirmed} from './CardItem.styled';
+import { useCardItem } from './useCardItem.hook';
+import { Logo } from 'logo/Logo';
+import { Tooltip } from 'antd';
+
 export function CardItem({ item }) {
-  return <div>{ item?.data?.cardProfile?.name }</div>
+
+  const { state, actions } = useCardItem(item);  
+  const profile = item?.data?.cardProfile;
+  const detail = item?.data?.cardDetail;
+
+  const handle = () => {
+    if (profile?.node) {
+      return profile.handle + '@' + profile.node;
+    }
+    return profile?.handle;
+  }
+
+  return (
+    <CardItemWrapper>
+      <Logo url={state.logo} width={32} height={32} radius={8} />
+      <div class="details">
+        <div class="name">{ profile?.name }</div>
+        <div class="handle">{ handle() }</div>
+      </div>
+      <div class="markup">
+        { detail?.status === 'connected' && (
+          <Tooltip placement="left" title="connected contact">
+            <StatusConnected />
+          </Tooltip>
+        )}
+        { detail?.status === 'requested' && (
+          <Tooltip placement="left" title="connection requested by contact">
+            <StatusRequested />
+          </Tooltip>
+        )}
+        { detail?.status === 'connecting' && (
+          <Tooltip placement="left" title="requested contact connection">
+            <StatusConnecting />
+          </Tooltip>
+        )}
+        { detail?.status === 'pending' && (
+          <Tooltip placement="left" title="unknwon contact connection request">
+            <StatusPending />
+          </Tooltip>
+        )}
+        { detail?.status === 'confirmed' && (
+          <Tooltip placement="left" title="disconnected contact">
+            <StatusConfirmed />
+          </Tooltip>
+        )}
+      </div>
+    </CardItemWrapper>
+  );
 }

net/web/src/session/cards/cardItem/CardItem.styled.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const CardItemWrapper = styled.div`
+  height: 48px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${Colors.divider};
+  padding-left: 16px;
+  padding-right: 16px;
+
+  &:hover {
+    background-color: ${Colors.formHover};
+    cursor: pointer;
+  }
+
+  .details {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    padding-left: 16px;
+    justify-content: center;
+    min-width: 0;
+
+    .name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 15px;
+    }
+
+    .handle {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 12px;
+    }
+  }
+
+  .markup {
+    position: absolute;
+    right: 0;
+    margin-right: 16px;
+  }
+`;
+
+export const StatusConnected = styled.div`
+  background-color: ${Colors.connected};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusConnecting = styled.div`
+  background-color: ${Colors.connecting};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusRequested = styled.div`
+  background-color: ${Colors.requested};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusPending = styled.div`
+  background-color: ${Colors.pending};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusConfirmed = styled.div`
+  background-color: ${Colors.confirmed};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+

net/web/src/session/cards/cardItem/useCardItem.hook.js

@@ -0,0 +1,25 @@
+import { useContext, useState, useEffect } from 'react';
+import { CardContext } from 'context/CardContext';
+
+export function useCardItem(item) {
+
+  const [state, setState] = useState({
+    logo: null,
+  });
+
+  const card = useContext(CardContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    updateState({ logo: card.actions.getImageUrl(item.id) });
+  }, [card]); 
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+

net/web/src/session/cards/useCards.hook.js

@@ -44,7 +44,7 @@ export function useCards() {
 
     if (state.sorted) {
       filtered.sort((a, b) => {
-        if (a?.data?.cardProfile?.name > b?.data?.cardProfile?.name) {
+        if (a?.data?.cardProfile?.name < b?.data?.cardProfile?.name) {
           return -1;
         }
         return 1;
@@ -52,7 +52,10 @@ export function useCards() {
     }
     else {
       filtered.sort((a, b) => {
-        if (a?.data?.cardDetails?.statusUpdated > b?.data?.cardDetails?.statusUpdated) {
+        const aUpdated = a?.data?.cardDetail?.statusUpdated;
+        const bUpdated = b?.data?.cardDetail?.statusUpdated;
+
+        if ((aUpdated && !bUpdated) || aUpdated && bUpdated && aUpdated > bUpdated) {
           return -1;
         }
         return 1;

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

@@ -134,7 +134,6 @@ export function useChannels() {
   }, [channel, card, store, filter]);
 
   useEffect(() => {
-console.log(viewport.state);
     updateState({ display: viewport.state.display });
   }, [viewport]);