You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.5 KiB
58 lines
1.5 KiB
import React from "react";
|
|
import { formatRelative } from "date-fns";
|
|
import { noop } from "../../state.js";
|
|
import TagList from "../TagList/TagList";
|
|
|
|
import "./NoteList.css";
|
|
|
|
export default function NoteList({
|
|
notes = [],
|
|
onSelect = noop,
|
|
onTagUpdate = noop,
|
|
selectedNote = {}
|
|
}) {
|
|
const { title: selectedNoteTitle } = selectedNote || {};
|
|
return (
|
|
<ul className="NoteList">
|
|
{notes.map(n => (
|
|
<li
|
|
className={n.title === selectedNoteTitle && "selected"}
|
|
key={n.title}
|
|
>
|
|
<NoteListItem
|
|
{...n}
|
|
onSelect={onSelect}
|
|
onTagUpdate={onTagUpdate}
|
|
/>
|
|
</li>
|
|
))}
|
|
|
|
{notes.length === 0 && (
|
|
<li>Click the text box above to create a note.</li>
|
|
)}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
const NoteListItem = ({
|
|
content,
|
|
title,
|
|
tags,
|
|
lastModified,
|
|
onSelect,
|
|
onTagUpdate
|
|
}) => {
|
|
return (
|
|
<div className="NoteListItem" onClick={() => onSelect(title)}>
|
|
<h2>{title}</h2>
|
|
<p className="preview">-- {content}</p>
|
|
<span className="attributes">
|
|
<TagList tags={tags} onTagUpdate={onTagUpdate} />
|
|
<span className="lastModified">
|
|
{formatRelative(new Date(lastModified), new Date())}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|