Merge pull request #193 from lizardkingLK/lizardkinglk

Lizardkinglk
lizardkingLK · Sep 21, 2023 · 06321de · 06321de
2 parents ae6e6d2 + 381afb5
commit 06321de
Show file tree

Hide file tree

Showing 13 changed files with 275 additions and 69 deletions.
diff --git a/components/forms/message/buttons/Submit.tsx b/components/forms/message/buttons/Submit.tsx
@@ -0,0 +1,38 @@
+import Close from '@/components/svgs/close';
+import Send from '@/components/svgs/send';
+import { IUIProps } from '@/types';
+import { actions } from '@/utils/enums';
+import React from 'react';
+
+const SubmitButton = (props: {
+  context: actions;
+  onSubmitHandler: Function;
+  ui: IUIProps;
+}) => {
+  const { context, onSubmitHandler, ui } = props;
+  if (context === actions.create || context === actions.edit) {
+    return (
+      <button
+        type="submit"
+        className="p-2 md:p-4 rounded-r-full bg-green-500 hover:bg-green-600 text-white"
+        title="Send Message"
+        onClick={() => onSubmitHandler(context)}
+      >
+        <Send size={ui.iconSize} />
+      </button>
+    );
+  } else if (context === actions.beforeEdit) {
+    return (
+      <button
+        type="submit"
+        className="p-2 md:p-4 rounded-r-full bg-green-500 hover:bg-green-600 text-white"
+        title="Cancel Edit"
+        onClick={() => onSubmitHandler(context)}
+      >
+        <Close size={ui.iconSize} />
+      </button>
+    );
+  } else return null;
+};
+
+export default SubmitButton;
diff --git a/components/forms/message/index.tsx b/components/forms/message/index.tsx
@@ -1,12 +1,14 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { IMessageEditorProps } from '@/types';
+import { IMessageEditorProps, IUIProps } 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 { actions } from '@/utils/enums';
+import SubmitButton from './buttons/Submit';
 
 const useWidth = () => {
   const [width, setWidth] = useState(window.innerWidth);
@@ -23,16 +25,14 @@ const MessageEditor = (props: IMessageEditorProps) => {
   const [files, setFiles] = useState(null);
   const [file, setFile] = useState(null);
   const [type, setType] = useState(null);
-  const [ui, setUi] = useState({ iconSize: 0, iconPadding: 0 });
+  const [ui, setUi] = useState<IUIProps>({ iconSize: 0, iconPadding: 0 });
 
   const width = useWidth();
 
   useEffect(() => {
     setUi({ iconSize: width < 768 ? 6 : 7, iconPadding: 0 });
   }, [width]);
 
-  console.log(width);
-
   if (props) {
     const {
       group,
@@ -43,6 +43,7 @@ const MessageEditor = (props: IMessageEditorProps) => {
       onSubmitHandler,
       onMediaHandler,
       textInputRef,
+      context,
     } = props;
 
     const mediaHandler = (event: any) => {
@@ -161,14 +162,11 @@ const MessageEditor = (props: IMessageEditorProps) => {
             >
               <Attachment size={ui.iconSize} />
             </button>
-            <button
-              type="submit"
-              className="p-2 md:p-4 rounded-r-full bg-green-500 hover:bg-green-600 text-white"
-              title="Send Message"
-              onClick={onSubmitHandler}
-            >
-              <Send size={ui.iconSize} />
-            </button>
+            <SubmitButton
+              context={context}
+              onSubmitHandler={onSubmitHandler}
+              ui={ui}
+            />
           </div>
         </Fragment>
       )

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -25,7 +25,7 @@ const LayoutSwitch = (props: ILayoutProps) => {
                 </button>
               )}
               {!navbar && (
-                <h1 className="ml-4 md:ml-2 text-3xl text-center md:text-left text-white font-bold">
+                <h1 className="text-3xl text-center md:text-left text-white font-bold">
                   OREO
                 </h1>
               )}

diff --git a/components/sections/group/index.tsx b/components/sections/group/index.tsx
@@ -31,6 +31,7 @@ const Group = (props: IGroupSectionProps) => {
       navbar,
       forward,
       setForward,
+      context,
     } = props;
     return (
       <Fragment>
@@ -89,6 +90,7 @@ const Group = (props: IGroupSectionProps) => {
             onSubmitHandler={onSubmitHandler}
             onMediaHandler={onMediaHandler}
             textInputRef={textInputRef}
+            context={context}
           />
         </div>
       </Fragment>

diff --git a/components/sections/index.tsx b/components/sections/index.tsx
@@ -43,6 +43,7 @@ const SectionSwitch = (props: ISecitonSwitchProps) => {
       navbar,
       forward,
       setForward,
+      context,
     } = props;
 
     if (section === sections.loading) {
@@ -116,6 +117,7 @@ const SectionSwitch = (props: ISecitonSwitchProps) => {
           navbar={navbar}
           forward={forward}
           setForward={setForward}
+          context={context}
         />
       );
     } else return null;

diff --git a/lib/supabase.ts b/lib/supabase.ts
@@ -71,6 +71,15 @@ export const supabaseUtil = {
       .select()
       .eq('groupId', groupId);
   },
+  async updateMessage(
+    referenceId: string | string[] | undefined,
+    content: string
+  ) {
+    return await supabaseClient
+      .from(tableNames.message)
+      .update({ content })
+      .eq('referenceId', referenceId);
+  },
   async updateMessages(readBy: { id: string; value: boolean }[], id: string) {
     return await supabaseClient
       .from(tableNames.message)

diff --git a/package.json b/package.json
@@ -10,15 +10,10 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@ably-labs/react-hooks": "^2.1.1",
     "@clerk/nextjs": "^4.22.1",
     "@next/font": "13.1.6",
     "@prisma/client": "^5.1.1",
     "@supabase/supabase-js": "^2.26.0",
-    "@types/formidable": "^2.0.5",
-    "@types/node": "18.14.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
     "eslint": "8.34.0",
     "eslint-config-next": "13.1.6",
     "formidable": "^2.1.1",
@@ -31,8 +26,12 @@
     "typescript": "4.9.5"
   },
   "devDependencies": {
-    "@playwright/test": "^1.32.3",
+    "@types/formidable": "^2.0.5",
+    "@types/node": "18.14.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@types/react-scroll-to-bottom": "^4.2.1",
+    "@playwright/test": "^1.32.3",
     "autoprefixer": "^10.4.13",
     "dotenv-cli": "^7.2.1",
     "postcss": "^8.4.21",

diff --git a/pages/api/message.ts b/pages/api/message.ts
@@ -1,5 +1,6 @@
 import { supabaseUtil } from '@/lib/supabase';
 import { IMessageDataProps, IReadByDataProps } from '@/types';
+import { restContext } from '@/utils/enums';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 export default async function handler(
@@ -18,36 +19,50 @@ export default async function handler(
     res.status(200).json({ referenceId, groupId });
     return;
   } else if (req.method === 'PUT') {
-    const { groupId, userId } = req.body;
-    const { data: groupMessages, error: errorGroupMessages } =
-      await supabaseUtil.getMessagesByGroupId(groupId);
+    const { context } = req.body;
+    if (context === restContext.updateUnread) {
+      const { groupId, userId } = req.body;
+      const { data: groupMessages, error: errorGroupMessages } =
+        await supabaseUtil.getMessagesByGroupId(groupId);
 
-    if (errorGroupMessages) {
-      res.status(500).json({ error: 'Bad parameters' });
-      return;
-    }
+      if (errorGroupMessages) {
+        res.status(500).json({ error: 'Bad parameters' });
+        return;
+      }
+
+      if (groupMessages) {
+        let matched;
+        groupMessages.forEach((gm: IMessageDataProps) => {
+          matched = false;
+          gm.readBy.forEach((rb: IReadByDataProps) => {
+            (async () => {
+              matched = rb.id === userId && !rb.value;
+              if (matched) {
+                rb.value = true;
 
-    if (groupMessages) {
-      let matched;
-      groupMessages.forEach((gm: IMessageDataProps) => {
-        matched = false;
-        gm.readBy.forEach((rb: IReadByDataProps) => {
-          (async () => {
-            matched = rb.id === userId && !rb.value;
-            if (matched) {
-              rb.value = true;
-
-              const { error: errorUpdateMessages } =
-                await supabaseUtil.updateMessages(gm.readBy, gm.id);
-
-              if (errorUpdateMessages) {
-                res.status(500).json({ error: 'Internal error' });
-                return;
+                const { error: errorUpdateMessages } =
+                  await supabaseUtil.updateMessages(gm.readBy, gm.id);
+
+                if (errorUpdateMessages) {
+                  res.status(500).json({ error: 'Internal error' });
+                  return;
+                }
               }
-            }
-          })();
+            })();
+          });
         });
-      });
+
+        res.status(200).json({ success: true });
+        return;
+      }
+    } else if (context === restContext.updateMessage) {
+      const { referenceId, content } = req.body;
+      const { error } = await supabaseUtil.updateMessage(referenceId, content);
+
+      if (error) {
+        res.status(500).json({ error: 'Internal error' });
+        return;
+      }
 
       res.status(200).json({ success: true });
       return;

diff --git a/pages/api/socket.ts b/pages/api/socket.ts
@@ -126,6 +126,10 @@ const SocketHandler = (_req: any, res: NextApiResponseWithSocket) => {
         socket.to(message.groupId).emit('delete-message', message);
       });
 
+      socket.on('update-message', (message) => {
+        socket.to(message.groupId).emit('update-message', message);
+      });
+
       socket.on('new-friend', (message) => {
         const { groupId } = message,
           fromUser = message?.createdFor?.at(1),