refactor: allow providing submit action to editor component to allow posting replys and not redirecting on post. fix: also clear the editor after posting

convex/posts.ts

@@ -46,6 +46,7 @@ export const getUsersPostById = query({
     return await ctx.db
       .query('posts')
       .withIndex('by_user_id', q => q.eq('userId', args.userId))
+      .filter(q => q.eq(q.field('parentPostId'), undefined))
       .order('desc')
       .paginate(args.paginationOpts);
   },

src/app/posts/[id]/edit/page.tsx

@@ -1,26 +1,70 @@
-import Editor from '@/components/Editor';
+'use client';
-import { getConvexClient } from '@/lib/convex';
+
+import Editor, { SubmitActionParams } from '@/components/Editor';
+import SpinningLoader from '@/components/SpinningLoader';
+import { useRouter } from '@/hooks';
+import { useUser } from '@clerk/nextjs';
+import { useMutation, useQuery } from 'convex/react';
 import { api } from '../../../../../convex/_generated/api';
 import { Id } from '../../../../../convex/_generated/dataModel';
 
-export default async function EditPostPage({
+export default function EditPostPage({ params }: { params: { id: string } }) {
-  params,
+  const user = useUser();
-}: {
+  const post = useQuery(api.posts.getPostById, {
-  params: { id: string };
-}) {
-  const client = await getConvexClient();
-  const post = await client.query(api.posts.getPostById, {
     id: params.id as Id<'posts'>,
   });
+  const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
+  const router = useRouter();
+
+  if (user.isSignedIn === false) {
+    router.push('/login');
+    return;
+  }
 
   if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
     // TODO: Return actual not found component
     return <h1>Not Found</h1>;
   }
 
+  async function submitAction({
+    clerkUserId,
+    parentPostId,
+    post,
+    currentDoc,
+  }: SubmitActionParams) {
+    const result = await createOrUpdatePost({
+      parentPostId: parentPostId,
+      id: post?._id,
+      clerkUserId: clerkUserId,
+      content: currentDoc,
+    });
+
+    switch (result) {
+      case 'USER_NOT_FOUND':
+      case 'USER_NOT_AUTHORIZED':
+      case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
+        throw Error('Unable to update post');
+      default:
+        'use server';
+        router.push('/');
+        return;
+    }
+  }
+
   return (
-    <main className='flex flex-col w-full h-full'>
+    <main className='flex flex-col flex-1 w-full items-center'>
-      <Editor post={post} />
+      {user.isLoaded && post !== undefined ? (
+        <Editor
+          clerkUserId={user.user.id}
+          post={post}
+          submitAction={submitAction}
+        />
+      ) : (
+        <div className='flex gap-2 items-center'>
+          <SpinningLoader className='animate-spin w-5 h-5' />
+          Loading...
+        </div>
+      )}
     </main>
   );
 }

src/app/posts/[id]/page.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import Editor from '@/components/Editor';
+import Editor, { SubmitActionParams } from '@/components/Editor';
 import Post from '@/components/Post';
 import SpinningLoader from '@/components/SpinningLoader';
+import { useRouter } from '@/hooks';
 import { useUser } from '@clerk/nextjs';
-import { useQuery } from 'convex/react';
+import { useMutation, useQuery } from 'convex/react';
 import Image from 'next/image';
 import { api } from '../../../../convex/_generated/api';
 import { Id } from '../../../../convex/_generated/dataModel';
@@ -17,9 +18,39 @@ export default function PostPage({
   searchParams: { reply?: boolean };
 }) {
   const user = useUser();
+  const router = useRouter();
   const post = useQuery(api.posts.getPostById, {
     id: params.id as Id<'posts'>,
   });
+  const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
+
+  async function submitAction({
+    clerkUserId,
+    parentPostId,
+    post,
+    currentDoc,
+  }: SubmitActionParams) {
+    const result = await createOrUpdatePost({
+      parentPostId: parentPostId,
+      id: post?._id,
+      clerkUserId: clerkUserId,
+      content: currentDoc,
+    });
+
+    switch (result) {
+      case 'USER_NOT_FOUND':
+      case 'USER_NOT_AUTHORIZED':
+      case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
+        throw Error('Unable to create post');
+      default:
+        return;
+    }
+  }
+
+  if (user.isSignedIn === false) {
+    router.push('/login');
+    return;
+  }
 
   if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
     // TODO: Return actual not found component
@@ -29,11 +60,7 @@ export default function PostPage({
   return (
     <main className='flex flex-col flex-1 w-full items-center'>
       <div className='flex flex-col w-full max-w-4xl gap-4'>
-        {post === undefined ? (
+        {post !== undefined && user.isLoaded ? (
-          <div className='flex items-center gap-2'>
-            <SpinningLoader className='animate-spin w-5 h-5' /> Loading post...
-          </div>
-        ) : (
           <>
             <div className='flex flex-col min-w-0 p-1 rounded-md border border-gray-600'>
               <Post
@@ -43,7 +70,6 @@ export default function PostPage({
               />
             </div>
             <div className='flex w-full h-80 gap-4'>
-              {user.isSignedIn !== true ? null : (
               <div>
                 <Image
                   alt='user profile image'
@@ -53,12 +79,20 @@ export default function PostPage({
                   className='rounded-full object-cover border-4 border-primary-accent'
                 />
               </div>
-              )}
+
               <div className='flex w-full'>
-                <Editor parentPostId={post._id} />
+                <Editor
+                  clerkUserId={user.user.id}
+                  parentPostId={post._id}
+                  submitAction={submitAction}
+                />
               </div>
             </div>
           </>
+        ) : (
+          <div className='flex w-full justify-center gap-2'>
+            <SpinningLoader className='animate-spin w-5 h-5' /> Loading post...
+          </div>
         )}
       </div>
     </main>

src/app/posts/add/page.tsx

@@ -1,9 +1,60 @@
-import Editor from '@/components/Editor';
+'use client';
+
+import Editor, { SubmitActionParams } from '@/components/Editor';
+import SpinningLoader from '@/components/SpinningLoader';
+import { useRouter } from '@/hooks';
+import { useUser } from '@clerk/nextjs';
+import { useMutation } from 'convex/react';
+import { api } from '../../../../convex/_generated/api';
 
 export default function AddPost() {
+  const user = useUser();
+  const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
+  const router = useRouter();
+
+  async function submitAction({
+    clerkUserId,
+    parentPostId,
+    post,
+    currentDoc,
+  }: SubmitActionParams) {
+    const result = await createOrUpdatePost({
+      parentPostId: parentPostId,
+      id: post?._id,
+      clerkUserId: clerkUserId,
+      content: currentDoc,
+    });
+
+    switch (result) {
+      case 'USER_NOT_FOUND':
+      case 'USER_NOT_AUTHORIZED':
+      case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
+        throw Error('Unable to create post');
+      default:
+        'use server';
+        router.push('/');
+        return;
+    }
+  }
+
+  if (user.isSignedIn === false) {
+    router.push('/login');
+    return;
+  }
+
   return (
-    <main className='flex flex-col w-full h-full'>
+    <main className='flex flex-col flex-1 w-full items-center'>
-      <Editor />
+      {user.isLoaded ? (
+        <Editor
+          clerkUserId={user.user.id}
+          submitAction={submitAction}
+        />
+      ) : (
+        <div className='flex gap-2 items-center'>
+          <SpinningLoader className='animate-spin w-5 h-5' />
+          Loading...
+        </div>
+      )}
     </main>
   );
 }

src/components/Editor.tsx

@@ -2,30 +2,41 @@
 
 import { useCodeMirror, useRouter } from '@/hooks';
 import { basicDark } from '@/lib/codemirror';
-import { useUser } from '@clerk/nextjs';
 import { indentWithTab } from '@codemirror/commands';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 import { Compartment, EditorState, Text } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { basicSetup } from 'codemirror';
-import { useMutation } from 'convex/react';
 import { FormEvent, useState } from 'react';
-import { api } from '../../convex/_generated/api';
 import { Doc, Id } from '../../convex/_generated/dataModel';
 import PostContent from './PostContent';
 
-export default function Editor({
+export type SubmitActionParams = {
-  parentPostId,
+  clerkUserId: string;
-  post,
-}: {
   parentPostId?: Id<'posts'>;
   post?: Doc<'posts'>;
+  currentDoc: string[];
+};
+
+export default function Editor({
+  clerkUserId,
+  parentPostId,
+  post,
+  submitAction,
+}: {
+  clerkUserId: string;
+  parentPostId?: Id<'posts'>;
+  post?: Doc<'posts'>;
+  submitAction: ({
+    clerkUserId,
+    parentPostId,
+    post,
+    currentDoc,
+  }: SubmitActionParams) => Promise<void>;
 }) {
-  const { user, isSignedIn } = useUser();
   const editorTheme = new Compartment();
   const [currentDoc, setCurrentDoc] = useState(post?.content ?? ['']);
-  const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
   const router = useRouter();
   const [creatingOrUpdating, setCreatingOrUpdating] = useState(false);
 
@@ -42,48 +53,38 @@ export default function Editor({
   ];
 
   const [mode, setMode] = useState<'write' | 'preview'>('write');
-  const { editorRef } = useCodeMirror({
+  const { editorRef, editorView } = useCodeMirror({
     doc: currentDoc,
     extensions,
   });
 
   async function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
+
     try {
-      if (isSignedIn !== true) {
-        router.push('/login');
-        return;
-      }
-
       setCreatingOrUpdating(true);
-
+      await submitAction({
-      const result = await createOrUpdatePost({
+        clerkUserId,
-        parentPostId: parentPostId,
+        parentPostId,
-        id: post?._id,
+        post,
-        clerkUserId: user.id,
+        currentDoc,
-        content: currentDoc,
       });
-
-      switch (result) {
-        case 'USER_NOT_FOUND':
-        case 'USER_NOT_AUTHORIZED':
-        case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
-          throw Error('Unable to create post');
-        default:
-          router.push('/');
-          return;
-      }
     } catch (error) {
       console.log(error);
     } finally {
+      console.log('here');
       setCreatingOrUpdating(false);
+      setCurrentDoc(['']);
+      editorView?.dispatch({
+        changes: { from: 0, to: editorView.state.doc.length, insert: '' },
+      });
     }
   }
 
   return (
     <form
       onSubmit={handleSubmit}
-      className='flex flex-col flex-1 shadow-md rounded-md dark:bg-secondary-gray border border-gray-600'
+      className='flex flex-col flex-1 w-full shadow-md rounded-md dark:bg-secondary-gray border border-gray-600'
     >
       <div className='flex items-center justify-between rounded-t-md p-4 pb-0 border-b border-gray-600 dark:bg-primary-gray'>
         <div className='flex items-center'>