memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic search (to be changed)

Browse Source
This commit is contained in:
Victor Turgeon 2022-10-29 14:17:59 -07:00
parent 9707ae8d12
commit 840178147a
2 changed files with 72 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
View File

@ -1,31 +1,33 @@
import { useState } from 'react';
import { Navigate } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
async function fetchData(query, preview) {
const response = await fetch(`https://localhost:7292/api/Search?query=${query}&preview=${preview}&deep=true`);
const json = await response.json();
return { json };
}
function useInput(defaultValue) {
const [value, setValue] = useState(defaultValue);
function onChange(e) {
setValue(e.target.value);
if (value.length > 1)
fetchData(value, true);
}
return {
value,
onChange,
};
}
const ResearchBar = () => {
const input = useInput();
const navigate = useNavigate();
const [value, setValue] = useState("");
const search = async (query) => {
const results = await fetchData(query, false);
console.log(results);
navigate('/morceaux', { state: { searchResults: results } });
}
const fetchData = async (query, preview) => {
const response = await fetch(`https://localhost:7292/api/Search?query=${query}&preview=${preview}&deep=true`);
const json = await response.json();
return { json };
}
const handleValueChange = async (value) => {
setValue(value);
}
return (
<div className="research-container">
<input className="research-input" placeholder="Rechercher..." {...input}></input>
<button className="research-btn" /*onClick={fetchData(input.value, false)}*/>
<input className="research-input" value={value} onChange={(e) => handleValueChange(e.target.value)} placeholder="Rechercher..."></input>
<button className="research-btn" onClick={() => search(value)}>
<div className="fa fa-search" />
</button>
</div>

75
GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
View File

@ -4,26 +4,37 @@ import ItemList from "../components/ItemList";
import { useState } from 'react';
import Sorting from "../components/Sorting"
import Filters from '../components/Filters';
import { useLocation } from 'react-router-dom';
const Morceaux = (startingProducts) => {
const Morceaux = () => {
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [order, setOrder] = useState("");
const [filterPrice, setFilterPrice] = useState("");
const [filterState, setFilterState] = useState("");
const [isSearch, setIsSearch] = useState(false);
const { state } = useLocation();
useEffect(() => {
document.title = 'Morceaux';
setIsLoading(true);
async function fetchData() {
const response = await fetch(`https://localhost:7292/api/Inventory`);
const json = await response.json();
if (json.length > 0)
setProducts([...json]);
if (state != null) {
setProducts([...state.searchResults.json]);
setIsSearch(true);
}
fetchData();
else {
async function fetchData() {
const response = await fetch(`https://localhost:7292/api/Inventory`);
const json = await response.json();
if (json.length > 0)
setProducts([...json]);
}
fetchData();
}
setIsLoading(false);
}, []);
@ -49,25 +60,37 @@ const Morceaux = (startingProducts) => {
const handleOrder = async (sortBy) => {
setOrder(sortBy);
var url = `https://localhost:7292/api/Inventory?order=${sortBy}&filterPrice=${filterPrice}&filterState=${filterState}`;
setIsLoading(true);
const response = await fetch(url);
const json = await response.json();
if (json.length > 0)
setProducts([...json]);
setIsLoading(false);
if (isSearch) {
}
else {
setOrder(sortBy);
var url = `https://localhost:7292/api/Inventory?order=${sortBy}&filterPrice=${filterPrice}&filterState=${filterState}`;
setIsLoading(true);
const response = await fetch(url);
const json = await response.json();
if (json.length > 0)
setProducts([...json]);
setIsLoading(false);
}
}
const handleFilters = async (price, state) => {
setFilterPrice(price);
setFilterState(state);
var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
setIsLoading(true);
const response = await fetch(url);
const json = await response.json();
setProducts([...json]);
setIsLoading(false);
if (isSearch) {
}
{
setFilterPrice(price);
setFilterState(state);
var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
setIsLoading(true);
const response = await fetch(url);
const json = await response.json();
setProducts([...json]);
setIsLoading(false);
}
}
return (
@ -86,9 +109,9 @@ const Morceaux = (startingProducts) => {
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
<div>
<Button onClick={handleNextItems} className='btn-load-more'>
{!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
...
</Button>
</Button>}
</div>
</div>
);