react-cookies for persisting file filter (not yet finished).

Kai Reinhard

25.27.2019 664580f272d978ece9a1889e91c16bd084bdb1a0

react-cookies for persisting file filter (not yet finished).

 borgbutler-webapp/package.json

@@ -14,6 +14,7 @@
    "npm": "^6.4.1",
    "prop-types": "^15.5.7",
    "react": "^16.4.2",
    "react-cookies": "^0.1.0",
    "react-dom": "^16.4.2",
    "react-highlighter": "^0.4.3",
    "react-redux": "^5.0.7",

 borgbutler-webapp/src/components/views/archives/FileListPanel.jsx

@@ -1,4 +1,5 @@
import React from 'react'
import cookie from "react-cookies";
import {withRouter} from 'react-router-dom';
import {Breadcrumb, Button} from 'reactstrap';
import {getRestServiceUrl} from '../../../utilities/global';
@@ -10,7 +11,15 @@

class FileListPanel extends React.Component {

    state = {
    constructor(props) {
        super(props);

        this.fetchArchiveFileList = this.fetchArchiveFileList.bind(this);
        this.handleURLChange = this.handleURLChange.bind(this);
        this.componentWillMount = this.componentWillMount.bind(this);

        this.unregisterHistoryListener = props.history.listen(this.handleURLChange);
        this.state = {
        isFetching: false, activeTab: '1',
        fileList: undefined,
        filter: {
@@ -23,21 +32,22 @@
            openDownloads: true
        }
    };

    constructor(props) {
        super(props);

        this.fetchArchiveFileList = this.fetchArchiveFileList.bind(this);
        this.handleURLChange = this.handleURLChange.bind(this);

        this.unregisterHistoryListener = props.history.listen(this.handleURLChange);

        // Resetting the NoReFetch State
        if (props.location.state) {
            props.location.state.noReFetch = undefined;
        }
    }

    componentWillMount = () => {
        ['mode', 'maxSize', 'autoChangeDirectoryToLeafItem', 'openDownloads'].forEach(function (variable) {
            const value = cookie.load(`file-list-${variable}`);
            if (value) {
                //console.log('Restoring ' + variable + '=' + value);
                //this.setState({filter: {...this.state.filter, variable: value}});
            }
        });
    }

    componentDidMount = () => {
        this.handleURLChange(this.props.location);
    };
@@ -57,20 +67,29 @@

    handleInputChange = (event, callback) => {
        event.preventDefault();
        let target = event.target.name;
        const variable = event.target.name;
        this.setState({filter: {...this.state.filter, [event.target.name]: event.target.value}},
            () => {
                if (target === 'mode') {
                if (variable === 'mode') {
                    this.fetchArchiveFileList();
                }
                if (callback) {
                    callback();
                }
            });
        if (['mode', 'maxSize'].indexOf(variable) >= 0) {
            //console.log('Saving ' + variable + '=' + event.target.value);
            cookie.save(`file-list-${variable}`, event.target.value, {path: "/"});
        }
    };

    handleCheckboxChange = event => {
        this.setState({filter: {...this.state.filter, [event.target.name]: event.target.checked}});
        const variable = event.target.name;
        this.setState({filter: {...this.state.filter, [variable]: event.target.checked}});
        if (['autoChangeDirectoryToLeafItem', 'openDownloads'].indexOf(variable)) {
            //console.log('Saving ' + variable + '=' + event.target.checked);
            cookie.save(`file-list-${variable}`, event.target.checked, {path: "/"});
        }
    }

    changeCurrentDirectory = (currentDirectory) => {