From de682dac3af1f0638e649edb88f2a127dc3d7064 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 19:40:53 -0500
Subject: [PATCH] Update doorbell widget

---
 src/views/room/widgets/RoomWidgets.scss       |  1 -
 .../doorbell/DoorbellWidgetItemView.tsx       | 29 +++++++++++++++++++
 .../widgets/doorbell/DoorbellWidgetView.scss  | 22 --------------
 .../widgets/doorbell/DoorbellWidgetView.tsx   | 25 ++++++++--------
 .../doorbell-item/DoorbellWidgetItemView.tsx  | 21 --------------
 .../DoorbellWidgetItemView.types.ts           |  6 ----
 6 files changed, 41 insertions(+), 63 deletions(-)
 create mode 100644 src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx
 delete mode 100644 src/views/room/widgets/doorbell/DoorbellWidgetView.scss
 delete mode 100644 src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
 delete mode 100644 src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts

diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss
index 46b5281c..a2f114d6 100644
--- a/src/views/room/widgets/RoomWidgets.scss
+++ b/src/views/room/widgets/RoomWidgets.scss
@@ -3,7 +3,6 @@
 @import './chat-input/ChatInputView';
 @import './choosers/ChooserWidgetView';
 @import './context-menu/ContextMenu';
-@import './doorbell/DoorbellWidgetView';
 @import './friend-request/FriendRequestDialogView';
 @import './furniture/FurnitureWidgets';
 @import './infostand/InfoStandWidgetView';
diff --git a/src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx b/src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx
new file mode 100644
index 00000000..810cae5d
--- /dev/null
+++ b/src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx
@@ -0,0 +1,29 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC } from 'react';
+import { Button, ButtonGroup, Flex, Text } from '../../../../common';
+
+interface DoorbellWidgetItemViewProps
+{
+    userName: string;
+    accept: () => void;
+    deny: () => void;
+}
+
+export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
+{
+    const { userName = '', accept = null, deny = null } = props;
+
+    return (
+        <Flex alignItems="center" justifyContent="between">
+            <Text bold>{ userName }</Text>
+            <ButtonGroup>
+                <Button variant="success" onClick={ accept }>
+                    <FontAwesomeIcon icon="check" />
+                </Button>
+                <Button variant="danger" onClick={ deny }>
+                    <FontAwesomeIcon icon="times" />
+                </Button>
+            </ButtonGroup>
+        </Flex>
+    );
+}
diff --git a/src/views/room/widgets/doorbell/DoorbellWidgetView.scss b/src/views/room/widgets/doorbell/DoorbellWidgetView.scss
deleted file mode 100644
index 125a5e69..00000000
--- a/src/views/room/widgets/doorbell/DoorbellWidgetView.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.nitro-widget-doorbell {
-    width: 250px;
-
-    .content-area {
-        min-height: 143px;
-        height: 143px;
-    }
-
-    .doorbell-user-list {
-
-        .list-item {
-            background: $grid-active-bg-color;
-        }
-
-        .col:nth-child(even) {
-
-            .list-item {
-                background: $white !important;
-            }
-        }
-    }
-}
diff --git a/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx b/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
index 8e8b86c5..a42ed47c 100644
--- a/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
+++ b/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
@@ -1,9 +1,10 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetDoorbellEvent, RoomWidgetLetUserInMessage } from '../../../../api';
-import { CreateEventDispatcherHook } from '../../../../hooks';
+import { Column } from '../../../../common';
+import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { useRoomContext } from '../../context/RoomContext';
-import { DoorbellWidgetItemView } from './doorbell-item/DoorbellWidgetItemView';
+import { DoorbellWidgetItemView } from './DoorbellWidgetItemView';
 
 export const DoorbellWidgetView: FC<{}> = props =>
 {
@@ -15,10 +16,11 @@ export const DoorbellWidgetView: FC<{}> = props =>
     {
         if(users.indexOf(userName) >= 0) return;
 
-        const newUsers = [ ...users, userName ];
-
-        setUsers(newUsers);
-        setIsVisible(true);
+        BatchUpdates(() =>
+        {
+            setUsers([ ...users, userName ]);
+            setIsVisible(true);
+        });
     }, [ users ]);
 
     const removeUser = useCallback((userName: string) =>
@@ -66,13 +68,10 @@ export const DoorbellWidgetView: FC<{}> = props =>
     return (
         <NitroCardView className="nitro-widget-doorbell" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ event => setIsVisible(false) } />
-            <NitroCardContentView>
-                <div className="row row-cols-1 doorbell-user-list">
-                    { (users.length > 0) && users.map(userName =>
-                        {
-                            return <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />;
-                        }) }
-                </div>
+            <NitroCardContentView overflow="hidden">
+                <Column overflow="auto">
+                    { users && (users.length > 0) && users.map(userName => <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />) }
+                </Column>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx b/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
deleted file mode 100644
index dcd90189..00000000
--- a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index a0ba4caa..00000000
--- a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface DoorbellWidgetItemViewProps
-{
-    userName: string;
-    accept: () => void;
-    deny: () => void;
-}