xnv/src/App.js

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { actions } from "./state/index.js";
import debounce from "lodash.debounce";

import NoteList from "./components/NoteList/NoteList";
import NoteContent from "./components/NoteContent/NoteContent";
import Omnibar from "./components/Omnibar/Omnibar";

import "./App.css";

class App extends PureComponent {
    static defaultProps = { selectedNote: null, notes: [], settings: {} };

    state = { filter: "" };

    async componentDidMount() {
        const { getNotes } = this.props;
        getNotes({ filter: "" });
    }

    handleSearch = text => this.setState({ filter: text.toLocaleLowerCase() });

    handleCreate = title => {
        const { upsertNote } = this.props;
        upsertNote({ title, content: "", tags: [] });
    };

    handleSelectNote = title => {
        const { selectNote } = this.props;
        selectNote({ title });
    };

    handleSaveNoteContent = content => {
        const { upsertNote, selectedNote } = this.props;
        upsertNote({ ...selectedNote, content });
    };

    handleTagUpdate = ({ title, content, newTags }) => {
        const { upsertNote } = this.props;
        upsertNote({ title, content, tags: newTags });
    };

    applyFilter = (notes = [], filter = "") =>
        notes.filter(
            n =>
                n.title.toLocaleLowerCase().includes(filter) ||
                n.tags.find(x => x.toLocaleLowerCase() === filter) ||
                n.content.toLocaleLowerCase().includes(filter)
        );

    render() {
        const { notes, selectedNote, settings } = this.props;
        const { autoSaveDelay } = settings;
        // const handleSave = debounce(
        //     this.handleSaveNoteContent,
        //     autoSaveDelay || 1000
        // );
        const handleSave = this.handleSaveNoteContent;
        const { filter } = this.state;
        console.log("note", selectedNote);

        return (
            <div className="App">
                <section className="SearchArea">
                    <Omnibar
                        onEnter={this.handleCreate}
                        onSearch={this.handleSearch}
                    />
                    {/* add settings button here */}
                </section>
                <section className="NoteArea">
                    <NoteList
                        notes={this.applyFilter(notes, filter)}
                        onSelect={this.handleSelectNote}
                        onTagUpdate={this.handleTagUpdate}
                        selectedNote={selectedNote}
                    />
                    <NoteContent {...selectedNote} onSave={handleSave} />
                </section>
            </div>
        );
    }
}

const ms2p = s => {
    const { notes, settings } = s;
    return { ...notes, settings: { ...settings.settings } };
};

const md2p = dispatch => bindActionCreators({ ...actions }, dispatch);

export default connect(ms2p, md2p)(App);