From 83a13638f7c24d2900b89a6829efd96913a9de2e Mon Sep 17 00:00:00 2001
From: marcoelissa <marco.elissa@gmail.com>
Date: Thu, 6 Oct 2022 18:10:39 +0700
Subject: [PATCH] remove next dynamic on emoji picker

---
 .../Orbis/FloatingChat/ChatToolbar.tsx        | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
index c805d18fb..adb6a4d5e 100644
--- a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
+++ b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
@@ -1,11 +1,11 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './ChatToolbar.module.css'
 import SendIcon from '@images/send.svg'
 import EmojiIcon from '@images/emoji.svg'
 import Input from '@shared/FormInput'
 import { useOrbis } from '@context/Orbis'
-import dynamic from 'next/dynamic'
-import { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
+// import dynamic from 'next/dynamic'
+import Picker, { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
 import useDarkMode from '@oceanprotocol/use-dark-mode'
 import { useMarketMetadata } from '@context/MarketMetadata'
 
@@ -17,16 +17,16 @@ const ChatToolbar = () => {
   const { appConfig } = useMarketMetadata()
   const darkMode = useDarkMode(false, appConfig?.darkModeConfig)
 
-  const { orbis, conversationId } = useOrbis()
+  const { orbis, conversationId, convOpen } = useOrbis()
   const [content, setContent] = useState<string>('')
   const [showPicker, setShowPicker] = useState(false)
 
-  const Picker = dynamic(
-    () => {
-      return import('emoji-picker-react')
-    },
-    { ssr: false }
-  )
+  // const Picker = dynamic(
+  //   () => {
+  //     return import('emoji-picker-react')
+  //   },
+  //   { ssr: false }
+  // )
 
   const onEmojiClick = (emojiData: EmojiClickData) => {
     setContent((prevInput) => prevInput + emojiData.emoji)
@@ -34,8 +34,11 @@ const ChatToolbar = () => {
   }
 
   useEffect(() => {
-    console.log(darkMode)
-  }, [darkMode])
+    console.log(convOpen)
+    if (!convOpen) {
+      setShowPicker(false)
+    }
+  }, [convOpen])
 
   const sendMessage = async () => {
     const res = await orbis.sendMessage({
@@ -77,7 +80,7 @@ const ChatToolbar = () => {
           <Picker
             onEmojiClick={onEmojiClick}
             theme={darkMode.value ? Theme.DARK : Theme.LIGHT}
-            emojiStyle={EmojiStyle.NATIVE}
+            emojiStyle={EmojiStyle.APPLE}
             autoFocusSearch={false}
             lazyLoadEmojis={false}
             width={324}