feat: adding thread notification

apps/feeds/components/FeedLink.tsx

@@ -5,7 +5,7 @@ import Grid from "@mui/material/Grid"
 import Card from "@mui/material/Card"
 import CardActionArea from "@mui/material/CardActionArea"
 import CardContent from "@mui/material/CardContent"
-import Image from 'next/image'
+import Image from "next/image"
 import React, { useEffect, useState } from "react"
 import { FeedInfo } from "../constants/types"
 import { Lang, LangMap } from "../constants/langs"
@@ -38,14 +38,14 @@ const FeedLink = ({ name, feed, locale }: Props) => {
         }
       }
     }
-    console.log(coverImg);
+
     setCover(coverImg)
   }, [])
 
   return (
     <Grid item xs={12} md={6}>
       <CardActionArea component="span">
-      <Link
+        <Link
           href={
             (process.env.APP_ENV === "production" ? "/feeds/" : "") +
             locale +
@@ -113,8 +113,10 @@ const FeedLink = ({ name, feed, locale }: Props) => {
                 </p>
               </CardContent>
             </div>
-            <div className="w-1/2 h-48 relative">
-              {cover && <Image src={cover} alt="Feed Cover Image" layout="responsive" />}
+            <div className="relative h-48 w-1/2">
+              {cover && (
+                <Image src={cover} alt="Feed Cover Image" layout="responsive" />
+              )}
             </div>
           </Card>
         </Link>

apps/forum/src/components/App.tsx

@@ -12,6 +12,7 @@ import FeedBackBox from "./FeedBackBox";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { API } from "@aws-amplify/api";
 import { getUserAttr, getIdToken, LoadingSpinner } from "wasedatime-ui";
+import { storeDate } from "@app/utils/storeDate";
 
 const App = () => {
   return (
@@ -67,6 +68,7 @@ const InnerApp = () => {
 
   useEffect(() => {
     fetchNotification();
+    storeDate();
   }, []);
 
   return (

apps/forum/src/utils/getDate.ts

@@ -0,0 +1,15 @@
+export const getCurrentDateInJST = () => {
+  const date = new Date();
+  const jstOffset = 9 * 60; // JST is UTC+9
+  const localOffset = date.getTimezoneOffset();
+  date.setMinutes(date.getMinutes() + localOffset + jstOffset);
+
+  const YYYY = date.getFullYear();
+  const MM = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-based
+  const DD = String(date.getDate()).padStart(2, "0");
+  const HH = String(date.getHours()).padStart(2, "0");
+  const mm = String(date.getMinutes()).padStart(2, "0");
+  const SS = String(date.getSeconds()).padStart(2, "0");
+
+  return `${YYYY}${MM}${DD}${HH}${mm}${SS}`;
+};

apps/forum/src/utils/storeDate.ts

@@ -0,0 +1,14 @@
+import { getCurrentDateInJST } from "./getDate";
+
+export const storeDate = () => {
+  const storedDateInJST = localStorage.getItem("lastCheckedDateJST");
+  const currentDateInJST = getCurrentDateInJST();
+
+  if (!storedDateInJST) {
+    // If there's no stored date, set the current date to local storage.
+    localStorage.setItem("lastCheckedDateJST", currentDateInJST);
+  } else if (storedDateInJST !== currentDateInJST) {
+    // If the stored date and the current date are different, update the stored date.
+    localStorage.setItem("lastCheckedDateJST", currentDateInJST);
+  }
+};

apps/root/package.json

@@ -56,6 +56,7 @@
     "vite-plugin-pwa": "0.12.0"
   },
   "dependencies": {
+    "@aws-amplify/api": "4.0.42",
     "@aws-amplify/auth": "4.5.6",
     "@aws-amplify/core": "4.5.6",
     "@emotion/react": "11.9.0",

apps/root/src/components/aboutUs/MeetOurTeam/MeetOurTeam.tsx

@@ -35,10 +35,6 @@ const MeetOurTeam = () => {
   const { t } = useTranslation()
   const [activeCardName, setActiveCardName] = useState("")
 
-  useEffect(() => {
-    console.log(activeCardName)
-  }, [activeCardName])
-
   return (
     <Wrapper>
       <Title className="mt-3.5 mb-2.5 text-3xl text-light-text1 dark:text-dark-text1 sm:my-5 sm:text-4xl 2xl:text-5xl">

apps/root/src/components/block/IconTextGroup.tsx

@@ -19,6 +19,7 @@ interface IconTextGroupProps {
   iconPath?: string
   expanded?: boolean
   currentPath?: string
+  tooltip?: string
 }
 
 const NavItemBlock = styled.div<NavItemBlockProps>`
@@ -62,6 +63,7 @@ export const IconTextGroup = ({
   iconPath,
   expanded,
   currentPath,
+  tooltip,
 }: IconTextGroupProps) => {
   const [isHover, setIsHover] = useState(false)
   return (
@@ -72,17 +74,27 @@ export const IconTextGroup = ({
       onMouseOver={() => setIsHover(true)}
       onMouseOut={() => setIsHover(false)}
     >
-      <div className="text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1">
-        {isHover && hoverIcon ? hoverIcon : icon}
+      <div className="relative inline-flex items-center">
+        {" "}
+        {/* This is the wrapper */}
+        <div className="text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1">
+          {isHover && hoverIcon ? hoverIcon : icon}
+        </div>
+        {text && (
+          <NavItemText
+            className="ml-2 text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1" // added ml-2 for spacing
+            expanded={expanded}
+          >
+            {text}
+          </NavItemText>
+        )}
+        {/* Tooltip rendering */}
+        {tooltip && expanded && (
+          <span className="absolute top-1/2 left-full z-10 ml-2 w-auto -translate-y-1/2 transform whitespace-nowrap rounded bg-light-main px-3 py-2 text-xl text-dark-text1 dark:bg-dark-main">
+            {tooltip}
+          </span>
+        )}
       </div>
-      {text && (
-        <NavItemText
-          className="text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1"
-          expanded={expanded}
-        >
-          {text}
-        </NavItemText>
-      )}
     </NavItemBlock>
   )
 }

apps/root/src/components/frame/MobileNav.tsx

@@ -27,11 +27,18 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
       className="flex-1 text-center"
       customOnClick={() => setCurrentPath(item.path)}
     >
-      <div className="text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1">
-        {item.icon}
-      </div>
-      <div className="text-lg text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1">
-        {item.name}
+      <div className="relative">
+        <div className="text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1">
+          {item.icon}
+        </div>
+        <div className="text-lg text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1">
+          {item.name}
+        </div>
+        {item.tooltip && (
+          <span className="absolute top-0 left-1/2 z-10 -translate-x-1/2 -translate-y-full transform whitespace-nowrap rounded bg-light-main px-3 py-2 text-lg text-dark-text1 dark:bg-dark-main">
+            {item.tooltip}
+          </span>
+        )}
       </div>
     </LinkOutsideRouter>
   ))