integrating refactored context back into screens

net/web/src/access/login/useLogin.hook.js

@@ -1,5 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { AppContext } from 'context/AppContext';
+import { getAvailable } from 'api/getAvailable';
 import { useNavigate, useLocation } from "react-router-dom";
 
 export function useLogin() {
@@ -56,43 +57,38 @@ export function useLogin() {
   };
 
   useEffect(() => {
-    if (app) {
-      if (app.state) {
-        if (app.state.access) {
-          navigate('/session')
-        }
-        else {
-          let params = new URLSearchParams(search);
-          let token = params.get("access");
-          if (token) {
-            const access = async () => {
-              updateState({ busy: true })
-              try {
-                await app.actions.access(token)
-              }
-              catch (err) {
-                console.log(err);
-              }
-              updateState({ busy: false })
-            }
-            access();
-          }
-        }
-      }
-      if (app.actions && app.actions.available) {
-        const count = async () => {
+    if (app.state.status) {
+      navigate('/session')
+    }
+    else {
+      let params = new URLSearchParams(search);
+      let token = params.get("access");
+      if (token) {
+        const access = async () => {
+          updateState({ busy: true })
           try {
-            const available = await app.actions.available()
-            updateState({ available: available !== 0 })
+            await app.actions.access(token)
           }
-          catch(err) {
+          catch (err) {
             console.log(err);
           }
+          updateState({ busy: false })
         }
-        count();
+        access();
       }
     }
-  }, [app, navigate, search])
+    const count = async () => {
+      try {
+        const available = await getAvailable()
+        updateState({ available: available !== 0 })
+      }
+      catch(err) {
+        console.log(err);
+      }
+    }
+    count();
+    // eslint-disable-next-line
+  }, [app.state, navigate, search])
 
   return { state, actions };
 }

net/web/src/api/fetchUtil.js

@@ -3,7 +3,6 @@ const TIMEOUT = 15000;
 //await new Promise(r => setTimeout(r, 2000));
 
 export function createWebsocket(url) {
-console.log("HERE");
   return new WebSocket(url);
 }
 

net/web/src/context/cardUtil.js

@@ -1,6 +1,6 @@
 export function getCardByGuid(cards, guid) {
   let card = null;
-  cards.current.forEach((value, key, map) => {
+  cards.forEach((value, key, map) => {
     if(value?.data?.cardProfile?.guid === guid) {
       card = value;
     }
@@ -8,13 +8,12 @@ export function getCardByGuid(cards, guid) {
   return card;
 }
 
-export getProfileByGuid: (cards, guid) => {
-  const card = getCardByGuid(guid);
+export function getProfileByGuid(cards, guid) {
+  const card = getCardByGuid(cards, guid);
   if (card?.data?.cardProfile) {
     const { name, handle, imageSet } = card.data.cardProfile;
-    const revision = card.data.profileRevision;
     const cardId = card.id;
-    return { cardId, revision, name, handle, imageSet, revision }
+    return { cardId, name, handle, imageSet }
   }
   return {};
 }

net/web/src/context/useAppContext.hook.js

@@ -13,7 +13,7 @@ import { createWebsocket } from 'api/fetchUtil';
 
 export function useAppContext(websocket) {
   const [state, setState] = useState({
-    status: 'disconnected',
+    status: null,
   });
   const [appRevision, setAppRevision] = useState();
 
@@ -36,6 +36,7 @@ export function useAppContext(websocket) {
   const cardContext = useContext(CardContext);
 
   const setSession = (token) => {
+console.log("SET SESSION", token);
     try {
       accountContext.actions.setToken(token);
       profileContext.actions.setToken(token);
@@ -185,7 +186,7 @@ export function useAppContext(websocket) {
     ws.current.onclose = () => {}
     ws.current.close()
     ws.current = null
-    updateState({ status: 'disconnected' });
+    updateState({ status: null });
   }
 
   useEffect(() => {

net/web/src/root/Root.jsx

@@ -8,15 +8,16 @@ export function Root() {
   const app = useContext(AppContext);
 
   useEffect(() => {
+console.log(app.state);
     if (app.state) {
-      if (app.state.access) {
+      if (app.state.status) {
         navigate('/session');
       }
       else {
         navigate('/login');
       }
     }
-  }, [app, navigate]);
+  }, [app.state, navigate]);
 
   return <></>
 }

net/web/src/session/Session.jsx

@@ -23,10 +23,8 @@ export function Session() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (app.state) {
-      if (!app.state.access) {
-        navigate('/');
-      }
+    if (!app.state.status) {
+      navigate('/');
     }
   }, [app, navigate]);
 

net/web/src/session/cardSelect/selectItem/useSelectItem.hook.js

@@ -28,7 +28,7 @@ export function useSelectItem(item, selected, markup) {
   }, [selected, item]);
 
   useEffect(() => {
-    updateState({ logo: card.actions.getImageUrl(item.id) });
+    updateState({ logo: card.actions.getCardImageUrl(item.id) });
   }, [card, item]);
 
   const actions = {

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

@@ -5,6 +5,7 @@ import { CardContext } from 'context/CardContext';
 import { AccountContext } from 'context/AccountContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { ViewportContext } from 'context/ViewportContext';
+import { getCardByGuid } from 'context/cardUtil';
 
 export function useChannels() {
 
@@ -138,16 +139,18 @@ export function useChannels() {
   const setContacts = (chan) => {
     let contacts = [];
     if (chan.guid != null && profile.state.identity.guid !== chan.guid) {
-      contacts.push(card.actions.getCardByGuid(chan.guid));
+      const contact = getCardByGuid(card.state.cards, chan.guid);
+      contacts.push(contact);
     }
     for (let guid of chan.data.channelDetail?.members) {
       if (guid !== profile.state.identity.guid) {
-        contacts.push(card.actions.getCardByGuid(guid));
+        const contact = getCardByGuid(card.state.cards, guid);
+        contacts.push(contact);
       }
     }
     chan.contacts = contacts;
     if (contacts.length === 1 && contacts[0]) {
-      chan.logo = card.actions.getImageUrl(contacts[0].id);
+      chan.logo = card.actions.getCardImageUrl(contacts[0].id);
     }
   }
 

net/web/src/session/conversation/topicItem/useTopicItem.hook.js

@@ -2,6 +2,7 @@ import { useContext, useState, useEffect, useRef } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { CardContext } from 'context/CardContext';
+import { getProfileByGuid } from 'context/cardUtil';
 
 export function useTopicItem(topic, sealed, sealKey) {
 
@@ -33,10 +34,6 @@ export function useTopicItem(topic, sealed, sealKey) {
     setState((s) => ({ ...s, ...value }));
   }
 
-  useEffect(() => {
-    console.log("TOPIC URL:", state.imageUrl);
-  }, [state.imageUrl]);
-
   useEffect(() => {
     let owner = false;
     if (profile.state.identity.guid === topic?.data?.topicDetail.guid) {
@@ -94,14 +91,16 @@ export function useTopicItem(topic, sealed, sealKey) {
           sealed = false;
         }
         else {
-          conversation.actions.unsealTopic(topic.id, sealKey);
+          if (sealKey) {
+            conversation.actions.unsealTopic(topic.id, sealKey);
+          }
           sealed = true;
         }
         ready = true;
       }
     }
 
-    if (profile.state.identity?.guid && card.state.init && conversation.state.init) {
+    if (profile.state.identity?.guid) {
       const { guid, created } = topic.data.topicDetail;
 
       let createdStr;
@@ -124,7 +123,8 @@ export function useTopicItem(topic, sealed, sealKey) {
         updateState({ sealed, name, handle, imageUrl, status, text, transform, assets, confirmed, error, ready, created: createdStr, owner, textColor, textSize, topicId: topic.id, init: true });
       }
       else {
-        const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
+        const { cardId, name, handle, imageSet } = getProfileByGuid(card.state.cards, guid);
+        const imageUrl = imageSet ? card.actions.getCardImageUrl(cardId) : null;
         updateState({ sealed, name, handle, imageUrl, status, text, transform, assets, confirmed, error, ready, created: createdStr, owner, textColor, textSize, topicId: topic.id, init: true });
       }
     }

net/web/src/session/conversation/useConversation.hook.js

@@ -90,7 +90,7 @@ export function useConversation(cardId, channelId) {
     setTimeout(() => {
       updateState({ delayed: true });
     }, 250);
-    conversation.actions.setConversationId(cardId, channelId);
+    conversation.actions.setChannel(cardId, channelId);
     // eslint-disable-next-line
   }, [cardId, channelId]);
 
@@ -122,7 +122,7 @@ export function useConversation(cardId, channelId) {
 
   const actions = {
     more: () => {
-      conversation.actions.addHistory();
+      conversation.actions.loadMore();
     },
     resync: () => {
       conversation.actions.resync();

net/web/src/session/details/useDetails.hook.js

@@ -70,7 +70,7 @@ export function useDetails(cardId, channelId) {
         try {
           const seals = JSON.parse(chan.data.channelDetail.data).seals;
           seals.forEach(seal => {
-            if (account.state.sealKey.public === seal.publicKey) {
+            if (account.state.sealKey?.public === seal.publicKey) {
               editable = true;
             }
           });

net/web/src/session/useSession.hook.js

@@ -37,7 +37,7 @@ export function useSession() {
   }
 
   useEffect(() => {
-    if (!profile.state.identity?.guid || !card.state.init || !channel.state.init) {
+    if (!profile.state.identity?.guid) {
       updateState({ loading: true });
     }
     else {