feat: adding forum comment notification

apps/forum/src/components/App.tsx

@@ -10,8 +10,8 @@ import FilterMenu from "./FilterMenu";
 import SearchTags from "./SearchTags";
 import FeedBackBox from "./FeedBackBox";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-
-import RefreshIcon from "@mui/icons-material/Refresh";
+import { API } from "@aws-amplify/api";
+import { getUserAttr, getIdToken } from "wasedatime-ui";
 
 const App = () => {
   return (
@@ -31,13 +31,36 @@ const InnerApp = () => {
   const { theme, setTheme } = React.useContext(ThemeContext);
   const [refresh, setRefresh] = useState(false);
   const [board, setBoard] = useState("");
+  const [commentNotify, setCommentNotify] = useState(false);
   const navigate = useNavigate();
 
   const handleReset = () => {
     navigate("/forum");
     setRefresh(!refresh);
   };
 
+  const fetchNotification = async () => {
+    let idToken = "";
+    if (idToken?.length <= 0) {
+      idToken = await getIdToken();
+      if (idToken?.length <= 0) return;
+    }
+    const res = await API.get("wasedatime-dev", `/forum/user`, {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: idToken,
+      },
+      response: true,
+    });
+
+    const commentFlag = res.data.data.new_comment_flag;
+    setCommentNotify(commentFlag);
+  };
+
+  useEffect(() => {
+    fetchNotification();
+  }, []);
+
   return (
     <>
       <div className="flex h-[67px] shrink-0 grow-0">
@@ -52,6 +75,8 @@ const InnerApp = () => {
           setTheme={setTheme}
           changeLang={(lng: string | undefined) => i18n.changeLanguage(lng)}
           boardSlug={board}
+          disabled={true}
+          commentNotify={commentNotify}
         />
       </div>
       <div className="flex flex-col h-[calc(100vh-50px)] mt-[23px]">

apps/forum/src/components/Board.tsx

@@ -7,7 +7,7 @@ import boards from "@app/constants/boards.json";
 import { currentSchoolState, currentTagsState } from "@app/recoil/atoms";
 import { API } from "@aws-amplify/api";
 import Thread from "@app/types/thread";
-import { getUserAttr } from "wasedatime-ui";
+import { getUserAttr, getIdToken } from "wasedatime-ui";
 import ThreadType from "@app/types/thread";
 import InfiniteScroll from "react-infinite-scroll-component";
 
@@ -78,7 +78,6 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
           setUserToken(userId);
         }
       }
-
       const apiPath = boardId
         ? // if board id exists, the db query has better efficiency
           `/forum?uid=${userId}&index=${index}&num=${threadCount}&school=${school}&tags=${tags}&board_id=${boardId}`

apps/forum/src/components/Comment.tsx

@@ -84,7 +84,6 @@ const Comment = ({ comment, thread, setComments, setThread }: Props) => {
   };
 
   const deleteComment = async () => {
-    console.log("Triggered!");
     try {
       const idToken = await getIdToken();
       if (!idToken || idToken.length === 0) {

apps/forum/src/components/CommentForm.tsx

@@ -24,10 +24,6 @@ const CommentForm: React.FC<CommentFormProps> = ({
   const { boardSlug, threadUuid } = useParams();
   const { t } = useTranslation();
 
-  useEffect(() => {
-    console.log(thread);
-  }, [thread]);
-
   const handleFocusForm = async () => {
     if (userToken?.length <= 0) {
       const idToken = await getIdToken();

apps/forum/src/components/CreateThread.tsx

@@ -226,7 +226,7 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
 
   return isExpanded ? (
     <div className="relative">
-      <div className="border-2 text-start text-black dark:text-white bg-light-card1 dark:bg-dark-bgMain dark:text-dark-text1 dark:shadow-none p-2 border-light-main dark:border-dark-main rounded-lg">
+      <div className="border-4 text-start text-black dark:text-white bg-light-card1 dark:bg-dark-bgMain dark:text-dark-text1 dark:shadow-none p-2 border-light-main dark:border-dark-main rounded-lg">
         <BoardDropdownMenu slug={boardSlug} />
         {/* <textarea
           placeholder={`Enter Title`}
@@ -320,7 +320,7 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
   ) : (
     <div>
       <div className="cursor-pointer" onClick={handleOpenForm}>
-        <h1 className="border-2 p-2 rounded-lg border-light-main">
+        <h1 className="border-4 p-2 rounded-lg border-light-main">
           Anything interesting?
         </h1>
       </div>

apps/forum/src/components/Thread.tsx

@@ -64,7 +64,7 @@ const Thread = () => {
 
   useEffect(() => {
     fetchData();
-  }, []);
+  }, [threadUuid, boardSlug]);
 
   const handleNewComment = (newComment: CommentType) => {
     setComments((prevComments) => [newComment, ...prevComments]);

apps/forum/src/components/ThreadBlock.tsx

@@ -242,7 +242,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
             </div> */}
         <hr className="mx-2 pt-2 mt-6" />
         <div className="flex flex-row justify-evenly pt-2 items-center">
-          <div className="flex flex-row items-center content-center">
+          <div className="flex flex-row items-center justify-center">
             <button onClick={handleLike} className="clipboard-icon group">
               <Favorite
                 color={userLiked ? "error" : undefined}
@@ -257,9 +257,12 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
               <span className="text-3xl">{totalLikes}</span>
             </h3>
           </div>
-          <h3>
-            <TextsmsIcon fontSize="large" />
-            <span>{"  "}</span>
+          <h3 className="flex flex-row items-center justify-center gap-2">
+            <TextsmsIcon
+              fontSize="large"
+              color={thread.new_comment && thread.mod ? "success" : "inherit"}
+            />
+            {/* <span>{"  "}</span> */}
             <span className="text-3xl">{thread.comment_count}</span>
           </h3>
           <button className="clipboard-icon group" onClick={handleShare}>
@@ -268,7 +271,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
               Link Copied!
             </span>
           </button>
-          <h3 className="items-center content-center justify-center">
+          <h3 className="flex flex-row items-center justify-center gap-2">
             <Visibility fontSize="large" />{" "}
             <span className="text-3xl">{thread.views}</span>
           </h3>

apps/forum/src/components/common/CommentNotification.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import NotificationsIcon from "@mui/icons-material/Notifications";
+import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive";
+
+type Props = {
+  commentNotify?: boolean;
+};
+
+const CommentNotification = ({ commentNotify }: Props) => {
+  return (
+    <div className="p-2 text-center flex items-center justify-center">
+      {commentNotify ? (
+        <NotificationsActiveIcon fontSize="large" color="error" />
+      ) : (
+        <NotificationsIcon fontSize="large" />
+      )}
+    </div>
+  );
+};
+
+export default CommentNotification;

apps/forum/src/components/common/Header.tsx

@@ -4,11 +4,12 @@ import { useNavigate } from "react-router-dom";
 
 import colors from "wasedatime-ui/colors";
 import LanguageMenu from "./LanguageMenu";
-import {sizes} from "wasedatime-ui"
+import { sizes } from "wasedatime-ui";
 import logo from "@app/assets/logo.svg";
 import { ThemeToggle } from "./ThemeToggle";
 import { THEME } from "@app/types/theme";
 import { SearchIcon } from "../icons/SearchIcon";
+import CommentNotification from "./CommentNotification";
 
 const headerStyle = (isBlur: boolean, theme: THEME) => {
   const lightBackgroundColor = isBlur ? "#FAFAFA30" : colors.light.bgSide;
@@ -92,6 +93,7 @@ type HeaderProps = {
   theme?: THEME;
   setTheme?: (theme: THEME) => void;
   onSearchBarClick?: () => void;
+  commentNotify: boolean;
 };
 
 const Header = ({
@@ -105,6 +107,7 @@ const Header = ({
   theme = THEME.LIGHT,
   setTheme,
   onSearchBarClick = () => {},
+  commentNotify,
 }: HeaderProps) => {
   let navigate = useNavigate();
   const [isInputExpanded, setIsInputExpanded] = useState(false);
@@ -181,6 +184,7 @@ const Header = ({
       </MediaQuery>
 
       <div style={headerMenuWrapperStyle}>
+        <CommentNotification commentNotify={commentNotify} />
         <ThemeToggle theme={theme} setTheme={setTheme} />
         <LanguageMenu changeLang={changeLang} />
       </div>

apps/forum/src/components/common/HeaderWithModal.tsx

@@ -15,6 +15,7 @@ type Props = {
   setTheme?: (theme: THEME) => void;
   onSearchBarClick?: () => void;
   boardSlug: string;
+  commentNotify: boolean;
 };
 
 const HeaderWithModal = ({
@@ -23,26 +24,27 @@ const HeaderWithModal = ({
   boardSlug,
   ...others
 }: Props) => {
-  const [isModalOpen, setModalOpen] = useState(false);
-  const [board, setBoard] = useState(boardSlug);
+  // const [isModalOpen, setModalOpen] = useState(false);
+  // const [board, setBoard] = useState(boardSlug);
 
-  useEffect(() => {
-    setBoard(boardSlug);
-  }, [boardSlug]);
+  // useEffect(() => {
+  //   setBoard(boardSlug);
+  // }, [boardSlug]);
 
-  const handleSearchBarClick = () => {
-    if (onSearchBarClick) onSearchBarClick();
-    setModalOpen(!isModalOpen);
-  };
+  // const handleSearchBarClick = () => {
+  //   if (onSearchBarClick) onSearchBarClick();
+  //   setModalOpen(!isModalOpen);
+  // };
 
   return (
     <>
-      <Header {...others} onSearchBarClick={handleSearchBarClick} />
-      {modal({
+      {/* <Header {...others} onSearchBarClick={handleSearchBarClick} /> */}
+      <Header {...others} />
+      {/* {modal({
         isShow: isModalOpen,
         closeModal: () => setModalOpen(false),
         boardSlug: board,
-      })}
+      })} */}
     </>
   );
 };

apps/forum/src/components/icons/CloseIcon.tsx

@@ -3,4 +3,4 @@ import React, { useState } from "react";
 import { Close } from "@mui/icons-material";
 // @mui/icons-material";
 
-export const CloseIcon = () => <Close fontSize="small" />;
+export const CloseIcon = () => <Close fontSize="large" />;

apps/forum/src/constants/locales/en/translation.json

@@ -2,5 +2,5 @@
   "navigation": {
     "forum": "Forum"
   },
-  "search placeholder": "Filter threads"
+  "search placeholder": "Under Development"
 }

apps/forum/src/constants/locales/ja/translation.json

@@ -2,5 +2,5 @@
   "navigation": {
     "forum": "掲示板"
   },
-  "search placeholder": "スレッド絞り込み"
-}
+  "search placeholder": "構築中"
+}

packages/ui/src/utils/user.ts

@@ -1,4 +1,4 @@
-import Auth from "@aws-amplify/auth"
+import { Auth } from "@aws-amplify/auth"
 import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types"
 
 export const configAuth = () => {