From 7c97e79564e90e7961efc7b1c1ca2ebf400b3ab3 Mon Sep 17 00:00:00 2001
From: Sergey Uchaev <dialoggg1994@gmail.com>
Date: Fri, 29 Dec 2023 01:05:07 +0300
Subject: [PATCH] add shared modules and event bus

---
 .../cards/src/pages/CardDetail/CardDetail.tsx | 23 +++++++++++++++----
 .../cards/src/pages/CardsList/CardsList.tsx   |  8 +------
 packages/shared/src/events/userRole.ts        | 17 ++++++++++++--
 packages/shared/src/types/index.ts            |  6 ++---
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/cards/src/pages/CardDetail/CardDetail.tsx b/packages/cards/src/pages/CardDetail/CardDetail.tsx
index 97cdb72..0ab813e 100644
--- a/packages/cards/src/pages/CardDetail/CardDetail.tsx
+++ b/packages/cards/src/pages/CardDetail/CardDetail.tsx
@@ -4,7 +4,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import { getCardDetails } from '@modules/cards/store/features/cards/slice';
 import { AppDispatch } from '@modules/cards/store/store';
 import { userCardsDetailsSelector } from '@modules/cards/store/features/cards/selectors';
-import { USER_ROLE, onChangeUserRole } from 'shared';
+import {
+  USER_ROLE,
+  EnumRole,
+  onChangeUserRole,
+  stopListeningToUserRoleChange,
+} from 'shared';
 
 export const CardDetail = () => {
   const dispatch: AppDispatch = useDispatch();
@@ -40,6 +45,7 @@ export const CardDetail = () => {
 
   useEffect(() => {
     onChangeUserRole(setRole);
+    return stopListeningToUserRoleChange;
   }, []);
 
   if (!cardDetails) {
@@ -48,7 +54,7 @@ export const CardDetail = () => {
 
   const getActions = () => {
     switch (role) {
-      case 'ADMIN':
+      case EnumRole.admin:
         return [
           <Button key="edit" type="primary" onClick={showEditModal}>
             Edit
@@ -57,6 +63,12 @@ export const CardDetail = () => {
             Delete
           </Button>,
         ];
+      case EnumRole.manager:
+        return [
+          <Button key="edit" type="primary" onClick={showEditModal}>
+            Edit
+          </Button>,
+        ];
       default:
         return [];
     }
@@ -66,7 +78,7 @@ export const CardDetail = () => {
     <>
       <Card
         actions={getActions()}
-        title={`Card Details - ${cardDetails.cardHolderName}`}
+        title={`Card Details - ${cardDetails.cardHolderName} `}
       >
         <p>PAN: {cardDetails.pan}</p>
         <p>Expiry: {cardDetails.expiry}</p>
@@ -85,10 +97,13 @@ export const CardDetail = () => {
             </List.Item>
           )}
         />
+        <p>
+          <b>*For demonstration events from the host, change the user role.</b>
+        </p>
       </Card>
       <Modal
         title="Edit transactions"
-        visible={isModalVisible}
+        open={isModalVisible}
         onOk={handleEdit}
         onCancel={() => setIsModalVisible(false)}
       >
diff --git a/packages/cards/src/pages/CardsList/CardsList.tsx b/packages/cards/src/pages/CardsList/CardsList.tsx
index 993a296..973449b 100644
--- a/packages/cards/src/pages/CardsList/CardsList.tsx
+++ b/packages/cards/src/pages/CardsList/CardsList.tsx
@@ -18,13 +18,7 @@ const columns: ColumnsType<DataType> = [
     dataIndex: 'name',
     key: 'name',
     render: (value, record) => {
-      console.log(record, 'record');
-      return (
-        <PreviewCard
-          pan={record.pan}
-          name={record.name}
-        />
-      );
+      return <PreviewCard pan={record.pan} name={record.name} />;
     },
   },
   {
diff --git a/packages/shared/src/events/userRole.ts b/packages/shared/src/events/userRole.ts
index a60ba12..0083fbb 100644
--- a/packages/shared/src/events/userRole.ts
+++ b/packages/shared/src/events/userRole.ts
@@ -1,16 +1,29 @@
 import { Channels } from '@/events/const/channels';
 import { EnumRole } from '@/types';
 
+let eventHandler: ((event: Event) => void) | null = null;
+
 export const onChangeUserRole = (cb: (role: EnumRole) => void): void => {
-  window.addEventListener(Channels.changeUserRole, (event: Event) => {
+  eventHandler = (event: Event) => {
     const customEvent = event as CustomEvent<{ role: EnumRole }>;
     if (customEvent.detail) {
+      console.log(`On ${Channels.changeUserRole} - ${customEvent.detail.role}`);
       cb(customEvent.detail.role);
     }
-  });
+  };
+
+  window.addEventListener(Channels.changeUserRole, eventHandler);
+};
+
+export const stopListeningToUserRoleChange = (): void => {
+  if (eventHandler) {
+    window.removeEventListener(Channels.changeUserRole, eventHandler);
+    eventHandler = null;
+  }
 };
 
 export const emitChangeUserRole = (newRole: EnumRole): void => {
+  console.log(`Emit ${Channels.changeUserRole} - ${newRole}`);
   const event = new CustomEvent(Channels.changeUserRole, {
     detail: { role: newRole },
   });
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 93d78f8..9c81a10 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -1,7 +1,7 @@
 export enum EnumRole {
   admin = 'ADMIN',
   user = 'USER',
-  manager = 'MANGER',
+  manager = 'MANAGER',
 }
 
 export type TypeUser = {
@@ -16,9 +16,7 @@ declare global {
   interface Window {
     host: {
       common: {
-        user: {
-          role: EnumRole;
-        };
+        user: TypeUser;
       };
     };
   }