From 30c77e8cb8b213bc884f371bd8c4dcc729574b59 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Fri, 10 Jun 2022 16:05:11 +0200 Subject: [PATCH] add protocol hooks --- .../status-react/src/protocol/use-account.tsx | 43 +--- .../status-react/src/protocol/use-channel.tsx | 23 -- .../status-react/src/protocol/use-chat.tsx | 19 ++ .../status-react/src/protocol/use-chats.tsx | 15 +- .../src/protocol/use-community.tsx | 25 -- .../status-react/src/protocol/use-members.tsx | 10 +- .../src/protocol/use-messages.tsx | 239 ++---------------- 7 files changed, 63 insertions(+), 311 deletions(-) delete mode 100644 packages/status-react/src/protocol/use-channel.tsx create mode 100644 packages/status-react/src/protocol/use-chat.tsx delete mode 100644 packages/status-react/src/protocol/use-community.tsx diff --git a/packages/status-react/src/protocol/use-account.tsx b/packages/status-react/src/protocol/use-account.tsx index 599c66f..161690a 100644 --- a/packages/status-react/src/protocol/use-account.tsx +++ b/packages/status-react/src/protocol/use-account.tsx @@ -1,41 +1,20 @@ -import { useCallback, useState ,useEffect} from 'react' -import { useClient } from './provider' - -// return { -// name: 'Satoshi', -// publicKey: '71C7656EC7ab88b098defB751B7401B5f6d8976F', -// imageUrl: -// 'https://images.unsplash.com/photo-1546776310-eef45dd6d63c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1620&q=80', -// } +import { useProtocol } from './provider' export const useAccount = () => { - const client = useClient() + const { client, account, dispatch } = useProtocol() - const [account, setAccount] = useState() - console.log("file: use-account.tsx > line 15 > useAccount > account", account) - - - useEffect(() => { - // load account - },[]) - - const createAccount = useCallback(() => { - const account = client.createAccount() - console.log("createAccount > account", account) - - - setAccount(account) + const createAccount = () => { + const account = client.createAccount() + dispatch({ type: 'SET_ACCOUNT', account }) // TODO: save account - - return account - }, []) + } - const deleteAccount = useCallback(() => { - // client.deleteAccount() - setAccount(undefined) - }, []) + const deleteAccount = () => { + dispatch({ type: 'REMOVE_ACCOUNT' }) + // TODO: remove from storage + } - return [account, { createAccount, deleteAccount }] as const + return { account, createAccount, deleteAccount } as const } diff --git a/packages/status-react/src/protocol/use-channel.tsx b/packages/status-react/src/protocol/use-channel.tsx deleted file mode 100644 index 67e6817..0000000 --- a/packages/status-react/src/protocol/use-channel.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useMemo } from 'react' -import { useClient } from './provider' -import { useCommunity } from '~/src/protocol/use-community' -import { Community } from '@status-im/js' - -export type Channel = Community['communityMetadata']['chats'][0] - -export const useChannel = (id: string): Channel => { - const client = useClient() - - const community = useCommunity() - - - - - const chat = useMemo(() => { - return Object.entries(community.chats).find( - ([chatId]) => chatId === id - )?.[1] - }, [community, id]) - - return chat! -} diff --git a/packages/status-react/src/protocol/use-chat.tsx b/packages/status-react/src/protocol/use-chat.tsx new file mode 100644 index 0000000..7ee4023 --- /dev/null +++ b/packages/status-react/src/protocol/use-chat.tsx @@ -0,0 +1,19 @@ +import { useMemo } from 'react' + +import { useProtocol } from './provider' + +import type { Community } from '@status-im/js' + +export type Chat = Community['communityMetadata']['chats'][0] + +export const useChat = (id: string): Chat => { + const { community } = useProtocol() + + const chat = useMemo(() => { + return Object.entries(community.chats).find( + ([chatId]) => chatId === id + )?.[1] + }, [community, id]) + + return chat! +} diff --git a/packages/status-react/src/protocol/use-chats.tsx b/packages/status-react/src/protocol/use-chats.tsx index c41eb3a..2990560 100644 --- a/packages/status-react/src/protocol/use-chats.tsx +++ b/packages/status-react/src/protocol/use-chats.tsx @@ -1,12 +1,15 @@ import { useMemo } from 'react' -import { useClient } from './provider' -import { useCommunity } from '~/src/protocol/use-community' -import { Community } from '@status-im/js' -export type Channel = Community['communityMetadata']['chats'][0] +import { useProtocol } from './provider' -export const useChats = (): Channel => { - const community = useCommunity() +import type { Community } from '@status-im/js' + +export type Chat = Community['communityMetadata']['chats'][0] & { + id: string +} + +export const useChats = (): Chat[] => { + const { community } = useProtocol() return useMemo(() => { return Object.entries(community.chats) diff --git a/packages/status-react/src/protocol/use-community.tsx b/packages/status-react/src/protocol/use-community.tsx deleted file mode 100644 index 0fc8e29..0000000 --- a/packages/status-react/src/protocol/use-community.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useState, useEffect, useReducer } from 'react' - -import { useClient, useCommunity as useCommunityContext } from './provider' -import { Community } from '@status-im/js' -// return { -// name: 'CryptoKitties', -// description: 'A community of cat lovers, meow!', -// publicKey: '0x2Ef1907d50926...6cEbd975aC5E0Ba', -// imageUrl: -// 'https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80', -// membersCount: 182, -// requestNeeded: true, -// } - -// interface Community { -// name: string -// description: string -// channels: any[] -// } - -export const useCommunity = () => { - const context = useCommunityContext() - - return context -} diff --git a/packages/status-react/src/protocol/use-members.tsx b/packages/status-react/src/protocol/use-members.tsx index 327cb38..db24194 100644 --- a/packages/status-react/src/protocol/use-members.tsx +++ b/packages/status-react/src/protocol/use-members.tsx @@ -1,13 +1,11 @@ +import { useProtocol } from '~/src/protocol' -import { useCommunity } from '~/src/protocol/use-community' -import { Community } from '@status-im/js' +import type { Community } from '@status-im/js' export type Member = Community['communityMetadata']['members'][0] export const useMembers = (): string[] => { + const { community } = useProtocol() - const community = useCommunity() - -return Object.keys(community.members) - + return Object.keys(community.members) } diff --git a/packages/status-react/src/protocol/use-messages.tsx b/packages/status-react/src/protocol/use-messages.tsx index 188f859..efd673d 100644 --- a/packages/status-react/src/protocol/use-messages.tsx +++ b/packages/status-react/src/protocol/use-messages.tsx @@ -1,17 +1,16 @@ -import { useEffect, useReducer, useState } from 'react' +import { useEffect, useState } from 'react' -import { useClient } from './provider' -import { useChannel } from './use-channel' +import { useProtocol } from './provider' -import type { MessageType } from '@status-im/js' +import type { Message } from '@status-im/js' export type Reaction = - | 'heart' - | 'thumbs-up' - | 'thumbs-down' - | 'smile' - | 'sad' - | 'angry' + | 'LOVE' + | 'THUMBS_UP' + | 'THUMBS_DOWN' + | 'LAUGH' + | 'SAD' + | 'ANGRY' export type Reactions = { [key in Reaction]: { @@ -49,7 +48,7 @@ interface ImageTextMessage extends BaseMessage { imageUrl: string } -export type Message = TextMessage | ImageMessage | ImageTextMessage +// export type Message = TextMessage | ImageMessage | ImageTextMessage interface BaseReply { type: Message['type'] @@ -77,42 +76,35 @@ interface ImageTextReply extends BaseReply { export type Reply = TextReply | ImageReply | ImageTextReply -export type { MessageType } +export type { Message } interface Result { - data: MessageType[] + data: Message[] loading: boolean error?: Error + // fetchMore: () => void } export const useMessages = (channelId: string): Result => { - const client = useClient() + const { client } = useProtocol() // const [state, dispatch] = useReducer((state,action) => {}, {}) - const [data, setData] = useState(() => client.community.getMessages(channelId)) + const [data, setData] = useState(() => + client.community.getMessages(channelId) + ) const [loading, setLoading] = useState(true) const [error, setError] = useState() useEffect(() => { - - console.log("subscribed to", channelId) - setData(client.community.getMessages(channelId)) - const handleUpdate = (messages: MessageType[]) => { + const handleUpdate = (messages: Message[]) => { setLoading(false) setData(messages) - console.log('update for',channelId, messages) } -const unsubscribe= client.community.onChannelMessageUpdate(channelId, handleUpdate) - return () => - { - unsubscribe() - console.log("unsubscribed from", channelId) - - } + return client.community.onChannelMessageUpdate(channelId, handleUpdate) }, [channelId]) return { @@ -120,198 +112,7 @@ const unsubscribe= client.community.onChannelMessageUpdate(channelId, handleU loading, error, // hasMore - // fetchMore + // fetchMore, // refetch } - - // return [ - // { - // id: '1', - // type: 'text', - // contact: { - // name: 'Leila Joyner', - // imageUrl: - // 'https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjI0OQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // text: 'lorem, sit amet ultricies sem magna nec quam. Curabitur vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim magna a tortor. Nunc commodo auctor velit. Aliquam nisl. Nulla eu neque pellentesque massa lobortis ultrices. Vivamus rhoncus. Donec est. Nunc ullamcorper, velit in aliquet lobortis, nisi nibh lacinia orci, consectetuer euismod est arcu ac orci. Ut semper pretium neque. Morbi', - // owner: false, - // pinned: true, - // mention: false, - // reactions: { - // heart: { count: 0, me: false }, - // 'thumbs-up': { count: 0, me: false }, - // 'thumbs-down': { count: 0, me: false }, - // smile: { count: 0, me: false }, - // sad: { count: 0, me: false }, - // angry: { count: 0, me: false }, - // }, - // reply: { - // contact: { - // name: 'Leila Joyner', - // imageUrl: - // 'https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjI0OQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // type: 'text', - // text: 'lorem, sit amet ultricies sem magna nec quam. Curabitur vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim magna a tortor. Nunc commodo auctor velit. Aliquam nisl. Nulla eu neque pellentesque massa lobortis ultrices. Vivamus rhoncus. Donec est. Nunc ullamcorper, velit in aliquet lobortis, nisi nibh lacinia orci, consectetuer euismod est arcu ac orci. Ut semper pretium neque. Morbi', - // }, - // }, - // { - // id: '2', - // type: 'text', - // contact: { - // name: 'Velma Mccarthy', - // imageUrl: - // 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjMwOQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // text: 'est tempor bibendum. Donec felis orci, adipiscing non, luctus sit amet, faucibus ut, nulla. Cras eu tellus eu augue porttitor interdum. Sed auctor odio a purus. Duis elementum, dui quis accumsan convallis, ante lectus convallis est, vitae sodales nisi magna sed dui. Fusce aliquam, enim nec tempus scelerisque, lorem ipsum sodales purus, in molestie tortor nibh sit amet orci. Ut sagittis lobortis mauris. Suspendisse aliquet molestie tellus. Aenean egestas hendrerit neque. In ornare sagittis felis. Donec tempor, est ac mattis semper, dui lectus rutrum urna, nec luctus felis', - // owner: false, - // pinned: false, - // mention: false, - // reactions: { - // heart: { count: 0, me: false }, - // 'thumbs-up': { count: 0, me: false }, - // 'thumbs-down': { count: 0, me: false }, - // smile: { count: 0, me: false }, - // sad: { count: 0, me: false }, - // angry: { count: 0, me: false }, - // }, - // reply: { - // contact: { - // name: 'Leila Joyner', - // imageUrl: - // 'https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjI0OQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // type: 'image', - // imageUrl: - // 'https://images.unsplash.com/photo-1647531041383-fe7103712f16?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80', - // }, - // }, - // { - // id: '3', - // type: 'text', - // contact: { - // name: 'Gareth Garrison', - // imageUrl: - // 'https://images.unsplash.com/photo-1615473967657-9dc21773daa3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjMwNg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // text: 'elit erat vitae risus. @satoshi Duis a mi fringilla mi lacinia mattis. Integer eu lacus. Quisque imperdiet, erat nonummy ultricies ornare, elit elit fermentum risus, at fringilla purus mauris a nunc. In at pede. Cras vulputate velit eu sem. Pellentesque ut ipsum ac mi eleifend egestas. Sed pharetra, felis', - // owner: false, - // pinned: false, - // mention: true, - // reactions: { - // heart: { count: 1, me: false }, - // 'thumbs-up': { count: 1, me: false }, - // 'thumbs-down': { count: 3, me: true }, - // smile: { count: 0, me: false }, - // sad: { count: 0, me: false }, - // angry: { count: 0, me: false }, - // }, - // reply: { - // contact: { - // name: 'Leila Joyner', - // imageUrl: - // 'https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjI0OQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // type: 'image-text', - // text: 'lorem, sit amet ultricies sem magna nec quam. Curabitur vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim magna a tortor. Nunc commodo auctor velit. Aliquam nisl. Nulla eu neque pellentesque massa lobortis ultrices. Vivamus rhoncus. Donec est. Nunc ullamcorper, velit in aliquet lobortis, nisi nibh lacinia orci, consectetuer euismod est arcu ac orci. Ut semper pretium neque. Morbi', - // imageUrl: - // 'https://images.unsplash.com/photo-1647531041383-fe7103712f16?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80', - // }, - // }, - // { - // id: '4', - // type: 'image', - // contact: { - // name: 'Celeste Suarez', - // imageUrl: '', - // }, - // imageUrl: - // 'https://images.unsplash.com/photo-1647531041383-fe7103712f16?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80', - // owner: false, - // pinned: false, - // mention: false, - // reactions: { - // heart: { count: 0, me: false }, - // 'thumbs-up': { count: 0, me: false }, - // 'thumbs-down': { count: 0, me: false }, - // smile: { count: 0, me: false }, - // sad: { count: 0, me: false }, - // angry: { count: 0, me: false }, - // }, - // }, - // { - // id: '5', - // type: 'text', - // contact: { - // name: 'Satoshi', - // imageUrl: - // 'https://images.unsplash.com/photo-1542838686-37da4a9fd1b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjMwNA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // text: 'tincidunt tempus risus. Donec egestas. Duis ac arcu. Nunc mauris. Morbi non sapien molestie orci tincidunt adipiscing. Mauris molestie pharetra nibh. Aliquam ornare, libero at auctor ullamcorper, nisl arcu iaculis enim, sit amet ornare lectus justo eu arcu. Morbi sit amet massa. Quisque porttitor eros nec tellus. Nunc lectus pede, ultrices a, auctor non, feugiat nec, diam. Duis mi', - // owner: true, - // pinned: false, - // mention: false, - // reactions: { - // heart: { count: 0, me: false }, - // 'thumbs-up': { count: 0, me: false }, - // 'thumbs-down': { count: 0, me: false }, - // smile: { count: 0, me: false }, - // sad: { count: 1, me: false }, - // angry: { count: 1, me: true }, - // }, - // reply: { - // contact: { - // name: 'Leila Joyner', - // imageUrl: - // 'https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjI0OQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // type: 'text', - // text: 'tincidunt tempus risus. Donec egestas. Duis ac arcu. Nunc mauris. Morbi non sapien molestie orci tincidunt adipiscing. Mauris molestie pharetra nibh. Aliquam ornare, libero at auctor ullamcorper, nisl arcu iaculis enim, sit amet ornare lectus justo eu arcu. Morbi sit amet massa. Quisque porttitor eros nec tellus. Nunc lectus pede, ultrices a, auctor non, feugiat nec, diam. Duis mi', - // }, - // }, - // { - // id: '6', - // type: 'image-text', - // contact: { - // name: 'Leila Joyner', - // imageUrl: - // 'https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjI0OQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // text: 'lorem, sit amet ultricies sem magna nec quam.', - // imageUrl: - // 'https://images.unsplash.com/photo-1647531041383-fe7103712f16?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80', - // owner: false, - // pinned: false, - // mention: false, - // reactions: { - // heart: { count: 0, me: false }, - // 'thumbs-up': { count: 10, me: true }, - // 'thumbs-down': { count: 3, me: false }, - // smile: { count: 0, me: false }, - // sad: { count: 0, me: false }, - // angry: { count: 0, me: false }, - // }, - // }, - // { - // id: '5', - // type: 'text', - // contact: { - // name: 'Satoshi', - // imageUrl: - // 'https://images.unsplash.com/photo-1542838686-37da4a9fd1b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8cGVyc29ufHx8fHx8MTY0OTg0NjMwNA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080', - // }, - // text: 'tincidunt tempus risus. Donec egestas. Duis ac arcu. Nunc mauris. Morbi non sapien molestie orci tincidunt adipiscing. Mauris molestie pharetra nibh. Aliquam ornare, libero at auctor ullamcorper, nisl arcu iaculis enim, sit amet ornare lectus justo eu arcu. Morbi sit amet massa. Quisque porttitor eros nec tellus. Nunc lectus pede, ultrices a, auctor non, feugiat nec, diam. Duis mi', - // owner: true, - // pinned: false, - // mention: true, - // reactions: { - // heart: { count: 0, me: false }, - // 'thumbs-up': { count: 0, me: false }, - // 'thumbs-down': { count: 0, me: false }, - // smile: { count: 0, me: false }, - // sad: { count: 0, me: false }, - // angry: { count: 0, me: false }, - // }, - // }, - // ] }