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,34 +11,43 @@

class FileListPanel extends React.Component {

    state = {
        isFetching: false, activeTab: '1',
        fileList: undefined,
        filter: {
            search: '',
            mode: 'tree',
            currentDirectory: '',
            maxSize: '50',
            diffArchiveId: '',
            autoChangeDirectoryToLeafItem: true,
            openDownloads: true
        }
    };

    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: {
                search: '',
                mode: 'tree',
                currentDirectory: '',
                maxSize: '50',
                diffArchiveId: '',
                autoChangeDirectoryToLeafItem: true,
                openDownloads: true
            }
        };
        // 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) => {
@@ -134,7 +153,7 @@
        let content = undefined;

        if (this.state.isFetching) {
            content = <JobMonitorPanel repo={this.props.repoId} />;
            content = <JobMonitorPanel repo={this.props.repoId}/>;
        } else if (this.state.failed) {
            content = <ErrorAlert
                title={'Cannot load Archive file list'}
@@ -155,7 +174,7 @@
                if (this.state.filter.mode === 'tree' && this.state.filter.currentDirectory.length > 0) {
                    breadcrumb = (
                        <Breadcrumb>
                            <BreadcrumbPath match={this.props.match} />
                            <BreadcrumbPath match={this.props.match}/>
                        </Breadcrumb>
                    );
                }