merge latest with unread in dashboard function. navigation to group w…

…hen user click latest. minor ui tweaks.

components/badge/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { IBadgeProps } from '@/types';
+
+const Badge = (props: IBadgeProps) => {
+    const { text, tooltip } = props;
+    return (
+        <span title={tooltip} className="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">
+            {text}
+        </span>
+    )
+}
+
+export default Badge

components/cards/summary/index.tsx

@@ -1,58 +1,75 @@
 import React from "react";
-import { ISummaryCardProps } from "@/types";
+import { ISummaryCardContentProps, ISummaryCardProps } from "@/types";
 import { cardBodyTypes } from "@/utils/enums";
 import { formatCompactNumber } from "@/utils/helpers";
+import SummaryCardLayout from "./layout";
 
 const SummaryCard = (props: ISummaryCardProps) => {
   if (props) {
     const {
       cardStyle,
+      cardType,
       cardHeaderTitle,
       cardHeaderContent,
       cardBodyType,
       cardBodyContent,
+      cardBodyLongContent,
+      cardFooterContent,
+      cardClickEvent,
+      cardTooltip,
     } = props;
+
     return (
-      <div className={cardStyle}>
-        <div className="p-2 flex justify-between">
-          <h1 className="text-lg font-bold">{cardHeaderTitle}</h1>
-          <h1 className="text-lg font-bold">{cardHeaderContent}</h1>
-        </div>
+      <SummaryCardLayout style={cardStyle} type={cardType} typeData={{ clickEvent: cardClickEvent }} tooltip={cardTooltip}>
+        {cardHeaderTitle && (
+          <div className="p-2 flex justify-between">
+            <h1 className="text-lg font-bold">{cardHeaderTitle}</h1>
+            <h1 className="text-lg font-bold">{cardHeaderContent}</h1>
+          </div>
+        )}
         <div className="p-4">
           <SummaryContent
             cardBodyType={cardBodyType}
             cardBodyContent={cardBodyContent}
+            cardBodyLongContent={cardBodyLongContent}
           />
+          {cardFooterContent &&
+            <div className="pt-2 flex justify-end">
+              {cardFooterContent}
+            </div>}
         </div>
-      </div>
+      </SummaryCardLayout>
     );
   } else return null;
 };
 
-const SummaryContent = ({
-  cardBodyType,
-  cardBodyContent,
-}: {
-  cardBodyType: number;
-  cardBodyContent: any;
-}) => {
+const SummaryContent = (props: ISummaryCardContentProps) => {
+  const {
+    cardBodyType,
+    cardBodyContent,
+    cardBodyLongContent,
+  } = props;
   if (cardBodyType === cardBodyTypes.NUMBER) {
     return (
-      <h1 title={cardBodyContent} className="text-5xl font-bold">
-        {formatCompactNumber(cardBodyContent)}
+      <h1 title={cardBodyContent.toString()} className="text-5xl font-bold">
+        {formatCompactNumber(cardBodyContent.toString())}
       </h1>
     );
   } else if (cardBodyType === cardBodyTypes.STRING) {
     return (
       <h1
-        title={cardBodyContent}
+        title={cardBodyLongContent}
         className="text-sm h-20 overflow-hidden w-full font-bold"
       >
         {cardBodyContent}
       </h1>
     );
-  } else if (cardBodyType === cardBodyTypes.ELEMENT) {
-    return cardBodyContent;
+  } else if (cardBodyType === cardBodyTypes.ELEMENT && typeof cardBodyContent === "object") {
+    return (
+      <div title={cardBodyLongContent}>
+        {cardBodyContent}
+      </div>
+    );
   } else return null;
 };
 

components/cards/summary/layout.tsx

@@ -0,0 +1,22 @@
+import { ISummaryCardLayoutProps } from '@/types'
+import { elementType } from '@/utils/enums';
+import React from 'react'
+
+const SummaryCardLayout = (props: ISummaryCardLayoutProps) => {
+    const { type, style, typeData, tooltip, children } = props;
+    if (type === elementType.button) {
+        return (
+            <button className={style} onClick={typeData.clickEvent} title={tooltip}>
+                {children}
+            </button>
+        );
+    } else {
+        return (
+            <div className={style}>
+                {children}
+            </div>
+        )
+    }
+}
+
+export default SummaryCardLayout

components/sections/dashboard/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import SectionLayout from "../layout";
 import SummaryCard from "@/components/cards/summary";
-import { cardBodyTypes } from "@/utils/enums";
+import { cardBodyTypes, elementType } from "@/utils/enums";
 import Avatar from "@/components/avatar";
 import { IDashboardProps, IGroupProps, ILatestMessageProps } from "@/types";
 import { getBriefContent, isImage } from "@/utils/helpers";
+import Badge from "@/components/badge";
 
 const Dashboard = (props: IDashboardProps) => {
   const [groups] = useState<IGroupProps[] | null>(props.groups);
@@ -33,8 +34,8 @@ const Dashboard = (props: IDashboardProps) => {
       const message = props?.groups
         ?.map((g) => g.lastMessage)
         .sort((mA, mB) => Date.parse(mB?.createdOn) - Date.parse(mA?.createdOn))
-        .at(0);
-      const group = props?.groups?.find((g) => g.id === message?.groupId);
+        .at(0),
+        group = props?.groups?.find((g) => g.id === message?.groupId && g.unreadCount > 0);
       return group && message ? Object.assign(message, {
         displayImage: group?.displayImage!,
         groupName: group?.name!
@@ -43,30 +44,32 @@ const Dashboard = (props: IDashboardProps) => {
   }, [props]);
 
   if (props) {
+    const name = user?.firstName ?? user?.username, gridCols = online || unread ? 3 : 2;
+
     return (
       <SectionLayout>
         <div className="p-4">
           <div className="flex justify-between items-center w-full">
             <h1 className="text-2xl text-white font-bold" id="textGreeting">
               Hello{" "}
               <span className="text-green-400">
-                {user?.firstName ?? user?.username}
+                {name}
               </span>
             </h1>
           </div>
-          <div className={`pt-4 grid grid-flow-row-dense grid-cols-${online || unread ? 3 : 2} grid-rows-3 gap-2`}>
+          <div className={`pt-4 grid grid-flow-row-dense grid-cols-${gridCols} grid-rows-3 gap-2`}>
             {groups && (
               <SummaryCard
-                cardStyle={
-                  "bg-gradient-to-r from-stone-500 to-stone-400 text-white rounded-md"
-                }
+                cardType={elementType.div}
+                cardStyle={"bg-gradient-to-r from-stone-500 to-stone-400 text-white rounded-md"}
                 cardHeaderTitle={"Groups"}
                 cardBodyType={cardBodyTypes.NUMBER}
                 cardBodyContent={groups?.length}
               />
             )}
             {friends && (
               <SummaryCard
+                cardType={elementType.div}
                 cardStyle={"bg-stone-400 text-white rounded-md"}
                 cardHeaderTitle={"Friends"}
                 cardBodyType={cardBodyTypes.NUMBER}
@@ -75,6 +78,7 @@ const Dashboard = (props: IDashboardProps) => {
             )}
             {online && (
               <SummaryCard
+                cardType={elementType.div}
                 cardStyle={"bg-stone-400 text-white rounded-md"}
                 cardHeaderTitle={"Online"}
                 cardBodyType={cardBodyTypes.NUMBER}
@@ -83,7 +87,8 @@ const Dashboard = (props: IDashboardProps) => {
             )}
             {latest && (
               <SummaryCard
-                cardStyle={"bg-green-600 text-white rounded-md col-span-2 w-64"}
+                cardType={elementType.button}
+                cardStyle={"bg-gradient-to-r from-green-700 to-green-500 text-white rounded-md col-span-2 w-72"}
                 cardHeaderTitle={"Latest"}
                 cardHeaderContent={
                   <Avatar
@@ -93,19 +98,23 @@ const Dashboard = (props: IDashboardProps) => {
                     isStatus={false}
                   />
                 }
-                cardBodyType={cardBodyTypes.STRING}
+                cardBodyType={cardBodyTypes.ELEMENT}
                 cardBodyContent={
-                  isImage(latest.content)
-                    ? "Image"
-                    : getBriefContent(latest.content)
+                  <h1 className="text-xl font-bold">
+                    {isImage(latest.content) ? "Image" : getBriefContent(latest.content)}
+                  </h1>
                 }
+                cardBodyLongContent={latest.content}
+                cardFooterContent={
+                  <Badge text={latest.createdOn} tooltip={latest.createdOn} />
+                }
+                cardClickEvent={() => props.onSelectGroupHandler(latest.groupId)}
               />
             )}
             {unread && (
               <SummaryCard
-                cardStyle={
-                  "bg-gradient-to-r from-green-500 to-green-400 text-white rounded-md"
-                }
+                cardType={elementType.div}
+                cardStyle={"bg-gradient-to-r from-green-500 to-green-400 text-white rounded-md"}
                 cardHeaderTitle={"Unread"}
                 cardBodyType={cardBodyTypes.NUMBER}
                 cardBodyContent={unread}

components/sections/index.tsx

@@ -54,7 +54,7 @@ const SectionSwitch = (props: ISecitonSwitchProps) => {
     } else if (section === sections.home) {
       return (
         <div className="hidden md:flex h-screen items-center justify-center md:md:w-full">
-          <Dashboard groups={groups} user={user} notifs={notifs} />
+          <Dashboard groups={groups} user={user} notifs={notifs} onSelectGroupHandler={onSelectGroupHandler} />
         </div>
       );
     } else if (section === sections.addFriend) {

components/sections/introduction/index.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import SectionLayout from "../layout";
 import SummaryCard from "@/components/cards/summary";
-import { cardBodyTypes, sections } from "@/utils/enums";
+import { cardBodyTypes, elementType, sections } from "@/utils/enums";
 import { IIntroductionProps } from "@/types";
-import ButtonCard from "@/components/cards/button";
 import Avatar from "@/components/avatar";
 import { getBriefContent, writeContentToClipboard } from "@/utils/helpers";
 
@@ -23,37 +22,32 @@ const Introduction = (props: IIntroductionProps) => {
             </h1>
           </div>
           <div className="pt-4 grid grid-flow-row-dense grid-cols-1 grid-rows-3 gap-2">
-            <ButtonCard
-              cardStyle={
-                "bg-gradient-to-r from-stone-500 to-stone-400 text-white rounded-md hover:bg-gradient-to-r hover:from-green-500 hover:to-green-400"
-              }
-              cardHeaderTitle={"Add Friend"}
-              cardOnClick={() => setSection(sections.addFriend)}
-              cardTooltip={"Add Friend to Chat"}
+            <SummaryCard
+              cardStyle={"bg-gradient-to-r from-stone-500 to-stone-400 text-white rounded-md hover:bg-gradient-to-r hover:from-green-500 hover:to-green-400"}
+              cardBodyType={cardBodyTypes.ELEMENT}
+              cardBodyContent={<h1 className="text-2xl font-bold">Add Friend</h1>}
+              cardClickEvent={() => setSection(sections.addFriend)}
+              cardType={elementType.button}
+              cardTooltip="Add Friend"
             />
             <SummaryCard
-              cardStyle={
-                "bg-gradient-to-r from-green-500 to-green-400 text-white rounded-md"
-              }
+              cardStyle={"bg-gradient-to-r from-green-500 to-green-400 text-white rounded-md"}
               cardHeaderTitle={"User"}
               cardBodyType={cardBodyTypes.ELEMENT}
-              cardBodyContent={
-                <button title="Click to Copy" onClick={() => writeContentToClipboard(user?.emailAddresses?.at(0)?.emailAddress)}
-                  className="text-stone-100 rounded-full p-2 bg-gradient-to-b from-green-400 to-green-500 shadow-sm text-ellipsis overflow-hidden">
-                  <h1>
-                    {getBriefContent(user?.emailAddresses?.at(0)?.emailAddress)}
-                  </h1>
-                </button>
+              cardBodyContent={<button title="Click to Copy" onClick={() => writeContentToClipboard(user?.emailAddresses?.at(0)?.emailAddress)}
+                className="text-stone-100 rounded-full p-2 bg-gradient-to-b from-green-400 to-green-500 shadow-sm text-ellipsis overflow-hidden">
+                <h1>
+                  {getBriefContent(user?.emailAddresses?.at(0)?.emailAddress)}
+                </h1>
+              </button>
               }
-              cardHeaderContent={
-                <Avatar
-                  imagePath={user?.imageUrl}
-                  size={60}
-                  name={user?.firstName ?? user?.username}
-                  isStatus={false}
-                  isOnline={true}
-                />
-              } />
+              cardHeaderContent={<Avatar
+                imagePath={user?.imageUrl}
+                size={60}
+                name={user?.firstName ?? user?.username}
+                isStatus={false}
+                isOnline={true} />}
+              cardType={elementType.div} />
           </div>
         </div>
       </SectionLayout>

pages/index.tsx

@@ -45,7 +45,6 @@ import {
   saveFile,
   updateUnread,
 } from "@/utils/http";
-import Head from "next/head";
 
 let socket: Socket<DefaultEventsMap, DefaultEventsMap>;