ExpandableCard

src/components/common/ExpandableCard.js

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import styles from "./styles/expandableCardStyles";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  Collapse,
+  Avatar,
+  IconButton
+} from "@material-ui/core";
+import clsx from "clsx";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+const useStyles = makeStyles(styles);
+
+const ExpandableCard = ({ Icon, title, subtitle, Summary, Content }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const classes = useStyles();
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar aria-label="recipe" className={classes.avatar}>
+            {Icon}
+          </Avatar>
+        }
+        action={
+          <IconButton
+            className={clsx(classes.expand, {
+              [classes.expandOpen]: expanded
+            })}
+            onClick={handleExpandClick}
+            aria-expanded={expanded}
+            aria-label="show more"
+          >
+            <ExpandMoreIcon />
+          </IconButton>
+        }
+        title={<strong>{title}</strong>}
+        subheader={subtitle}
+      />
+      {Summary && <CardContent>{Summary}</CardContent>}
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>{Content}</CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+
+ExpandableCard.propTypes = {
+  Icon: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
+  Summary: PropTypes.node,
+  Content: PropTypes.node.isRequired
+};
+
+export default ExpandableCard;

src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteCard.js

@@ -1,67 +1,22 @@
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import styles from "../../../../../../components/common/styles/expandableCardStyles";
+import ExpandableCard from "../../../../../../components/common/ExpandableCard";
-import { makeStyles } from "@material-ui/core/styles";
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardActions,
-  Collapse,
-  Avatar,
-  IconButton
-} from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded";
-import clsx from "clsx";
+
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import KeyOverwriteSummary from "./KeyOverwriteSummary";
 
-const useStyles = makeStyles(styles);
-
 const KeyOverwriteCard = ({ data }) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const classes = useStyles();
   const { t } = useTranslation();
 
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-  };
-
   return (
-    <Card>
+    <ExpandableCard
-      <CardHeader
+      Icon={<SurroundSoundRoundedIcon />}
-        avatar={
+      title={t("Server.ActiveSession")}
-          <Avatar aria-label="recipe" className={classes.avatar}>
+      subtitle={t("Server.ActiveSessionSubtitle")}
-            <SurroundSoundRoundedIcon />
+      Summary={<KeyOverwriteSummary data={data} />}
-          </Avatar>
+      Content={<div>CONTENT...</div>}
-        }
+    />
-        action={
-          <IconButton
-            className={clsx(classes.expand, {
-              [classes.expandOpen]: expanded
-            })}
-            onClick={handleExpandClick}
-            aria-expanded={expanded}
-            aria-label="show more"
-          >
-            <ExpandMoreIcon />
-          </IconButton>
-        }
-        title={<strong>{t("Server.ActiveSession")}</strong>}
-        subheader={t("Server.ActiveSessionSubtitle")}
-      />
-      <CardContent>
-        <KeyOverwriteSummary data={data} />
-      </CardContent>
-      <CardActions disableSpacing></CardActions>
-      <Collapse in={expanded} timeout="auto" unmountOnExit>
-        <CardContent>
-          <div>CONTENT...</div>
-        </CardContent>
-      </Collapse>
-    </Card>
   );
 };