refactor(webapp): add EmptyState component

edenia · Dec 7, 2022 · aa6e1c7 · aa6e1c7
1 parent ec5f8b3
commit aa6e1c7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/webapp/src/components/InformationCard/EmptyState.js b/webapp/src/components/InformationCard/EmptyState.js
@@ -0,0 +1,28 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+
+const EmptyState = ({ classes, t }) => {
+  return (
+    <div className={`${classes.centerWrapper} ${classes.borderLine}`}>
+      <div className={classes.emptyState}>
+        <img
+          className={classes.imgError}
+          src="/empty-states/Error.webp"
+          alt=""
+        />
+        <span>{t('emptyState')}</span>
+      </div>
+    </div>
+  )
+}
+
+EmptyState.propTypes = {
+  classes: PropTypes.object,
+  t: PropTypes.func,
+}
+
+EmptyState.defaultProps = {
+  classes: {},
+}
+
+export default memo(EmptyState)
diff --git a/webapp/src/components/InformationCard/index.js b/webapp/src/components/InformationCard/index.js
@@ -19,6 +19,7 @@ import { eosConfig } from '../../config'
 import ProducerHealthIndicators from '../ProducerHealthIndicators'
 import NodesCard from '../NodeCard/NodesCard'
 
+import EmptyState from './EmptyState'
 import ProducerInformation from './ProducerInformation'
 import Nodes from './Nodes'
 import Social from './Social'
@@ -59,20 +60,8 @@ const InformationCard = ({ producer, rank, type }) => {
   }
 
   const BlockProducerInfo = () => {
-    if (producerOrg.healthStatus?.length <= 1) {
-      return (
-        <div className={`bodyWrapper ${classes.borderLine}`}>
-          <div className={classes.emptyState}>
-            <img
-              className={classes.imgError}
-              src="/empty-states/Error.webp"
-              alt=""
-            />
-            <span>{t('emptyState')}</span>
-          </div>
-        </div>
-      )
-    }
+    if (producerOrg.healthStatus?.length <= 1)
+      return <EmptyState classes={classes} t={t}/>
 
     return (
       <div className="bodyWrapper">

diff --git a/webapp/src/components/InformationCard/styles.js b/webapp/src/components/InformationCard/styles.js
@@ -34,7 +34,7 @@ export default (theme) => ({
       flexDirection: 'row',
       '& .bodyWrapper': {
         flexDirection: 'row',
-        justifyContent: 'space-evenly',
+        justifyContent: 'space-between',
         width: '100%',
       },
       '& .MuiTypography-overline': {
@@ -75,8 +75,8 @@ export default (theme) => ({
     },
     [theme.breakpoints.up('lg')]: {
       padding: theme.spacing(0, 6),
-      width: 300,
-      maxWidth: 300,
+      width: 250,
+      minWidth: 250,
       justifyContent: 'center',
     },
   },
@@ -323,6 +323,11 @@ export default (theme) => ({
       marginLeft: theme.spacing(1),
     },
   },
+  centerWrapper: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+  },
   emptyState: {
     display: 'flex',
     flexDirection: 'column',