[Clipclops] Clop menu, leave clop, mute/unmute clop (#3804)

* convo menu

* memoize convomenu

* add convoId to useChat + memoize value

* leave convo

* Create mute-conversation.ts

* add mutes, remove changes to useChat and use chat.convo instead

* add todo comments

* leave convo confirm prompt

* remove dependency on useChat and pass in props instead

* show menu on long press

* optimistic update

* optimistic update leave + add error capture

* don't `popToTop` when unnecessary

---------

Co-authored-by: Hailey <me@haileyok.com>

1 files changed, 14 insertions, 17 deletions

diff --git a/src/state/messages/index.tsx b/src/state/messages/index.tsx
index c59915253..cdc5a4db2 100644
--- a/src/state/messages/index.tsx
+++ b/src/state/messages/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useContext, useEffect, useMemo, useState} from 'react'
 import {BskyAgent} from '@atproto-labs/api'
 
 import {Convo, ConvoParams} from '#/state/messages/convo'
@@ -8,15 +8,14 @@ import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlSto
 const ChatContext = React.createContext<{
   service: Convo
   state: Convo['state']
-}>({
-  // @ts-ignore
-  service: null,
-  // @ts-ignore
-  state: null,
-})
+} | null>(null)
 
 export function useChat() {
-  return React.useContext(ChatContext)
+  const ctx = useContext(ChatContext)
+  if (!ctx) {
+    throw new Error('useChat must be used within a ChatProvider')
+  }
+  return ctx
 }
 
 export function ChatProvider({
@@ -25,7 +24,7 @@ export function ChatProvider({
 }: Pick<ConvoParams, 'convoId'> & {children: React.ReactNode}) {
   const {serviceUrl} = useDmServiceUrlStorage()
   const {getAgent} = useAgent()
-  const [service] = React.useState(
+  const [service] = useState(
     () =>
       new Convo({
         convoId,
@@ -35,13 +34,13 @@ export function ChatProvider({
         __tempFromUserDid: getAgent().session?.did!,
       }),
   )
-  const [state, setState] = React.useState(service.state)
+  const [state, setState] = useState(service.state)
 
-  React.useEffect(() => {
+  useEffect(() => {
     service.initialize()
   }, [service])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const update = () => setState(service.state)
     service.on('update', update)
     return () => {
@@ -49,9 +48,7 @@ export function ChatProvider({
     }
   }, [service])
 
-  return (
-    <ChatContext.Provider value={{state, service}}>
-      {children}
-    </ChatContext.Provider>
-  )
+  const value = useMemo(() => ({service, state}), [service, state])
+
+  return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>
 }