Merge pull request #189 from lizardkingLK/lizardkinglk

Lizardkinglk
lizardkingLK · Sep 13, 2023 · f6b0297 · f6b0297
2 parents 043f0c5 + 507bd4e
commit f6b0297
Show file tree

Hide file tree

Showing 68 changed files with 1,646 additions and 1,344 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80
+}
diff --git a/README.md b/README.md
@@ -15,9 +15,8 @@ An open-source chat application to learn real-time messaging.
 ## .env.local file to be added
 
 ```
-NEXT_PUBLIC_MESSAGE_STRATEGY=NEXT_PUBLIC_MESSAGE_STRATEGY[local|cloud]
+NEXT_PUBLIC_MESSAGING=NEXT_PUBLIC_MESSAGING[sockets]
 NEXT_PUBLIC_LOCAL_STORAGE=NEXT_PUBLIC_LOCAL_STORAGE[local|cloud]
-NEXT_PUBLIC_ABLY_API_KEY=YOUR_NEXT_PUBLIC_ABLY_API_KEY
 NEXT_PUBLIC_SUPABASE_URL=YOUR_NEXT_PUBLIC_SUPABASE_URL
 NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_NEXT_PUBLIC_SUPABASE_ANON_KEY
 NEXT_PUBLIC_DATABASE_URL=YOUR_NEXT_PUBLIC_DATABASE_URL

diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx
@@ -1,6 +1,6 @@
-import React, { Fragment, useState } from "react";
-import Image from "next/image";
-import { IAvatarProps } from "@/types";
+import React, { Fragment, useState } from 'react';
+import Image from 'next/image';
+import { IAvatarProps } from '@/types';
 
 const Avatar = (props: IAvatarProps) => {
   const [loading, setLoading] = useState(true);
@@ -10,19 +10,19 @@ const Avatar = (props: IAvatarProps) => {
       <Fragment>
         <div
           className={`flex justify-center items-center flex-wrap rounded-full ml-2
-        ${loading ? "blur-xl" : "blur-0"}
-        ${isStatus ? "p-1 border-2 border-stone-500" : ""}
-        ${size === 50 ? "w-10" : "w-12"}`}
+        ${loading ? 'blur-xl' : 'blur-0'}
+        ${isStatus ? 'p-1 border-2 border-stone-500' : ''}
+        ${size === 50 ? 'w-10' : 'w-12'}`}
         >
           <Image
             className="rounded-full"
             width={size}
             height={size}
-            src={imagePath ?? "/favicon.png"}
+            src={imagePath ?? '/favicon.png'}
             alt={name}
             title={name}
             priority={true}
-            blurDataURL={"/favicon.png"}
+            blurDataURL={'/favicon.png'}
             onLoadingComplete={() => setLoading(false)}
           />
           {isOnline ? (

diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -1,13 +1,16 @@
-import React from 'react'
+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>
-    )
-}
+  const { text, tooltip } = props;
+  return (
+    <span
+      title={tooltip}
+      className="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300"
+    >
+      {text}
+    </span>
+  );
+};
 
-export default Badge
+export default Badge;
diff --git a/components/cards/message/index.tsx b/components/cards/message/index.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from "react";
-import Avatar from "@/components/avatar";
-import { messageTypes } from "@/utils/enums";
-import { IMessageCardProps } from "@/types";
-import MessageMedia from "@/components/media/message";
-import VerticalEllipsis from "@/components/svgs/ellipsis/vertical";
-import MessageMenu from "@/components/menus/message";
-import Close from "@/components/svgs/close";
-import { isImage } from "@/utils/helpers";
+import React, { useState } from 'react';
+import Avatar from '@/components/avatar';
+import { messageTypes } from '@/utils/enums';
+import { IMessageCardProps } from '@/types';
+import MessageMedia from '@/components/media/message';
+import VerticalEllipsis from '@/components/svgs/ellipsis/vertical';
+import MessageMenu from '@/components/menus/message';
+import Close from '@/components/svgs/close';
+import { isImage } from '@/utils/helpers';
 
 export default function MessageCard(props: IMessageCardProps) {
   const [options, setOptions] = useState(false);
@@ -26,7 +26,7 @@ export default function MessageCard(props: IMessageCardProps) {
     } = props;
 
     return (
-      <div className={`flex ${type === messageTypes.SENT && "justify-end"}`}>
+      <div className={`flex ${type === messageTypes.SENT && 'justify-end'}`}>
         {messageAuthorName && type === messageTypes.RECEIVED ? (
           <div className="hidden md:flex flex-col justify-start items-center mt-4">
             <Avatar
@@ -50,29 +50,35 @@ export default function MessageCard(props: IMessageCardProps) {
         ) : (
           <div
             title={messageTime}
-            className={`my-4 min-w-max rounded-xl ${isImage(content) ? "bg-transparent" : "p-4 bg-gradient-to-r"} ${type === messageTypes.RECEIVED
-              ? "from-green-400 ml-2 to-green-500 rounded-tl-none cursor-pointer"
-              : "from-stone-400 to-stone-500 rounded-tr-none cursor-pointer text-right"
-              }`}
+            className={`my-4 min-w-max rounded-xl ${
+              isImage(content) ? 'bg-transparent' : 'p-4 bg-gradient-to-r'
+            } ${
+              type === messageTypes.RECEIVED
+                ? 'from-green-400 ml-2 to-green-500 rounded-tl-none cursor-pointer'
+                : 'from-stone-400 to-stone-500 rounded-tr-none cursor-pointer text-right'
+            }`}
           >
             <MessageMedia content={content} />
           </div>
         )}
-        {type === messageTypes.SENT && (
-          options ? <button
-            className="flex h-min mt-4 text-stone-100 hover:text-stone-100"
-            title="Close Message Options"
-            onClick={() => setOptions((prev) => !prev)}
-          >
-            <Close size={6} />
-          </button> : <button
-            className="flex h-min mt-4 text-stone-900 hover:text-stone-100"
-            title="Message Options"
-            onClick={() => setOptions((prev) => !prev)}
-          >
-            <VerticalEllipsis />
-          </button>
-        )}
+        {type === messageTypes.SENT &&
+          (options ? (
+            <button
+              className="flex h-min mt-4 text-stone-100 hover:text-stone-100"
+              title="Close Message Options"
+              onClick={() => setOptions((prev) => !prev)}
+            >
+              <Close size={6} />
+            </button>
+          ) : (
+            <button
+              className="flex h-min mt-4 text-stone-900 hover:text-stone-100"
+              title="Message Options"
+              onClick={() => setOptions((prev) => !prev)}
+            >
+              <VerticalEllipsis />
+            </button>
+          ))}
       </div>
     );
   } else return null;

diff --git a/components/cards/summary/index.tsx b/components/cards/summary/index.tsx
@@ -1,8 +1,8 @@
-import React from "react";
-import { ISummaryCardContentProps, ISummaryCardProps } from "@/types";
-import { cardBodyTypes } from "@/utils/enums";
-import { formatCompactNumber } from "@/utils/helpers";
-import SummaryCardLayout from "./layout";
+import React from 'react';
+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) {
@@ -13,42 +13,45 @@ const SummaryCard = (props: ISummaryCardProps) => {
       cardHeaderContent,
       cardBodyType,
       cardBodyContent,
+      cardBodyStyle,
       cardBodyLongContent,
       cardFooterContent,
       cardClickEvent,
       cardTooltip,
     } = props;
 
     return (
-      <SummaryCardLayout style={cardStyle} type={cardType} typeData={{ clickEvent: cardClickEvent }} tooltip={cardTooltip}>
+      <SummaryCardLayout
+        style={cardStyle}
+        type={cardType}
+        typeData={{ clickEvent: cardClickEvent }}
+        tooltip={cardTooltip}
+      >
         {cardHeaderTitle && (
-          <div className="p-2 flex justify-between">
+          <div className="p-2 flex justify-between items-center">
             <h1 className="text-lg font-bold">{cardHeaderTitle}</h1>
-            <h1 className="text-lg font-bold">{cardHeaderContent}</h1>
+            {cardHeaderContent}
           </div>
         )}
         <div className="p-4">
           <SummaryContent
             cardBodyType={cardBodyType}
             cardBodyContent={cardBodyContent}
             cardBodyLongContent={cardBodyLongContent}
+            cardBodyStyle={cardBodyStyle}
           />
-          {cardFooterContent &&
-            <div className="pt-2 flex justify-end">
-              {cardFooterContent}
-            </div>}
+          {cardFooterContent && (
+            <div className="pt-2 flex justify-end">{cardFooterContent}</div>
+          )}
         </div>
       </SummaryCardLayout>
     );
   } else return null;
 };
 
 const SummaryContent = (props: ISummaryCardContentProps) => {
-  const {
-    cardBodyType,
-    cardBodyContent,
-    cardBodyLongContent,
-  } = props;
+  const { cardBodyType, cardBodyContent, cardBodyStyle, cardBodyLongContent } =
+    props;
   if (cardBodyType === cardBodyTypes.NUMBER) {
     return (
       <h1 title={cardBodyContent.toString()} className="text-5xl font-bold">
@@ -64,9 +67,12 @@ const SummaryContent = (props: ISummaryCardContentProps) => {
         {cardBodyContent}
       </h1>
     );
-  } else if (cardBodyType === cardBodyTypes.ELEMENT && typeof cardBodyContent === "object") {
+  } else if (
+    cardBodyType === cardBodyTypes.ELEMENT &&
+    typeof cardBodyContent === 'object'
+  ) {
     return (
-      <div title={cardBodyLongContent}>
+      <div className={cardBodyStyle ?? ''} title={cardBodyLongContent}>
         {cardBodyContent}
       </div>
     );

diff --git a/components/cards/summary/layout.tsx b/components/cards/summary/layout.tsx
@@ -1,22 +1,18 @@
-import { ISummaryCardLayoutProps } from '@/types'
+import { ISummaryCardLayoutProps } from '@/types';
 import { elementType } from '@/utils/enums';
-import React from 'react'
+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>
-        )
-    }
-}
+  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
+export default SummaryCardLayout;
diff --git a/components/cards/user/index.tsx b/components/cards/user/index.tsx
@@ -1,8 +1,8 @@
-import Avatar from "@/components/avatar";
-import Spinner from "@/components/svgs/spinner";
-import { IUserCardProps } from "@/types";
-import { resourcePaths } from "@/utils/enums";
-import React from "react";
+import Avatar from '@/components/avatar';
+import Spinner from '@/components/svgs/spinner';
+import { IUserCardProps } from '@/types';
+import { resourcePaths } from '@/utils/enums';
+import React from 'react';
 
 const UserCard = (props: IUserCardProps) => {
   if (props) {

diff --git a/components/dialog/index.tsx b/components/dialog/index.tsx
@@ -1,6 +1,6 @@
-import React from "react";
-import Close from "../svgs/close";
-import { IDialogProps } from "@/types";
+import React from 'react';
+import Close from '../svgs/close';
+import { IDialogProps } from '@/types';
 
 const Dialog = (props: IDialogProps) => {
   if (props) {

diff --git a/components/feeds/index.tsx b/components/feeds/index.tsx
@@ -1,13 +1,13 @@
-import React, { Fragment } from "react";
-import Avatar from "@/components/avatar";
-import { IFeedListProps } from "@/types";
+import React, { Fragment } from 'react';
+import Avatar from '@/components/avatar';
+import { IFeedListProps } from '@/types';
 
 const FeedList = (props: IFeedListProps) => {
   if (props) {
     const { feeds } = props;
     return (
       <Fragment>
-        {feeds?.map(feed => (
+        {feeds?.map((feed) => (
           <button key={feed.id}>
             <Avatar
               name={feed.name}

diff --git a/components/forms/message/index.tsx b/components/forms/message/index.tsx
@@ -1,12 +1,12 @@
-import React, { Fragment, useRef, useState } from "react";
-import { IMessageEditorProps } from "@/types";
-import Send from "@/components/svgs/send";
-import Emoji from "@/components/svgs/emoji";
-import Attachment from "@/components/svgs/attachment";
-import BrowseMedia from "@/components/media/browse";
-import Upload from "@/components/svgs/upload/upload";
-import Clear from "@/components/svgs/clear";
-import Dialog from "@/components/dialog";
+import React, { Fragment, useRef, useState } from 'react';
+import { IMessageEditorProps } from '@/types';
+import Send from '@/components/svgs/send';
+import Emoji from '@/components/svgs/emoji';
+import Attachment from '@/components/svgs/attachment';
+import BrowseMedia from '@/components/media/browse';
+import Upload from '@/components/svgs/upload/upload';
+import Clear from '@/components/svgs/clear';
+import Dialog from '@/components/dialog';
 
 const MessageEditor = (props: IMessageEditorProps) => {
   const [mediaModal, setMediaModal] = useState(false);
@@ -60,8 +60,8 @@ const MessageEditor = (props: IMessageEditorProps) => {
           {mediaModal && (
             <Dialog
               dialogRef={attachmentRef}
-              dialogTitle={"Send Attachment"}
-              dialogSubtitle={"Attachment"}
+              dialogTitle={'Send Attachment'}
+              dialogSubtitle={'Attachment'}
               dialogCloseHandler={mediaCloseHandler}
             >
               {file && type ? (
@@ -70,7 +70,7 @@ const MessageEditor = (props: IMessageEditorProps) => {
                     <BrowseMedia
                       type={type}
                       pictureProps={{
-                        alt: "preview",
+                        alt: 'preview',
                         height: 150,
                         width: 150,
                         src: URL.createObjectURL(file),
@@ -134,7 +134,7 @@ const MessageEditor = (props: IMessageEditorProps) => {
             />
             <button
               className={`p-4 rounded-r-full bg-stone-900 ${
-                mediaModal ? "text-green-500" : "text-white"
+                mediaModal ? 'text-green-500' : 'text-white'
               } hover:text-green-500`}
               title="Send Media"
               onClick={() => setMediaModal(!mediaModal)}