feat(blog): add blog comment notifications

xp-bot · Sep 30, 2023 · ad17158 · ad17158
1 parent b515c72
commit ad17158
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/.env.development b/.env.development
@@ -1,3 +1,3 @@
-NEXT_PUBLIC_BACKEND_DOMAIN=https://api.xp-bot.net
-# NEXT_PUBLIC_BACKEND_DOMAIN=http://localhost:3300
+# NEXT_PUBLIC_BACKEND_DOMAIN=https://api.xp-bot.net
+NEXT_PUBLIC_BACKEND_DOMAIN=http://localhost:3300
 NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY=flags_pub_development_349193885386277458
diff --git a/components/inbox-item.tsx b/components/inbox-item.tsx
@@ -63,6 +63,31 @@ const InboxItem: FC<IInboxItemProps> = ({ inboxItem }) => {
             </p>
           </div>
         );
+      case InboxItemType.BlogPostComment:
+        return (
+          <div className="flex flex-row items-center gap-2">
+            {lookupUser && (
+              <span className="h-4 w-4 shrink-0 overflow-hidden rounded-full">
+                <FallBackImage
+                  className="h-full w-full object-cover"
+                  src={avatarToURL(lookupUser)}
+                />
+              </span>
+            )}
+            <p
+              className={`text-sm opacity-75 ${
+                startsWith(
+                  lookupUser?.username,
+                  toLower(slice(lookupUser?.username, 0, 1)[0])
+                )
+                  ? "-mt-0.5"
+                  : ""
+              } `}
+            >
+              {lookupUser?.username} commented:
+            </p>
+          </div>
+        );
       default:
         return (
           <p

diff --git a/components/wave-page.tsx b/components/wave-page.tsx
@@ -9,7 +9,7 @@ interface WavePageProps {
 const WavePage: FC<WavePageProps> = ({ children }) => {
   const router = useRouter();
   return (
-    <div className="z-30 h-full">
+    <div className="z-30 pb-20 lg:pb-0 h-full">
       <div className="h-full w-full pb-10 pt-7">
         <div
           className={`${

diff --git a/context/blog-comments-section.tsx b/context/blog-comments-section.tsx
@@ -22,7 +22,14 @@ import {
   IBlogPostComment,
   IBlogPostCommentContent,
 } from "models/backend/blog-models";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import {
+  createContext,
+  Fragment,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 interface IBlogCommentsSectionValues {
   deleteComment: (comment: IBlogPostComment) => void;
@@ -110,7 +117,7 @@ export function BlogCommentsSection({
           {map(
             orderBy(comments, (comment) => comment.updatedAt, "desc"),
             (comment, idx) => (
-              <>
+              <Fragment key={comment.commentID}>
                 <motion.div
                   key={`comment_parent_${comment.commentID}`}
                   initial="hidden"
@@ -141,7 +148,7 @@ export function BlogCommentsSection({
                 {size(comments) > 0 && !isEqual(idx, size(comments) - 1) && (
                   <hr />
                 )}
-              </>
+              </Fragment>
             )
           )}
         </AnimatePresence>