[Clipclops] 2 Clipped 2 Clopped (#3796)

* Add new pkg

* copy queries over to new file

* useConvoQuery

* useListConvos

* Use useListConvos

* extract useConvoQuery

* useGetConvoForMembers

* Delete unused

* exract useListConvos

* Replace imports

* Messages/List/index.tsx

* extract getconvoformembers

* MessageItem

* delete chatLog and rename query.ts

* Update import

* Clipclop service (#3794)

* Add Chat service

* Better handle deletions

* Rollback unneeded changes

* Better insertion order

* Use clipclops

* don't show FAB if error

* clean up imports

* Update Convo service

* Remove temp files

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 57 insertions, 0 deletions

diff --git a/src/state/messages/index.tsx b/src/state/messages/index.tsx
new file mode 100644
index 000000000..c59915253
--- /dev/null
+++ b/src/state/messages/index.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import {BskyAgent} from '@atproto-labs/api'
+
+import {Convo, ConvoParams} from '#/state/messages/convo'
+import {useAgent} from '#/state/session'
+import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
+
+const ChatContext = React.createContext<{
+  service: Convo
+  state: Convo['state']
+}>({
+  // @ts-ignore
+  service: null,
+  // @ts-ignore
+  state: null,
+})
+
+export function useChat() {
+  return React.useContext(ChatContext)
+}
+
+export function ChatProvider({
+  children,
+  convoId,
+}: Pick<ConvoParams, 'convoId'> & {children: React.ReactNode}) {
+  const {serviceUrl} = useDmServiceUrlStorage()
+  const {getAgent} = useAgent()
+  const [service] = React.useState(
+    () =>
+      new Convo({
+        convoId,
+        agent: new BskyAgent({
+          service: serviceUrl,
+        }),
+        __tempFromUserDid: getAgent().session?.did!,
+      }),
+  )
+  const [state, setState] = React.useState(service.state)
+
+  React.useEffect(() => {
+    service.initialize()
+  }, [service])
+
+  React.useEffect(() => {
+    const update = () => setState(service.state)
+    service.on('update', update)
+    return () => {
+      service.destroy()
+    }
+  }, [service])
+
+  return (
+    <ChatContext.Provider value={{state, service}}>
+      {children}
+    </ChatContext.Provider>
+  )
+}