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

Merge pull request #24 from StevanFreeborn/stevanfreeborn/feat/add-replies

Browse Source 
feat: add replies
This commit is contained in:
Stevan Freeborn
2023-09-14 21:52:10 -05:00
committed by GitHub
parent 230d4b8b47 820ba6b1e8
commit 9cc9077017
23 changed files with 745 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
convex/posts.ts
+46
View File
@@ -1,6 +1,7 @@
import { paginationOptsValidator } from 'convex/server'; import { paginationOptsValidator } from 'convex/server';
import { v } from 'convex/values'; import { v } from 'convex/values';
import { PostWithUserDto } from '../src/app/types'; import { PostWithUserDto } from '../src/app/types';
import { Id } from './_generated/dataModel';
import { mutation, query } from './_generated/server'; import { mutation, query } from './_generated/server';
import { userQuery } from './users'; import { userQuery } from './users';
@@ -46,6 +47,7 @@ export const getUsersPostById = query({
return await ctx.db return await ctx.db
.query('posts') .query('posts')
.withIndex('by_user_id', q => q.eq('userId', args.userId)) .withIndex('by_user_id', q => q.eq('userId', args.userId))
.filter(q => q.eq(q.field('parentPostId'), undefined))
.order('desc') .order('desc')
.paginate(args.paginationOpts); .paginate(args.paginationOpts);
}, },
@@ -85,7 +87,51 @@ export const getPostById = query({
_creationTime: user._creationTime, _creationTime: user._creationTime,
clerkUsername: user.clerkUser.username, clerkUsername: user.clerkUser.username,
clerkImageUrl: user.clerkUser.image_url, 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')), parentPostId: v.optional(v.id('posts')),
userId: v.id('users'), userId: v.id('users'),
content: v.array(v.string()), content: v.array(v.string()),
}).index('by_user_id', ['userId']), })
.index('by_user_id', ['userId'])
.index('by_parent_id', ['parentPostId']),
}, },
{ schemaValidation: false } { schemaValidation: false }
); );
convex/users.ts
+2
View File
@@ -28,6 +28,7 @@ export const getUserByClerkId = query({
_creationTime: user._creationTime, _creationTime: user._creationTime,
clerkUsername: user.clerkUser.username, clerkUsername: user.clerkUser.username,
clerkImageUrl: user.clerkUser.image_url, clerkImageUrl: user.clerkUser.image_url,
clerkUserId: user.clerkUser.id,
}; };
}, },
}); });
@@ -46,6 +47,7 @@ export const getUserById = query({
_creationTime: user._creationTime, _creationTime: user._creationTime,
clerkUsername: user.clerkUser.username, clerkUsername: user.clerkUser.username,
clerkImageUrl: user.clerkUser.image_url, clerkImageUrl: user.clerkUser.image_url,
clerkUserId: user.clerkUser.id,
}; };
}, },
}); });
src/app/account/[[...account]]/page.tsx
+3 -2
View File
@@ -8,8 +8,9 @@ export default function AccountPage() {
<UserProfile <UserProfile
appearance={{ appearance={{
elements: { elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white', card: 'sm:pb-4 shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
navbar: 'dark:bg-secondary-gray [&_*]:dark:text-white', navbar: 'hidden',
navbarMobileMenuRow: 'hidden',
formFieldInput: 'dark:bg-primary-gray dark:text-white', formFieldInput: 'dark:bg-primary-gray dark:text-white',
profileSectionTitle: 'dark:border-white dark:border-opacity-10', profileSectionTitle: 'dark:border-white dark:border-opacity-10',
breadcrumbsItem: 'dark:text-white', breadcrumbsItem: 'dark:text-white',
src/app/layout.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ export default function RootLayout({
suppressHydrationWarning suppressHydrationWarning
> >
<body <body
className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className} overflow-auto`} className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className}`}
> >
<ClerkProvider <ClerkProvider
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY} publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
@@ -37,7 +37,7 @@ export default function RootLayout({
showSpinner={false} showSpinner={false}
/> />
<Navbar /> <Navbar />
<div className='p-4 w-full h-full flex flex-col'> <div className='flex flex-col p-4 w-full h-full overflow-y-auto'>
{children} {children}
<Footer /> <Footer />
</div> </div>
src/app/login/[[...login]]/page.tsx
+2 -2
View File
@@ -4,11 +4,11 @@ import { SignIn } from '@clerk/nextjs';
export default function LoginPage() { export default function LoginPage() {
return ( return (
<main className='flex flex-col items-center'> <main className='flex flex-col flex-1 items-center'>
<SignIn <SignIn
appearance={{ appearance={{
elements: { elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white', card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
socialButtonsIconButton__github: socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10', 'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google: socialButtonsIconButton__google:
src/app/page.tsx
+1 -1
View File
@@ -1,3 +1,3 @@
export default function Home() { export default function Home() {
return <main></main>; return <main className='flex-1'></main>;
} }
src/app/posts/[id]/edit/page.tsx
+54 -11
View File
@@ -1,26 +1,69 @@
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 { api } from '../../../../../convex/_generated/api';
import { Id } from '../../../../../convex/_generated/dataModel'; 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'>, 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') { if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
// TODO: Return actual not found component // TODO: Return actual not found component
return <h1>Not Found</h1>; 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:
router.push(`/posts/${post?._id}`);
return;
}
}
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> </main>
); );
} }
src/app/posts/[id]/page.tsx
+92 -9
View File
@@ -1,15 +1,66 @@
'use client'; 'use client';
import Editor, { SubmitActionParams } from '@/components/Editor';
import Post from '@/components/Post'; import Post from '@/components/Post';
import PostReplies from '@/components/PostReplies';
import SpinningLoader from '@/components/SpinningLoader'; import SpinningLoader from '@/components/SpinningLoader';
import { useQuery } from 'convex/react'; 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 { api } from '../../../../convex/_generated/api';
import { Id } from '../../../../convex/_generated/dataModel'; import { Id } from '../../../../convex/_generated/dataModel';
export default function PostPage({ params }: { params: { id: string } }) { export default function PostPage({
params,
searchParams,
}: {
params: { id: string };
searchParams: { [key: string]: string | string[] | undefined };
}) {
const replyRef = useRef<HTMLDivElement>(null);
const user = useUser();
const router = useRouter();
const post = useQuery(api.posts.getPostById, { const post = useQuery(api.posts.getPostById, {
id: params.id as Id<'posts'>, 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,
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') { if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
// TODO: Return actual not found component // TODO: Return actual not found component
@@ -18,14 +69,46 @@ export default function PostPage({ params }: { params: { id: string } }) {
return ( return (
<main className='flex flex-col flex-1 w-full items-center'> <main className='flex flex-col flex-1 w-full items-center'>
<div className='w-full max-w-4xl'> <div className='flex flex-col w-full max-w-4xl gap-4'>
{post === undefined ? ( {post !== undefined && user.isLoaded ? (
<SpinningLoader className='animate-spin w-5 h-5' /> <>
<div className='flex flex-col min-w-0 p-1 rounded-md border border-gray-600'>
<Post
post={post}
limit={false}
showReply={false}
/>
</div>
<div className='w-full'>
<PostReplies parentId={post._id} />
</div>
<div className='flex w-full h-80 gap-4'>
<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
ref={replyRef}
className='flex w-full'
>
<Editor
clerkUserId={user.user.id}
parentPostId={post._id}
submitAction={submitAction}
autofocus={isReply}
/>
</div>
</div>
</>
) : ( ) : (
<Post <div className='flex w-full justify-center gap-2'>
post={post} <SpinningLoader className='animate-spin w-5 h-5' /> Loading post...
limit={false} </div>
/>
)} )}
</div> </div>
</main> </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() { 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 ( 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> </main>
); );
} }
src/app/signup/[[...signup]]/page.tsx
+2 -2
View File
@@ -4,11 +4,11 @@ import { SignUp } from '@clerk/nextjs';
export default function SignUpPage() { export default function SignUpPage() {
return ( return (
<main className='flex flex-col items-center'> <main className='flex flex-col flex-1 items-center'>
<SignUp <SignUp
appearance={{ appearance={{
elements: { elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white', card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
socialButtonsIconButton__github: socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10', 'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google: socialButtonsIconButton__google:
src/app/types/index.ts
+1
View File
@@ -5,6 +5,7 @@ export type UserDto = {
_creationTime: number; _creationTime: number;
clerkUsername: string | null; clerkUsername: string | null;
clerkImageUrl: string; clerkImageUrl: string;
clerkUserId: string;
}; };
export type PostWithUserDto = Doc<'posts'> & { user: UserDto }; export type PostWithUserDto = Doc<'posts'> & { user: UserDto };
src/components/Editor.tsx
+49 -30
View File
@@ -2,24 +2,43 @@
import { useCodeMirror, useRouter } from '@/hooks'; import { useCodeMirror, useRouter } from '@/hooks';
import { basicDark } from '@/lib/codemirror'; import { basicDark } from '@/lib/codemirror';
import { useUser } from '@clerk/nextjs';
import { indentWithTab } from '@codemirror/commands'; import { indentWithTab } from '@codemirror/commands';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown'; import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { languages } from '@codemirror/language-data'; import { languages } from '@codemirror/language-data';
import { Compartment, EditorState, Text } from '@codemirror/state'; import { Compartment, EditorState, Text } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view'; import { EditorView, keymap } from '@codemirror/view';
import { basicSetup } from 'codemirror'; import { basicSetup } from 'codemirror';
import { useMutation } from 'convex/react'; import { FormEvent, useEffect, useState } from 'react';
import { FormEvent, useState } from 'react'; import { Doc, Id } from '../../convex/_generated/dataModel';
import { api } from '../../convex/_generated/api';
import { Doc } from '../../convex/_generated/dataModel';
import PostContent from './PostContent'; import PostContent from './PostContent';
export default function Editor({ post }: { post?: Doc<'posts'> }) { export type SubmitActionParams = {
const { user, isSignedIn } = useUser(); clerkUserId: string;
parentPostId?: Id<'posts'>;
post?: Doc<'posts'>;
currentDoc: string[];
};
export default function Editor({
clerkUserId,
parentPostId,
post,
submitAction,
autofocus = true,
}: {
clerkUserId: string;
parentPostId?: Id<'posts'>;
post?: Doc<'posts'>;
submitAction: ({
clerkUserId,
parentPostId,
post,
currentDoc,
}: SubmitActionParams) => Promise<void>;
autofocus?: boolean;
}) {
const editorTheme = new Compartment(); const editorTheme = new Compartment();
const [currentDoc, setCurrentDoc] = useState(post?.content ?? ['']); const [currentDoc, setCurrentDoc] = useState(post?.content ?? ['']);
const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
const router = useRouter(); const router = useRouter();
const [creatingOrUpdating, setCreatingOrUpdating] = useState(false); const [creatingOrUpdating, setCreatingOrUpdating] = useState(false);
@@ -36,44 +55,44 @@ export default function Editor({ post }: { post?: Doc<'posts'> }) {
]; ];
const [mode, setMode] = useState<'write' | 'preview'>('write'); const [mode, setMode] = useState<'write' | 'preview'>('write');
const { editorRef } = useCodeMirror({ doc: currentDoc, extensions }); const { editorRef, editorView } = useCodeMirror({
doc: currentDoc,
extensions,
});
useEffect(() => {
if (editorView !== null && autofocus) {
editorView.focus();
}
}, [autofocus, editorView]);
async function handleSubmit(e: FormEvent<HTMLFormElement>) { async function handleSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault(); e.preventDefault();
try { try {
if (isSignedIn !== true) {
router.push('/login');
return;
}
setCreatingOrUpdating(true); setCreatingOrUpdating(true);
await submitAction({
const result = await createOrUpdatePost({ clerkUserId,
id: post?._id, parentPostId,
clerkUserId: user.id, post,
content: currentDoc, 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) { } catch (error) {
console.log(error); console.log(error);
} finally { } finally {
console.log('here');
setCreatingOrUpdating(false); setCreatingOrUpdating(false);
setCurrentDoc(['']);
editorView?.dispatch({
changes: { from: 0, to: editorView.state.doc.length, insert: '' },
});
} }
} }
return ( return (
<form <form
onSubmit={handleSubmit} 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 justify-between rounded-t-md p-4 pb-0 border-b border-gray-600 dark:bg-primary-gray'>
<div className='flex items-center'> <div className='flex items-center'>
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/Navbar.tsx
+140 -60
View File
@@ -1,71 +1,151 @@
import { SignedIn, SignedOut, currentUser } from '@clerk/nextjs'; 'use client';
import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
import Link from 'next/link'; import Link from 'next/link';
import { BiPlus, BiSolidMessageSquare } from 'react-icons/bi'; import { useEffect, useState } from 'react';
import { BiLogIn, BiPlus } from 'react-icons/bi';
import { BsPersonPlusFill } from 'react-icons/bs';
import { ImProfile } from 'react-icons/im';
import {
RiMenuFoldLine,
RiMenuUnfoldLine,
RiUserFollowFill,
} from 'react-icons/ri';
import ThemeButton from './ThemeButton'; import ThemeButton from './ThemeButton';
import UserButton from './UserButton'; import UserButton from './UserButton';
export default async function Navbar() { export default function Navbar() {
const user = await currentUser(); const { user } = useUser();
const [navOpen, setNavOpen] = useState(false);
useEffect(() => {
function handler() {
if (navOpen) {
setNavOpen(false);
}
}
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return ( return (
<nav className='flex items-center justify-between p-5 shadow-md dark:bg-secondary-gray'> <nav className='flex flex-col items-center gap-4 p-5 shadow-md dark:bg-secondary-gray md:flex-row md:justify-between'>
<ul className='flex items-center gap-4'> <div className='flex items-center justify-between w-full md:max-w-min'>
<li> <Link
<Link href='/'
href='/' className='italic'
className='italic' >
> conve
conve <span className='font-bold text-4xl text-primary-accent'>X</span>
<span className='font-bold text-4xl text-primary-accent'>X</span> </Link>
</Link> <button
</li> onClick={() => setNavOpen(!navOpen)}
<SignedIn> type='button'
<li> className='flex items-center justify-center md:hidden'
{/* TODO: Style this */} >
<div> {navOpen ? <RiMenuUnfoldLine /> : <RiMenuFoldLine />}
<input </button>
type='text' </div>
placeholder='Search' <div
/> className='hidden flex-1 flex-col gap-4 w-full items-center md:flex md:flex-row md:justify-between'
style={{ display: navOpen ? 'flex' : '' }}
>
<ul className='flex flex-col w-full items-start gap-4 md:flex-row md:items-center md:max-w-min'>
<SignedIn>
<li className='flex w-full'>
<div className='flex w-full'>
<input
type='text'
placeholder='Search'
className='w-full md:w-[unset] py-1 px-2 rounded-md border border-gray-600 dark:bg-primary-gray dark:border-0'
/>
</div>
</li>
<li>
<div className='flex items-center gap-2'>
<div className='p-1 md:hidden'>
<RiUserFollowFill className='w-6 h-6' />
</div>
<Link
onClick={() => setNavOpen(false)}
href='#'
>
Following
</Link>
</div>
</li>
<li>
<div className='flex items-center gap-2'>
<div className='p-1 md:hidden'>
<ImProfile className='w-6 h-6' />
</div>
<Link
onClick={() => setNavOpen(false)}
href={`/profile/${user?.id}`}
>
Profile
</Link>
</div>
</li>
<li className='flex items-center gap-2 max-w-min whitespace-nowrap'>
<div className='p-1 bg-primary-accent rounded-md rounded-bl-none'>
<Link
onClick={() => setNavOpen(false)}
href='/posts/add'
>
<BiPlus className='w-6 h-6 text-white' />
</Link>
</div>
<span className='md:hidden'>Add Post</span>
</li>
</SignedIn>
</ul>
<ul className='flex flex-col w-full items-start gap-4 md:flex-row md:items-center md:max-w-min'>
<li className='flex items-center gap-2'>
<div className='p-1'>
<ThemeButton />
</div> </div>
<span className='md:hidden'>Change Theme</span>
</li> </li>
<li> <SignedIn>
<Link href='#'>Following</Link> <li className='flex items-center gap-2'>
</li> <UserButton />
<li> <span className='md:hidden'>Manage Account</span>
<Link href={`/profile/${user?.id}`}>Profile</Link> </li>
</li> </SignedIn>
<li> <SignedOut>
<div className='mx-4'> <li>
<Link <div className='flex items-center gap-2'>
href='/posts/add' <div className='p-1 md:hidden'>
className='relative' <BiLogIn className='w-6 h-6' />
> </div>
<BiSolidMessageSquare className='absolute w-10 h-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-primary-accent' /> <Link
<BiPlus className='absolute w-5 h-5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white' /> href='/login'
</Link> className='whitespace-nowrap'
</div> >
</li> Sign in
</SignedIn> </Link>
</ul> </div>
<ul className='flex items-center gap-4'> </li>
<li> <li>
<ThemeButton /> <div className='flex items-center gap-2'>
</li> <div className='p-1 md:hidden'>
<SignedIn> <BsPersonPlusFill className='w-6 h-6' />
<li> </div>
<UserButton /> <Link
</li> href='/signup'
</SignedIn> className='whitespace-nowrap'
<SignedOut> >
<li> Sign up
<Link href='/login'>Sign in</Link> </Link>
</li> </div>
<li> </li>
<Link href='/signup'>Sign up</Link> </SignedOut>
</li> </ul>
</SignedOut> </div>
</ul>
</nav> </nav>
); );
} }
src/components/Post.tsx
+29 -61
View File
@@ -1,26 +1,28 @@
'use client'; 'use client';
import { PostWithUserDto } from '@/app/types'; import { PostWithUserDto } from '@/app/types';
import { useUser } from '@clerk/nextjs';
import { Text } from '@codemirror/state'; import { Text } from '@codemirror/state';
import { useMutation } from 'convex/react'; import { useMutation } from 'convex/react';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { useEffect, useRef, useState } from 'react';
import { BiDotsHorizontalRounded } from 'react-icons/bi';
import { GoDotFill } from 'react-icons/go'; import { GoDotFill } from 'react-icons/go';
import { api } from '../../convex/_generated/api'; import { api } from '../../convex/_generated/api';
import PostActionButton from './PostActionButtons';
import PostActionModal from './PostActionModal';
import PostContent from './PostContent'; import PostContent from './PostContent';
export default function Post({ export default function Post({
post, post,
limit = true, limit = true,
showReply = true,
}: { }: {
post: PostWithUserDto; post: PostWithUserDto;
limit?: boolean; limit?: boolean;
showReply?: boolean;
}) { }) {
const { isLoaded, user, isSignedIn } = useUser();
const deletePostById = useMutation(api.posts.deletePostById); 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 username = post.user.clerkUsername ?? post.user._id;
const createdPostDate = new Date(post._creationTime); const createdPostDate = new Date(post._creationTime);
const postYear = createdPostDate.getFullYear(); const postYear = createdPostDate.getFullYear();
@@ -29,26 +31,9 @@ export default function Post({
}); });
const dayOfMonth = createdPostDate.getDate(); const dayOfMonth = createdPostDate.getDate();
const content = limit ? post.content.slice(0, 10) : post.content; 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() { async function handleDeleteClick() {
setModalOpen(false);
const result = confirm('Are you sure you want to delete this post?'); const result = confirm('Are you sure you want to delete this post?');
if (result === false) { if (result === false) {
@@ -59,8 +44,8 @@ export default function Post({
} }
return ( return (
<div className='flex w-full gap-4 p-8 bg-white dark:bg-secondary-gray'> <div className='flex w-full gap-4 p-8 bg-white dark:bg-secondary-gray flex-wrap'>
<div> <div className='flex-shrink-0'>
<Image <Image
alt='user profile image' alt='user profile image'
src={post.user.clerkImageUrl} src={post.user.clerkImageUrl}
@@ -69,48 +54,28 @@ export default function Post({
className='rounded-full object-cover border-4 border-primary-accent' className='rounded-full object-cover border-4 border-primary-accent'
/> />
</div> </div>
<div className='flex flex-1 flex-col gap-2'> <div className='flex flex-1 flex-col gap-2 min-w-0'>
<div className='flex items-center justify-between gap-2'> <div className='flex items-center justify-between gap-2'>
<div className='flex items-center gap-2'> <div className='flex items-center gap-2 flex-wrap min-w-0'>
<div>{username}</div>
<GoDotFill className='w-3 h-3' />
<div className='text-xs'>
{`${postMonth} ${dayOfMonth}, ${postYear}`}
</div>
</div>
<div className='relative'>
<button onClick={() => setModalOpen(!modalOpen)}>
<BiDotsHorizontalRounded />
</button>
<div <div
ref={modalRef} className='overflow-hidden text-ellipsis'
className={`${ title={username}
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> {username}
<li> </div>
<Link <div className='flex items-center gap-2'>
onClick={() => setModalOpen(false)} <GoDotFill className='w-3 h-3' />
href={`/posts/${post._id}/edit`} <div className='text-xs'>
> {`${postMonth} ${dayOfMonth}, ${postYear}`}
Edit post </div>
</Link>
</li>
<li className='text-red-600'>
<button
onClick={handleDeleteClick}
type='button'
>
Delete post
</button>
</li>
</ul>
</div> </div>
</div> </div>
{isLoaded && isSignedIn && user.id === post.user.clerkUserId ? (
<PostActionModal postId={post._id} />
) : null}
</div> </div>
<div <div
className={`${limit ? 'max-h-80' : ''} overflow-hidden text-ellipsis`} className={`${limit ? 'max-h-80' : ''} flex flex-col overflow-hidden`}
> >
<PostContent content={Text.of(content).toString()} /> <PostContent content={Text.of(content).toString()} />
</div> </div>
@@ -118,13 +83,16 @@ export default function Post({
{limit && post.content.length > 10 ? ( {limit && post.content.length > 10 ? (
<Link <Link
className='font-semibold text-primary-accent' className='font-semibold text-primary-accent'
href={`/posts/${post._id}`} href={postLink}
> >
Show more Show more
</Link> </Link>
) : null} ) : null}
</div> </div>
<div></div> <PostActionButton
postId={post._id}
showReply={showReply}
/>
</div> </div>
</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/ThemeButton.tsx
+3 -3
View File
@@ -17,11 +17,11 @@ export default function ThemeButton() {
onClick={() => setTheme(isDark ? 'light' : 'dark')} onClick={() => setTheme(isDark ? 'light' : 'dark')}
> >
{mounted === false ? ( {mounted === false ? (
<Loader className='animate-spin w-5 h-5' /> <Loader className='animate-spin w-6 h-6' />
) : isDark ? ( ) : isDark ? (
<BsMoonStarsFill className='w-5 h-5' /> <BsMoonStarsFill className='w-6 h-6' />
) : ( ) : (
<BsSunFill className='w-5 h-5' /> <BsSunFill className='w-6 h-6' />
)} )}
</button> </button>
); );
src/components/UserPosts.tsx
+13 -27
View File
@@ -4,11 +4,11 @@ import { UserDto } from '@/app/types';
import { usePaginatedQuery } from 'convex/react'; import { usePaginatedQuery } from 'convex/react';
import Link from 'next/link'; import Link from 'next/link';
import { api } from '../../convex/_generated/api'; import { api } from '../../convex/_generated/api';
import Loader from './Loader';
import Post from './Post'; import Post from './Post';
import SpinningLoader from './SpinningLoader';
export default function UserPosts({ user }: { user: UserDto }) { export default function UserPosts({ user }: { user: UserDto }) {
const PAGE_SIZE = 2; const PAGE_SIZE = 10;
const pager = usePaginatedQuery( const pager = usePaginatedQuery(
api.posts.getUsersPostById, api.posts.getUsersPostById,
{ {
@@ -19,7 +19,11 @@ export default function UserPosts({ user }: { user: UserDto }) {
const postsWithUser = pager.results.map(post => ({ ...post, user })); 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 ( 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 justify-center border-t border-gray-600 w-full h-full'>
<div className='flex flex-col items-center gap-2'> <div className='flex flex-col items-center gap-2'>
@@ -38,7 +42,7 @@ export default function UserPosts({ user }: { user: UserDto }) {
} }
return ( 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'> <div className='flex flex-col items-center w-full'>
{postsWithUser.map(post => ( {postsWithUser.map(post => (
<div <div
@@ -49,29 +53,11 @@ export default function UserPosts({ user }: { user: UserDto }) {
</div> </div>
))} ))}
</div> </div>
{pager.isLoading ? ( <Loader
<div className='flex w-full items-center justify-center gap-2 p-5 border-t border-gray-600'> isLoading={pager.isLoading}
<SpinningLoader className='animate-spin w-5 h-5' /> status={pager.status}
Loading... loadButtonClickHandler={handleLoadMoreClick}
</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}
</div> </div>
); );
} }
src/components/UserProfile.tsx
+9 -4
View File
@@ -12,9 +12,9 @@ export default function UserProfile({ user }: { user: UserDto }) {
return ( return (
<div className='w-full'> <div className='w-full'>
<div className='shadow-md bg-gradient-to-r from-violet-600 via-violet-600 to-indigo-600 rounded-t-md pt-20 pl-5 pr-40'> <div className='shadow-md bg-gradient-to-r from-violet-600 via-violet-600 to-indigo-600 rounded-t-md pt-20 px-5'>
<div className='flex items-center gap-4 -mb-[25px]'> <div className='flex items-center gap-4 -mb-[25px]'>
<div> <div className='flex-shrink-0'>
<Image <Image
alt='user profile image' alt='user profile image'
src={user.clerkImageUrl} src={user.clerkImageUrl}
@@ -23,8 +23,13 @@ export default function UserProfile({ user }: { user: UserDto }) {
className='rounded-full object-cover border-4 border-primary-accent' className='rounded-full object-cover border-4 border-primary-accent'
/> />
</div> </div>
<div className='text-white'> <div className='flex flex-col flex-1 min-w-0 text-white'>
<h1 className='font-bold'>{username}</h1> <h1
className='font-bold overflow-hidden text-ellipsis'
title={username}
>
{username}
</h1>
<div className='flex gap-2 items-center text-sm'> <div className='flex gap-2 items-center text-sm'>
<AiFillCalendar className='w-4 h-4' /> <AiFillCalendar className='w-4 h-4' />
{`Joined ${monthJoined} ${yearJoined}`} {`Joined ${monthJoined} ${yearJoined}`}