93 lines
2.2 KiB
JavaScript
93 lines
2.2 KiB
JavaScript
import { useState } from 'react';
|
|
import Store from '../../store';
|
|
import { setDone } from '../../store/actions';
|
|
import Card from '../ui/Card';
|
|
|
|
import Content from '../ui/Content';
|
|
import List from '../ui/List';
|
|
import ListItem from '../ui/ListItem';
|
|
import VirtualScroll from '../ui/VirtualScroll';
|
|
|
|
const ListEntry = ({ list, ...props }) => (
|
|
<div {...props} className="p-4 border-solid border-b cursor-pointer">
|
|
<span className="text-md">{list.name}</span>
|
|
</div>
|
|
);
|
|
|
|
const AllLists = ({ onSelect }) => {
|
|
const lists = Store.useState(s => s.lists);
|
|
|
|
return (
|
|
<VirtualScroll
|
|
data={lists}
|
|
totalCount={lists.length}
|
|
style={{ height: '100%', width: '100%' }}
|
|
itemContent={(i, list) => (
|
|
<ListEntry list={list} onClick={() => onSelect(list)} onClose={() => onSelect(null)} />
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const ListItems = ({ list, onClose }) => {
|
|
return (
|
|
<>
|
|
<div className="py-2">
|
|
<a href="#" onClick={onClose}>
|
|
All Lists
|
|
</a>
|
|
</div>
|
|
<VirtualScroll
|
|
data={list.items || []}
|
|
totalCount={(list.items || []).length}
|
|
style={{ height: '100%', width: '100%' }}
|
|
itemContent={(i, item) => <ListItemEntry list={list} item={item} />}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const ListItemEntry = ({ list, item }) => (
|
|
<div className="p-4 border-solid border-b cursor-pointer">
|
|
<span className="text-md">{item.name}</span>
|
|
<input
|
|
type="checkbox"
|
|
checked={item.done}
|
|
onChange={() => {
|
|
setDone(list, item, !item.done);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const Feed = ({ selected }) => {
|
|
const selectedList = Store.useState(s => s.selectedList);
|
|
|
|
return (
|
|
<Content visible={selected} className="p-4">
|
|
<List className="h-full w-full">
|
|
{selected && selectedList ? (
|
|
<ListItems
|
|
list={selectedList}
|
|
onClose={() =>
|
|
Store.update(s => {
|
|
s.selectedList = null;
|
|
})
|
|
}
|
|
/>
|
|
) : (
|
|
<AllLists
|
|
onSelect={list => {
|
|
Store.update(s => {
|
|
s.selectedList = list;
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
</List>
|
|
</Content>
|
|
);
|
|
};
|
|
|
|
export default Feed;
|