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

feat: support replies

Browse Source
This commit is contained in:
Stevan Freeborn
2023-09-14 21:47:40 -05:00
parent 0dc2934e05
commit 820ba6b1e8
14 changed files with 344 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
convex/posts.ts
+45
View File
@@ -1,6 +1,7 @@
import { paginationOptsValidator } from 'convex/server';
import { v } from 'convex/values';
import { PostWithUserDto } from '../src/app/types';
import { Id } from './_generated/dataModel';
import { mutation, query } from './_generated/server';
import { userQuery } from './users';
@@ -86,7 +87,51 @@ export const getPostById = query({
_creationTime: user._creationTime,
clerkUsername: user.clerkUser.username,
clerkImageUrl: user.clerkUser.image_url,
clerkUserId: user.clerkUser.id,
},
};
},
});
export const getRepliesByParentId = query({
args: { id: v.id('posts'), paginationOpts: paginationOptsValidator },
handler: async (ctx, args) => {
const replies = await ctx.db
.query('posts')
.withIndex('by_parent_id', q => q.eq('parentPostId', args.id))
.order('desc')
.paginate(args.paginationOpts);
const repliesWithUserData = await Promise.all(
replies.page.map(async reply => {
const user = await ctx.db.get(reply.userId);
if (user === null) {
return {
...reply,
user: {
_id: '' as Id<'users'>,
_creationTime: 0,
clerkUsername: null,
clerkImageUrl: '',
clerkUserId: '',
},
};
}
return {
...reply,
user: {
_id: user._id,
_creationTime: user._creationTime,
clerkUsername: user.clerkUser.username,
clerkImageUrl: user.clerkUser.image_url,
clerkUserId: user.clerkUser.id,
},
};
})
);
return { ...replies, page: repliesWithUserData };
},
});
convex/schema.ts
+3 -1
View File
@@ -39,7 +39,9 @@ export default defineSchema(
parentPostId: v.optional(v.id('posts')),
userId: v.id('users'),
content: v.array(v.string()),
}).index('by_user_id', ['userId']),
})
.index('by_user_id', ['userId'])
.index('by_parent_id', ['parentPostId']),
},
{ schemaValidation: false }
);
convex/users.ts
+2
View File
@@ -28,6 +28,7 @@ export const getUserByClerkId = query({
_creationTime: user._creationTime,
clerkUsername: user.clerkUser.username,
clerkImageUrl: user.clerkUser.image_url,
clerkUserId: user.clerkUser.id,
};
},
});
@@ -46,6 +47,7 @@ export const getUserById = query({
_creationTime: user._creationTime,
clerkUsername: user.clerkUser.username,
clerkImageUrl: user.clerkUser.image_url,
clerkUserId: user.clerkUser.id,
};
},
});
src/app/posts/[id]/edit/page.tsx
+1 -2
View File
@@ -45,8 +45,7 @@ export default function EditPostPage({ params }: { params: { id: string } }) {
case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
throw Error('Unable to update post');
default:
'use server';
router.push('/');
router.push(`/posts/${post?._id}`);
return;
}
}
src/app/posts/[id]/page.tsx
+19 -3
View File
@@ -2,11 +2,13 @@
import Editor, { SubmitActionParams } from '@/components/Editor';
import Post from '@/components/Post';
import PostReplies from '@/components/PostReplies';
import SpinningLoader from '@/components/SpinningLoader';
import { useRouter } from '@/hooks';
import { useUser } from '@clerk/nextjs';
import { useMutation, useQuery } from 'convex/react';
import Image from 'next/image';
import { useEffect, useRef } from 'react';
import { api } from '../../../../convex/_generated/api';
import { Id } from '../../../../convex/_generated/dataModel';
@@ -15,14 +17,22 @@ export default function PostPage({
searchParams,
}: {
params: { id: string };
searchParams: { reply?: boolean };
searchParams: { [key: string]: string | string[] | undefined };
}) {
const replyRef = useRef<HTMLDivElement>(null);
const user = useUser();
const router = useRouter();
const post = useQuery(api.posts.getPostById, {
id: params.id as Id<'posts'>,
});
const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
const isReply = searchParams.reply === 'true';
useEffect(() => {
if (replyRef.current !== null && isReply) {
replyRef.current.scrollIntoView();
}
}, [isReply, post]);
async function submitAction({
clerkUserId,
@@ -69,6 +79,9 @@ export default function PostPage({
showReply={false}
/>
</div>
<div className='w-full'>
<PostReplies parentId={post._id} />
</div>
<div className='flex w-full h-80 gap-4'>
<div>
<Image
@@ -79,12 +92,15 @@ export default function PostPage({
className='rounded-full object-cover border-4 border-primary-accent'
/>
</div>
{/* TODO: Display replies as paged query. Should show latest replies with option to load more */}
<div className='flex w-full'>
<div
ref={replyRef}
className='flex w-full'
>
<Editor
clerkUserId={user.user.id}
parentPostId={post._id}
submitAction={submitAction}
autofocus={isReply}
/>
</div>
</div>
src/app/types/index.ts
+1
View File
@@ -5,6 +5,7 @@ export type UserDto = {
_creationTime: number;
clerkUsername: string | null;
clerkImageUrl: string;
clerkUserId: string;
};
export type PostWithUserDto = Doc<'posts'> & { user: UserDto };
src/components/Editor.tsx
+9 -1
View File
@@ -8,7 +8,7 @@ import { languages } from '@codemirror/language-data';
import { Compartment, EditorState, Text } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { basicSetup } from 'codemirror';
import { FormEvent, useState } from 'react';
import { FormEvent, useEffect, useState } from 'react';
import { Doc, Id } from '../../convex/_generated/dataModel';
import PostContent from './PostContent';
@@ -24,6 +24,7 @@ export default function Editor({
parentPostId,
post,
submitAction,
autofocus = true,
}: {
clerkUserId: string;
parentPostId?: Id<'posts'>;
@@ -34,6 +35,7 @@ export default function Editor({
post,
currentDoc,
}: SubmitActionParams) => Promise<void>;
autofocus?: boolean;
}) {
const editorTheme = new Compartment();
const [currentDoc, setCurrentDoc] = useState(post?.content ?? ['']);
@@ -58,6 +60,12 @@ export default function Editor({
extensions,
});
useEffect(() => {
if (editorView !== null && autofocus) {
editorView.focus();
}
}, [autofocus, editorView]);
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
src/components/Loader.tsx
+43
View File
@@ -0,0 +1,43 @@
import SpinningLoader from './SpinningLoader';
export default function Loader({
isLoading,
status,
loadButtonClickHandler,
}: {
isLoading: boolean;
status: string;
loadButtonClickHandler: () => void;
}) {
if (isLoading) {
return (
<div className='flex w-full items-center justify-center gap-2 p-5 border-t border-gray-600'>
<SpinningLoader className='animate-spin w-5 h-5' />
Loading...
</div>
);
}
if (status !== 'CanLoadMore') {
return;
}
return (
<div className='flex items-center'>
<button
className='bg-primary-accent text-white px-3 py-1 rounded-full'
onClick={loadButtonClickHandler}
disabled={status !== 'CanLoadMore'}
>
{isLoading ? (
<>
<SpinningLoader className='animate-spin w-5 h-5' />
Loading...
</>
) : (
'Load More'
)}
</button>
</div>
);
}
src/components/Post.tsx
+11 -63
View File
@@ -1,15 +1,15 @@
'use client';
import { PostWithUserDto } from '@/app/types';
import { useUser } from '@clerk/nextjs';
import { Text } from '@codemirror/state';
import { useMutation } from 'convex/react';
import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useRef, useState } from 'react';
import { BiDotsHorizontalRounded, BiSolidLike } from 'react-icons/bi';
import { BsFillReplyFill } from 'react-icons/bs';
import { GoDotFill } from 'react-icons/go';
import { api } from '../../convex/_generated/api';
import PostActionButton from './PostActionButtons';
import PostActionModal from './PostActionModal';
import PostContent from './PostContent';
export default function Post({
@@ -21,9 +21,8 @@ export default function Post({
limit?: boolean;
showReply?: boolean;
}) {
const { isLoaded, user, isSignedIn } = useUser();
const deletePostById = useMutation(api.posts.deletePostById);
const modalRef = useRef<HTMLDivElement>(null);
const [modalOpen, setModalOpen] = useState(false);
const username = post.user.clerkUsername ?? post.user._id;
const createdPostDate = new Date(post._creationTime);
const postYear = createdPostDate.getFullYear();
@@ -34,25 +33,7 @@ export default function Post({
const content = limit ? post.content.slice(0, 10) : post.content;
const postLink = `/posts/${post._id}`;
// TODO: Add reply and like buttons
useEffect(() => {
function handleClickOutside(e: MouseEvent) {
if (
modalOpen &&
modalRef.current &&
modalRef.current.contains(e.target as Node) === false
) {
setModalOpen(false);
}
}
document.addEventListener('click', handleClickOutside);
return () => document.removeEventListener('click', handleClickOutside);
}, [modalOpen]);
async function handleDeleteClick() {
setModalOpen(false);
const result = confirm('Are you sure you want to delete this post?');
if (result === false) {
@@ -89,36 +70,9 @@ export default function Post({
</div>
</div>
</div>
<div className='relative'>
<button onClick={() => setModalOpen(!modalOpen)}>
<BiDotsHorizontalRounded />
</button>
<div
ref={modalRef}
className={`${
modalOpen ? '' : 'hidden'
} max-w-min whitespace-nowrap absolute top-5 right-0 rounded-md py-2 pl-4 pr-10 shadow-md bg-white dark:bg-primary-gray`}
>
<ul>
<li>
<Link
onClick={() => setModalOpen(false)}
href={`${postLink}/edit`}
>
Edit post
</Link>
</li>
<li className='text-red-600'>
<button
onClick={handleDeleteClick}
type='button'
>
Delete post
</button>
</li>
</ul>
</div>
</div>
{isLoaded && isSignedIn && user.id === post.user.clerkUserId ? (
<PostActionModal postId={post._id} />
) : null}
</div>
<div
className={`${limit ? 'max-h-80' : ''} flex flex-col overflow-hidden`}
@@ -135,16 +89,10 @@ export default function Post({
</Link>
) : null}
</div>
<div className='flex items-center gap-4'>
{showReply ? (
<Link href={{ pathname: postLink, query: { reply: true } }}>
<BsFillReplyFill />
</Link>
) : null}
<button>
<BiSolidLike />
</button>
</div>
<PostActionButton
postId={post._id}
showReply={showReply}
/>
</div>
</div>
);
src/components/PostActionButtons.tsx
+31
View File
@@ -0,0 +1,31 @@
import Link from 'next/link';
import { BiSolidLike } from 'react-icons/bi';
import { BsFillReplyFill } from 'react-icons/bs';
import { Id } from '../../convex/_generated/dataModel';
export default function PostActionButton({
postId,
showReply,
}: {
postId: Id<'posts'>;
showReply: boolean;
}) {
return (
<div className='flex items-center gap-4'>
{showReply ? (
<Link
className='px-3 py-2 border border-gray-600 rounded-md hover:bg-primary-accent hover:text-white'
href={{ pathname: `/posts/${postId}`, query: { reply: true } }}
>
<BsFillReplyFill />
</Link>
) : null}
<button
type='button'
className='px-3 py-2 border border-gray-600 rounded-md'
>
<BiSolidLike />
</button>
</div>
);
}
src/components/PostActionModal.tsx
+70
View File
@@ -0,0 +1,70 @@
import Link from 'next/link';
import { useEffect, useRef, useState } from 'react';
import { BiDotsHorizontalRounded } from 'react-icons/bi';
import { Id } from '../../convex/_generated/dataModel';
import { useMutation } from 'convex/react';
import { api } from '../../convex/_generated/api';
export default function PostActionModal({ postId }: { postId: Id<'posts'> }) {
const modalRef = useRef<HTMLDivElement>(null);
const [modalOpen, setModalOpen] = useState(false);
const deletePostById = useMutation(api.posts.deletePostById);
useEffect(() => {
function handleClickOutside(e: MouseEvent) {
if (
modalOpen &&
modalRef.current &&
modalRef.current.contains(e.target as Node) === false
) {
setModalOpen(false);
}
}
document.addEventListener('click', handleClickOutside);
return () => document.removeEventListener('click', handleClickOutside);
}, [modalOpen]);
async function handleDeleteButtonClick() {
const result = confirm('Are you sure you want to delete this post?');
if (result === false) {
return;
}
await deletePostById({ id: postId });
}
return (
<div className='relative'>
<button onClick={() => setModalOpen(!modalOpen)}>
<BiDotsHorizontalRounded />
</button>
<div
ref={modalRef}
className={`${
modalOpen ? '' : 'hidden'
} max-w-min whitespace-nowrap absolute top-5 right-0 rounded-md py-2 pl-4 pr-10 shadow-md bg-white dark:bg-primary-gray`}
>
<ul>
<li>
<Link
onClick={() => setModalOpen(false)}
href={`/posts/${postId}/edit`}
>
Edit post
</Link>
</li>
<li className='text-red-600'>
<button
onClick={handleDeleteButtonClick}
type='button'
>
Delete post
</button>
</li>
</ul>
</div>
</div>
);
}
src/components/PostReplies.tsx
+42
View File
@@ -0,0 +1,42 @@
import { usePaginatedQuery } from 'convex/react';
import { api } from '../../convex/_generated/api';
import { Id } from '../../convex/_generated/dataModel';
import Loader from './Loader';
import Reply from './Reply';
export default function PostReplies({ parentId }: { parentId: Id<'posts'> }) {
const PAGE_SIZE = 10;
const pager = usePaginatedQuery(
api.posts.getRepliesByParentId,
{ id: parentId },
{ initialNumItems: PAGE_SIZE }
);
function handleLoadMoreClick() {
pager.loadMore(PAGE_SIZE);
}
if (pager.isLoading === false && pager.results.length === 0) {
return;
}
return (
<div className='flex flex-col-reverse items-center w-full gap-4'>
<div className='flex flex-col-reverse items-center w-full gap-4'>
{pager.results.map(reply => (
<div
key={reply._id}
className='w-full'
>
<Reply post={reply} />
</div>
))}
</div>
<Loader
isLoading={pager.isLoading}
status={pager.status}
loadButtonClickHandler={handleLoadMoreClick}
/>
</div>
);
}
src/components/Reply.tsx
+54
View File
@@ -0,0 +1,54 @@
import { PostWithUserDto } from '@/app/types';
import { useUser } from '@clerk/nextjs';
import { Text } from '@codemirror/state';
import Image from 'next/image';
import PostActionButton from './PostActionButtons';
import PostActionModal from './PostActionModal';
import PostContent from './PostContent';
export default function Reply({ post }: { post: PostWithUserDto }) {
const { user, isSignedIn, isLoaded } = useUser();
const username = post.user.clerkUsername ?? post.user._id;
const created = new Date(post._creationTime);
const month = created.toLocaleString(undefined, { month: 'short' });
const day = created.getDate();
const year = created.getFullYear();
return (
<div className='flex w-full gap-4'>
<div>
<Image
alt='user profile image'
src={post.user.clerkImageUrl}
width={40}
height={40}
className='rounded-full object-cover border-4 border-primary-accent'
/>
</div>
<div className='flex flex-col flex-1 w-full border border-gray-600 rounded-md'>
<div className='flex flex-col w-full p-1'>
<div className='flex justify-between bg-primary-gray p-2'>
<div className='text-sm'>
{`${username} `}
<span className='text-[#7a838f]'>{`replied on ${month} ${day}, ${year}`}</span>
</div>
{isLoaded && isSignedIn && user.id === post.user.clerkUserId ? (
<PostActionModal postId={post._id} />
) : null}
</div>
<div className='p-1'>
<div className='p-2 rounded-md bg-secondary-gray'>
<PostContent content={Text.of(post.content).toString()} />
</div>
</div>
<div className='p-1'>
<PostActionButton
postId={post._id}
showReply={false}
/>
</div>
</div>
</div>
</div>
);
}
src/components/UserPosts.tsx
+13 -27
View File
@@ -4,11 +4,11 @@ import { UserDto } from '@/app/types';
import { usePaginatedQuery } from 'convex/react';
import Link from 'next/link';
import { api } from '../../convex/_generated/api';
import Loader from './Loader';
import Post from './Post';
import SpinningLoader from './SpinningLoader';
export default function UserPosts({ user }: { user: UserDto }) {
const PAGE_SIZE = 2;
const PAGE_SIZE = 10;
const pager = usePaginatedQuery(
api.posts.getUsersPostById,
{
@@ -19,7 +19,11 @@ export default function UserPosts({ user }: { user: UserDto }) {
const postsWithUser = pager.results.map(post => ({ ...post, user }));
if (pager.isLoading === false && postsWithUser.length == 0) {
function handleLoadMoreClick() {
pager.loadMore(PAGE_SIZE);
}
if (pager.isLoading === false && postsWithUser.length === 0) {
return (
<div className='flex flex-col items-center justify-center border-t border-gray-600 w-full h-full'>
<div className='flex flex-col items-center gap-2'>
@@ -38,7 +42,7 @@ export default function UserPosts({ user }: { user: UserDto }) {
}
return (
<div className='flex flex-col items-center w-full'>
<div className='flex flex-col items-center w-full gap-4'>
<div className='flex flex-col items-center w-full'>
{postsWithUser.map(post => (
<div
@@ -49,29 +53,11 @@ export default function UserPosts({ user }: { user: UserDto }) {
</div>
))}
</div>
{pager.isLoading ? (
<div className='flex w-full items-center justify-center gap-2 p-5 border-t border-gray-600'>
<SpinningLoader className='animate-spin w-5 h-5' />
Loading...
</div>
) : pager.status === 'CanLoadMore' ? (
<div className='flex items-center p-5 pb-1'>
<button
className='bg-primary-accent text-white px-3 py-1 rounded-full'
onClick={() => pager.loadMore(PAGE_SIZE)}
disabled={pager.status !== 'CanLoadMore'}
>
{pager.isLoading ? (
<>
<SpinningLoader className='animate-spin w-5 h-5' />
Loading...
</>
) : (
'Load More'
)}
</button>
</div>
) : null}
<Loader
isLoading={pager.isLoading}
status={pager.status}
loadButtonClickHandler={handleLoadMoreClick}
/>
</div>
);
}