Newer
Older
import { Button, Dialog, Pagination } from '@mui/material'
import React, { useState } from 'react'
import { useQuery } from 'react-query'
import { fetchEcogestureImages, useWhoAmI } from '../../API'
import { getAxiosXSRFHeader } from '../../axios.config'
import SingleImage from './SingleImage'
const IMAGES_PER_PAGE = 15
interface ImagePickerProps {
imageURL: string
handleChange: (value: string, type: 'image') => void
defaultIcon?: string
}
const ImagePicker: React.FC<ImagePickerProps> = ({
imageURL,
handleChange,
defaultIcon,
}) => {
const { data: user } = useWhoAmI()
const { data: imagesNames } = useQuery({
queryKey: ['imageNames'],
queryFn: () =>
fetchEcogestureImages(getAxiosXSRFHeader(user?.xsrftoken ?? '')),
})
// Default icon must be the first of the list if it exists
if (defaultIcon && imagesNames) {
const indexOfDefault = imagesNames.indexOf(defaultIcon)
if (indexOfDefault > 0) {
imagesNames.splice(indexOfDefault, 1)
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
imagesNames.unshift(defaultIcon)
}
}
const pageCount = Math.ceil((imagesNames?.length ?? 1) / IMAGES_PER_PAGE)
const imageIndex = imagesNames?.indexOf(imageURL ?? '') ?? 1
const [selectedImageURL, setSelectedImageURL] = useState(imageURL ?? '')
const [openModal, setOpenModal] = useState(false)
const [currentPage, setCurrentPage] = useState(
Math.floor((imageIndex > 0 ? imageIndex : 1) / IMAGES_PER_PAGE + 1)
)
const [preSelectImage, setPreSelectImage] = useState(imageURL ?? '')
const toggleModal = () => {
setOpenModal(prev => !prev)
}
const handleValidateImage = () => {
const newImage =
defaultIcon && preSelectImage === '' ? defaultIcon : preSelectImage
setPreSelectImage(newImage)
setSelectedImageURL(newImage)
handleChange(newImage, 'image')
setOpenModal(false)
}
const startIndex = (currentPage - 1) * IMAGES_PER_PAGE
const stopIndex = startIndex + IMAGES_PER_PAGE
return (
<>
{selectedImageURL === '' || !selectedImageURL ? (
<>
<p>Pas d'image sélectionnée</p>
<br />
<Button onClick={toggleModal}>Choisir une image</Button>
</>
) : (
<>
<img
src={selectedImageURL}
width="120"
height="120"
className="ecogesture-image"
alt="selected"
/>
<Button onClick={toggleModal}>Modifier l'image</Button>
</>
)}
<Dialog open={openModal} className="modal-large">
<div className="image-picker">
{imagesNames
?.slice(startIndex, stopIndex)
?.map(image => (
<SingleImage
imageURL={image}
key={image}
selectedImage={preSelectImage}
setSelectedImageURL={setPreSelectImage}
/>
))}
</div>
<Pagination
count={pageCount}
page={currentPage}
onChange={(_e, page) => setCurrentPage(page)}
style={{
display: 'flex',
justifyContent: 'center',
marginTop: '1rem',
}}
/>
<div className="buttons">
<Button variant="outlined" onClick={() => setOpenModal(false)}>
Annuler
</Button>
<Button onClick={handleValidateImage}>Valider</Button>
</div>
</Dialog>
</>
)
}
export default ImagePicker