Terminada la implementación con funcionalidad de las dos vistas "Crea…

…te a new place" y "My Places"

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.61",
     "axios": "^1.3.4",
-    "lodash.debounce": "^4.0.8"
+    "lodash.debounce": "^4.0.8",
+    "react-draggable": "^4.4.5"
   }
 }

webapp/src/App.js

@@ -7,37 +7,59 @@ import {useEffect, useState} from "react";
 
 function App() {
    const [places, setPlaces] = useState(getPlacesFromStorage() || []);
+   const [selectedPoint, setSelectedPoint] = useState(null);
    const [selectedPlaceAutocomplete, setSelectedPlaceAutocomplete] = useState(null);
+   const [selectedButton, setSelectedButton] = useState("MyPlaces");
+    const [selectedPlaceMyPlaces, setSelectedPlaceMyPlaces] = useState(null);
+    const [placesLength, setPlacesLength] = useState(0); //used just for the useEffect to work only when a place is added and not when a place is deleted
+
     useEffect(() => {
         savePlacesToStorage();
+        console.log('places changed:', places);
     }, [places]);
 
     useEffect(() => {
 
     }, [selectedPlaceAutocomplete]);
+
+    useEffect(() => {
+        console.log(selectedPoint)
+    }, [selectedPoint]);
+
+
+
     function savePlacesToStorage(){
         localStorage.setItem("places", JSON.stringify(places));
     }
     function getPlacesFromStorage(){
         return JSON.parse(localStorage.getItem("places"));
     }
 
+    function deletePlace(placeID){
+        setPlaces(places.filter(place => place.id !== placeID));
+    }
+
   return (
-      <Box className='MainBox'>   {/* Important: it is always necessary to put all the elements inside one parent element*/}
+      <Box className='MainBox' >   {/* Important: it is always necessary to put all the elements inside one parent element*/}
           <Header setSelectedPlaceAutocomplete={setSelectedPlaceAutocomplete}/> {/* Header: Logo, SearchPlacesBar, FilterByBar */}
 
           <Grid className='MainGrid' container spacing={3}>{/* 3 spaces between the grids */}
               {/* "container" means that it is a grid with more grids inside */}
               <Grid item
                     md={5}> {/* 5 of 12 columns for the sidebar */}{/* "item" means that it is a grid inside a grid */}
                             {/* "md" means that it is a medium screen size */}
-                  <Sidebar places = {places} setPlaces = {setPlaces}/> {/* Sidebar: IconsSidebar, AddPlaceSidebar */}
+
+                  <Sidebar places = {places} setPlaces = {setPlaces} selectedButton={selectedButton}
+                           setSelectedButton={setSelectedButton} selectedPoint={selectedPoint} setSelectedPoint={setSelectedPoint}
+                           setSelectedPlaceMyPlaces={setSelectedPlaceMyPlaces} deletePlace={deletePlace}  setPlacesLength={setPlacesLength}/> {/* Sidebar: IconsSidebar, AddPlaceSidebar */}
               </Grid>
 
               <Grid item
                     md={7} > {/* 7 of 12 columns for the map */}
                   <Paper className='MainMap' style={{borderRadius: '20px' }}> {/* "sx" is for adding specific styles to a MUI component */}
-                      <Map selectedPlaceAutocomplete={selectedPlaceAutocomplete} places = {places}/>   {/* Map: OpenStreetMap working with Leaflet */}
+                      <Map places={places} selectedPlaceAutocomplete={selectedPlaceAutocomplete} selectedPoint = {selectedPoint}
+                           setSelectedPoint={setSelectedPoint} selectedButton={selectedButton} selectedPlaceMyPlaces={selectedPlaceMyPlaces}
+                           placesLength={placesLength}/>   {/* Map: OpenStreetMap working with Leaflet */}
                   </Paper>
               </Grid>
           </Grid>

webapp/src/components/AddPlaceSidebar/AddPlaceSidebar.jsx

@@ -5,22 +5,20 @@ import useStyles from "./styles";
 import { v4 as uuid } from 'uuid';
 import PlaceEntity from "../../entities/PlaceEntity";
 const AddPlaceSidebar = (props) => {
-    const {places, setPlaces} = props;
+    const {places, setPlaces, selectedPoint, setSelectedPoint, setPlacesLength} = props;
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
-    const [latitude, setLatitude] = useState("");
-    const [longitude, setLongitude] = useState("");
     const [category, setCategory] = useState("");
+
+
     const classes = useStyles();
     function isFormComplete(){
-        return name !== "" && description !== "" && latitude !== "" && longitude !== "" && category !== "";
+        return name !== "" && description !== ""  && category !== "";
     }
 
     function clearForm(){
         setName("");
         setDescription("");
-        setLatitude("");
-        setLongitude("");
         setCategory("");
     }
 
@@ -34,16 +32,17 @@ const AddPlaceSidebar = (props) => {
         place.id = uuid();
         place.name = name;
         place.description = description;
-        place.latitude = latitude;
-        place.longitude = longitude;
+        place.latitude = selectedPoint.lat;
+        place.longitude = selectedPoint.lng;
         place.category = category;
-        setPlaces([...places, place]);
+        setPlaces(currentPlaces => [...currentPlaces, place]);
+        setPlacesLength(currentPlacesLength => currentPlacesLength + 1);
 
     }
 
     return (
         <div>
-            <Typography className={classes.title} variant="h4">Create a new place.</Typography>
+
             <FormControl className={classes.formControl}>
                 <TextField
                     className = {classes.textField}
@@ -63,22 +62,7 @@ const AddPlaceSidebar = (props) => {
                     required
                     onChange={(e) => setDescription(e.target.value)}
                 />
-                <TextField
-                    className = {classes.textField}
-                    value={longitude}
-                    id="outlined-required"
-                    label="Longitude"
-                    required
-                    onChange={(e) => setLongitude(e.target.value)}
-                />
-                <TextField
-                    className = {classes.textField}
-                    value={latitude}
-                    id="outlined-required"
-                    label="Latitude"
-                    required
-                    onChange={(e) => setLatitude(e.target.value)}
-                />
+
                 <Select
                     className = {classes.textField}
                     value={category}

webapp/src/components/DeletePlaceConfirmDialog/DeletePlaceConfirmDialog.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Paper} from "@mui/material";
+
+
+const DeletePlaceConfirmDialog = (props) => {
+    const {open, handleClose, handleDeletePlace} = props;
+
+    return (
+        <div>
+            <Dialog
+                open={open}
+                onClose={handleClose}
+            >
+                <DialogTitle >
+                    Delete Place
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        This place will be deleted from your list. Are you sure you want to continue?
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button autoFocus onClick={handleClose}>
+                        Cancel
+                    </Button>
+                    <Button style={{color:'red'}} onClick={handleDeletePlace}>Delete</Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+};
+
+export default DeletePlaceConfirmDialog;

webapp/src/components/DetailsSidebar/DetailsSidebar.jsx

@@ -1,17 +1,41 @@
 import React, {useState} from 'react';
 import useStyles from "./styles";
 import AddPlaceSidebar from "../AddPlaceSidebar/AddPlaceSidebar";
+import MyPlacesSidebar from "../MyPlacesSidebar/MyPlacesSidebar";
+import {Typography} from "@mui/material";
 const DetailsSidebar = (props) => {
     const classes = useStyles();
     const [content, setContent] = useState("");
-    const {places, setPlaces} = props;
+    const {places, setPlaces, selectedPoint, setSelectedPoint, selectedButton,setSelectedPlaceMyPlaces,
+        deletePlace, setPlacesLength} = props;
 
     const handleSelectedButton = (buttonName) => {
         switch (buttonName) {
             case 'MyPlaces' :
-                return <h1> My places.</h1>;
+                return (
+                    <>
+                        <Typography className={classes.title} variant="h4">
+                            My places.
+                        </Typography>
+                        <div style={{ overflow: "auto", height: "70vh" }}>
+                            <MyPlacesSidebar deletePlace={deletePlace} places={places} setPlaces={setPlaces}
+                                             setSelectedPlaceMyPlaces={setSelectedPlaceMyPlaces}/>
+                        </div>
+                    </>
+                        );
             case 'AddPlace' :
-                return <AddPlaceSidebar places={places} setPlaces={setPlaces} />;
+                return (
+                    <>
+                        <Typography className={classes.title} variant="h4">
+                            Create a new place.
+                        </Typography>
+
+                        <div>
+                            <AddPlaceSidebar places={places} setPlaces={setPlaces} selectedPoint={selectedPoint}
+                            setSelectedPoint={setSelectedPoint} setPlacesLength={setPlacesLength}/>;
+                        </div>
+                    </>
+                );
             case 'Friends':
                 return <h1> Friends.</h1>;
             case 'Settings':
@@ -26,9 +50,7 @@ const DetailsSidebar = (props) => {
 
     return (
         <div className={classes.detailsSideBar}>
-            <div>
-                {handleSelectedButton(props.selectedButton)}
-            </div>
+            {handleSelectedButton(selectedButton)}
         </div>
     );
 }

webapp/src/components/DetailsSidebar/styles.js

@@ -1,20 +1,11 @@
 import { makeStyles } from '@mui/styles';
 
 export default makeStyles((theme) => ({
-    gridLogo: {
-        display: 'flex',
-        justifyContent: 'center',
+    title: {
+        margin: '25px',
+        color: '#313439',
+        fontFamily: 'Inter, sans-serif',
+        fontWeight: 'bold',
     },
 
-    gridSearchPlacesBar: {
-        display: 'flex',
-        justifyContent: 'center',
-
-    },
-
-    gridFilterByBar: {
-        display: 'flex',
-        justifyContent: 'center',
-    }
-
 }));

webapp/src/components/FilterByBar/FilterByBar.jsx

@@ -37,9 +37,6 @@ const FilterByBar = (props) => {
                     borderRadius: '999px',  // Rounded corners
                     backgroundColor: '#EAEAEA'  // Input background color
                 },
-                '& input': {    // Same as above
-                    fontSize: '1.2rem',
-                },
             }}
         />
     </div>