fix typechecking errors in status-react

This commit is contained in:
Pavel Prichodko 2022-07-01 14:58:19 +02:00
parent 4ff961a6ae
commit c907af6ba9
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
7 changed files with 60 additions and 60 deletions

View File

@ -11,18 +11,26 @@ type Context = {
const ChatContext = createContext<Context | undefined>(undefined) const ChatContext = createContext<Context | undefined>(undefined)
interface State { interface State {
message?: Message reply?: {
member?: Member message: Message
member: Member
}
} }
type Action = type Action =
| { type: 'SET_REPLY'; message?: Message; member?: Member } | { type: 'SET_REPLY'; message: Message; member: Member }
| { type: 'DELETE_REPLY' } | { type: 'DELETE_REPLY' }
const reducer: Reducer<State, Action> = (state, action) => { const reducer: Reducer<State, Action> = (state, action): State => {
switch (action.type) { switch (action.type) {
case 'SET_REPLY': { case 'SET_REPLY': {
return { ...state, message: action.message, member: action.member } return {
...state,
reply: {
message: action.message,
member: action.member,
},
}
} }
case 'DELETE_REPLY': { case 'DELETE_REPLY': {
return { ...initialState } return { ...initialState }
@ -31,8 +39,7 @@ const reducer: Reducer<State, Action> = (state, action) => {
} }
const initialState: State = { const initialState: State = {
message: undefined, reply: undefined,
member: undefined,
} }
interface Props { interface Props {

View File

@ -2,60 +2,46 @@ import { useEffect, useState } from 'react'
import { useProtocol } from './provider' import { useProtocol } from './provider'
import type { Message } from '@status-im/js' import type { Message, Reactions } from '@status-im/js'
export type Reaction = type Reaction = keyof Reactions
| 'LOVE'
| 'THUMBS_UP'
| 'THUMBS_DOWN'
| 'LAUGH'
| 'SAD'
| 'ANGRY'
export type Reactions = {
[key in Reaction]: {
count: number
me: boolean
}
}
export type { Message }
interface Result { interface Result {
data: Message[] data: Message[]
loading: boolean loading: boolean
error?: Error // error?: Error
// fetchMore: () => void // fetchMore: () => void
} }
export const useMessages = (channelId: string): Result => { export const useMessages = (channelId: string): Result => {
const { client } = useProtocol() const { client } = useProtocol()
const chat = client.community.chats.get(channelId)!
// const [state, dispatch] = useReducer<Result>((state,action) => {}, {}) // const [state, dispatch] = useReducer<Result>((state,action) => {}, {})
const [data, setData] = useState<any[]>(() => const [data, setData] = useState<Message[]>(() => chat.getMessages())
client.community.chats.get(channelId).getMessages()
)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [error, setError] = useState<Error>() // const [error, setError] = useState<Error>()
useEffect(() => { useEffect(() => {
setData(client.community.chats.get(channelId).getMessages()) setData(chat.getMessages())
const handleUpdate = (messages: Message[]) => { const handleUpdate = (messages: Message[]) => {
setLoading(false) setLoading(false)
setData(messages) setData(messages)
} }
return client.community.chats.get(channelId).onMessage(handleUpdate) return chat.onMessage(handleUpdate)
}, [channelId]) }, [chat])
return { return {
data, data,
loading, loading,
error, // error,
// hasMore // hasMore
// fetchMore, // fetchMore,
// refetch // refetch
} }
} }
export type { Message, Reaction, Reactions }

View File

@ -26,8 +26,8 @@ export const ChatInput = (props: Props) => {
const inputRef = useRef<HTMLInputElement>(null) const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => { useEffect(() => {
state.message && !editing && inputRef.current?.focus() state.reply && !editing && inputRef.current?.focus()
}, [state.message, editing]) }, [state.reply, editing])
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value) setInputValue(event.target.value)
@ -53,9 +53,7 @@ export const ChatInput = (props: Props) => {
</IconButton> </IconButton>
</Box> */} </Box> */}
<Bubble> <Bubble>
{state.message && ( {state.reply && <InputReply reply={state.reply} />}
<InputReply message={state.message} member={state.member} />
)}
<InputWrapper> <InputWrapper>
<Input <Input
ref={inputRef} ref={inputRef}

View File

@ -3,19 +3,22 @@ import React from 'react'
import { useChatContext } from '~/src/contexts/chat-context' import { useChatContext } from '~/src/contexts/chat-context'
import { CrossIcon } from '~/src/icons/cross-icon' import { CrossIcon } from '~/src/icons/cross-icon'
import { styled } from '~/src/styles/config' import { styled } from '~/src/styles/config'
import { Flex, IconButton, Image, Text } from '~/src/system' import { Flex, IconButton, Text } from '~/src/system'
import type { Member, Message } from '~/src/protocol' import type { Member, Message } from '~/src/protocol'
interface Props { interface Props {
message: Message reply: {
member: Member message: Message
member: Member
}
} }
export const InputReply = (props: Props) => { export const InputReply = (props: Props) => {
const { dispatch } = useChatContext() const { dispatch } = useChatContext()
const { message, member } = props const { reply } = props
const { message, member } = reply
return ( return (
<Wrapper> <Wrapper>
@ -38,7 +41,7 @@ export const InputReply = (props: Props) => {
</Text> </Text>
</Flex> </Flex>
)} )}
{message.contentType === 'IMAGE' && ( {/* {message.contentType === 'IMAGE' && (
<Image <Image
src={message.imageUrl} src={message.imageUrl}
width={56} width={56}
@ -47,7 +50,7 @@ export const InputReply = (props: Props) => {
radius="bubble" radius="bubble"
alt="message" alt="message"
/> />
)} )} */}
</Wrapper> </Wrapper>
) )
} }

View File

@ -2,7 +2,7 @@ import React, { useState } from 'react'
import { useMatch } from 'react-router-dom' import { useMatch } from 'react-router-dom'
import { UserProfileDialog } from '~/src/components/user-profile-dialog' // import { UserProfileDialog } from '~/src/components/user-profile-dialog'
import { useChatContext } from '~/src/contexts/chat-context' import { useChatContext } from '~/src/contexts/chat-context'
// import { BellIcon } from '~/src/icons/bell-icon' // import { BellIcon } from '~/src/icons/bell-icon'
// import { PinIcon } from '~/src/icons/pin-icon' // import { PinIcon } from '~/src/icons/pin-icon'
@ -20,7 +20,7 @@ import {
Flex, Flex,
Image, Image,
Text, Text,
useDialog, // useDialog,
} from '~/src/system' } from '~/src/system'
import { ChatInput } from '../chat-input' import { ChatInput } from '../chat-input'
@ -71,16 +71,16 @@ export const ChatMessage = (props: Props) => {
// TODO: remove usage of 0x prefix // TODO: remove usage of 0x prefix
const owner = '0x' + account?.publicKey === signer const owner = '0x' + account?.publicKey === signer
const chat = client.community.getChat(chatId) const chat = client.community.getChat(chatId)!
const member = client.community.getMember(signer) ?? {} const member = client.community.getMember(signer)!
const [editing, setEditing] = useState(false) const [editing, setEditing] = useState(false)
const [reacting, setReacting] = useState(false) const [reacting, setReacting] = useState(false)
const { dispatch } = useChatContext() const { dispatch } = useChatContext()
const userProfileDialog = useDialog(UserProfileDialog) // const userProfileDialog = useDialog(UserProfileDialog)
const handleMessageSubmit = (message: string) => { const handleMessageSubmit = (message: string) => {
chat.sendTextMessage(message) chat.sendTextMessage(message)
@ -120,7 +120,8 @@ export const ChatMessage = (props: Props) => {
> >
Cancel Cancel
</Button> </Button>
<Button size="small" onClick={handleMessageSubmit}> {/* TODO: fix message submit */}
<Button size="small" onClick={() => handleMessageSubmit('')}>
Save Save
</Button> </Button>
</Flex> </Flex>
@ -180,14 +181,14 @@ export const ChatMessage = (props: Props) => {
<button type="button"> */} <button type="button"> */}
<Avatar <Avatar
size={44} size={44}
name={member.username} name={member!.username}
colorHash={member.colorHash} colorHash={member!.colorHash}
/> />
{/* </button> */} {/* </button> */}
{/* <DropdownMenu> {/* <DropdownMenu>
<Flex direction="column" align="center" gap="1"> <Flex direction="column" align="center" gap="1">
<Avatar size="36" /> <Avatar size="36" />
<Text>{member.username}</Text> <Text>{member!.username}</Text>
<EmojiHash /> <EmojiHash />
</Flex> </Flex>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
@ -224,7 +225,7 @@ export const ChatMessage = (props: Props) => {
<Flex gap="1" align="center"> <Flex gap="1" align="center">
<Text color="primary" weight="500" size="15"> <Text color="primary" weight="500" size="15">
{member.username} {member!.username}
</Text> </Text>
<Text size="10" color="gray"> <Text size="10" color="gray">
{new Date(Number(clock)).toLocaleTimeString([], { {new Date(Number(clock)).toLocaleTimeString([], {

View File

@ -17,7 +17,7 @@ export const MessageReply = (props: Props) => {
// TODO: use protocol hook // TODO: use protocol hook
const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
const message = client.community.getChat(params.id).getMessage(messageId) const message = client.community.getChat(params.id!)!.getMessage(messageId)
if (!message) { if (!message) {
return ( return (
@ -31,14 +31,19 @@ export const MessageReply = (props: Props) => {
const { contentType, text, signer } = message const { contentType, text, signer } = message
const { username } = client.community.getMember(signer) // TODO: can this happen?
const member = client.community.getMember(signer)
if (!member) {
return null
}
return ( return (
<Wrapper> <Wrapper>
<Flex gap="1" align="center"> <Flex gap="1" align="center">
<Avatar size={20} name={username} /> <Avatar size={20} name={member.username} />
<Text color="gray" size="13" weight="500"> <Text color="gray" size="13" weight="500">
{username} {member.username}
</Text> </Text>
</Flex> </Flex>
{contentType === 'TEXT_PLAIN' && ( {contentType === 'TEXT_PLAIN' && (

View File

@ -43,7 +43,7 @@ const Body = () => {
const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
const chatId = params.id! const chatId = params.id!
const chat = client.community.getChat(chatId) const chat = client.community.getChat(chatId)!
const messages = useMessages(chatId) const messages = useMessages(chatId)
const contentRef = useRef<HTMLDivElement>(null) const contentRef = useRef<HTMLDivElement>(null)
@ -53,7 +53,7 @@ const Body = () => {
}, [chatId, messages.data.length]) }, [chatId, messages.data.length])
const handleMessageSubmit = (message: string) => { const handleMessageSubmit = (message: string) => {
chat.sendTextMessage(message, state.message?.messageId) chat.sendTextMessage(message, state.reply?.message.messageId)
} }
return ( return (