xnv/src/components/NoteList/NoteList.js

import React from "react";
import { formatRelative } from "date-fns";
import { noop } from "../../utils";
import TagList from "../TagList/TagList";

import "./NoteList.css";

export default function NoteList({
    notes = [],
    onSelect = noop,
    onTagUpdate = noop,
    selectedNote = {}
}) {
    const { title: selectedNoteTitle } = selectedNote || {};
    const handleShortcuts = evt => console.log(evt);
    return (
        <ul className="NoteList" onKeyDown={handleShortcuts}>
            {notes.map(n => (
                <li
                    className={n.title === selectedNoteTitle ? "selected" : ""}
                    key={n.title}
                >
                    <NoteListItem
                        {...n}
                        selected={n.title === selectedNoteTitle}
                        onSelect={onSelect}
                        onTagUpdate={onTagUpdate}
                    />
                </li>
            ))}

            {notes.length === 0 && (
                <li className="empty">
                    Click the text box above to create a note.
                </li>
            )}
        </ul>
    );
}

const NoteListItem = ({
    content,
    title,
    tags,
    selected = false,
    lastModified,
    onSelect,
    onTagUpdate
}) => {
    return (
        <div className="NoteListItem" onClick={() => onSelect(title)}>
            <h2>{title}</h2>
            <p className="preview">-- {content}</p>
            <span className="attributes">
                <TagList
                    canEdit={selected}
                    tags={tags}
                    onTagUpdate={onTagUpdate}
                />
                <span className="lastModified">
                    {formatRelative(new Date(lastModified), new Date())}
                </span>
            </span>
        </div>
    );
};