[CORL-1412] Integrate giphy web SDK

package.json

@@ -153,6 +153,8 @@
     "@coralproject/npm-run-all": "^4.1.5",
     "@coralproject/rte": "^1.3.0",
     "@fluent/react": "^0.11.1",
+    "@giphy/js-fetch-api": "^1.7.0",
+    "@giphy/react-components": "^1.9.1",
     "@intervolga/optimize-cssnano-plugin": "^1.0.6",
     "@sentry/react": "^5.26.0",
     "@types/archiver": "^3.1.0",
@@ -379,6 +381,8 @@
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
+    "react-use": "^15.3.4",
+    "use-resize-observer": "^6.1.0",
     "whatwg-fetch": "^3.4.0"
   },
   "dependencies-pins-documentation": {

src/core/client/auth/hooks/useResizePopup.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 
-import { useResizeObserver } from "coral-framework/hooks";
+import useResizeObserver from "use-resize-observer/polyfilled";
 
 import resizePopup from "../dom/resizePopup";
 
@@ -39,8 +39,8 @@ export default function useResizePopup() {
     };
   }, [pollPopupHeight]);
 
-  const ref = useResizeObserver(() => {
-    resizePopup();
+  const { ref } = useResizeObserver<HTMLDivElement>({
+    onResize: () => resizePopup(),
   });
   return ref;
 }

src/core/client/framework/hooks/index.ts

@@ -5,7 +5,6 @@ export { default as usePrevious } from "./usePrevious";
 export { default as useEffectWhenChanged } from "./useEffectWhenChanged";
 export { default as useUUID } from "./useUUID";
 export { default as useToken } from "./useToken";
-export { default as useResizeObserver } from "./useResizeObserver";
 export { default as useToggleState } from "./useToggleState";
 export { default as useLive } from "./useLive";
 export { default as useVisibilityState } from "./useVisibilityState";

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx

@@ -269,6 +269,8 @@ const enhanced = withContext(({ sessionStorage, browserInfo }) => ({
               }
               giphy {
                 enabled
+                key
+                maxRating
               }
               external {
                 enabled

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.spec.tsx

@@ -54,7 +54,7 @@ function createDefaultProps(add: DeepPartial<Props> = {}): Props {
           max: 100,
         },
         media: {
-          giphy: { enabled: false },
+          giphy: { enabled: false, key: "", maxRating: "" },
           twitter: { enabled: false },
           youtube: { enabled: false },
           external: { enabled: false },

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx

@@ -269,6 +269,8 @@ const enhanced = withContext(({ sessionStorage, browserInfo }) => ({
                 }
                 giphy {
                   enabled
+                  key
+                  maxRating
                 }
                 external {
                   enabled

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/__snapshots__/ReplyCommentFormContainer.spec.tsx.snap

@@ -13,6 +13,8 @@ exports[`renders correctly 1`] = `
       },
       "giphy": Object {
         "enabled": false,
+        "key": "",
+        "maxRating": "",
       },
       "twitter": Object {
         "enabled": false,
@@ -46,6 +48,8 @@ exports[`renders when commenting has been disabled 1`] = `
       },
       "giphy": Object {
         "enabled": false,
+        "key": "",
+        "maxRating": "",
       },
       "twitter": Object {
         "enabled": false,
@@ -79,6 +83,8 @@ exports[`renders when story has been closed 1`] = `
       },
       "giphy": Object {
         "enabled": false,
+        "key": "",
+        "maxRating": "",
       },
       "twitter": Object {
         "enabled": false,
@@ -117,6 +123,8 @@ exports[`renders with initialValues 1`] = `
       },
       "giphy": Object {
         "enabled": false,
+        "key": "",
+        "maxRating": "",
       },
       "twitter": Object {
         "enabled": false,

src/core/client/stream/tabs/Comments/GiphyInput/GiphyInput.css

@@ -39,3 +39,8 @@
   display: block;
   max-width: 100%;
 }
+
+.grid {
+  max-height: 300px;
+  overflow: scroll;
+}