From 39d337e28798a1663d33a9a39dc4b5efe2d8dee5 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 15 Aug 2021 00:55:12 -0400
Subject: [PATCH] Update doorbell

---
 .../widgets/doorbell/DoorbellWidgetView.tsx   | 13 +++---------
 .../doorbell-item/DoorbellWidgetItemView.tsx  | 21 +++++++++++++++++++
 .../DoorbellWidgetItemView.types.ts           |  6 ++++++
 3 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
 create mode 100644 src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts

diff --git a/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx b/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
index 7dad34dd..b4ac0512 100644
--- a/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
+++ b/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
@@ -5,6 +5,7 @@ import { LocalizeText } from '../../../../utils';
 import { useRoomContext } from '../../context/RoomContext';
 import { RoomWidgetDoorbellEvent } from '../../events';
 import { RoomWidgetLetUserInMessage } from '../../messages';
+import { DoorbellWidgetItemView } from './doorbell-item/DoorbellWidgetItemView';
 
 export const DoorbellWidgetView: FC<{}> = props =>
 {
@@ -62,7 +63,7 @@ export const DoorbellWidgetView: FC<{}> = props =>
         removeUser(userName);
     }, [ widgetHandler, removeUser ]);
 
-    if(!users.length) return null;
+    if(!isVisible) return null;
 
     return (
         <NitroCardView className="nitro-widget-doorbell" simple={ true }>
@@ -71,15 +72,7 @@ export const DoorbellWidgetView: FC<{}> = props =>
                 <div className="row row-cols-1 doorbell-user-list">
                     { (users.length > 0) && users.map(userName =>
                         {
-                            return (
-                                <div className="d-flex col align-items-center justify-content-between" key={ userName }>
-                                    <span className="fw-bold text-black">{ userName }</span>
-                                    <div>
-                                        <button type="button" className="btn btn-success btn-sm me-1" onClick={ event => answer(userName, true) }><i className="fas fa-check" /></button>
-                                        <button type="button" className="btn btn-danger btn-sm" onClick={ event => answer(userName, false) }><i className="fas fa-times" /></button>
-                                    </div>
-                                </div>
-                            );
+                            return <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />;
                         }) }
                 </div>
             </NitroCardContentView>
diff --git a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx b/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
new file mode 100644
index 00000000..dcd90189
--- /dev/null
+++ b/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { DoorbellWidgetItemViewProps } from './DoorbellWidgetItemView.types';
+
+export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
+{
+    const { userName = '', accept = null, deny = null } = props;
+
+    return (
+        <div className="d-flex col align-items-center justify-content-between">
+            <span className="fw-bold text-black">{ userName }</span>
+            <div>
+                <button type="button" className="btn btn-success btn-sm me-1" onClick={ accept }>
+                    <i className="fas fa-check" />
+                </button>
+                <button type="button" className="btn btn-danger btn-sm" onClick={ deny }>
+                    <i className="fas fa-times" />
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts b/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts
new file mode 100644
index 00000000..a0ba4caa
--- /dev/null
+++ b/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts
@@ -0,0 +1,6 @@
+export interface DoorbellWidgetItemViewProps
+{
+    userName: string;
+    accept: () => void;
+    deny: () => void;
+}