55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import './styles/App.css';
|
|
import List from './componets/List';
|
|
import AddModal from './componets/AddModal';
|
|
import config from './config.json';
|
|
|
|
function App() {
|
|
const [data, setData] = useState([]);
|
|
const [isAdding, setIsAdding] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [numberOfResults, setNumberOfResults] = useState(0);
|
|
|
|
function exitAdding() {
|
|
setIsAdding(!isAdding);
|
|
}
|
|
|
|
function search(e) {
|
|
setSearchQuery(e.target.value);
|
|
}
|
|
|
|
const filteredData = data.filter((e) => {
|
|
return (e.name.toLowerCase().includes(searchQuery.toLowerCase()) || e.title.toLowerCase().includes(searchQuery.toLowerCase()) || e.tag.some((e) => e.includes(searchQuery.toLowerCase())))
|
|
});
|
|
|
|
async function fetchData() {
|
|
const address = config.api.address + ":" + config.api.port;
|
|
const res = await fetch(address + '/api');
|
|
const resJSON = await res.json();
|
|
const Data = resJSON.sort((a, b) => { return b-a });
|
|
setData(Data);
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setNumberOfResults(filteredData.length);
|
|
}, [filteredData]);
|
|
|
|
return (
|
|
<div className="App">
|
|
<div className="head">
|
|
<input className="search" type="search" placeholder=" Search for Name / Title / Tag" onChange={search}/>
|
|
<button className="add-btn" onClick={() => setIsAdding(true)}></button>
|
|
</div>
|
|
<p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks' : 'No bookmarks.'}</p>
|
|
<List data={filteredData} reFetch={fetchData} />
|
|
{isAdding ? <AddModal onExit={exitAdding} reFetch={fetchData} /> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|