fix typechecking errors in status-react

packages/status-react/src/contexts/chat-context.tsx

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

packages/status-react/src/protocol/use-messages.tsx

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

packages/status-react/src/routes/chat/components/chat-input/index.tsx

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

packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx

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

packages/status-react/src/routes/chat/components/chat-message/index.tsx

@@ -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([], {

packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx

@@ -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' && (

packages/status-react/src/routes/chat/index.tsx

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