🎨 standardJS all files
This commit is contained in:
divlo
@ -1,40 +1,40 @@
|
||||
.Functions__title {
|
||||
padding: 20px 0 20px 0;
|
||||
margin-bottom: 0;
|
||||
padding: 20px 0 20px 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.Functions__form-control {
|
||||
display: block;
|
||||
height: calc(1.5em + .75rem + 2px);
|
||||
padding: .375rem .75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .5em;
|
||||
display: block;
|
||||
height: calc(1.5em + 0.75rem + 2px);
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.Functions__search-container {
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.Functions__select-option {
|
||||
color: rgb(221, 220, 220);
|
||||
color: rgb(221, 220, 220);
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 40%;
|
||||
width: 40%;
|
||||
}
|
||||
/* col-sm */
|
||||
@media (max-width: 576px) {
|
||||
.Functions__search-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.Functions__select {
|
||||
width: 90%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.Functions__search-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.Functions__select {
|
||||
width: 90%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,15 +7,21 @@ import useAPI from '../../hooks/useAPI'
|
||||
import './FunctionsList.css'
|
||||
|
||||
let pageFunctions = 1
|
||||
const FunctionsList = (props) => {
|
||||
const FunctionsList = props => {
|
||||
const { categoryId } = useRouter().query
|
||||
|
||||
// State de recherche et de catégories
|
||||
const [, categories] = useAPI('/categories')
|
||||
const [inputSearch, setInputSearch] = useState({ search: '', selectedCategory: categoryId || '0' })
|
||||
const [inputSearch, setInputSearch] = useState({
|
||||
search: '',
|
||||
selectedCategory: categoryId || '0'
|
||||
})
|
||||
|
||||
// State pour afficher les fonctions
|
||||
const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] })
|
||||
const [functionsData, setFunctionsData] = useState({
|
||||
hasMore: true,
|
||||
rows: []
|
||||
})
|
||||
const [isLoadingFunctions, setLoadingFunctions] = useState(true)
|
||||
|
||||
// Récupère la catégorie avec la query categoryId
|
||||
@ -28,43 +34,54 @@ const FunctionsList = (props) => {
|
||||
// Récupère les fonctions si la catégorie/recherche change
|
||||
useEffect(() => {
|
||||
pageFunctions = 1
|
||||
getFunctionsData().then((data) => setFunctionsData(data))
|
||||
getFunctionsData().then(data => setFunctionsData(data))
|
||||
}, [inputSearch])
|
||||
|
||||
// Permet la pagination au scroll
|
||||
const observer = useRef()
|
||||
const lastFunctionCardRef = useCallback((node) => {
|
||||
if (isLoadingFunctions) return
|
||||
if (observer.current) observer.current.disconnect()
|
||||
observer.current = new window.IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && functionsData.hasMore) {
|
||||
pageFunctions += 1
|
||||
getFunctionsData().then((data) => {
|
||||
setFunctionsData((oldData) => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}, { threshold: 1 })
|
||||
if (node) observer.current.observe(node)
|
||||
}, [isLoadingFunctions, functionsData.hasMore])
|
||||
const lastFunctionCardRef = useCallback(
|
||||
node => {
|
||||
if (isLoadingFunctions) return
|
||||
if (observer.current) observer.current.disconnect()
|
||||
observer.current = new window.IntersectionObserver(
|
||||
entries => {
|
||||
if (entries[0].isIntersecting && functionsData.hasMore) {
|
||||
pageFunctions += 1
|
||||
getFunctionsData().then(data => {
|
||||
setFunctionsData(oldData => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{ threshold: 1 }
|
||||
)
|
||||
if (node) observer.current.observe(node)
|
||||
},
|
||||
[isLoadingFunctions, functionsData.hasMore]
|
||||
)
|
||||
|
||||
const getFunctionsData = async () => {
|
||||
setLoadingFunctions(true)
|
||||
const URL = `${(props.isAdmin) ? '/admin/functions' : '/functions'}?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`
|
||||
const URL = `${
|
||||
props.isAdmin ? '/admin/functions' : '/functions'
|
||||
}?page=${pageFunctions}&limit=10&categoryId=${
|
||||
inputSearch.selectedCategory
|
||||
}&search=${inputSearch.search}`
|
||||
const { data } = await api.get(URL, {
|
||||
headers: {
|
||||
...(props.isAdmin && props.token != null) && { Authorization: props.token }
|
||||
...(props.isAdmin &&
|
||||
props.token != null && { Authorization: props.token })
|
||||
}
|
||||
})
|
||||
setLoadingFunctions(false)
|
||||
return data
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
const handleChange = event => {
|
||||
const inputSearchNew = { ...inputSearch }
|
||||
inputSearchNew[event.target.name] = event.target.value
|
||||
setInputSearch(inputSearchNew)
|
||||
@ -72,27 +89,58 @@ const FunctionsList = (props) => {
|
||||
|
||||
return (
|
||||
<div className='container text-center'>
|
||||
<div className='row justify-content-center'>
|
||||
{props.children}
|
||||
</div>
|
||||
<div className='row justify-content-center'>{props.children}</div>
|
||||
|
||||
<div className='Functions__search-container row justify-content-center'>
|
||||
<select name='selectedCategory' value={inputSearch.selectedCategory} onChange={handleChange} className='Functions__select Functions__form-control'>
|
||||
<select
|
||||
name='selectedCategory'
|
||||
value={inputSearch.selectedCategory}
|
||||
onChange={handleChange}
|
||||
className='Functions__select Functions__form-control'
|
||||
>
|
||||
<option value='0'>Toutes catégories</option>
|
||||
{categories.map((category) => (
|
||||
<option key={category.id} value={category.id} className='Functions__select-option' style={{ backgroundColor: category.color }}>{category.name}</option>
|
||||
{categories.map(category => (
|
||||
<option
|
||||
key={category.id}
|
||||
value={category.id}
|
||||
className='Functions__select-option'
|
||||
style={{ backgroundColor: category.color }}
|
||||
>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input value={inputSearch.search} onChange={handleChange} type='search' className='Functions__form-control Functions__search-input' name='search' id='search' placeholder='🔎 Rechercher...' />
|
||||
<input
|
||||
value={inputSearch.search}
|
||||
onChange={handleChange}
|
||||
type='search'
|
||||
className='Functions__form-control Functions__search-input'
|
||||
name='search'
|
||||
id='search'
|
||||
placeholder='🔎 Rechercher...'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='row justify-content-center'>
|
||||
{functionsData.rows.map((currentFunction, index) => {
|
||||
// Si c'est le dernier élément
|
||||
if (functionsData.rows.length === index + 1) {
|
||||
return <FunctionCard isAdmin={props.isAdmin} key={currentFunction.id} ref={lastFunctionCardRef} {...currentFunction} />
|
||||
return (
|
||||
<FunctionCard
|
||||
isAdmin={props.isAdmin}
|
||||
key={currentFunction.id}
|
||||
ref={lastFunctionCardRef}
|
||||
{...currentFunction}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <FunctionCard isAdmin={props.isAdmin} key={currentFunction.id} {...currentFunction} />
|
||||
return (
|
||||
<FunctionCard
|
||||
isAdmin={props.isAdmin}
|
||||
key={currentFunction.id}
|
||||
{...currentFunction}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{isLoadingFunctions && <Loader />}
|
||||
|
||||
Reference in New Issue
Block a user