integrating with new split context

net/web/src/AppContext/useCardContext.hook.js

@@ -61,9 +61,8 @@ export function useCardContext() {
             cur.data.articles = new Map();
             cur.channels = new Map();
 
-            let contactToken = cur.data.cardProfile.guid + "." + cur.data.cardDetail.token
+            await updateContactChannels(card.id, cur.data.cardProfile.guid, cur.data.cardDetail.token, cur.data.notifiedView, cur.dataNotifiedChannel, cur.channels);
-            await updateContactChannels(contactToken, cur.data.notifiedView, cur.dataNotifiedChannel, cur.channels);
+            await updateContactArticles(card.id, cur.data.cardProfile.guid, cur.data.cardDetail.token, cur.data.notifiedView, cur.dataNotifiedArticle, cur.data.articles);
-            await updateContactArticles(contactToken, cur.data.notifiedView, cur.dataNotifiedArticle, cur.data.articles);
 
             // update view
             cur.data.notifiedArticle = card.data.notifiedArticle;
@@ -72,14 +71,12 @@ export function useCardContext() {
           }
           if (cur.data.notifiedArticle != card.data.notifiedArticle) {
             // update remote articles
-            let contactToken = cur.data.cardProfile.guid + "." + cur.data.cardDetail.token
+            await updateContactArticles(card.id, cur.data.cardProfile.guid, cur.data.cardDetail.token, cur.data.notifiedView, cur.dataNotifiedArticle, cur.data.articles);
-            await updateContactArticles(contactToken, cur.data.notifiedView, cur.dataNotifiedArticle, cur.data.articles);
             cur.data.notifiedArticle = card.data.notifiedArticle;
           }
           if (cur.data.notifiedChannel != card.data.notifiedChannel) {
             // update remote channels
-            let contactToken = cur.data.cardProfile.guid + "." + cur.data.cardDetail.token
+            await updateContactChannels(card.id, cur.data.cardProfile.guid, cur.data.cardDetail.token, cur.data.notifiedView, cur.dataNotifiedChannel, cur.channels);
-            await updateContactChannels(contactToken, cur.data.notifiedView, cur.dataNotifiedChannel, cur.channels);
             cur.data.notifiedChannel = card.data.notifiedChannel;
           }
         }
@@ -92,13 +89,13 @@ export function useCardContext() {
     }
   }
 
-  const updateContactChannels = async (token, viewRevision, channelRevision, channelMap) => {
+  const updateContactChannels = async (cardId, guid, token, viewRevision, channelRevision, channelMap) => {
-    let delta = await getContactChannels(token, viewRevision, channelRevision);
+    let delta = await getContactChannels(guid + "." + token, viewRevision, channelRevision);
     for (let channel of delta) {
       if (channel.data) {
         let cur = channelMap.get(channel.id);
         if (cur == null) {
-          cur = { id: channel.id, data: { } }
+          cur = { guid, cardId, id: channel.id, data: { } }
         }
         if (cur.data.detailRevision != channel.data.detailRevision) {
           if (channel.data.channelDetail != null) {
@@ -106,7 +103,7 @@ export function useCardContext() {
             cur.data.detailRevision = channel.data.detailRevision;
           }
           else {
-            let slot = await getContactChannel(token, channel.id);
+            let slot = await getContactChannel(guid + "." + token, channel.id);
             cur.data.channelDetail = slot.data.channelDetail;
             cur.data.detailRevision = slot.data.detailRevision;
           }
@@ -121,7 +118,7 @@ export function useCardContext() {
     }
   }
 
-  const updateContactArticles = async (token, viewRevision, articleRevision, articleMap) => {
+  const updateContactArticles = async (cardId, guid, token, viewRevision, articleRevision, articleMap) => {
     console.log("update contact articles");
   }
 

net/web/src/AppContext/useChannelContext.hook.js

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import { getChannels } from '../Api/getChannels';
 import { getChannel } from '../Api/getChannel';
+import { addChannel } from '../Api/addChannel';
 
 export function useChannelContext() {
   const [state, setState] = useState({
@@ -69,6 +70,9 @@ export function useChannelContext() {
     setRevision: async (rev) => {
       setChannels(rev);
     },
+    addChannel: async (cards, subject, description) => {
+      await addChannel(access.current, cards, subject, description);
+    },
   }
 
   return { state, actions }

net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.jsx

@@ -16,7 +16,7 @@ export function ChannelLabel({ item }) {
     let contacts = []; 
     if (item?.guid) {
       setHost(actions.getCardByGuid(item.guid));
-      for (let member of item.channel.data.channelDetail.members) {
+      for (let member of item.data.channelDetail.members) {
         if (member != state.guid) {
           contacts.push(actions.getCardByGuid(member));
         }
@@ -25,14 +25,14 @@ export function ChannelLabel({ item }) {
     }
     else {
       setHost(null); 
-      for (let member of item.channel.data.channelDetail.members) {
+      for (let member of item.data.channelDetail.members) {
         contacts.push(actions.getCardByGuid(member));
       }
       setMembers(contacts);
     }
 
-    if (item?.channel?.data?.channelDetail?.data) {
+    if (item?.data?.channelDetail?.data) {
-      let data = JSON.parse(item.channel.data.channelDetail.data);
+      let data = JSON.parse(item.data.channelDetail.data);
       if (data.subject != '' && data.subject != null) {
         setSubject(data.subject);
         return

net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/useChannelLabel.hook.js

@@ -1,5 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
-import { AppContext } from '../../../../../../AppContext/AppContext';
+import { CardContext } from '../../../../../../AppContext/CardContext';
+import { ProfileContext } from '../../../../../../AppContext/ProfileContext';
 import { getCardImageUrl } from '../../../../../../Api/getCardImageUrl';
 
 export function useChannelLabel() {
@@ -8,10 +9,19 @@ export function useChannelLabel() {
     guid: null
   });
 
-  const app = useContext(AppContext);
+  const card = useContext(CardContext);
+  const profile = useContext(ProfileContext);
 
   const actions = {
-    getCardByGuid: app?.actions?.getCardByGuid,
+    getCardByGuid: (guid) => {
+      let c = null;
+      card.state.cards.forEach((value, key, map) => {
+        if(value?.data?.cardProfile?.guid == guid) {
+          c = value;
+        }
+      });
+      return c;
+    },
   };
 
   const updateState = (value) => {
@@ -19,8 +29,8 @@ export function useChannelLabel() {
   }
 
   useEffect(() => {
-    updateState({ guid: app?.state?.Data?.profile?.guid })
+    updateState({ guid: profile.state.profile.guid });
-  }, [app])
+  }, [profile])
 
   return { state, actions };
 }

net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLogo/ChannelLogo.jsx

@@ -17,7 +17,7 @@ export function ChannelLogo({ item }) {
       setHome(false);
       setHost(actions.getCardByGuid(item.guid));
       let contacts = [];
-      for (let member of item.channel.data.channelDetail.members) {
+      for (let member of item.data.channelDetail.members) {
         if (member != state.guid) {
           contacts.push(actions.getCardByGuid(member));
         }
@@ -27,7 +27,7 @@ export function ChannelLogo({ item }) {
     else {
       setHome(true);
       let contacts = [];
-      for (let member of item.channel.data.channelDetail.members) {
+      for (let member of item.data.channelDetail.members) {
         contacts.push(actions.getCardByGuid(member));
       }
       setMembers(contacts);

net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLogo/useChannelLogo.hook.js

@@ -1,6 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
-import { AppContext } from '../../../../../../AppContext/AppContext';
+import { CardContext } from '../../../../../../AppContext/CardContext';
-import { getCardImageUrl } from '../../../../../../Api/getCardImageUrl';
+import { ProfileContext } from '../../../../../../AppContext/ProfileContext';
 
 export function useChannelLogo() {
   
@@ -8,16 +8,20 @@ export function useChannelLogo() {
     guid: null
   });
 
-  const app = useContext(AppContext);
+  const card = useContext(CardContext);
+  const profile = useContext(ProfileContext);
 
   const actions = {
-    getCardImageUrl: (cardId, revision) => {
+    getCardImageUrl: card.actions.getImageUrl,
-      if (app?.state?.token) {
+    getCardByGuid: (guid) => {
-        return getCardImageUrl(app.state.token, cardId, revision)
+      let c = null;
-      }
+      card.state.cards.forEach((value, key, map) => {
-      return null;
+        if(value?.data?.cardProfile?.guid == guid) {
+          c = value;
+        }
+      });
+      return c;
     },
-    getCardByGuid: app?.actions?.getCardByGuid,
   };
 
   const updateState = (value) => {
@@ -25,8 +29,8 @@ export function useChannelLogo() {
   }
 
   useEffect(() => {
-    updateState({ guid: app?.state?.Data?.profile?.guid })
+    updateState({ guid: profile.state.profile.guid })
-  }, [app])
+  }, [profile])
 
   return { state, actions };
 }

net/web/src/User/SideBar/Contacts/Channels/ChannelItem/useChannelItem.hook.jsx

@@ -15,10 +15,10 @@ export function useChannelItem() {
   const actions = {
     select: (item) => {
       if (item.guid) {
-        navigate(`/user/conversation/${item.cardId}/${item.channel.id}`);
+        navigate(`/user/conversation/${item.cardId}/${item.id}`);
       }
       else {
-        navigate(`/user/conversation/${item.channel.id}`);
+        navigate(`/user/conversation/${item.id}`);
       }
     },
   };

net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js

@@ -1,30 +1,38 @@
-import { useContext, useState, useEffect } from 'react';
+import { useContext, useState, useRef, useEffect } from 'react';
-import { AppContext } from '../../../../AppContext/AppContext';
 import { useNavigate } from 'react-router-dom';
-import { addChannel } from '../../../../Api/addChannel';
+import { CardContext } from '../../../../AppContext/CardContext';
+import { ChannelContext } from '../../../../AppContext/ChannelContext';
 
 export function useChannels() {
 
   const [state, setState] = useState({
+    channels: [],
     startCards: [],
     startSubject: '',
     startDescription: '',
     busy: false,
   });
 
+  let cardChannels = useRef([]);
+  let channels = useRef([]);
+
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
   const navigate = useNavigate();
-  const app = useContext(AppContext);
+  const card = useContext(CardContext);
+  const channel = useContext(ChannelContext);
 
   const actions = {
     select: (channel) => {
       navigate(`/user/channel/${channel.id}`);
     },
-    getCardImageUrl: app?.actions?.getCardImageurl,
+    getCardImageUrl: card.actions.getImageUrl,
-    getCards: app?.actions?.getConnectedCards,
+    getCards: () => {
+      let cards = Array.from(card.state.cards.values())
+      return cards.filter(c => c.data.cardDetail.status == 'connected');
+    },
     setStartCards: (cards) => updateState({ startCards: cards }),
     setStartSubject: (value) => updateState({ startSubject: value }),
     setStartDescription: (value) => updateState({ startDescription: value }),
@@ -33,8 +41,7 @@ export function useChannels() {
       if (!state.busy) {
         updateState({ busy: true });
         try {
-          let channel = await addChannel(app.state.token, state.startCards, state.startSubject, state.startDescription);
+          await channel.actions.addChannel(state.startCards, state.startSubject, state.startDescription);
-          console.log(channel);
           done = true;
         }
         catch (err) {
@@ -47,13 +54,17 @@ export function useChannels() {
   };
 
   useEffect(() => {
-    if (app?.state?.Data?.channels) {
+    cardChannels.current = [];
-      updateState({ channels: app.state.Data.channels });
+    card.state.cards.forEach((value, key, map) => {
-    }
+      cardChannels.current.push(...Array.from(value.channels.values()));
-    else {
+    });
-      updateState({ channels: [] });
+    updateState({ channels: [ ...channels.current, ...cardChannels.current ]});
-    }
+  }, [card])
-  }, [app])
+
+  useEffect(() => {
+    channels.current = Array.from(channel.state.channels.values());
+    updateState({ channels: [ ...channels.current, ...cardChannels.current ]});
+  }, [channel])
 
   return { state, actions };
 }