status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add protocol hooks

This commit is contained in:
Pavel Prichodko 2022-06-10 16:05:11 +02:00 committed by Felicio Mununga
parent 9e516ef773
commit 30c77e8cb8
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
7 changed files with 63 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/status-react/src/protocol/use-account.tsx
View File

@ -1,41 +1,20 @@
import { useCallback, useState ,useEffect} from 'react' import { useProtocol } from './provider'
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',
// }
export const useAccount = () => { export const useAccount = () => {
const client = useClient() const { client, account, dispatch } = useProtocol()
const [account, setAccount] = useState<any>() const createAccount = () => {
console.log("file: use-account.tsx > line 15 > useAccount > account", account)
useEffect(() => {
// load account
},[])
const createAccount = useCallback(() => {
const account = client.createAccount() const account = client.createAccount()
console.log("createAccount > account", account) dispatch({ type: 'SET_ACCOUNT', account })
setAccount(account)
// TODO: save account // TODO: save account
return account return account
}, []) }
const deleteAccount = useCallback(() => { const deleteAccount = () => {
// client.deleteAccount() dispatch({ type: 'REMOVE_ACCOUNT' })
setAccount(undefined) // TODO: remove from storage
}, []) }
return [account, { createAccount, deleteAccount }] as const return { account, createAccount, deleteAccount } as const
} }

23
packages/status-react/src/protocol/use-channel.tsx
View File

@ -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!
}

19
packages/status-react/src/protocol/use-chat.tsx Normal file
View File

@ -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!
}

15
packages/status-react/src/protocol/use-chats.tsx
View File

@ -1,12 +1,15 @@
import { useMemo } from 'react' 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 => { import type { Community } from '@status-im/js'
const community = useCommunity()
export type Chat = Community['communityMetadata']['chats'][0] & {
id: string
}
export const useChats = (): Chat[] => {
const { community } = useProtocol()
return useMemo(() => { return useMemo(() => {
return Object.entries(community.chats) return Object.entries(community.chats)

25
packages/status-react/src/protocol/use-community.tsx
View File

@ -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
}

8
packages/status-react/src/protocol/use-members.tsx
View File

@ -1,13 +1,11 @@
import { useProtocol } from '~/src/protocol'
import { useCommunity } from '~/src/protocol/use-community' import type { Community } from '@status-im/js'
import { Community } from '@status-im/js'
export type Member = Community['communityMetadata']['members'][0] export type Member = Community['communityMetadata']['members'][0]
export const useMembers = (): string[] => { export const useMembers = (): string[] => {
const { community } = useProtocol()
const community = useCommunity()
return Object.keys(community.members) return Object.keys(community.members)
} }

239
packages/status-react/src/protocol/use-messages.tsx
View File

@ -1,17 +1,16 @@
import { useEffect, useReducer, useState } from 'react' import { useEffect, useState } from 'react'
import { useClient } from './provider' import { useProtocol } from './provider'
import { useChannel } from './use-channel'
import type { MessageType } from '@status-im/js' import type { Message } from '@status-im/js'
export type Reaction = export type Reaction =
| 'heart' | 'LOVE'
| 'thumbs-up' | 'THUMBS_UP'
| 'thumbs-down' | 'THUMBS_DOWN'
| 'smile' | 'LAUGH'
| 'sad' | 'SAD'
| 'angry' | 'ANGRY'
export type Reactions = { export type Reactions = {
[key in Reaction]: { [key in Reaction]: {
@ -49,7 +48,7 @@ interface ImageTextMessage extends BaseMessage {
imageUrl: string imageUrl: string
} }
export type Message = TextMessage | ImageMessage | ImageTextMessage // export type Message = TextMessage | ImageMessage | ImageTextMessage
interface BaseReply { interface BaseReply {
type: Message['type'] type: Message['type']
@ -77,42 +76,35 @@ interface ImageTextReply extends BaseReply {
export type Reply = TextReply | ImageReply | ImageTextReply export type Reply = TextReply | ImageReply | ImageTextReply
export type { MessageType } export type { Message }
interface Result { interface Result {
data: MessageType[] data: Message[]
loading: boolean loading: boolean
error?: Error error?: Error
// fetchMore: () => void
} }
export const useMessages = (channelId: string): Result => { export const useMessages = (channelId: string): Result => {
const client = useClient() const { client } = useProtocol()
// const [state, dispatch] = useReducer<Result>((state,action) => {}, {}) // const [state, dispatch] = useReducer<Result>((state,action) => {}, {})
const [data, setData] = useState<any[]>(() => client.community.getMessages(channelId)) const [data, setData] = useState<any[]>(() =>
client.community.getMessages(channelId)
)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [error, setError] = useState<Error>() const [error, setError] = useState<Error>()
useEffect(() => { useEffect(() => {
console.log("subscribed to", channelId)
setData(client.community.getMessages(channelId)) setData(client.community.getMessages(channelId))
const handleUpdate = (messages: MessageType[]) => { const handleUpdate = (messages: Message[]) => {
setLoading(false) setLoading(false)
setData(messages) setData(messages)
console.log('update for',channelId, messages)
} }
const unsubscribe= client.community.onChannelMessageUpdate(channelId, handleUpdate)
return () =>
{
unsubscribe() return client.community.onChannelMessageUpdate(channelId, handleUpdate)
console.log("unsubscribed from", channelId)
}
}, [channelId]) }, [channelId])
return { return {
@ -120,198 +112,7 @@ const unsubscribe= client.community.onChannelMessageUpdate(channelId, handleU
loading, loading,
error, error,
// hasMore // hasMore
// fetchMore // fetchMore,
// refetch // 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 },
// },
// },
// ]
} }