From 8794782a4e2a13dc2a17dfebbf3903ffa4f9ef0c Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Tue, 4 Jan 2022 10:39:15 +0100
Subject: [PATCH] Refactor emoji picker (#169)

---
 packages/react-chat-example/src/index.tsx     |  2 +-
 .../src/components/Chat/ChatInput.tsx         | 34 ++--------------
 .../src/components/Chat/EmojiPicker.tsx       | 40 +++++++++++++++++++
 3 files changed, 45 insertions(+), 31 deletions(-)
 create mode 100644 packages/react-chat/src/components/Chat/EmojiPicker.tsx

diff --git a/packages/react-chat-example/src/index.tsx b/packages/react-chat-example/src/index.tsx
index f346e8df..880fc5f1 100644
--- a/packages/react-chat-example/src/index.tsx
+++ b/packages/react-chat-example/src/index.tsx
@@ -76,7 +76,7 @@ function DragDiv() {
           <ReactChat
             theme={theme ? lightTheme : darkTheme}
             communityKey={
-              "0x0202a564bed987342413b47bc8013d63bbb3fbb15dcd42dd03687b2cec8bd0f3f7"
+              "0x03e28ca2c56526d3ebd673e779bea6aff740cf16227dc0f284fc73e5b26c0942ef"
             }
             fetchMetadata={fetchMetadata}
           />
diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
index 689364ea..f101fb7c 100644
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@@ -1,4 +1,3 @@
-import { Picker } from "emoji-mart";
 import React, {
   useCallback,
   useEffect,
@@ -6,13 +5,11 @@ import React, {
   useRef,
   useState,
 } from "react";
-import styled, { useTheme } from "styled-components";
+import styled from "styled-components";
 
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useModal } from "../../contexts/modalProvider";
-import { useLow } from "../../contexts/narrowProvider";
 import { Reply } from "../../hooks/useReply";
-import { lightTheme, Theme } from "../../styles/themes";
 import { uintToImgUrl } from "../../utils/uintToImgUrl";
 import { ClearSvg } from "../Icons/ClearIcon";
 import { EmojiIcon } from "../Icons/EmojiIcon";
@@ -25,6 +22,8 @@ import { SizeLimitModal, SizeLimitModalName } from "../Modals/SizeLimitModal";
 import { SearchBlock } from "../SearchBlock";
 import { textMediumStyles, textSmallStyles } from "../Text";
 
+import { EmojiPicker } from "./EmojiPicker";
+
 interface ChatInputProps {
   reply: Reply | undefined;
   setReply: (val: Reply | undefined) => void;
@@ -33,15 +32,12 @@ interface ChatInputProps {
 
 export function ChatInput({ reply, setReply, disabled }: ChatInputProps) {
   const { sendMessage, contacts } = useMessengerContext();
-  const theme = useTheme() as Theme;
   const [content, setContent] = useState("");
   const [clearComponent, setClearComponent] = useState("");
   const [showEmoji, setShowEmoji] = useState(false);
   const [inputHeight, setInputHeight] = useState(40);
   const [imageUint, setImageUint] = useState<undefined | Uint8Array>(undefined);
 
-  const low = useLow();
-
   const { setModal } = useModal(SizeLimitModalName);
 
   const [query, setQuery] = useState("");
@@ -203,29 +199,7 @@ export function ChatInput({ reply, setReply, disabled }: ChatInputProps) {
   return (
     <View>
       <SizeLimitModal />
-      {showEmoji && (
-        <div>
-          <Picker
-            onSelect={addEmoji}
-            theme={theme === lightTheme ? "light" : "dark"}
-            set="twitter"
-            color={theme.tertiary}
-            emojiSize={26}
-            style={{
-              position: "absolute",
-              bottom: "100%",
-              right: "0",
-              color: theme.secondary,
-              height: low ? "200px" : "355px",
-              overflow: "auto",
-            }}
-            showPreview={false}
-            showSkinTones={false}
-            title={""}
-          />
-        </div>
-      )}
-
+      <EmojiPicker addEmoji={addEmoji} showEmoji={showEmoji} />
       <AddPictureInputWrapper>
         <PictureIcon />
         <AddPictureInput
diff --git a/packages/react-chat/src/components/Chat/EmojiPicker.tsx b/packages/react-chat/src/components/Chat/EmojiPicker.tsx
new file mode 100644
index 00000000..042c4dff
--- /dev/null
+++ b/packages/react-chat/src/components/Chat/EmojiPicker.tsx
@@ -0,0 +1,40 @@
+import { Picker } from "emoji-mart";
+import React from "react";
+import { useTheme } from "styled-components";
+
+import { useLow } from "../../contexts/narrowProvider";
+import { lightTheme, Theme } from "../../styles/themes";
+
+type EmojiPickerProps = {
+  showEmoji: boolean;
+  addEmoji: (e: any) => void;
+};
+
+export function EmojiPicker({ showEmoji, addEmoji }: EmojiPickerProps) {
+  const theme = useTheme() as Theme;
+  const low = useLow();
+
+  if (showEmoji) {
+    return (
+      <Picker
+        onSelect={addEmoji}
+        theme={theme === lightTheme ? "light" : "dark"}
+        set="twitter"
+        color={theme.tertiary}
+        emojiSize={26}
+        style={{
+          position: "absolute",
+          bottom: "100%",
+          right: "0",
+          color: theme.secondary,
+          height: low ? "200px" : "355px",
+          overflow: "auto",
+        }}
+        showPreview={false}
+        showSkinTones={false}
+        title={""}
+      />
+    );
+  }
+  return null;
+}