Added backup/restore function

resources/js/components/Data/Backup.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import Axios from 'axios';
+
+export default class Backup extends Component {
+    backup = () => {
+        var url = '/api/backup';
+
+        toast.info('Your backup has started downloading...');
+
+        Axios.get(url, {
+            responseType: 'blob'
+        })
+        .then((resp) => {
+            var a = document.createElement('a');
+            a.href = url;
+            a.download = "";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            toast.success('Backup downloaded');
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
+
+    render() {
+        return (
+            <Button
+                variant="primary"
+                className="mx-2"
+                onClick={this.backup}
+            >Backup</Button>
+        );
+    }
+}
+
+if (document.getElementById('Backup')) {
+    ReactDOM.render(<Backup />, document.getElementById('Backup'));
+}

resources/js/components/Data/DataRow.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import Backup from './Backup';
+import Restore from './Restore';
+
+export default class DataRow extends Component {
+    render() {
+        return (
+            <Container>
+                <Row>
+                    <Col sm={{ span: 12 }} className="text-center">
+                        <p>Use these buttons to backup/restore your data</p>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col sm={{ span: 12 }} className="text-center">
+                        <Backup />
+                        <Restore />
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('DataRow')) {
+    ReactDOM.render(<DataRow />, document.getElementById('DataRow'));
+}

resources/js/components/Data/Restore.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Modal, Form, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import Axios from 'axios';
+
+export default class Restore extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            show: false,
+            data: null,
+            uploadReady: false,
+            filename: 'Upload your backup JSON'
+        };
+    }
+
+    showModal = () => {
+        this.setState({
+            show: true
+        });
+    }
+
+    hideModal = () => {
+        this.setState({
+            show: false
+        });
+    }
+
+    readFile = (e) => {
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.readAsText(file, 'UTF-8');
+        reader.onload = function(evt) {
+            try {
+                var data = evt.target.result.trim();
+                var data = JSON.parse(data);
+                this.setState({
+                    data: data,
+                    uploadReady: true,
+                    filename: file.name
+                });
+            } catch(e) {
+                console.log(e);
+                toast.error('Your upload file is not valid JSON');
+            }
+        }.bind(this)
+        reader.onerror = function (evt) {
+            toast.error('Something went wrong parsing your backup file.');
+        }
+    }
+
+    uploadFile = () => {
+        var data = { data: this.state.data };
+        var url = '/api/restore';
+
+        Axios.post(url, data)
+        .then((resp) => {
+            toast.success('Your is being restored...');
+            this.setState({
+                show: false,
+                data: null,
+                uploadReady: false,
+                filename: 'Upload your backup JSON'
+            });
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
+
+    render() {
+        var show = this.state.show;
+        var uploadReady = this.state.uploadReady;
+        var filename = this.state.filename;
+
+        return (
+            <>
+                <Button variant="secondary" className="mx-2" onClick={this.showModal}>Restore</Button>
+
+                <Modal show={show} onHide={this.hideModal} animation={true}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Restore from a backup</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <p>Upload your JSON backup file here:</p>
+                        <Form.File
+                            id="restoreFileInput"
+                            label="Upload JSON file"
+                            className="mb-3"
+                            custom
+                        >
+                            <Form.File.Input onChange={this.readFile} />
+                            <Form.File.Label data-browse="Choose file">
+                                {filename}
+                            </Form.File.Label>
+                        </Form.File>
+                        {uploadReady === true &&
+                            <Button variant="secondary" onClick={this.uploadFile}>Restore</Button>
+                        }
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+if (document.getElementById('Restore')) {
+    ReactDOM.render(<Restore />, document.getElementById('Restore'));
+}