Daniel
58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
import '../styles/List.css';
|
|
import LazyLoad from 'react-lazyload';
|
|
import ViewArchived from './ViewArchived';
|
|
import EditItem from './EditItem';
|
|
import { useState } from 'react'
|
|
|
|
const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
|
|
const [editBox, setEditBox] = useState(false)
|
|
const [editIndex, setEditIndex] = useState(0)
|
|
|
|
function edit(index) {
|
|
setEditBox(true);
|
|
setEditIndex(index);
|
|
}
|
|
|
|
function exitEditing() {
|
|
setEditBox(false);
|
|
}
|
|
|
|
return (
|
|
<div className="list">
|
|
{/* eslint-disable-next-line */}
|
|
{data.map((e, i, array) => {
|
|
try {
|
|
const url = new URL(e.link);
|
|
const favicon = 'https://www.google.com/s2/favicons?domain=' + url.hostname;
|
|
return (<LazyLoad key={i} height={200} offset={200}>
|
|
<div className="list-row">
|
|
<div className="img-content-grp">
|
|
<img alt='' src={favicon} />
|
|
<div className="list-entity-content">
|
|
<div className='row-name'>
|
|
<span className="num">{i + 1}.</span> {e.name} <a target="_blank" rel="noreferrer" href={e.link}>({url.hostname})</a>
|
|
</div>
|
|
<div>{e.title}</div>
|
|
<div className="tags">
|
|
{e.tag.map((e, i) => {
|
|
return (<div key={i}>{e}</div>)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='etc'>
|
|
<ViewArchived className='view-archived' id={e._id} />
|
|
<button className="btn edit-btn" onClick={() => edit(i)}></button>
|
|
</div>
|
|
</div>
|
|
</LazyLoad>)
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
})}
|
|
{editBox ? <EditItem lightMode={lightMode} tags={() => tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default List |