xnv/frontend/src/App.js

import React, { PureComponent } from "react";

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

import { createNote, getNotes, upsertNote } from "./state";

import "./App.css";

class App extends PureComponent {
    state = { ...getNotes(), selectedNote: null };

    handleSearch = text => {
        this.setState({
            notes: getNotes().notes.filter(
                n =>
                    n.title.includes(text) ||
                    n.tags.find(x => x === text) ||
                    n.content.includes(text)
            )
        });
    };

    handleCreate = title => {
        const newNote = upsertNote(title);
        this.setState({ ...getNotes(), selectedNote: newNote });
    };

    handleSelectNote = noteTitle => {
        const { notes } = this.state;
        const sn = notes.filter(({ title }) => title === noteTitle);
        if (sn.length > 0) {
            this.setState({ selectedNote: sn[0] });
        }
    };

    handleSaveNoteContent = content => {
        const { notes, selectedNote } = this.state;
        const idx = notes.findIndex(
            ({ title }) => title === selectedNote.title
        );

        if (idx >= 0) {
            notes[idx].content = content;
            this.setState({
                notes: [...notes],
                selectedNote: { ...notes[idx] }
            });
            console.log("updated note", selectedNote.title, "content");
        }
    };

    handleTagUpdate = newTags => {
        const { notes, selectedNote } = this.state;
        const idx = notes.findIndex(
            ({ title }) => title === selectedNote.title
        );

        if (idx >= 0) {
            notes[idx].tags = newTags;
            this.setState({
                notes: [...notes],
                selectedNote: { ...notes[idx] }
            });
            console.log("updated note tags", selectedNote.tags);
        }
    };

    render() {
        const { notes, selectedNote } = this.state;

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

export default App;