77 lines
No EOL
2.1 KiB
JavaScript
77 lines
No EOL
2.1 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import axios from 'axios';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import ListItemButton from '@mui/material/ListItemButton';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
|
|
import { useSnackbar } from 'notistack';
|
|
|
|
function Component({zip, city}) {
|
|
const [zips, setZips] = useState([]);
|
|
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
|
|
|
|
const fetchResults = (zip, city) => {
|
|
city = encodeURIComponent(city);
|
|
axios.get(`/api/query.php?zip=${zip}&city=${city}`)
|
|
.then(function (response) {
|
|
if (response.data.zips) {
|
|
setZips(response.data.zips);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
const copyValue = (value) => {
|
|
navigator.clipboard.writeText(value);
|
|
enqueueSnackbar("Copié dans le presse-papier", {
|
|
autoHideDuration: 2000,
|
|
variant: "success",
|
|
anchorOrigin: {
|
|
vertical: "top",
|
|
horizontal: "center"
|
|
}
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (zip > 0 || city.length >= 4) {
|
|
fetchResults(zip, city);
|
|
} else {
|
|
setZips([]);
|
|
}
|
|
}, [zip, city]);
|
|
|
|
return (
|
|
<>
|
|
<List sx={{ width: '100%' }}>
|
|
{zips.map((zip, i) => {
|
|
return (
|
|
<ListItem
|
|
key={i}
|
|
secondaryAction={
|
|
<IconButton
|
|
edge="end"
|
|
aria-label="Copier"
|
|
onClick={() => {copyValue(`${zip.zip} ${zip.city}`)}}
|
|
>
|
|
<ContentCopyRounded />
|
|
</IconButton>
|
|
}
|
|
disablePadding
|
|
>
|
|
<ListItemButton onClick={() => {copyValue(`${zip.zip} ${zip.city}`)}}>
|
|
<ListItemText primary={`${zip.zip} ${zip.city}`} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
);
|
|
})}
|
|
</List>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Component; |