From ad171587ef3f8cde8aa4264b9f8ccdbcbf7b8340 Mon Sep 17 00:00:00 2001
From: Morian Engelhardt <mengelhardt@byte5.de>
Date: Sat, 30 Sep 2023 15:40:30 +0200
Subject: [PATCH] feat(blog): add blog comment notifications

---
 .env.development                  |  4 ++--
 components/inbox-item.tsx         | 25 +++++++++++++++++++++++++
 components/wave-page.tsx          |  2 +-
 context/blog-comments-section.tsx | 13 ++++++++++---
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/.env.development b/.env.development
index de5280d..876c8a2 100644
--- 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
\ No newline at end of file
diff --git a/components/inbox-item.tsx b/components/inbox-item.tsx
index d497896..0b188d2 100644
--- 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
index c2eb159..e1ba4a7 100644
--- 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
index ad9b25c..062453b 100644
--- 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>