From 84a19d82c2c883d45e01d5ded41c1196756e3141 Mon Sep 17 00:00:00 2001
From: David Lee <david.isaac.lee@gmail.com>
Date: Wed, 20 Nov 2024 21:01:41 -0800
Subject: [PATCH] Use useChannelContext to manage draft context in thread

---
 .../DetailPostUsingContentConfiguration.tsx   | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/DetailPostUsingContentConfiguration/DetailPostUsingContentConfiguration.tsx b/packages/ui/src/components/DetailPostUsingContentConfiguration/DetailPostUsingContentConfiguration.tsx
index 4915518b38..e5c3a43b90 100644
--- a/packages/ui/src/components/DetailPostUsingContentConfiguration/DetailPostUsingContentConfiguration.tsx
+++ b/packages/ui/src/components/DetailPostUsingContentConfiguration/DetailPostUsingContentConfiguration.tsx
@@ -1,6 +1,6 @@
 import {
-  ChannelContentConfiguration,
   DraftInputId,
+  useChannelContext,
   useThreadPosts,
 } from '@tloncorp/shared';
 import * as db from '@tloncorp/shared/db';
@@ -32,6 +32,11 @@ export function DetailPostView({
   'backgroundColor'
 >) {
   const { PostView, channel } = usePostCollectionContextUnsafelyUnwrapped();
+  const channelCtx = useChannelContext({
+    channelId: channel.id,
+    draftKey: post.id,
+    isChannelSwitcherEnabled: false,
+  });
   const listRef = useRef<FlatList<ListItem>>(null);
   // use boolean coercion to also check if post.title is empty string
   const title = post.title ? post.title : 'Post';
@@ -41,7 +46,7 @@ export function DetailPostView({
   const postContextMenu = usePostContextMenu(
     useMemo(
       () => ({
-        performPostAction: (actionType, _post) => {
+        performPostAction: (actionType, post) => {
           switch (actionType) {
             case 'viewReactions': {
               break;
@@ -52,12 +57,12 @@ export function DetailPostView({
             }
 
             case 'edit': {
-              break;
+              channelCtx.setEditingPost(post);
             }
           }
         },
       }),
-      []
+      [channelCtx]
     )
   );
 
@@ -69,18 +74,8 @@ export function DetailPostView({
   const [inputShouldBlur, setInputShouldBlur] = useState(false);
   /** when `null`, input is not shown or presentation is unknown */
   const draftInputContext = useMemo((): DraftInputContext => {
-    const notImplemented = () => {
-      throw new Error('Not implemented');
-    };
     return {
-      channel,
-      configuration:
-        channel.contentConfiguration == null
-          ? undefined
-          : ChannelContentConfiguration.draftInput(channel.contentConfiguration)
-              .configuration,
-      group: channel.group!,
-      headerMode: 'default',
+      // TODO: pass draft configuration values?
       send: async (content) => {
         await sendReply(content);
         listRef.current?.scrollToEnd();
@@ -88,12 +83,10 @@ export function DetailPostView({
       setShouldBlur: setInputShouldBlur,
       shouldBlur: inputShouldBlur,
 
-      clearDraft: notImplemented,
-      editPost: notImplemented,
-      getDraft: notImplemented,
-      storeDraft: notImplemented,
+      ...channelCtx,
+      channel,
     };
-  }, [channel, inputShouldBlur, sendReply]);
+  }, [channel, inputShouldBlur, sendReply, channelCtx]);
 
   return (
     <>