fix: Pass appId and blockId from blocks to elements (#366)

tassoevan · web-flow · commit 8a1b552f8dbc · 2021-01-22T23:51:57.000-03:00
diff --git a/packages/fuselage-ui-kit/src/blocks/ActionsBlock.js b/packages/fuselage-ui-kit/src/blocks/ActionsBlock.js
@@ -1,12 +1,12 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import { BlockContext, ElementType } from '@rocket.chat/ui-kit';
-import React, { useCallback, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 
 import { useSurfaceType } from '../surfaces/SurfaceContext';
 
-const Action = ({ blockId, appId, element, parser }) => {
+const Action = ({ element, parser }) => {
   const renderedElement = parser.renderActions(
-    { blockId, appId, ...element },
+    element,
     BlockContext.ACTION,
     parser
   );
@@ -27,9 +27,11 @@ const Action = ({ blockId, appId, element, parser }) => {
   );
 };
 
-const ActionsBlock = ({ className, blockId, appId, elements, parser }) => {
+const ActionsBlock = ({ className, blockElement, parser }) => {
   const surfaceType = useSurfaceType();
 
+  const { appId, blockId, elements } = blockElement;
+
   const [showMoreVisible, setShowMoreVisible] = useState(
     () => elements.length > 5 && surfaceType !== 'banner'
   );
@@ -38,16 +40,20 @@ const ActionsBlock = ({ className, blockId, appId, elements, parser }) => {
     setShowMoreVisible(false);
   }, []);
 
+  const actionElements = useMemo(
+    () =>
+      (showMoreVisible ? elements.slice(0, 5) : elements).map((element) => ({
+        appId,
+        blockId,
+        ...element,
+      })),
+    [appId, blockId, elements, showMoreVisible]
+  );
+
   return (
     <Box className={className} display='flex' flexWrap='wrap' margin={-4}>
-      {(showMoreVisible ? elements.slice(0, 5) : elements).map((element, i) => (
-        <Action
-          key={i}
-          blockId={blockId}
-          appId={appId}
-          element={element}
-          parser={parser}
-        />
+      {actionElements.map((element, i) => (
+        <Action key={i} element={element} parser={parser} />
       ))}
       {showMoreVisible && (
         <Box display='flex' margin={4}>
@@ -64,4 +70,4 @@ const ActionsBlock = ({ className, blockId, appId, elements, parser }) => {
   );
 };
 
-export default ActionsBlock;
+export default memo(ActionsBlock);
diff --git a/packages/fuselage-ui-kit/src/blocks/ContextBlock.js b/packages/fuselage-ui-kit/src/blocks/ContextBlock.js
@@ -1,6 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import { BlockContext, ElementType } from '@rocket.chat/ui-kit';
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 
 const Item = ({ element, parser }) => {
   const renderedElement = parser.renderContext(
@@ -27,12 +27,21 @@ const Item = ({ element, parser }) => {
   }
 };
 
-const ContextBlock = ({ className, elements, parser }) => (
-  <Box className={className} display='flex' alignItems='center' margin={-4}>
-    {elements.map((element, i) => (
-      <Item key={i} element={element} parser={parser} />
-    ))}
-  </Box>
-);
+const ContextBlock = ({ className, blockElement, parser }) => {
+  const { appId, blockId, elements } = blockElement;
 
-export default ContextBlock;
+  const itemElements = useMemo(
+    () => elements.map((element) => ({ appId, blockId, ...element })),
+    [appId, blockId, elements]
+  );
+
+  return (
+    <Box className={className} display='flex' alignItems='center' margin={-4}>
+      {itemElements.map((element, i) => (
+        <Item key={i} element={element} parser={parser} />
+      ))}
+    </Box>
+  );
+};
+
+export default memo(ContextBlock);
diff --git a/packages/fuselage-ui-kit/src/blocks/DividerBlock.js b/packages/fuselage-ui-kit/src/blocks/DividerBlock.js
@@ -1,8 +1,8 @@
 import { Divider } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { memo } from 'react';
 
 const DividerBlock = ({ className }) => (
   <Divider className={className} marginBlock='x24' />
 );
 
-export default DividerBlock;
+export default memo(DividerBlock);
diff --git a/packages/fuselage-ui-kit/src/blocks/ImageBlock.js b/packages/fuselage-ui-kit/src/blocks/ImageBlock.js
@@ -1,5 +1,5 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 
 import { useSurfaceType } from '../surfaces/SurfaceContext';
 
@@ -28,15 +28,15 @@ const fetchImageState = (img) => {
   };
 };
 
-const ImageBlock = ({ className, element, parser }) => {
+const ImageBlock = ({ className, blockElement, parser }) => {
   const surface = useSurfaceType();
 
   const alignment =
     surface === 'banner' || surface === 'message' ? 'flex-start' : 'center';
 
   const [{ loading, width, height }, setState] = useState(() => {
     const img = document.createElement('img');
-    img.src = element.imageUrl;
+    img.src = blockElement.imageUrl;
     return fetchImageState(img);
   });
 
@@ -48,7 +48,7 @@ const ImageBlock = ({ className, element, parser }) => {
     };
 
     img.addEventListener('load', handleLoad);
-    img.src = element.imageUrl;
+    img.src = blockElement.imageUrl;
 
     if (img.complete) {
       img.removeEventListener('load', handleLoad);
@@ -58,7 +58,7 @@ const ImageBlock = ({ className, element, parser }) => {
     return () => {
       img.removeEventListener('load', handleLoad);
     };
-  }, [element.imageUrl]);
+  }, [blockElement.imageUrl]);
 
   const style = useMemo(
     () => ({
@@ -67,9 +67,9 @@ const ImageBlock = ({ className, element, parser }) => {
       backgroundPosition: '50%',
       backgroundSize: 'cover',
       backgroundColor: 'rgba(204, 204, 204, 38%)',
-      backgroundImage: `url(${element.imageUrl})`,
+      backgroundImage: `url(${blockElement.imageUrl})`,
     }),
-    [element.imageUrl]
+    [blockElement.imageUrl]
   );
 
   return (
@@ -81,9 +81,9 @@ const ImageBlock = ({ className, element, parser }) => {
       alignItems={alignment}
     >
       <Box overflow='hidden' width={width}>
-        {element.title && (
+        {blockElement.title && (
           <Box fontScale='c1' color='info' withTruncatedText marginBlockEnd={4}>
-            {parser.plainText(element.title, -1, 0)}
+            {parser.plainText(blockElement.title, -1, 0)}
           </Box>
         )}
         {loading ? (
@@ -95,12 +95,12 @@ const ImageBlock = ({ className, element, parser }) => {
             width={width}
             height={height}
             style={style}
-            aria-label={element.altText}
+            aria-label={blockElement.altText}
           />
         )}
       </Box>
     </Box>
   );
 };
 
-export default ImageBlock;
+export default memo(ImageBlock);
diff --git a/packages/fuselage-ui-kit/src/blocks/InputBlock.js b/packages/fuselage-ui-kit/src/blocks/InputBlock.js
@@ -1,22 +1,27 @@
 import { Field } from '@rocket.chat/fuselage';
 import { BlockContext } from '@rocket.chat/ui-kit';
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
-const InputBlock = ({ className, element, parser, context }) => {
-  const [{ error }] = useBlockContext(element.element, context);
+const InputBlock = ({ className, blockElement, parser, context }) => {
+  const { appId, blockId, element, label, hint } = blockElement;
+  const inputElement = useMemo(() => ({ appId, blockId, ...element }), [
+    appId,
+    blockId,
+    element,
+  ]);
+
+  const [{ error }] = useUiKitState(inputElement, context);
 
   return (
     <Field className={className}>
-      {element.label && (
-        <Field.Label>{parser.plainText(element.label)}</Field.Label>
-      )}
+      {label && <Field.Label>{parser.plainText(label)}</Field.Label>}
       <Field.Row>
-        {parser.renderInputs(element.element, BlockContext.FORM, parser, 0)}
+        {parser.renderInputs(inputElement, BlockContext.FORM, parser, 0)}
       </Field.Row>
       {error && <Field.Error>{error}</Field.Error>}
-      {element.hint && <Field.Hint>{element.hint}</Field.Hint>}
+      {hint && <Field.Hint>{hint}</Field.Hint>}
     </Field>
   );
 };
diff --git a/packages/fuselage-ui-kit/src/blocks/SectionBlock.js b/packages/fuselage-ui-kit/src/blocks/SectionBlock.js
@@ -1,6 +1,6 @@
 import { Box, Flex, Grid } from '@rocket.chat/fuselage';
 import { BlockContext } from '@rocket.chat/ui-kit';
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 const Accessory = ({ blockId, appId, element, parser }) =>
   parser.renderAccessories(
@@ -27,12 +27,12 @@ const Fields = ({ fields, parser }) => (
   </Grid>
 );
 
-const SectionBlock = ({ className, element, parser }) => {
-  const { blockId, appId, text, fields, accessory } = element;
+const SectionBlock = ({ className, blockElement, parser }) => {
+  const { blockId, appId, text, fields, accessory } = blockElement;
 
-  const accessoryElement = useMemo(() => ({ blockId, appId, ...accessory }), [
-    blockId,
+  const accessoryElement = useMemo(() => ({ appId, blockId, ...accessory }), [
     appId,
+    blockId,
     accessory,
   ]);
 
@@ -57,4 +57,4 @@ const SectionBlock = ({ className, element, parser }) => {
   );
 };
 
-export default SectionBlock;
+export default memo(SectionBlock);
diff --git a/packages/fuselage-ui-kit/src/elements/ButtonElement.js b/packages/fuselage-ui-kit/src/elements/ButtonElement.js
@@ -1,10 +1,10 @@
 import { Button, Throbber } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 const ButtonElement = ({ element, context, parser }) => {
-  const [{ loading }, action] = useBlockContext(element, context);
+  const [{ loading }, action] = useUiKitState(element, context);
 
   return (
     <Button
diff --git a/packages/fuselage-ui-kit/src/elements/DatePickerElement.js b/packages/fuselage-ui-kit/src/elements/DatePickerElement.js
@@ -1,10 +1,10 @@
 import { InputBox } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 const DatePickerElement = ({ element, context, parser }) => {
-  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const [{ loading, value, error }, action] = useUiKitState(element, context);
   const { actionId, placeholder } = element;
   return (
     <InputBox
diff --git a/packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.js b/packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.js
@@ -1,10 +1,10 @@
 import { MultiSelectFiltered } from '@rocket.chat/fuselage';
 import React, { memo, useCallback, useMemo } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 export const MultiStaticSelectElement = ({ element, context, parser }) => {
-  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const [{ loading, value, error }, action] = useUiKitState(element, context);
 
   const { options, placeholder } = element;
 
diff --git a/packages/fuselage-ui-kit/src/elements/OverflowElement.js b/packages/fuselage-ui-kit/src/elements/OverflowElement.js
@@ -7,13 +7,13 @@ import {
 } from '@rocket.chat/fuselage';
 import React, { useRef, useCallback } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 const convertOptions = (options, parser) =>
   options.map(({ text, value }) => [value, parser(text)]);
 
 const OverflowElement = ({ element, context, parser }) => {
-  const [{ loading }, action] = useBlockContext(element, context);
+  const [{ loading }, action] = useUiKitState(element, context);
 
   const { options } = element;
 
diff --git a/packages/fuselage-ui-kit/src/elements/PlainInputElement.js b/packages/fuselage-ui-kit/src/elements/PlainInputElement.js
@@ -1,10 +1,10 @@
 import { TextAreaInput, TextInput } from '@rocket.chat/fuselage';
 import React, { memo } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 const PlainInputElement = ({ element, context, parser }) => {
-  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const [{ loading, value, error }, action] = useUiKitState(element, context);
   const { multiline, actionId, placeholder } = element;
   const Component = multiline ? TextAreaInput : TextInput;
   return (
diff --git a/packages/fuselage-ui-kit/src/elements/StaticSelectElement.js b/packages/fuselage-ui-kit/src/elements/StaticSelectElement.js
@@ -1,10 +1,10 @@
 import { SelectFiltered } from '@rocket.chat/fuselage';
 import React, { memo, useCallback, useMemo } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 export const StaticSelectElement = ({ element, context, parser }) => {
-  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const [{ loading, value, error }, action] = useUiKitState(element, context);
 
   const { options, placeholder } = element;
 
diff --git a/packages/fuselage-ui-kit/src/hooks.js b/packages/fuselage-ui-kit/src/hooks.js
@@ -11,7 +11,7 @@ export const defaultContext = {
 
 export const kitContext = createContext(defaultContext);
 
-export const useBlockContext = (
+export const useUiKitState = (
   { blockId, actionId, appId, initialValue },
   context
 ) => {
@@ -45,7 +45,7 @@ export const useBlockContext = (
 
   const stateFunction = useMutableCallback(async ({ target: { value } }) => {
     setValue(value);
-    await state({ blockId, appId, actionId, value });
+    await state({ blockId, appId: appId || appIdFromContext, actionId, value });
   });
 
   const result = useMemo(() => ({ loading, setLoading, error, value }), [
diff --git a/packages/fuselage-ui-kit/src/renderers.js b/packages/fuselage-ui-kit/src/renderers.js
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_AutoComplete_Example.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_AutoComplete_Example.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_AutoComplete_Example.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_AutoComplete_Example.png
