perf(app-board): remove arrow and inline objects

eficode · Jan 28, 2021 · 419f97a · 419f97a
1 parent 1ad8936
commit 419f97a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.tsx b/packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { ExpandIcon, PanelContent, PanelContentWrapper, PanelHeader, PanelWrapper } from './ExpandableTopPanel.styled';
 import Typography from '../Typography';
 
@@ -21,8 +21,12 @@ type Props = {
 const ExpandableTopPanel: React.FC<Props> = ({ className, label, children }) => {
   const [collapsed, setCollapsed] = useState(true);
 
+  const toggle = useCallback(() => {
+    setCollapsed(c => !c);
+  }, []);
+
   return (
-    <PanelWrapper className={className} onClick={() => setCollapsed(c => !c)}>
+    <PanelWrapper className={className} onClick={toggle}>
       <PanelHeader>
         <Typography variant="content" fontWeight="600">
           {label}

diff --git a/packages/game-app/src/gameView/components/ShareGameDialog/ShareGameDialog.tsx b/packages/game-app/src/gameView/components/ShareGameDialog/ShareGameDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useTranslate } from '@pipeline/i18n';
 import { Box, IconButton, Typography, Dialog, Button, Input } from '@pipeline/components';
 import { useSelector } from 'react-redux';
@@ -26,9 +26,11 @@ const ShareGameDialog: React.FC<Props> = ({ isOpen, close }) => {
 
   const game: GameEntity | null = useSelector(selectors.getGame);
 
-  if (!game) return null;
+  const url = `${window.location.origin}/game/${game?.id}`;
 
-  const url = `${window.location.origin}/game/${game.id}`;
+  const copyUrl = useCallback(() => {
+    copy(url);
+  }, [url]);
 
   return (
     <Dialog open={isOpen} title={t('game.share.title')}>
@@ -37,7 +39,7 @@ const ShareGameDialog: React.FC<Props> = ({ isOpen, close }) => {
       </Typography>
       <Box display="flex" flexDirection="row" mt={4}>
         <Input flex={1} readOnly variant="clear" color="activeAccentLight" value={url} />
-        <IconButton variant="clear" onClick={() => copy(url)}>
+        <IconButton variant="clear" onClick={copyUrl}>
           <CopyIcon />
         </IconButton>
       </Box>

diff --git a/packages/game-app/src/gameView/components/TriggerReviewDialog/TriggerReviewDialog.tsx b/packages/game-app/src/gameView/components/TriggerReviewDialog/TriggerReviewDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Box, Button, Dialog, Typography } from '@pipeline/components';
 import { useTranslate } from '@pipeline/i18n';
 import { TriggerDialogContainer } from './TriggerReviewDialog.styled';
@@ -22,12 +22,16 @@ const TriggerReviewDialog: React.FC<Props> = ({ isOpen, close }) => {
     setShowReviewPosition(true);
   }, [dispatch]);
 
+  const containerProps = useMemo(() => {
+    return { showReviewPosition };
+  }, [showReviewPosition]);
+
   return (
     <Dialog
       open={isOpen}
       title={t(!showReviewPosition ? 'game.triggerReview.title' : 'game.triggerReview.reviewTime')}
       DialogContainerComponent={TriggerDialogContainer}
-      DialogContainerProps={{ showReviewPosition }}
+      DialogContainerProps={containerProps}
     >
       <Typography mt={4} variant="content">
         {t(!showReviewPosition ? 'game.triggerReview.subtitle' : 'game.triggerReview.reviewUnlocked')}