Use MUI, structure change, fix API

frontend/components/Result.js

@@ -0,0 +1,77 @@
+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;