feat(giphy): add giphy to web gui

ph1p · Nov 3, 2021 · b629bfe · b629bfe · vercel · Nov 4, 2021
1 parent 0f9334e
commit b629bfe
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 135 deletions.
diff --git a/packages/shared/src/components/ChatBar.tsx b/packages/shared/src/components/ChatBar.tsx
@@ -11,6 +11,8 @@ import { ConnectionEnum } from '@fc/shared/utils/interfaces';
 
 import { useStore } from '../../../store/RootStore';
 
+import { GiphyGrid } from './GiphyGrid';
+
 export const ChatBar: FunctionComponent = observer(() => {
   const store = useStore();
   const socket = useSocket();
@@ -61,58 +63,70 @@ export const ChatBar: FunctionComponent = observer(() => {
   };
 
   return (
-    <ChatBarForm onSubmit={sendMessage}>
-      <ConnectionInfo connected={connected}>
-        {isFailed ? 'connection failed 🙈' : 'connecting...'}
-      </ConnectionInfo>
-
-      <ChatInputWrapper connected={connected}>
-        <ChatInput>
-          <input
-            ref={chatTextInput}
-            type="input"
-            onChange={({ target }: any) =>
-              setMessageText(target.value.substr(0, 1000))
-            }
-            placeholder="Write something ..."
-          />
-
-          <Tooltip
-            ref={emojiPickerRef}
-            style={{
-              paddingTop: 11,
-              paddingBottom: 11,
-              paddingLeft: 17,
-              paddingRight: 17,
-            }}
-            handler={React.forwardRef(
-              (p, ref: React.ForwardedRef<HTMLInputElement>) => (
-                <EmojiPickerStyled {...p} ref={ref}>
-                  <EmojiIcon />
-                </EmojiPickerStyled>
-              )
-            )}
-          >
-            <EmojiList>
-              {['😂', '😊', '👍', '🙈', '🔥', '🤔', '💩', '🚀'].map((emoji) => (
-                <span
-                  key={emoji}
-                  data-emoji={emoji}
-                  onClick={(e) => {
-                    sendMessage(e, emoji);
-                    emojiPickerRef.current.hide();
-                  }}
-                />
-              ))}
-            </EmojiList>
-          </Tooltip>
-
-          <SendButton color={store.settings.color} onClick={sendMessage}>
-            <SendArrowIcon />
-          </SendButton>
-        </ChatInput>
-      </ChatInputWrapper>
-    </ChatBarForm>
+    <>
+      <GiphyGrid
+        store={store}
+        setTextMessage={(p) => {
+          props.setTextMessage(p);
+          chatTextInput.current.value = '';
+        }}
+        textMessage={props.textMessage}
+      />
+      <ChatBarForm onSubmit={sendMessage}>
+        <ConnectionInfo connected={connected}>
+          {isFailed ? 'connection failed 🙈' : 'connecting...'}
+        </ConnectionInfo>
+
+        <ChatInputWrapper connected={connected}>
+          <ChatInput>
+            <input
+              ref={chatTextInput}
+              type="input"
+              onChange={({ target }: any) =>
+                setMessageText(target.value.substr(0, 1000))
+              }
+              placeholder="Write something ..."
+            />
+
+            <Tooltip
+              ref={emojiPickerRef}
+              style={{
+                paddingTop: 11,
+                paddingBottom: 11,
+                paddingLeft: 17,
+                paddingRight: 17,
+              }}
+              handler={React.forwardRef(
+                (p, ref: React.ForwardedRef<HTMLInputElement>) => (
+                  <EmojiPickerStyled {...p} ref={ref}>
+                    <EmojiIcon />
+                  </EmojiPickerStyled>
+                )
+              )}
+            >
+              <EmojiList>
+                {['😂', '😊', '👍', '🙈', '🔥', '🤔', '💩', '🚀'].map(
+                  (emoji) => (
+                    <span
+                      key={emoji}
+                      data-emoji={emoji}
+                      onClick={(e) => {
+                        sendMessage(e, emoji);
+                        emojiPickerRef.current.hide();
+                      }}
+                    />
+                  )
+                )}
+              </EmojiList>
+            </Tooltip>
+
+            <SendButton color={store.settings.color} onClick={sendMessage}>
+              <SendArrowIcon />
+            </SendButton>
+          </ChatInput>
+        </ChatInputWrapper>
+      </ChatBarForm>
+    </>
   );
 });
 

diff --git a/packages/shared/src/components/GiphyGrid.tsx b/packages/shared/src/components/GiphyGrid.tsx
@@ -1,13 +1,14 @@
 import { GiphyFetch } from '@giphy/js-fetch-api';
 import { Grid } from '@giphy/react-components';
 import { observer } from 'mobx-react-lite';
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { FunctionComponent, useMemo, useRef } from 'react';
 import styled from 'styled-components';
 
 import { GiphyLogo } from '@fc/shared/assets/GiphyLogo';
 
 import { GiphyCloseIcon } from '../assets/icons/GiphyCloseIcon';
 import { useSocket } from '../utils/SocketProvider';
+import { useOnClickOutside } from '../utils/hooks/use-on-outside-click';
 
 const gf = new GiphyFetch('omj1iPoq5H5GTi2Xjz2E9NFCcVqGLuPZ');
 
@@ -20,6 +21,8 @@ interface GiphyGridProps {
 export const GiphyGrid: FunctionComponent<GiphyGridProps> = observer(
   (props) => {
     const socket = useSocket();
+    const ref = useRef(null);
+    useOnClickOutside(ref, () => props.setTextMessage(''));
 
     const searchTerm = useMemo(() => {
       if (props.textMessage.startsWith('/giphy')) {
@@ -34,7 +37,7 @@ export const GiphyGrid: FunctionComponent<GiphyGridProps> = observer(
     );
 
     return isGiphy ? (
-      <Giphy>
+      <Giphy ref={ref}>
         <GiphyHeader>
           <div className="logo">
             <GiphyLogo />
@@ -64,18 +67,23 @@ export const GiphyGrid: FunctionComponent<GiphyGridProps> = observer(
                   const data = {
                     giphy: gif.id,
                     date: new Date(),
+                    external: !props.store.addMessage,
                   };
                   const message = props.store.encryptor.encrypt(
                     JSON.stringify(data)
                   );
 
                   if (socket) {
                     socket.emit('chat message', {
-                      roomName: props.store.roomName,
+                      roomName: props.store.roomName || props.store.room,
                       message,
                     });
 
-                    props.store.addMessage(message);
+                    if (props.store.addMessage) {
+                      props.store.addMessage(message);
+                    } else {
+                      props.store.addLocalMessage(message);
+                    }
                   }
 
                   props.setTextMessage('');
@@ -125,8 +133,10 @@ const GiphyHeader = styled.div`
 
 const Giphy = styled.div`
   position: absolute;
+  z-index: 15;
   bottom: 54px;
-  left: 9px;
+  transform: translateX(-50%);
+  left: 50%;
   color: #fff;
   display: grid;
   grid-template-rows: 36px 1fr;

diff --git a/packages/shared/src/utils/hooks/use-on-outside-click.ts b/packages/shared/src/utils/hooks/use-on-outside-click.ts
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+export const useOnClickOutside = (ref: any, handler: any) => {
+  useEffect(() => {
+    const listener = (event: any) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+};