From fd131a25afd6ddf5a440b675986171ff36de5813 Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Tue, 24 May 2022 22:26:04 +0200
Subject: [PATCH] Fixed two error logs

no nesting buttons inside buttons
mismatch between server and client redendered html
---
 .../NotifyReminderPopup.tsx                   | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
index 140677013..074b0b500 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
@@ -1,6 +1,6 @@
 import { Popover } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import s from './NotifyReminderPopup.module.scss';
 
 interface Props {
@@ -13,6 +13,11 @@ interface Props {
 export default function NotifyReminderPopup(props: Props) {
   const { children, visible, notificationClicked, notificationClosed } = props;
   const [visiblePopup, setVisiblePopup] = useState(visible);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const title = <div className={s.title}>Stay updated!</div>;
   const popupStyle = {
@@ -35,26 +40,30 @@ export default function NotifyReminderPopup(props: Props) {
   };
 
   const content = (
-    <button type="button" onClick={popupClicked} className={s.contentbutton}>
+    <div>
       <button type="button" className={s.closebutton} onClick={popupClosed}>
         <CloseOutlined />
       </button>
-      Click and never miss
-      <br />
-      future streams!
-    </button>
+      <button type="button" onClick={popupClicked} className={s.contentbutton}>
+        Click and never miss
+        <br />
+        future streams!
+      </button>
+    </div>
   );
   return (
-    <Popover
-      placement="topLeft"
-      defaultVisible={visiblePopup}
-      visible={visiblePopup}
-      destroyTooltipOnHide
-      title={title}
-      content={content}
-      overlayInnerStyle={popupStyle}
-    >
-      {children}
-    </Popover>
+    mounted && (
+      <Popover
+        placement="topLeft"
+        defaultVisible={visiblePopup}
+        visible={visiblePopup}
+        destroyTooltipOnHide
+        title={title}
+        content={content}
+        overlayInnerStyle={popupStyle}
+      >
+        {children}
+      </Popover>
+    )
   );
 }