From e36528c3087ba4e798119942921acf91d1dd6e14 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Wed, 4 Dec 2024 16:18:41 -0800 Subject: [PATCH] implementing web conversation thread --- app/client/web/package.json | 1 + .../web/src/conversation/Conversation.tsx | 4 ++++ .../src/conversation/useConversation.hook.ts | 21 +++++++++++++++++-- app/client/web/src/message/Message.tsx | 5 +++-- app/client/web/yarn.lock | 12 +++++++++++ app/sdk/src/identity.ts | 3 ++- 6 files changed, 41 insertions(+), 5 deletions(-) diff --git a/app/client/web/package.json b/app/client/web/package.json index bfd53215..b96cdc98 100644 --- a/app/client/web/package.json +++ b/app/client/web/package.json @@ -28,6 +28,7 @@ "react": "18.3.1", "react-dom": "18.2.0", "react-easy-crop": "^5.0.8", + "react-resize-detector": "^11.0.1", "react-router-dom": "^6.26.0", "redaxios": "^0.5.1", "ts-jest": "29.0.2", diff --git a/app/client/web/src/conversation/Conversation.tsx b/app/client/web/src/conversation/Conversation.tsx index fe4839c3..55c1ae89 100644 --- a/app/client/web/src/conversation/Conversation.tsx +++ b/app/client/web/src/conversation/Conversation.tsx @@ -15,10 +15,14 @@ export function Conversation() { }; const topics = state.topics.map((topic, idx) => { + const card = state.cards.get(topic.guid) || null; + const profile = state.profile?.guid === topic.guid ? state.profile : null; return ( ) }) diff --git a/app/client/web/src/conversation/useConversation.hook.ts b/app/client/web/src/conversation/useConversation.hook.ts index d2cffc4d..6573c21e 100644 --- a/app/client/web/src/conversation/useConversation.hook.ts +++ b/app/client/web/src/conversation/useConversation.hook.ts @@ -1,7 +1,7 @@ import { useState, useContext, useEffect, useRef } from 'react' import { AppContext } from '../context/AppContext' import { DisplayContext } from '../context/DisplayContext' -import { Focus, FocusDetail, Topic, AssetSource, HostingMode, TransformType } from 'databag-client-sdk' +import { Focus, FocusDetail, Topic, Profile, Card, AssetSource, HostingMode, TransformType } from 'databag-client-sdk' import { ContextType } from '../context/ContextType' const img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII' @@ -13,6 +13,8 @@ export function useConversation() { focus: null as Focus | null, layout: null, topics: [] as Topic[], + profile: null as Profile | null, + cards: new Map(), }) // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -27,7 +29,8 @@ export function useConversation() { useEffect(() => { const focus = app.state.focus; - if (focus) { + const { contact, identity } = app.state.session; + if (focus && contact && identity) { const setTopics = (topics: Topic[]) => { const sorted = topics.sort((a, b) => { if (a.created < b.created) { @@ -40,14 +43,28 @@ export function useConversation() { }); updateState({ topics: sorted }); } + const setCards = (cards: Card[]) => { + const contacts = new Map(); + cards.forEach(card => { + contacts.set(card.guid, card); + }); + updateState({ cards: contacts }); + } + const setProfile = (profile: Profile) => { + updateState({ profile }); + } const setDetail = (focused: { cardId: string | null, channelId: string, detail: FocusDetail | null }) => { console.log(focused); } focus.addTopicListener(setTopics); focus.addDetailListener(setDetail); + contact.addCardListener(setCards); + identity.addProfileListener(setProfile); return () => { focus.removeTopicListener(setTopics); focus.removeDetailListener(setDetail); + contact.removeCardListener(setCards); + identity.removeProfileListener(setProfile); } } }, [app.state.focus]); diff --git a/app/client/web/src/message/Message.tsx b/app/client/web/src/message/Message.tsx index 58fa6e0a..a6d05782 100644 --- a/app/client/web/src/message/Message.tsx +++ b/app/client/web/src/message/Message.tsx @@ -1,5 +1,6 @@ -import { Topic } from 'databag-client-sdk'; +import { Topic, Card, Profile } from 'databag-client-sdk'; -export function Message({ topic }: { topic: Topic}) { +export function Message({ topic, card, profile }: { topic: Topic, card: Card | null, profile: Profile | null }) { + console.log(card, profile); return
CREATED: { topic.created }
} diff --git a/app/client/web/yarn.lock b/app/client/web/yarn.lock index 7f4a2f04..90ddbf36 100644 --- a/app/client/web/yarn.lock +++ b/app/client/web/yarn.lock @@ -3753,6 +3753,11 @@ lodash.truncate@^4.4.2: resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193" integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw== +lodash@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -4222,6 +4227,13 @@ react-remove-scroll@^2.6.0: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-resize-detector@^11.0.1: + version "11.0.1" + resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-11.0.1.tgz#70684958ae82bc0deb240d133a1ee440e0624532" + integrity sha512-1Tdgu6Ou3vI3RQD+o2/kTvDibb4NRe7Oh83hIjNNEXb6WKKCQT99VQlh3Xlbdq2HtkUoFEMrgMMKkYI83YbD7Q== + dependencies: + lodash "^4.17.21" + react-router-dom@^6.26.0: version "6.28.0" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.28.0.tgz#f73ebb3490e59ac9f299377062ad1d10a9f579e6" diff --git a/app/sdk/src/identity.ts b/app/sdk/src/identity.ts index a2b94091..5842900a 100644 --- a/app/sdk/src/identity.ts +++ b/app/sdk/src/identity.ts @@ -91,7 +91,7 @@ export class IdentityModule implements Identity { } } - public setProfile() { + public setProfile(): Profile { const { guid, handle, name, description, location, image, revision, seal, version, node } = this.profile; return { guid, @@ -100,6 +100,7 @@ export class IdentityModule implements Identity { description, location, imageSet: Boolean(image), + imageUrl: this.imageUrl, version, node, sealSet: Boolean(seal),