fix typechecking errors in status-react

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -17,7 +17,7 @@ export const MessageReply = (props: Props) => {
// TODO: use protocol hook
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) {
return (
@ -31,14 +31,19 @@ export const MessageReply = (props: Props) => {
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 (
<Wrapper>
<Flex gap="1" align="center">
<Avatar size={20} name={username} />
<Avatar size={20} name={member.username} />
<Text color="gray" size="13" weight="500">
{username}
{member.username}
</Text>
</Flex>
{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 chatId = params.id!
const chat = client.community.getChat(chatId)
const chat = client.community.getChat(chatId)!
const messages = useMessages(chatId)
const contentRef = useRef<HTMLDivElement>(null)
@ -53,7 +53,7 @@ const Body = () => {
}, [chatId, messages.data.length])
const handleMessageSubmit = (message: string) => {
chat.sendTextMessage(message, state.message?.messageId)
chat.sendTextMessage(message, state.reply?.message.messageId)
}
return (