From db4b989136aa29727ca769943a795f2c1bd58c94 Mon Sep 17 00:00:00 2001
From: harshith-venkatesh <harshithece7016@gmail.com>
Date: Mon, 2 Oct 2023 02:04:26 +0530
Subject: [PATCH 1/3] minor bug fix: remove modal- click of close button

---
 app/components/common/drawer/index.tsx | 85 +++++++++++++-------------
 1 file changed, 41 insertions(+), 44 deletions(-)

diff --git a/app/components/common/drawer/index.tsx b/app/components/common/drawer/index.tsx
index 5640267..c388bdc 100644
--- a/app/components/common/drawer/index.tsx
+++ b/app/components/common/drawer/index.tsx
@@ -9,53 +9,50 @@ interface DrawerProps {
   toggleDrawer: () => void;
 }
 
-const Drawer: React.FC<DrawerProps> = ({ event, isDrawerVisible, toggleDrawer }) => {
-  return (
-    <div className={`w-full h-full fixed inset-0 ${isDrawerVisible ? '' : 'invisible'}`}>
-      <div
-        onClick={toggleDrawer}
-        data-testid="drawer-background"
-        className={`w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 ${
-          isDrawerVisible ? 'opacity-50' : 'opacity-0'
-        }`}
-      ></div>
-      <div
-        onClick={toggleDrawer}
-        className={`pt-20 pb-12 px-12 min-w-[300px] sm:w-full md:w-1/2 lg:w-1/4 bg-white h-full absolute right-0 duration-300 ease-out transition-all flex flex-col justify-between  overflow-scroll ${
-          isDrawerVisible ? '' : 'translate-x-full'
-        }`}
-      >
+const Drawer: React.FC<DrawerProps> = ({ event, isDrawerVisible, toggleDrawer }) => (
+  <div className={`w-full h-full fixed inset-0 ${isDrawerVisible ? '' : 'invisible'}`}>
+    <div
+      data-testid="drawer-background"
+      className={`w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 ${
+        isDrawerVisible ? 'opacity-50' : 'opacity-0'
+      }`}
+    ></div>
+    <div
+      className={`pt-20 pb-12 px-12 min-w-[300px] sm:w-full md:w-1/2 lg:w-1/4 bg-white h-full absolute right-0 duration-300 ease-out transition-all flex flex-col justify-between  overflow-scroll ${
+        isDrawerVisible ? '' : 'translate-x-full'
+      }`}
+    >
+      <div>
+        <div className="absolute cursor-pointer text-gray-600 top-0 w-8 h-8 flex items-center justify-center right-0 mt-5 mr-5">
+          <button className="w-78 h-33 left-1406 top-28 px-4 py-2 uppercase mr-8 bg-gray-100 rounded-lg " onClick={toggleDrawer}>
+            Close
+          </button>
+        </div>
+        <h1 className=" font-semibold text-3xl leading-10 capitalize">{event.title}</h1>
+        <EventVisibility visibility={event.visibility ?? ''} />
+        <p className="py-2 text-base font-normal leading-5 text-left">
+          {dayjs(event.start).format('MMMM DD, YYYY h A')} -{' '}
+          {dayjs(event.end).format('MMMM DD, YYYY h A')}
+        </p>
+        <p className="py-2 text-base font-normal leading-5 text-left">{event.location}</p>
+        <p className="py-4 font-normal text-base">{event.description}</p>
+        <h3 className="font-medium text-lg">People</h3>
         <div>
-          <div className="absolute cursor-pointer text-gray-600 top-0 w-8 h-8 flex items-center justify-center right-0 mt-5 mr-5">
-            <button className="w-78 h-33 left-1406 top-28 px-4 py-2 uppercase mr-8 bg-gray-100 rounded-lg ">
-              Close
-            </button>
-          </div>
-          <h1 className=" font-semibold text-3xl leading-10 capitalize">{event.title}</h1>
-          <EventVisibility visibility={event.visibility ?? ''} />
-          <p className="py-2 text-base font-normal leading-5 text-left">
-            {dayjs(event.start).format('MMMM DD, YYYY h A')} - {dayjs(event.end).format('MMMM DD, YYYY h A')}
-          </p>
-          <p className="py-2 text-base font-normal leading-5 text-left">{event.location}</p>
-          <p className="py-4 font-normal text-base">{event.description}</p>
-          <h3 className="font-medium text-lg">People</h3>
-          <div>
-            {event.attendees?.map(({ attendee }) => (
-              <div className="flex items-center gap-4" key={attendee.email}>
-                <div className="w-6 h-6 bg-gray-300 rounded-full flex-shrink-0"></div>
-                <p className="py-2 font-normal text-base truncate overflow-hidden">
-                  {attendee.email}
-                </p>
-              </div>
-            ))}
-          </div>
+          {event.attendees?.map(({ attendee }) => (
+            <div className="flex items-center gap-4" key={attendee.email}>
+              <div className="w-6 h-6 bg-gray-300 rounded-full flex-shrink-0"></div>
+              <p className="py-2 font-normal text-base truncate overflow-hidden">
+                {attendee.email}
+              </p>
+            </div>
+          ))}
         </div>
-        <button className="bg-gray-200 rounded-lg hover:bg-gray-300  w-full p-3 font-normal text-lg leading-5 text-gray-700">
-          Join event
-        </button>
       </div>
+      <button className="bg-gray-200 rounded-lg hover:bg-gray-300  w-full p-3 font-normal text-lg leading-5 text-gray-700">
+        Join event
+      </button>
     </div>
-  );
-};
+  </div>
+);
 
 export default Drawer;

From d15f9ad4b1de4994268ebabd9b0489be35add664 Mon Sep 17 00:00:00 2001
From: harshith-venkatesh <harshithece7016@gmail.com>
Date: Mon, 2 Oct 2023 02:08:45 +0530
Subject: [PATCH 2/3] update test case to resolve the bug

---
 app/components/common/drawer/index.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/common/drawer/index.test.tsx b/app/components/common/drawer/index.test.tsx
index 2031d51..71e673a 100644
--- a/app/components/common/drawer/index.test.tsx
+++ b/app/components/common/drawer/index.test.tsx
@@ -74,7 +74,7 @@ describe('Drawer', () => {
     const background = screen.getByTestId('drawer-background');
     fireEvent.click(background);
 
-    expect(toggleDrawerMock).toHaveBeenCalled();
+    expect(toggleDrawerMock).not.toHaveBeenCalled();
   });
 
   it('calls the toggleDrawer function when clicking the close button', () => {

From 9c331765d80fbc34d4b38a5363adbae820c2b842 Mon Sep 17 00:00:00 2001
From: harshith-venkatesh <harshithece7016@gmail.com>
Date: Tue, 3 Oct 2023 08:25:50 +0530
Subject: [PATCH 3/3] on click of background, user would close the modal

---
 app/components/common/drawer/index.test.tsx | 2 +-
 app/components/common/drawer/index.tsx      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/common/drawer/index.test.tsx b/app/components/common/drawer/index.test.tsx
index 71e673a..2031d51 100644
--- a/app/components/common/drawer/index.test.tsx
+++ b/app/components/common/drawer/index.test.tsx
@@ -74,7 +74,7 @@ describe('Drawer', () => {
     const background = screen.getByTestId('drawer-background');
     fireEvent.click(background);
 
-    expect(toggleDrawerMock).not.toHaveBeenCalled();
+    expect(toggleDrawerMock).toHaveBeenCalled();
   });
 
   it('calls the toggleDrawer function when clicking the close button', () => {
diff --git a/app/components/common/drawer/index.tsx b/app/components/common/drawer/index.tsx
index c388bdc..9b80e5b 100644
--- a/app/components/common/drawer/index.tsx
+++ b/app/components/common/drawer/index.tsx
@@ -16,6 +16,7 @@ const Drawer: React.FC<DrawerProps> = ({ event, isDrawerVisible, toggleDrawer })
       className={`w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 ${
         isDrawerVisible ? 'opacity-50' : 'opacity-0'
       }`}
+      onClick={toggleDrawer}
     ></div>
     <div
       className={`pt-20 pb-12 px-12 min-w-[300px] sm:w-full md:w-1/2 lg:w-1/4 bg-white h-full absolute right-0 duration-300 ease-out transition-all flex flex-col justify-between  overflow-scroll ${