49 lines
1.4 KiB
JavaScript
49 lines
1.4 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('');
|
|
|
|
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.toLowerCase().includes(searchQuery.toLowerCase()))
|
|
});
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
const address = config.client.api_address + ":" + config.server.port;
|
|
const res = await fetch(address + '/get');
|
|
const resJSON = await res.json();
|
|
const Data = resJSON.sort((a, b) => { return b-a });
|
|
setData(Data);
|
|
}
|
|
|
|
fetchData();
|
|
}, [data]);
|
|
|
|
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>
|
|
<List data={filteredData} />
|
|
{isAdding ? <AddModal onExit={exitAdding} /> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|