Performance improvements (#1206)

* Memoize * Move cssbaseline * Don't render login page while loading config * Memoize * Split code * Memoize * Memoize
timmo001 · Jun 22, 2020 · c738d70 · c738d70
1 parent 64f5455
commit c738d70
Show file tree

Hide file tree

Showing 6 changed files with 458 additions and 336 deletions.
diff --git a/frontend/src/Components/Cards/Base.tsx b/frontend/src/Components/Cards/Base.tsx
@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, ReactElement, useState } from 'react';
+import React, {
+  Fragment,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+} from 'react';
 import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import Card from '@material-ui/core/Card';
@@ -7,28 +14,22 @@ import Dialog from '@material-ui/core/Dialog';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import ArrowDownwardsIcon from '@material-ui/icons/ArrowDownward';
-import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
 import CloseIcon from '@material-ui/icons/Close';
-import CopyIcon from '@material-ui/icons/FileCopy';
-import DeleteIcon from '@material-ui/icons/Delete';
-import EditIcon from '@material-ui/icons/Edit';
 
 import { CardProps, ConfigurationProps } from '../Configuration/Config';
 import {
   HomeAssistantChangeProps,
   entitySizes,
 } from '../HomeAssistant/HomeAssistant';
 import { CommandType } from '../Utils/Command';
-import ConfirmDialog from '../Utils/ConfirmDialog';
-import EditCard from '../Configuration/EditCard/EditCard';
 import Entity from '../HomeAssistant/Cards/Entity';
 import Frame from './Frame';
 import Image from './Image';
 import Markdown from './Markdown';
+import Message from '../Utils/Message';
 import News from './News';
+import Overlay from './Overlay';
 import RSS from './RSS';
-import Message from '../Utils/Message';
 
 const useStyles = makeStyles((theme: Theme) => ({
   buttonExpand: {
@@ -39,23 +40,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   card: {
     flex: 1,
   },
-  cardActions: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: '100%',
-    width: '100%',
-    padding: theme.spacing(0.5),
-    zIndex: 1000,
-    transition: '.4s ease',
-    background: theme.palette.background.paper,
-    opacity: 0,
-    '&:hover': {
-      opacity: 1,
-    },
-  },
   cardContent: {
     textAlign: 'start',
     display: 'flex',
@@ -96,8 +80,6 @@ export interface BaseProps extends HomeAssistantChangeProps {
 
 let holdTimeout: NodeJS.Timeout;
 function Base(props: BaseProps): ReactElement {
-  const [deleteConfirm, setDeleteConfirm] = useState<boolean>(false);
-  const [editCard, setEditCard] = useState<boolean>(false);
   const [expandable, setExpandable] = useState<boolean>(false);
   const [expandCard, setExpandCard] = useState<boolean>(false);
   const [height, setHeight] = useState<string | number>();
@@ -189,14 +171,6 @@ function Base(props: BaseProps): ReactElement {
     width,
   ]);
 
-  function handleDeleteConfirm(): void {
-    setDeleteConfirm(true);
-  }
-
-  function handleConfirmClose(): void {
-    setDeleteConfirm(false);
-  }
-
   function handleHassToggle(): void {
     if (props.card.domain && props.handleHassChange)
       if (props.card.domain === 'lock') {
@@ -227,14 +201,6 @@ function Base(props: BaseProps): ReactElement {
       }
   }
 
-  function handleEdit(): void {
-    setEditCard(true);
-  }
-
-  function handleEditClose(): void {
-    setEditCard(false);
-  }
-
   function handleExpand(): void {
     setExpandCard(true);
   }
@@ -256,6 +222,57 @@ function Base(props: BaseProps): ReactElement {
     }
   }
 
+  const card: ReactElement =
+    props.card.type === 'entity' ? (
+      props.hassConnection === -2 ? (
+        <Message type="error" text="Home Assistant not connected" />
+      ) : props.hassConnection === -1 ? (
+        <Message text="Connecting to Home Assistant.." />
+      ) : (
+        <Entity {...props} handleHassToggle={handleHassToggle} />
+      )
+    ) : props.card.type === 'iframe' ? (
+      <Frame {...props} />
+    ) : props.card.type === 'image' ? (
+      <Image {...props} />
+    ) : props.card.type === 'markdown' ? (
+      <Markdown {...props} />
+    ) : props.card.type === 'news' ? (
+      <News {...props} />
+    ) : props.card.type === 'rss' ? (
+      <RSS {...props} />
+    ) : (
+      <Fragment />
+    );
+
+  const background = useMemo(
+    () =>
+      props.card.disabled
+        ? theme.palette.error.main
+        : props.editing !== 2 && props.card.backgroundTemp
+        ? props.card.backgroundTemp
+        : props.card.background
+        ? props.card.background
+        : '',
+    [
+      props.card.background,
+      props.card.backgroundTemp,
+      props.card.disabled,
+      props.editing,
+      theme.palette.error.main,
+    ]
+  );
+
+  const elevation = useMemo(
+    () =>
+      props.editing === 2
+        ? 0
+        : props.card.elevation
+        ? Number(props.card.elevation)
+        : 1,
+    [props.card.elevation, props.editing]
+  );
+
   return (
     <ButtonBase
       component="div"
@@ -275,21 +292,9 @@ function Base(props: BaseProps): ReactElement {
       <Card
         className={classes.card}
         square={props.card.square}
-        elevation={
-          props.editing === 2
-            ? 0
-            : props.card.elevation
-            ? Number(props.card.elevation)
-            : 1
-        }
+        elevation={elevation}
         style={{
-          background: props.card.disabled
-            ? theme.palette.error.main
-            : props.editing !== 2 && props.card.backgroundTemp
-            ? props.card.backgroundTemp
-            : props.card.background
-            ? props.card.background
-            : '',
+          background: background,
         }}>
         <CardContent
           className={classes.cardContent}
@@ -331,60 +336,9 @@ function Base(props: BaseProps): ReactElement {
               )}
             </Grid>
           </Grid>
-          {props.card.type === 'entity' &&
-            (props.hassConnection === -2 ? (
-              <Message type="error" text="Home Assistant not connected" />
-            ) : props.hassConnection === -1 ? (
-              <Message text="Connecting to Home Assistant.." />
-            ) : (
-              <Entity {...props} handleHassToggle={handleHassToggle} />
-            ))}
-          {props.card.type === 'iframe' && <Frame {...props} />}
-          {props.card.type === 'image' && <Image {...props} />}
-          {props.card.type === 'markdown' && <Markdown {...props} />}
-          {props.card.type === 'news' && <News {...props} />}
-          {props.card.type === 'rss' && <RSS {...props} />}
-          {props.editing === 1 && (
-            <Grid
-              className={classes.cardActions}
-              container
-              alignContent="center"
-              alignItems="center"
-              justify="center">
-              <IconButton color="primary" onClick={handleEdit}>
-                <EditIcon fontSize="small" />
-              </IconButton>
-              <IconButton color="primary" onClick={handleDeleteConfirm}>
-                <DeleteIcon fontSize="small" />
-              </IconButton>
-              <IconButton color="primary" onClick={props.handleCopy}>
-                <CopyIcon fontSize="small" />
-              </IconButton>
-              <IconButton color="primary" onClick={props.handleMoveUp}>
-                <ArrowUpwardIcon fontSize="small" />
-              </IconButton>
-              <IconButton color="primary" onClick={props.handleMoveDown}>
-                <ArrowDownwardsIcon fontSize="small" />
-              </IconButton>
-              {deleteConfirm && (
-                <ConfirmDialog
-                  text="Are you sure you want to delete this card?"
-                  handleClose={handleConfirmClose}
-                  handleConfirm={props.handleDelete}
-                />
-              )}
-            </Grid>
-          )}
+          {card}
+          {props.editing === 1 && <Overlay {...props} />}
         </CardContent>
-        {editCard && (
-          <EditCard
-            {...props}
-            card={props.card}
-            command={props.command}
-            handleClose={handleEditClose}
-            handleUpdate={props.handleUpdate}
-          />
-        )}
       </Card>
       {expandCard && (
         <Dialog

diff --git a/frontend/src/Components/Cards/Overlay.tsx b/frontend/src/Components/Cards/Overlay.tsx
@@ -0,0 +1,100 @@
+import React, { ReactElement, Fragment, useState } from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import ArrowDownwardsIcon from '@material-ui/icons/ArrowDownward';
+import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
+import CopyIcon from '@material-ui/icons/FileCopy';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
+
+import { BaseProps } from './Base';
+import ConfirmDialog from '../Utils/ConfirmDialog';
+import EditCard from '../Configuration/EditCard/EditCard';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  cardActions: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: '100%',
+    width: '100%',
+    padding: theme.spacing(0.5),
+    zIndex: 1000,
+    transition: '.4s ease',
+    background: theme.palette.background.paper,
+    opacity: 0,
+    '&:hover': {
+      opacity: 1,
+    },
+  },
+}));
+
+function Overlay(props: BaseProps): ReactElement {
+  const [deleteConfirm, setDeleteConfirm] = useState<boolean>(false);
+  const [editCard, setEditCard] = useState<boolean>(false);
+
+  function handleDeleteConfirm(): void {
+    setDeleteConfirm(true);
+  }
+
+  function handleConfirmClose(): void {
+    setDeleteConfirm(false);
+  }
+
+  function handleEdit(): void {
+    setEditCard(true);
+  }
+
+  function handleEditClose(): void {
+    setEditCard(false);
+  }
+
+  const classes = useStyles();
+  return (
+    <Fragment>
+      <Grid
+        className={classes.cardActions}
+        container
+        alignContent="center"
+        alignItems="center"
+        justify="center">
+        <IconButton color="primary" onClick={handleEdit}>
+          <EditIcon fontSize="small" />
+        </IconButton>
+        <IconButton color="primary" onClick={handleDeleteConfirm}>
+          <DeleteIcon fontSize="small" />
+        </IconButton>
+        <IconButton color="primary" onClick={props.handleCopy}>
+          <CopyIcon fontSize="small" />
+        </IconButton>
+        <IconButton color="primary" onClick={props.handleMoveUp}>
+          <ArrowUpwardIcon fontSize="small" />
+        </IconButton>
+        <IconButton color="primary" onClick={props.handleMoveDown}>
+          <ArrowDownwardsIcon fontSize="small" />
+        </IconButton>
+        {deleteConfirm && (
+          <ConfirmDialog
+            text="Are you sure you want to delete this card?"
+            handleClose={handleConfirmClose}
+            handleConfirm={props.handleDelete}
+          />
+        )}
+      </Grid>
+      {editCard && (
+        <EditCard
+          {...props}
+          card={props.card}
+          command={props.command}
+          handleClose={handleEditClose}
+          handleUpdate={props.handleUpdate}
+        />
+      )}
+    </Fragment>
+  );
+}
+
+export default Overlay;