From 0cf94193a29ed521fe064fac3411cd960a598dd6 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Thu, 12 Jan 2023 11:30:01 -0800 Subject: [PATCH] integrating refactored context back into screens --- net/web/src/access/login/useLogin.hook.js | 56 +++++++++---------- net/web/src/api/fetchUtil.js | 1 - net/web/src/context/cardUtil.js | 9 ++- net/web/src/context/useAppContext.hook.js | 5 +- net/web/src/root/Root.jsx | 5 +- net/web/src/session/Session.jsx | 6 +- .../selectItem/useSelectItem.hook.js | 2 +- .../src/session/channels/useChannels.hook.js | 9 ++- .../topicItem/useTopicItem.hook.js | 14 ++--- .../conversation/useConversation.hook.js | 4 +- .../src/session/details/useDetails.hook.js | 2 +- net/web/src/session/useSession.hook.js | 2 +- 12 files changed, 56 insertions(+), 59 deletions(-) diff --git a/net/web/src/access/login/useLogin.hook.js b/net/web/src/access/login/useLogin.hook.js index 2e4bc752..fd4a6cd5 100644 --- a/net/web/src/access/login/useLogin.hook.js +++ b/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 }; } diff --git a/net/web/src/api/fetchUtil.js b/net/web/src/api/fetchUtil.js index 02bd85d4..a5ed506d 100644 --- a/net/web/src/api/fetchUtil.js +++ b/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); } diff --git a/net/web/src/context/cardUtil.js b/net/web/src/context/cardUtil.js index 282298af..bf226c90 100644 --- a/net/web/src/context/cardUtil.js +++ b/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 {}; } diff --git a/net/web/src/context/useAppContext.hook.js b/net/web/src/context/useAppContext.hook.js index bc4428f0..5eebbc7f 100644 --- a/net/web/src/context/useAppContext.hook.js +++ b/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(() => { diff --git a/net/web/src/root/Root.jsx b/net/web/src/root/Root.jsx index d07ebbd3..db8cf3e0 100644 --- a/net/web/src/root/Root.jsx +++ b/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 <> } diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index dce5f784..a9725187 100644 --- a/net/web/src/session/Session.jsx +++ b/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]); diff --git a/net/web/src/session/cardSelect/selectItem/useSelectItem.hook.js b/net/web/src/session/cardSelect/selectItem/useSelectItem.hook.js index 414d4682..d7b52eb0 100644 --- a/net/web/src/session/cardSelect/selectItem/useSelectItem.hook.js +++ b/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 = { diff --git a/net/web/src/session/channels/useChannels.hook.js b/net/web/src/session/channels/useChannels.hook.js index 37037205..b34afd00 100644 --- a/net/web/src/session/channels/useChannels.hook.js +++ b/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); } } diff --git a/net/web/src/session/conversation/topicItem/useTopicItem.hook.js b/net/web/src/session/conversation/topicItem/useTopicItem.hook.js index b17c7cb1..828695d5 100644 --- a/net/web/src/session/conversation/topicItem/useTopicItem.hook.js +++ b/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 }); } } diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js index f8528269..894f8aab 100644 --- a/net/web/src/session/conversation/useConversation.hook.js +++ b/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(); diff --git a/net/web/src/session/details/useDetails.hook.js b/net/web/src/session/details/useDetails.hook.js index 74ba9e7e..7d481ee6 100644 --- a/net/web/src/session/details/useDetails.hook.js +++ b/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; } }); diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js index 6d72dc11..715d7951 100644 --- a/net/web/src/session/useSession.hook.js +++ b/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 {