From 6e54ec7695c4ce4eb089e2d3a81df3386d33eca1 Mon Sep 17 00:00:00 2001
From: Matthew Heller <hellergood@gmail.com>
Date: Mon, 10 Oct 2022 19:11:29 -0500
Subject: [PATCH] Antd updates (#2194)

* Fix antd Modal.visible warning by using updated attribute name 'open'.

* Update more attributes (onVisibleChange => onOpenChange, defaultVisible => defaultOpen) to fix browser console warnings.

* Update ModalProps property from 'visible' to 'open' to match the change in antd.

* Update variable names to match the antd change from 'visible' to 'open'.

* Inline this for the linter.

* One more visible => open reference.
---
 .../action-buttons/ActionButton/ActionButton.tsx |  2 +-
 web/components/action-buttons/FollowButton.tsx   |  2 +-
 .../ChatModerationActionMenu.tsx                 |  2 +-
 .../chat/ChatTextField/ChatTextField.tsx         |  4 ++--
 .../common/UserDropdown/UserDropdown.tsx         |  8 ++------
 web/components/ui/Content/Content.tsx            |  4 ++--
 web/components/ui/Modal/Modal.tsx                |  6 +++---
 .../NotifyReminderPopup/NotifyReminderPopup.tsx  | 16 ++++++++--------
 8 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/web/components/action-buttons/ActionButton/ActionButton.tsx b/web/components/action-buttons/ActionButton/ActionButton.tsx
index 658cdfaf2..48b5585e5 100644
--- a/web/components/action-buttons/ActionButton/ActionButton.tsx
+++ b/web/components/action-buttons/ActionButton/ActionButton.tsx
@@ -37,7 +37,7 @@ export const ActionButton: FC<ActionButtonProps> = ({
       <Modal
         title={description || title}
         url={url}
-        visible={showModal}
+        open={showModal}
         height="80vh"
         handleCancel={() => setShowModal(false)}
       />
diff --git a/web/components/action-buttons/FollowButton.tsx b/web/components/action-buttons/FollowButton.tsx
index 0b8de983b..93d62ad1a 100644
--- a/web/components/action-buttons/FollowButton.tsx
+++ b/web/components/action-buttons/FollowButton.tsx
@@ -29,7 +29,7 @@ export const FollowButton: FC<FollowButtonProps> = props => {
       </Button>
       <Modal
         title={`Follow ${name}`}
-        visible={showModal}
+        open={showModal}
         handleCancel={() => setShowModal(false)}
         width="550px"
         height="200px"
diff --git a/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx b/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx
index 7b68a54af..8b4c275c1 100644
--- a/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx
+++ b/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx
@@ -121,7 +121,7 @@ export const ChatModerationActionMenu: FC<ChatModerationActionMenuProps> = ({
       </Dropdown>
       <Modal
         title={userDisplayName}
-        visible={showUserDetailsModal}
+        open={showUserDetailsModal}
         handleCancel={() => {
           setShowUserDetailsModal(false);
         }}
diff --git a/web/components/chat/ChatTextField/ChatTextField.tsx b/web/components/chat/ChatTextField/ChatTextField.tsx
index 9452c4160..ac4bd0c33 100644
--- a/web/components/chat/ChatTextField/ChatTextField.tsx
+++ b/web/components/chat/ChatTextField/ChatTextField.tsx
@@ -265,8 +265,8 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText }) => {
               />
             }
             trigger="click"
-            onVisibleChange={visible => setShowEmojis(visible)}
-            visible={showEmojis}
+            onOpenChange={open => setShowEmojis(open)}
+            open={showEmojis}
           />
         </Slate>
 
diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
index 44b8688f6..555faef08 100644
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -92,16 +92,12 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
       </Dropdown>
       <Modal
         title="Change Chat Display Name"
-        visible={showNameChangeModal}
+        open={showNameChangeModal}
         handleCancel={() => setShowNameChangeModal(false)}
       >
         <NameChangeModal />
       </Modal>
-      <Modal
-        title="Authenticate"
-        visible={showAuthModal}
-        handleCancel={() => setShowAuthModal(false)}
-      >
+      <Modal title="Authenticate" open={showAuthModal} handleCancel={() => setShowAuthModal(false)}>
         <AuthModal />
       </Modal>
     </div>
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 14bc22ec0..d333d422e 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -238,7 +238,7 @@ export const Content: FC = () => {
                   {externalActionButtons}
                   <FollowButton size="small" />
                   <NotifyReminderPopup
-                    visible={showNotifyReminder}
+                    open={showNotifyReminder}
                     notificationClicked={() => setShowNotifyPopup(true)}
                     notificationClosed={() => disableNotifyReminderPopup()}
                   >
@@ -248,7 +248,7 @@ export const Content: FC = () => {
 
                 <Modal
                   title="Notify"
-                  visible={showNotifyPopup}
+                  open={showNotifyPopup}
                   afterClose={() => disableNotifyReminderPopup()}
                   handleCancel={() => disableNotifyReminderPopup()}
                 >
diff --git a/web/components/ui/Modal/Modal.tsx b/web/components/ui/Modal/Modal.tsx
index 1b08ce70c..6cd361c91 100644
--- a/web/components/ui/Modal/Modal.tsx
+++ b/web/components/ui/Modal/Modal.tsx
@@ -5,7 +5,7 @@ import styles from './Modal.module.scss';
 export type ModalProps = {
   title: string;
   url?: string;
-  visible: boolean;
+  open: boolean;
   handleOk?: () => void;
   handleCancel?: () => void;
   afterClose?: () => void;
@@ -17,7 +17,7 @@ export type ModalProps = {
 export const Modal: FC<ModalProps> = ({
   title,
   url,
-  visible,
+  open,
   handleOk,
   handleCancel,
   afterClose,
@@ -51,7 +51,7 @@ export const Modal: FC<ModalProps> = ({
   return (
     <AntModal
       title={title}
-      visible={visible}
+      open={open}
       onOk={handleOk}
       onCancel={handleCancel}
       afterClose={afterClose}
diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
index 3afc039d0..e1a02364b 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect, FC } from 'react';
 import styles from './NotifyReminderPopup.module.scss';
 
 export type NotifyReminderPopupProps = {
-  visible: boolean;
+  open: boolean;
   children: React.ReactNode;
   notificationClicked: () => void;
   notificationClosed: () => void;
@@ -12,16 +12,16 @@ export type NotifyReminderPopupProps = {
 
 export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
   children,
-  visible,
+  open,
   notificationClicked,
   notificationClosed,
 }) => {
-  const [visiblePopup, setVisiblePopup] = useState(visible);
+  const [openPopup, setOpenPopup] = useState(open);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setVisiblePopup(visible);
-  }, [visible]);
+    setOpenPopup(open);
+  }, [open]);
 
   useEffect(() => {
     setMounted(true);
@@ -43,7 +43,7 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
 
   const popupClosed = e => {
     e.stopPropagation();
-    setVisiblePopup(false);
+    setOpenPopup(false);
     notificationClosed();
   };
 
@@ -64,8 +64,8 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
     mounted && (
       <Popover
         placement="topLeft"
-        defaultVisible={visiblePopup}
-        visible={visiblePopup}
+        defaultOpen={openPopup}
+        open={openPopup}
         destroyTooltipOnHide
         title={title}
         content={content}