Merge pull request #23 from opendexnetwork/refactor/components

refactor: loaders, code, menu item, snackbar, labeled row

Author: stackingcats

src/common/components/data-display/LabeledRow.tsx

@@ -0,0 +1,50 @@
+import { Divider, Grid, IconButton, makeStyles } from "@material-ui/core";
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
+import React, { ReactElement } from "react";
+import { copyToClipboard } from "../../utils/appUtil";
+
+type LabeledRowProps = {
+  label: string;
+  value: string | number;
+  paddingSpacing?: number;
+  showCopyIcon?: boolean;
+  reserveSpaceForCopyIcon?: boolean;
+};
+
+const useStyles = makeStyles((theme) => ({
+  cell: (props: LabeledRowProps) => ({
+    padding: theme.spacing(props.paddingSpacing ?? 2),
+    textAlign: "center",
+    wordWrap: "break-word",
+    whiteSpace: "pre-wrap",
+  }),
+}));
+
+const LabeledRow = (props: LabeledRowProps): ReactElement => {
+  const { label, value, showCopyIcon, reserveSpaceForCopyIcon } = props;
+  const classes = useStyles(props);
+
+  return (
+    <Grid container item justify="space-between" alignItems="center">
+      <Grid item xs={reserveSpaceForCopyIcon ? 3 : 4} className={classes.cell}>
+        {label}
+      </Grid>
+      <Divider orientation="vertical" flexItem />
+      <Grid item xs={reserveSpaceForCopyIcon ? 6 : 7} className={classes.cell}>
+        {value}
+      </Grid>
+      {reserveSpaceForCopyIcon && (
+        <Grid item xs={2} className={classes.cell}>
+          {showCopyIcon && (
+            /* IconButton */
+            <IconButton onClick={() => copyToClipboard(value)}>
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          )}
+        </Grid>
+      )}
+    </Grid>
+  );
+};
+
+export default LabeledRow;

src/common/components/data-display/feedback/Snackbar.tsx

@@ -0,0 +1,59 @@
+import {
+  IconButton,
+  makeStyles,
+  Snackbar as MaterialSnackbar,
+  SnackbarContent,
+} from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+import React, { ReactElement, useEffect, useState } from "react";
+import { Subject } from "rxjs";
+
+type SnackbarProps = {
+  message: string;
+  openSubject: Subject<boolean>;
+  type: "error" | "success" | "warning" | "info";
+};
+
+const useStyles = makeStyles((theme) => ({
+  snackbar: {
+    bottom: theme.spacing(3) * 2,
+    right: theme.spacing(3) * 2,
+  },
+  snackbarContent: (props: SnackbarProps) => ({
+    backgroundColor: theme.palette[props.type].main,
+    color: theme.palette[props.type].contrastText,
+  }),
+}));
+
+const Snackbar = (props: SnackbarProps): ReactElement => {
+  const { message, openSubject } = props;
+  const [open, setOpen] = useState(false);
+  const classes = useStyles(props);
+
+  useEffect(() => {
+    const sub = openSubject.subscribe(setOpen);
+    return () => sub.unsubscribe();
+  }, [openSubject]);
+
+  return (
+    <MaterialSnackbar
+      className={classes.snackbar}
+      open={open}
+      autoHideDuration={10000}
+      onClose={() => setOpen(false)}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+    >
+      <SnackbarContent
+        className={classes.snackbarContent}
+        message={message}
+        action={
+          <IconButton onClick={() => setOpen(false)}>
+            <CloseIcon />
+          </IconButton>
+        }
+      />
+    </MaterialSnackbar>
+  );
+};
+
+export default Snackbar;

src/common/components/data-display/loader/PageLoader.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles(() =>
     },
   })
 );
-const PageCircularProgress = (): ReactElement => {
+const PageLoader = (): ReactElement => {
   const classes = useStyles();
   return (
     <Box className={classes.container}>
@@ -26,4 +26,4 @@ const PageCircularProgress = (): ReactElement => {
   );
 };
 
-export default PageCircularProgress;
+export default PageLoader;

src/common/components/data-display/text/Code.tsx

@@ -0,0 +1,29 @@
+import { makeStyles } from "@material-ui/core";
+import React, { ReactElement } from "react";
+
+type CodeProps = {
+  text: string;
+  backgroundColor?: "default" | "paper";
+};
+
+const useStyles = makeStyles((theme) => ({
+  code: (props: CodeProps) => ({
+    backgroundColor:
+      props.backgroundColor === "default"
+        ? theme.palette.background.default
+        : theme.palette.background.paper,
+    padding: `0px ${theme.spacing(1)}px`,
+    borderRadius: 5,
+    letterSpacing: 2,
+    fontFamily: "monospace",
+  }),
+}));
+
+const Code = (props: CodeProps): ReactElement => {
+  const { text } = props;
+  const classes = useStyles(props);
+
+  return <span className={classes.code}>{text}</span>;
+};
+
+export default Code;

src/dashboard/menu/MenuItem.tsx renamed to src/common/components/navigation/MenuItem.tsx

@@ -9,7 +9,7 @@ import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import React, { ComponentClass, ElementType, ReactElement } from "react";
 import { NavLink, useLocation, useRouteMatch } from "react-router-dom";
-import { Path } from "../../router/Path";
+import { Path } from "../../../router/Path";
 
 export type MenuItemProps = {
   path: Path;

src/dashboard/Dashboard.tsx

@@ -26,7 +26,9 @@ import { SetupStatusResponse } from "../models/SetupStatusResponse";
 import { Status } from "../models/Status";
 import { Path } from "../router/Path";
 import Console from "./console/Console";
-import MenuItem, { MenuItemProps } from "./menu/MenuItem";
+import MenuItem, {
+  MenuItemProps,
+} from "../common/components/navigation/MenuItem";
 import Overview from "./overview/Overview";
 // import SetupWarning from "./SetupWarning";
 import Trade from "./trade/Trade";

src/dashboard/console/Console.tsx

@@ -13,6 +13,8 @@ import {
   withStyles,
   WithStyles,
 } from "@material-ui/core";
+import Code from "../../common/components/data-display/text/Code";
+import ErrorMessage from "../../common/components/data-display/ErrorMessage";
 
 type PropsType = RouteComponentProps<{ param1: string }> &
   WithStyles<typeof styles> & {
@@ -35,13 +37,6 @@ const styles = (theme: Theme) => {
     title: {
       marginBottom: theme.spacing(2),
     },
-    code: {
-      backgroundColor: theme.palette.background.paper,
-      padding: `0px ${theme.spacing(1)}px`,
-      borderRadius: 5,
-      letterSpacing: 2,
-      fontFamily: "monospace",
-    },
     terminalContainer: {
       height: "90%",
       width: "100%",
@@ -213,11 +208,13 @@ class Console extends Component<PropsType, StateType> {
     return (
       <div className={classes.wrapper}>
         <Typography component="p" variant="body2" className={classes.title}>
-          Type {<span className={classes.code}>help</span>} to show a list of
-          available commands
+          Type {<Code text="help" />} to show a list of available commands
         </Typography>
         {this.state.error && (
-          <div>Error: {JSON.stringify(this.state.error)}</div>
+          <ErrorMessage
+            mainMessage="Error"
+            details={JSON.stringify(this.state.error)}
+          />
         )}
         <div className={classes.terminalContainer} ref={this.ref} />
       </div>

src/dashboard/overview/Overview.tsx

@@ -3,7 +3,7 @@ import Grid from "@material-ui/core/Grid";
 import React, { ReactElement } from "react";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import api from "../../api";
-import PageCircularProgress from "../../common/components/data-display/loader/PageLoader";
+import PageLoader from "../../common/components/data-display/loader/PageLoader";
 import { Status } from "../../models/Status";
 import DashboardContent, { DashboardContentState } from "../DashboardContent";
 import OverviewItem from "./OverviewItem";
@@ -74,7 +74,7 @@ class Overview extends DashboardContent<PropsType, StateType> {
               ></OverviewItem>
             ))
         ) : (
-          <PageCircularProgress />
+          <PageLoader />
         )}
       </Grid>
     );

src/dashboard/overview/OverviewItem.tsx

@@ -5,19 +5,19 @@ import {
   Icon,
   IconButton,
   makeStyles,
-  Snackbar,
-  SnackbarContent,
   Theme,
   Tooltip,
 } from "@material-ui/core";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
-import CloseIcon from "@material-ui/icons/Close";
 import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined";
 import React, { ReactElement, useState } from "react";
+import { Subject } from "rxjs";
 import api from "../../api";
+import Snackbar from "../../common/components/data-display/feedback/Snackbar";
+import LabeledRow from "../../common/components/data-display/LabeledRow";
 import { formatDateTimeForFilename } from "../../common/utils/dateUtil";
 import { isServiceReady } from "../../common/utils/serviceUtil";
 import { SERVICES_WITH_ADDITIONAL_INFO } from "../../constants";
@@ -41,10 +41,6 @@ const useStyles = makeStyles((theme: Theme) =>
         paddingBottom: 0,
       },
     },
-    cardCell: {
-      padding: theme.spacing(4),
-      textAlign: "center",
-    },
     statusDot: {
       height: 10,
       width: 10,
@@ -58,14 +54,6 @@ const useStyles = makeStyles((theme: Theme) =>
     inactive: {
       backgroundColor: theme.palette.error.light,
     },
-    snackbar: {
-      bottom: theme.spacing(3) * 2,
-      right: theme.spacing(3) * 2,
-    },
-    snackbarMessage: {
-      backgroundColor: theme.palette.error.main,
-      color: theme.palette.error.contrastText,
-    },
   })
 );
 
@@ -88,7 +76,7 @@ const downloadLogs = (serviceName: string, handleError: () => void): void => {
 const OverviewItem = (props: OverviewItemProps): ReactElement => {
   const { status, opendexdLocked, opendexdNotReady } = props;
   const [detailsOpen, setDetailsOpen] = useState(false);
-  const [errorMsgOpen, setErrorMsgOpen] = useState(false);
+  const errorMsgOpenSubject = new Subject<boolean>();
   const classes = useStyles();
 
   const statusDotClass = `${classes.statusDot} ${
@@ -122,6 +110,7 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => {
         >
           <Grid container item>
             {isDetailsIconVisible(status) && (
+              /* IconButton */
               <Tooltip title="details">
                 <IconButton size="small" onClick={() => setDetailsOpen(true)}>
                   <Icon fontSize="small">open_in_full</Icon>
@@ -143,12 +132,15 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => {
           </Grid>
           <Grid container item justify="flex-end">
             {isDownloadLogsEnabled(status) && (
+              /* TextButton */
               <Tooltip title="Download logs">
                 <Button
                   size="small"
                   startIcon={<GetAppOutlinedIcon fontSize="small" />}
                   onClick={() =>
-                    downloadLogs(status.service, () => setErrorMsgOpen(true))
+                    downloadLogs(status.service, () =>
+                      errorMsgOpenSubject?.next(true)
+                    )
                   }
                 >
                   Logs
@@ -159,15 +151,11 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => {
         </Grid>
         <Divider />
         <CardContent className={classes.cardContent}>
-          <Grid container item>
-            <Grid item xs={4} className={classes.cardCell}>
-              Status
-            </Grid>
-            <Divider orientation="vertical" flexItem />
-            <Grid item xs={7} className={classes.cardCell}>
-              {props.status.status}
-            </Grid>
-          </Grid>
+          <LabeledRow
+            label="Status"
+            value={props.status.status}
+            paddingSpacing={4}
+          />
         </CardContent>
       </Card>
 
@@ -179,22 +167,10 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => {
       )}
 
       <Snackbar
-        className={classes.snackbar}
-        open={errorMsgOpen}
-        autoHideDuration={10000}
-        onClose={() => setErrorMsgOpen(false)}
-        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-      >
-        <SnackbarContent
-          className={classes.snackbarMessage}
-          message={`Could not download the logs for ${status.service}`}
-          action={
-            <IconButton onClick={() => setErrorMsgOpen(false)}>
-              <CloseIcon />
-            </IconButton>
-          }
-        />
-      </Snackbar>
+        message={`Could not download the logs for ${status.service}`}
+        openSubject={errorMsgOpenSubject}
+        type="error"
+      ></Snackbar>
     </Grid>
   );
 };

src/dashboard/overview/ServiceDetails.tsx

@@ -39,6 +39,7 @@ const ServiceDetails = (props: ServiceDetailsProps): ReactElement => {
   const classes = useStyles();
 
   return (
+    /* Dialog */
     <Dialog
       open
       onClose={handleClose}
@@ -54,6 +55,7 @@ const ServiceDetails = (props: ServiceDetailsProps): ReactElement => {
           wrap="nowrap"
         >
           <Grid item container xs lg>
+            {/* IconButton */}
             <IconButton onClick={handleClose}>
               <CloseIcon />
             </IconButton>