status-im/status-web
2
0
Fork 0
mirror of https://github.com/status-im/status-web.git synced 2025-01-15 23:25:34 +00:00
Code Issues Projects Releases Wiki Activity

add protocol hooks

Browse Source
This commit is contained in:
Pavel Prichodko 2022-06-10 16:05:11 +02:00 committed by Felicio Mununga
parent 73d941ff9b
commit cb98595795
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

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

@ -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<any>()
console.log("file: use-account.tsx > line 15 > useAccount > account", account)
useEffect(() => {
// load account
},[])
const createAccount = useCallback(() => {
const createAccount = () => {
const account = client.createAccount()
console.log("createAccount > account", account)
setAccount(account)
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
}

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 { 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)

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
}

10
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 { 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)
}

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 { 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<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 [error, setError] = useState<Error>()
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 },
// },
// },
// ]
}