feat: support replies

2023-09-14 21:47:40 -05:00
parent 0dc2934e05
commit 820ba6b1e8
14 changed files with 344 additions and 97 deletions
@@ -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();

@@ -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>
+  );
+}
@@ -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>
  );
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
  );
 }