Merge pull request #65 from xp-bot/development

feat(no-ref): implement comment state switch (#64)
xp-bot · Mar 9, 2024 · a0cd6ee · a0cd6ee
2 parents e107f48 + 5d1a676
commit a0cd6ee
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 18 deletions.
diff --git a/components/blog-comment.tsx b/components/blog-comment.tsx
@@ -212,6 +212,7 @@ const BlogComment: FC<IBlogCommentProps> = ({
       >
         <div className="min-w-[60vw]">
           <BlogCreateComment
+            isReply
             postedCallback={() => {
               setReplyModal(undefined);
             }}

diff --git a/components/blog-create-comment.tsx b/components/blog-create-comment.tsx
@@ -13,11 +13,13 @@ import FallBackImage from "./fallback-image";
 interface IBlogCreateCommentProps {
   parentCommentId?: string;
   postedCallback?: () => void;
+  isReply?: boolean;
 }
 
 const BlogCreateComment: FC<IBlogCreateCommentProps> = ({
   parentCommentId,
   postedCallback,
+  isReply,
 }) => {
   const user = useUser();
   const commentsSection = useCommentsSection();
@@ -26,10 +28,10 @@ const BlogCreateComment: FC<IBlogCreateCommentProps> = ({
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<{ title: string; body: string }>();
+  } = useForm<{ title?: string; body: string }>();
 
   const createComment: SubmitHandler<{
-    title: string;
+    title?: string;
     body: string;
   }> = ({ body, title }) => {
     commentsSection.postComment(
@@ -57,18 +59,20 @@ const BlogCreateComment: FC<IBlogCreateCommentProps> = ({
             />
           </div>
           <div className="relative flex min-h-[5rem] w-full max-w-full grow flex-col justify-center gap-2 font-serif text-darkText dark:text-darkText-darkMode">
-            <BlockInput
-              inputProps={{ maxLength: 30 }}
-              placeholder="Title your Comment"
-              formError={errors.title}
-              registerForm={register("title", {
-                required: `A Title is required.`,
-                minLength: {
-                  value: 5,
-                  message: `Please enter at least 5 characters.`,
-                },
-              })}
-            />
+            {!isReply && (
+              <BlockInput
+                inputProps={{ maxLength: 30 }}
+                placeholder="Title your Comment"
+                formError={errors.title}
+                registerForm={register("title", {
+                  required: `A Title is required.`,
+                  minLength: {
+                    value: 5,
+                    message: `Please enter at least 5 characters.`,
+                  },
+                })}
+              />
+            )}
             <span>
               <BlockTextArea
                 inputProps={{ maxLength: 1024 }}

diff --git a/context/blog-comments-section.tsx b/context/blog-comments-section.tsx
@@ -98,6 +98,13 @@ export function BlogCommentsSection({
     scroll();
   }, [selectedComment, selectedRef]);
 
+  if (!blogPost.content.comments_enabled)
+    return (
+      <p className="text-darkText text-center opacity-25 dark:text-darkText-darkMode">
+        Comments have been disabled for this post.
+      </p>
+    );
+
   return (
     <BlogCommentsSectionContext.Provider
       value={{

diff --git a/models/backend/blog-models.ts b/models/backend/blog-models.ts
@@ -12,6 +12,7 @@ export interface IBlogPostContent {
   thumbnail?: string;
   updated_at?: Date;
   created_at?: Date;
+  comments_enabled: boolean;
   status: BlogPostStatus;
 }
 
@@ -21,7 +22,7 @@ export interface IBlogPost {
 }
 
 export interface IBlogPostCommentContent {
-  title: string;
+  title?: string;
   creator: string;
   body: string;
 }

diff --git a/pages/blog/[blogID].tsx b/pages/blog/[blogID].tsx
@@ -1,3 +1,4 @@
+import { faComment } from "@fortawesome/free-regular-svg-icons";
 import {
   faCross,
   faPen,
@@ -73,11 +74,26 @@ const BlogPost: NextPage<BlogPostProps> = ({ blogPost, comments }) => {
     });
   };
 
+  const handleSwitchEnableComments = async (enabled: boolean) => {
+    const res = await apiRoutes.blog.updatePost(blogPost.postID, {
+      ...blogPost.content,
+      comments_enabled: enabled,
+    });
+    if (res.success) router.push(`/blog/${blogPost.postID}`);
+
+    toast({
+      text: res.success
+        ? `Successfully ${enabled ? `enabled` : `disabled`} comments.`
+        : "Failed to update post's comments status",
+      type: res.success ? ToastItemType.SUCCESS : ToastItemType.ERROR,
+    });
+  };
+
   return (
     <div>
       {!isUndefined(selectedComment) ? (
         <HeadSet
-          title={selectedComment.content.title}
+          title={selectedComment.content.title || `Untitled Comment`}
           description={selectedComment.content.body}
           image={avatarToURL(selectedLookup)}
         />
@@ -121,6 +137,27 @@ const BlogPost: NextPage<BlogPostProps> = ({ blogPost, comments }) => {
               </span>
             </div>
             <span className="hidden md:flex">•</span>
+            <div className="flex h-full cursor-pointer flex-row items-center gap-3">
+              <button
+                onClick={() => {
+                  handleSwitchEnableComments(
+                    isUndefined(blogPost.content.comments_enabled)
+                      ? true
+                      : !blogPost.content.comments_enabled
+                  );
+                }}
+                className="flex h-full flex-row items-center gap-3 border-b border-b-transparent pb-0.5 opacity-75 transition-all ease-in-out hover:border-y-red-400 hover:text-red-400"
+              >
+                <FontAwesomeIcon icon={faComment} />
+                <span>
+                  {isUndefined(blogPost.content.comments_enabled) ||
+                  blogPost.content.comments_enabled
+                    ? `Disable Comments`
+                    : `Enable Comments`}
+                </span>
+              </button>
+            </div>
+            <span className="hidden md:flex">•</span>
             <div className="flex h-full cursor-pointer flex-row items-center gap-3">
               <span
                 className="flex h-full flex-row items-center gap-3 border-b border-b-transparent pb-0.5 opacity-75 transition-all ease-in-out hover:border-y-red-400 hover:text-red-400"

diff --git a/pages/blog/editor/[[...postID]].tsx b/pages/blog/editor/[[...postID]].tsx
@@ -10,7 +10,11 @@ import { useLayout } from "context/layout-context";
 import { useToast } from "context/toast-context";
 import { useUser } from "context/user-context";
 import { isNil, size, startsWith } from "lodash";
-import { BlogPostStatus, IBlogPost } from "models/backend/blog-models";
+import {
+  BlogPostStatus,
+  IBlogPost,
+  IBlogPostContent,
+} from "models/backend/blog-models";
 import { IPage } from "models/page";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
@@ -59,12 +63,13 @@ const BlogEditor: NextPage<UserTabProps> = ({ blogPost }) => {
   ) => {
     if (!user.currentUser) return;
 
-    const postData = {
+    const postData: IBlogPostContent = {
       title: data.title,
       body: data.body,
       creator: user.currentUser.discordUser.id,
       description: data.description,
       thumbnail: data.thumbnail,
+      comments_enabled: true,
       status,
     };