(chore) Refactor markdown modal code (#1562)

src/features/auth/AccountSwitcher.tsx

@@ -40,15 +40,15 @@ type AccountSwitcherProps = {
     }
 );
 
-export default function AccountSwitcherContainer(props: AccountSwitcherProps) {
+export default function AccountSwitcher(props: AccountSwitcherProps) {
   return (
     <ListEditorProvider>
-      <AccountSwitcher {...props} />
+      <AccountSwitcherContents {...props} />
     </ListEditorProvider>
   );
 }
 
-function AccountSwitcher({
+function AccountSwitcherContents({
   onDismiss,
   onSelectAccount,
   allowEdit = true,

src/features/auth/PageContext.tsx

@@ -8,10 +8,8 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { CommentReplyItem } from "../comment/compose/reply/CommentReply";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { changeAccount } from "../auth/authSlice";
-import CommentReplyModal from "../comment/compose/reply/CommentReplyModal";
 import {
   Comment,
   CommentView,
@@ -20,7 +18,6 @@ import {
   PostView,
   PrivateMessageView,
 } from "lemmy-js-client";
-import CommentEditModal from "../comment/compose/edit/CommentEditModal";
 import { Report, ReportHandle, ReportableItem } from "../report/Report";
 import PostEditorModal from "../post/new/PostEditorModal";
 import SelectTextModal from "../shared/SelectTextModal";
@@ -32,6 +29,11 @@ import { jwtSelector } from "./authSelectors";
 import BanUserModal from "../moderation/ban/BanUserModal";
 import CreateCrosspostDialog from "../post/crosspost/create/CreateCrosspostDialog";
 import LoginModal from "./login/LoginModal";
+import GenericMarkdownEditorModal, {
+  MarkdownEditorData,
+} from "../shared/markdown/editing/modal/GenericMarkdownEditorModal";
+import { NewPrivateMessage } from "../shared/markdown/editing/modal/contents/PrivateMessagePage";
+import { CommentReplyItem } from "../shared/markdown/editing/modal/contents/CommentReplyPage";
 
 export interface BanUserPayload {
   user: Person;
@@ -47,18 +49,24 @@ interface IPageContext {
    */
   presentLoginIfNeeded: () => boolean;
 
+  /**
+   * @returns private message payload if submitted
+   */
+  presentPrivateMessageCompose: (
+    item: NewPrivateMessage,
+  ) => Promise<PrivateMessageView | undefined>;
+
   /**
    * @returns comment payload if replied
    */
-  presentCommentReply: (
-    item: CommentReplyItem,
-  ) => Promise<CommentView | PrivateMessageView | undefined>;
+  presentCommentEdit: (item: Comment) => Promise<CommentView | undefined>;
 
   /**
-   * Will mutate comment in store, which view should be linked to for updates
-   * That's why this does not return anything
+   * @returns comment payload if replied
    */
-  presentCommentEdit: (item: Comment) => void;
+  presentCommentReply: (
+    item: CommentReplyItem,
+  ) => Promise<CommentView | undefined>;
 
   presentReport: (item: ReportableItem) => void;
 
@@ -86,8 +94,9 @@ interface IPageContext {
 export const PageContext = createContext<IPageContext>({
   pageRef: undefined,
   presentLoginIfNeeded: () => false,
+  presentCommentEdit: async () => undefined,
   presentCommentReply: async () => undefined,
-  presentCommentEdit: () => false,
+  presentPrivateMessageCompose: async () => undefined,
   presentReport: () => {},
   presentPostEditor: () => {},
   presentSelectText: () => {},
@@ -148,41 +157,58 @@ export function PageContextProvider({ value, children }: PageContextProvider) {
     [presentShareAsImageModal],
   );
 
-  // Comment reply start
-  const commentReplyItem = useRef<CommentReplyItem>();
-  const commentReplyCb = useRef<
-    | ((replied: CommentView | PrivateMessageView | undefined) => void)
-    | undefined
-  >();
-  const [isReplyOpen, setIsReplyOpen] = useState(false);
-  const presentCommentReply = useCallback((item: CommentReplyItem) => {
-    const promise = new Promise<CommentView | PrivateMessageView | undefined>(
-      (resolve) => (commentReplyCb.current = resolve),
-    );
-
-    commentReplyItem.current = item;
-    setIsReplyOpen(true);
-
-    return promise;
-  }, []);
+  // Markdown editor start
+  const markdownEditorData = useRef<MarkdownEditorData>();
+  const [isMarkdownEditorOpen, setIsMarkdownEditorOpen] = useState(false);
+  const presentMarkdownEditor = useCallback(
+    <T extends MarkdownEditorData>(data: Omit<T, "onSubmit">) =>
+      new Promise<Parameters<T["onSubmit"]>[0]>((resolve) => {
+        markdownEditorData.current = {
+          ...data,
+          onSubmit: resolve,
+        } as T;
+        setIsMarkdownEditorOpen(true);
+      }),
+    [],
+  );
 
   useEffect(() => {
-    if (isReplyOpen) return;
+    if (isMarkdownEditorOpen) return;
 
-    commentReplyCb.current?.(undefined);
-    commentReplyCb.current = undefined;
+    markdownEditorData.current?.onSubmit(undefined);
+    markdownEditorData.current = undefined;
     return;
-  }, [isReplyOpen]);
-  // Comment reply end
-
-  // Edit comment start
-  const commentEditItem = useRef<Comment>();
-  const [isEditCommentOpen, setIsEditCommentOpen] = useState(false);
-  const presentCommentEdit = useCallback((item: Comment) => {
-    commentEditItem.current = item;
-    setIsEditCommentOpen(true);
-  }, []);
-  // Edit comment end
+  }, [isMarkdownEditorOpen]);
+
+  const presentPrivateMessageCompose = useCallback<
+    IPageContext["presentPrivateMessageCompose"]
+  >(
+    (item) =>
+      presentMarkdownEditor({
+        type: "PRIVATE_MESSAGE",
+        item,
+      }) as ReturnType<IPageContext["presentPrivateMessageCompose"]>,
+    [presentMarkdownEditor],
+  );
+
+  const presentCommentEdit = useCallback<IPageContext["presentCommentEdit"]>(
+    (item) =>
+      presentMarkdownEditor({
+        type: "COMMENT_EDIT",
+        item,
+      }) as ReturnType<IPageContext["presentCommentEdit"]>,
+    [presentMarkdownEditor],
+  );
+
+  const presentCommentReply = useCallback<IPageContext["presentCommentReply"]>(
+    (item) =>
+      presentMarkdownEditor({
+        type: "COMMENT_REPLY",
+        item,
+      }) as ReturnType<IPageContext["presentCommentReply"]>,
+    [presentMarkdownEditor],
+  );
+  // Markdown editor end
 
   // Edit/new post start
   const postItem = useRef<PostView | string>();
@@ -257,8 +283,9 @@ export function PageContextProvider({ value, children }: PageContextProvider) {
     () => ({
       ...value,
       presentLoginIfNeeded,
-      presentCommentReply,
+      presentPrivateMessageCompose,
       presentCommentEdit,
+      presentCommentReply,
       presentReport,
       presentPostEditor,
       presentSelectText,
@@ -268,6 +295,7 @@ export function PageContextProvider({ value, children }: PageContextProvider) {
       presentCreateCrosspost,
     }),
     [
+      presentPrivateMessageCompose,
       presentCommentEdit,
       presentCommentReply,
       presentLoginIfNeeded,
@@ -287,19 +315,10 @@ export function PageContextProvider({ value, children }: PageContextProvider) {
       {children}
 
       <LoginModal isOpen={isLoginOpen} setIsOpen={setIsLoginOpen} />
-      <CommentReplyModal
-        item={commentReplyItem.current!}
-        isOpen={isReplyOpen}
-        setIsOpen={setIsReplyOpen}
-        onReply={(reply) => {
-          commentReplyCb.current?.(reply);
-          commentReplyCb.current = undefined;
-        }}
-      />
-      <CommentEditModal
-        item={commentEditItem.current!}
-        isOpen={isEditCommentOpen}
-        setIsOpen={setIsEditCommentOpen}
+      <GenericMarkdownEditorModal
+        {...markdownEditorData.current!}
+        isOpen={isMarkdownEditorOpen}
+        setIsOpen={setIsMarkdownEditorOpen}
       />
       <Report ref={reportRef} />
       <PostEditorModal

src/features/auth/login/LoginNav.tsx

@@ -17,6 +17,10 @@ export const Centered = styled.div`
   .ios & {
     justify-content: center;
   }
+
+  ion-spinner {
+    flex-shrink: 0;
+  }
 `;
 
 function blurDocument() {

src/features/comment/commentSlice.ts

@@ -144,6 +144,8 @@ export const editComment =
     });
 
     dispatch(mutatedComment(response.comment_view));
+
+    return response.comment_view;
   };
 
 export const modRemoveComment =

src/features/comment/useCommentActions.ts

@@ -239,8 +239,7 @@ export default function useCommentActions({
 
               const reply = await presentCommentReply(commentView);
 
-              if (reply && !("private_message" in reply))
-                prependComments([reply]);
+              if (reply) prependComments([reply]);
             })();
           },
         },

src/features/inbox/PrivateMessageMoreActions.tsx

@@ -41,7 +41,7 @@ export default forwardRef<
 >(function PrivateMessageMoreActions({ item, markReadAction }, ref) {
   const dispatch = useAppDispatch();
   const [presentActionSheet] = useIonActionSheet();
-  const { presentReport, presentSelectText, presentCommentReply } =
+  const { presentReport, presentSelectText, presentPrivateMessageCompose } =
     useContext(PageContext);
 
   const { navigateToUser } = useAppNavigation();
@@ -58,7 +58,7 @@ export default forwardRef<
           icon: arrowUndoOutline,
           handler: () => {
             (async () => {
-              await presentCommentReply({
+              await presentPrivateMessageCompose({
                 private_message: {
                   recipient:
                     item.private_message.creator_id ===
@@ -113,7 +113,7 @@ export default forwardRef<
     markReadAction,
     item,
     isBlocked,
-    presentCommentReply,
+    presentPrivateMessageCompose,
     dispatch,
     presentSelectText,
     navigateToUser,

src/features/inbox/SendMessageBox.tsx

@@ -88,7 +88,7 @@ export default function SendMessageBox({
   const [value, setValue] = useState("");
   const client = useClient();
   const presentToast = useAppToast();
-  const { presentCommentReply } = useContext(PageContext);
+  const { presentPrivateMessageCompose } = useContext(PageContext);
 
   const send = useCallback(async () => {
     setLoading(true);
@@ -132,13 +132,12 @@ export default function SendMessageBox({
             shape="round"
             fill="clear"
             onClick={async () => {
-              const message = await presentCommentReply({
+              const message = await presentPrivateMessageCompose({
                 private_message: { recipient },
                 value,
               });
 
               if (!message) return;
-              if (!("private_message" in message)) return;
 
               scrollToBottom?.();
               setValue("");

src/features/post/detail/PostHeader.tsx

@@ -294,8 +294,7 @@ function PostHeader({
 
               const reply = await presentCommentReply(post);
 
-              if (reply && !("private_message" in reply))
-                onPrependComment?.(reply);
+              if (reply) onPrependComment?.(reply);
             }}
           />
         </BorderlessIonItem>