feat: Allow backup data to be viewed

src/State/BackupItem.js

@@ -0,0 +1,92 @@
+import React, { Component } from "react"
+import IconRename from "react-icons/lib/md/create"
+import IconDelete from "react-icons/lib/md/delete"
+import IconUpload from "react-icons/lib/md/file-upload"
+import AppStyles from "../Theme/AppStyles"
+import Colors from "../Theme/Colors"
+import Content from "../Shared/Content"
+
+const Styles = {
+  container: {
+    overflow: "hidden",
+    borderBottom: `1px solid ${Colors.line}`,
+  },
+  row: {
+    ...AppStyles.Layout.hbox,
+    padding: "15px 20px",
+    justifyContent: "space-between",
+    alignItems: "center",
+    cursor: "pointer",
+  },
+  name: {
+    color: Colors.tag,
+    textAlign: "left",
+    flex: 1,
+  },
+  iconSize: 24,
+  upload: {
+    paddingRight: 10,
+    cursor: "pointer",
+  },
+  button: {
+    cursor: "pointer",
+    paddingLeft: 10,
+  },
+  children: {
+    overflow: "hidden",
+    animation: "fade-up 0.25s",
+    willChange: "transform opacity",
+    padding: "0 40px 30px 40px",
+  },
+}
+
+export default class BackupItem extends Component {
+  state = {
+    isOpen: false,
+  }
+
+  handleToggle = event => {
+    event.stopPropagation()
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen,
+    }))
+  }
+
+  handleRemove = event => {
+    event.stopPropagation()
+    this.props.onRemove(this.props.backup)
+  }
+
+  handleRename = event => {
+    event.stopPropagation()
+    this.props.onRename(this.props.backup)
+  }
+
+  handleRestore = event => {
+    event.stopPropagation()
+    this.props.onRestore(this.props.backup)
+  }
+
+  render() {
+    const {
+      backup: { name, state },
+    } = this.props
+    const { isOpen } = this.state
+
+    return (
+      <div style={Styles.container}>
+        <div style={Styles.row} onClick={this.handleToggle}>
+          <div style={Styles.name}>{name}</div>
+          <IconUpload size={Styles.iconSize} style={Styles.button} onClick={this.handleRestore} />
+          <IconRename size={Styles.iconSize} style={Styles.button} onClick={this.handleRename} />
+          <IconDelete size={Styles.iconSize} style={Styles.button} onClick={this.handleRemove} />
+        </div>
+        {isOpen && (
+          <div style={Styles.children}>
+            <Content value={state} />
+          </div>
+        )}
+      </div>
+    )
+  }
+}

src/State/Backups.js

@@ -1,10 +1,8 @@
 import { inject, observer } from "mobx-react"
 import React, { Component } from "react"
-import IconRename from "react-icons/lib/md/create"
-import IconDelete from "react-icons/lib/md/delete"
 import Empty from "../Shared/EmptyState"
 import AppStyles from "../Theme/AppStyles"
-import Colors from "../Theme/Colors"
+import BackupItem from "./BackupItem"
 
 const Styles = {
   container: {
@@ -18,28 +16,6 @@ const Styles = {
     overflowY: "auto",
     overflowX: "hidden",
   },
-  row: {
-    ...AppStyles.Layout.hbox,
-    padding: "15px 20px",
-    justifyContent: "space-between",
-    alignItems: "center",
-    borderBottom: `1px solid ${Colors.line}`,
-    cursor: "pointer",
-  },
-  name: {
-    color: Colors.tag,
-    textAlign: "left",
-    flex: 1,
-  },
-  iconSize: 24,
-  upload: {
-    paddingRight: 10,
-    cursor: "pointer",
-  },
-  button: {
-    cursor: "pointer",
-    paddingLeft: 10,
-  },
 }
 
 @inject("session")
@@ -61,29 +37,32 @@ class Backups extends Component {
     )
   }
 
-  renderBackup(backup) {
+  handleRemove = backup => {
     const { stateBackupStore } = this.props.session
-    const { id, name, data } = backup
+    stateBackupStore.remove(backup)
+  }
 
-    const remove = event => {
-      event.stopPropagation()
-      stateBackupStore.remove(backup)
-    }
-    const rename = event => {
-      stateBackupStore.beginRename(backup)
-      event.stopPropagation()
-    }
-    const restore = event => {
-      stateBackupStore.sendRestore(backup)
-      event.stopPropagation()
-    }
+  handleRename = backup => {
+    const { stateBackupStore } = this.props.session
+    stateBackupStore.beginRename(backup)
+  }
+
+  handleRestore = backup => {
+    const { stateBackupStore } = this.props.session
+    stateBackupStore.sendRestore(backup)
+  }
+
+  renderBackup(backup) {
+    const { id, name } = backup
 
     return (
-      <div style={Styles.row} key={`backup-${id}`} onClick={restore}>
-        <div style={Styles.name}>{name}</div>
-        <IconRename size={Styles.iconSize} style={Styles.button} onClick={rename} />
-        <IconDelete size={Styles.iconSize} style={Styles.button} onClick={remove} />
-      </div>
+      <BackupItem
+        key={`backup-${id}-${name}`}
+        backup={backup}
+        onRemove={this.handleRemove}
+        onRename={this.handleRename}
+        onRestore={this.handleRestore}
+      />
     )
   }