Stevan/conve-x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Stevan Freeborn
2023-09-13 01:19:30 -05:00
parent 272a74cf5d
commit aa85477fbe
5 changed files with 196 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
convex/posts.ts
+1
View File
@@ -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
+55 -11
View File
@@ -1,26 +1,70 @@
import Editor from '@/components/Editor';
import { getConvexClient } from '@/lib/convex';
'use client';
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({
params,
}: {
params: { id: string };
}) {
const client = await getConvexClient();
const post = await client.query(api.posts.getPostById, {
export default function EditPostPage({ params }: { params: { id: string } }) {
const user = useUser();
const post = useQuery(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'>
<Editor post={post} />
<main className='flex flex-col flex-1 w-full items-center'>
{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
+53 -19
View File
@@ -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 ? (
<div className='flex items-center gap-2'>
<SpinningLoader className='animate-spin w-5 h-5' /> Loading post...
</div>
) : (
{post !== undefined && user.isLoaded ? (
<>
<div className='flex flex-col min-w-0 p-1 rounded-md border border-gray-600'>
<Post
@@ -43,22 +70,29 @@ export default function PostPage({
/>
</div>
<div className='flex w-full h-80 gap-4'>
{user.isSignedIn !== true ? null : (
<div>
<Image
alt='user profile image'
src={user.user.imageUrl}
width={40}
height={40}
className='rounded-full object-cover border-4 border-primary-accent'
/>
</div>
)}
<div>
<Image
alt='user profile image'
src={user.user.imageUrl}
width={40}
height={40}
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
+54 -3
View File
@@ -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'>
<Editor />
<main className='flex flex-col flex-1 w-full items-center'>
{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
+33 -32
View File
@@ -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({
parentPostId,
post,
}: {
export type SubmitActionParams = {
clerkUserId: string;
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);
const result = await createOrUpdatePost({
parentPostId: parentPostId,
id: post?._id,
clerkUserId: user.id,
content: currentDoc,
await submitAction({
clerkUserId,
parentPostId,
post,
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'>