Merge pull request #183 from Arquisoft/adriana

Cambios en la privacidad y escritura/borrado de pods principalmente
Arquisoft · Apr 13, 2023 · 01064e4 · 01064e4
2 parents f58e541 + 4b762a1
commit 01064e4
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 33 deletions.
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -79,6 +79,10 @@ function App() {
         setPlaces(places.filter(place => place.id !== placeID));//antes: place._id (por mongo)
     }
 
+    function deleteFriend(friendID) {
+
+    }
+
     const handleLogout = () => {
         session.logout();
     }

diff --git a/webapp/src/components/AddPlaceSidebar/AddPlaceSidebar.jsx b/webapp/src/components/AddPlaceSidebar/AddPlaceSidebar.jsx
@@ -11,14 +11,15 @@ function AddPlaceSidebar (props)  {
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
     const [category, setCategory] = useState("");
-
+    const [privacy, setPrivacy] =  useState("");
     const addPlace =  async(req) => {
         const place = new PlaceEntity();
         place.name = name;
         place.description = description;
         place.latitude = selectedPoint.lat;
         place.longitude = selectedPoint.lng;
         place.category = category;
+        place.privacy = privacy;
 
         //Con una webId como esta "https://aliciafp15.inrupt.net/profile/card#me";
         const parts = userWebId.split('.'); // Dividimos la cadena en partes utilizando el punto como separador
@@ -43,16 +44,18 @@ function AddPlaceSidebar (props)  {
         }
     }
 
+
     const classes = useStyles();
 
     function isFormComplete(){
-        return name !== "" && description !== ""  && category !== "";
+        return name !== "" && description !== ""  && category !== "" && privacy !== "";
     }
 
     function clearForm(){
         setName("");
         setDescription("");
         setCategory("");
+        setPrivacy("");
     }
 
     function addPlaceAndClearForm(){
@@ -61,8 +64,6 @@ function AddPlaceSidebar (props)  {
             clearForm();
         }
     }
-
-
 
     return (
         <div>
@@ -96,6 +97,14 @@ function AddPlaceSidebar (props)  {
                     <MenuItem value="Attractions">Attractions</MenuItem>
                 </Select>
 
+                <Select
+                    className = {classes.textField}
+                    value = {privacy}
+                    onChange={(e)=>setPrivacy(e.target.value)}>
+                    <MenuItem value="Public">Share place with my friends</MenuItem>
+                    <MenuItem value="Private">Store place privately</MenuItem>
+
+                </Select>
                 <Button className = {classes.textField} type='submit' variant="contained" onClick={addPlaceAndClearForm} disabled={!isFormComplete()}>Add place</Button>
 
             </FormControl>

diff --git a/webapp/src/components/AddPlaceSidebar/styles.js b/webapp/src/components/AddPlaceSidebar/styles.js
@@ -9,6 +9,7 @@ export default makeStyles((theme) => ({
         margin: '25px',
         marginBottom: '5px',
         marginTop: '5px',
+        variant:"outlined",
     },
     title: {
         margin: '25px',

diff --git a/webapp/src/components/DeleteFriendConfirmDialog/DeleteFriendConfirmDialog.jsx b/webapp/src/components/DeleteFriendConfirmDialog/DeleteFriendConfirmDialog.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Paper} from "@mui/material";
+
+
+const DeleteFriendConfirmDialog = (props) => {
+    const {open, handleClose, handleDeleteFriend} = props;
+
+    return (
+        <div>
+            <Dialog
+                open={open}
+                onClose={handleClose}
+            >
+                <DialogTitle >
+                    Delete friend
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        This friend will be deleted. Are you sure you want to continue?
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button autoFocus onClick={handleClose}>
+                        Cancel
+                    </Button>
+                    <Button style={{color:'red'}} onClick={handleDeleteFriend}>Delete Friend</Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+};
+
+export default DeleteFriendConfirmDialog;
diff --git a/webapp/src/components/DetailsSidebar/DetailsSidebar.jsx b/webapp/src/components/DetailsSidebar/DetailsSidebar.jsx
@@ -13,9 +13,9 @@ const DetailsSidebar = (props) => {
     const classes = useStyles();
     const [content, setContent] = useState("");
     const {places, setPlaces, selectedPoint, setSelectedPoint, setSelectedButton, selectedButton,setSelectedPlaceMyPlaces,
-        deletePlace, setPlacesLength,userWebId, handleLogout, session, selectedFriendPlaces, setSelectedFriendPlaces} = props;
+        deletePlace, setPlacesLength,userWebId, handleLogout, session, selectedFriendPlaces, setSelectedFriendPlaces, deleteFriend} = props;
     const [selectedFriend, setSelectedFriend] = useState([]);
-
+    const [showDeleteButton, setShowDeleteButton] =useState(true);
 
     useEffect(() => {
         let friendWebId = selectedFriend.friendURL;
@@ -36,7 +36,8 @@ const DetailsSidebar = (props) => {
                         </Typography>
                         <div style={{ overflow: "auto", height: "70vh" }}>
                             <MyPlacesSidebar deletePlace={deletePlace} places={places} setPlaces={setPlaces}
-                                             setSelectedPlaceMyPlaces={setSelectedPlaceMyPlaces} session={session} />
+                                             setSelectedPlaceMyPlaces={setSelectedPlaceMyPlaces} session={session}
+                                            showDeleteButton = {showDeleteButton}/>
                         </div>
                     </>
                 );
@@ -67,7 +68,7 @@ const DetailsSidebar = (props) => {
                             Explore your friends places.
                         </Typography>
                         <div>
-                            <SocialSidebar userWebId={userWebId} setSelectedFriend={setSelectedFriend} setSelectedButton={setSelectedButton}/>
+                            <SocialSidebar userWebId={userWebId} setSelectedFriend={setSelectedFriend} setSelectedButton={setSelectedButton} deleteFriend={deleteFriend}/>
                         </div>
                     </>
                 );
@@ -82,7 +83,8 @@ const DetailsSidebar = (props) => {
                         </Typography>
                         <div style={{ overflow: "auto", height: "70vh" }}>
                             <MyPlacesSidebar places={selectedFriendPlaces} setPlaces={setPlaces}
-                                             setSelectedPlaceMyPlaces={setSelectedPlaceMyPlaces}/>
+                                             setSelectedPlaceMyPlaces={setSelectedPlaceMyPlaces}
+                                             setShowDeleteButton = {false}/>
                         </div>
                     </>
                 );

diff --git a/webapp/src/components/FriendCard/FriendCard.jsx b/webapp/src/components/FriendCard/FriendCard.jsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import {Card, CardContent, CardHeader, IconButton, Menu, MenuItem, Typography} from "@mui/material";
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
-import DeletePlaceConfirmDialog from "../DeletePlaceConfirmDialog/DeletePlaceConfirmDialog";
 import MapIcon from '@mui/icons-material/Map';
 import Avatar from "@mui/material/Avatar";
 import {Image} from "@inrupt/solid-ui-react";
 import {VCARD} from "@inrupt/lit-generated-vocab-common";
 import {useStyles} from "tss-react/mui";
+import DeleteFriendConfirmDialog from "../DeleteFriendConfirmDialog/DeleteFriendConfirmDialog";
+import { deleteFriendPod } from '../../solidapi/solidAdapter';
+
 const FriendCard = (props) => {
     const classes = useStyles();
-    const {friend, setSelectedFriend, setSelectedButton} = props;
+    const {friend, setSelectedFriend, setSelectedButton, deleteFriend, userWebId} = props;
     const [open, setOpen] = React.useState(false);
 
     const handleClickOpen = () => {
@@ -22,13 +24,14 @@ const FriendCard = (props) => {
 
     const handleDeleteFriend = () => {
         console.log("DELETING FRIEND...");
+        deleteFriendPod(userWebId, "https://uo282249.inrupt.net/profile/card#me"); //deleting in the frontend
+
     }
 
     console.log(friend.profilePicture);
     return (
         <div>
             <Card style={{margin: '25px', marginTop:'0px'}}>
-
                 <CardHeader
                     component='div' style={{paddingBottom: '10px'}}
                     action={
@@ -52,7 +55,7 @@ const FriendCard = (props) => {
                     </Typography>
                 </CardContent>
             </Card>
-            <DeletePlaceConfirmDialog open={open} handleClose={handleClose} />
+            <DeleteFriendConfirmDialog open={open} handleClose={handleClose} handleDeleteFriend={handleDeleteFriend}/>
         </div>
     );
 };

diff --git a/webapp/src/components/IconsSidebar/IconsSidebar.jsx b/webapp/src/components/IconsSidebar/IconsSidebar.jsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {IconButton} from "@mui/material";
 import PlaceIcon from '@mui/icons-material/Place';
 import AddLocationAltIcon from '@mui/icons-material/AddLocationAlt';
@@ -7,8 +7,6 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import useStyles from "./styles";
 
-import handleButtonAction from '../DetailsSidebar/DetailsSidebar';
-import Sidebar from "../Sidebar/Sidebar";
 const IconsSidebar = (props) => {
     const classes = useStyles();
 

diff --git a/webapp/src/components/LoginWall/LoginWall.jsx b/webapp/src/components/LoginWall/LoginWall.jsx
@@ -7,6 +7,7 @@ import { LoginButton } from "@inrupt/solid-ui-react";
 import { useEffect } from 'react';
 const LoginWall = (props) => {
     const classes = useStyles();
+    const {setSession} = props;
     const [idp, setIdp] = useState("https://inrupt.net");
     const [currentUrl, setCurrentUrl] = useState("http://localhost:3000/");
 

diff --git a/webapp/src/components/MyPlacesSidebar/MyPlacesSidebar.jsx b/webapp/src/components/MyPlacesSidebar/MyPlacesSidebar.jsx
@@ -5,7 +5,7 @@ import PlaceCard from "../PlaceCard/PlaceCard";
 import {Marker, Popup} from "react-leaflet";
 import List from '@mui/material/List';
 const MyPlacesSidebar = (props) => {
-    const {places, setPlaces,setSelectedPlaceMyPlaces, deletePlace, session} = props;
+    const {places, setPlaces,setSelectedPlaceMyPlaces, deletePlace, session, showDeleteButton} = props;
     const classes = useStyles();
 
 
@@ -14,7 +14,7 @@ const MyPlacesSidebar = (props) => {
         return props.places?.map((place)=> (
             console.log('key ' + place._id),
             <PlaceCard key={place._id} place={place} setSelectedPlaceMyPlaces={setSelectedPlaceMyPlaces} 
-            deletePlace={deletePlace} session={session}/>
+            deletePlace={deletePlace} session={session} showDeleteButton = {showDeleteButton} />
         ))
 
     }

diff --git a/webapp/src/components/PlaceCard/PlaceCard.jsx b/webapp/src/components/PlaceCard/PlaceCard.jsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import {Card, CardContent, CardHeader, IconButton, Menu, MenuItem, Typography} from "@mui/material";
+import {Card, CardContent, CardHeader, IconButton, Menu, MenuItem, Typography, Chip} from "@mui/material";
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 import TravelExploreRoundedIcon from '@mui/icons-material/TravelExploreRounded';
 import DeletePlaceConfirmDialog from "../DeletePlaceConfirmDialog/DeletePlaceConfirmDialog";
 import {deletePlaceMarkByID} from "../../api/api";
 import { removePlace } from '../../solidapi/solidAdapter';
+import Diversity3Icon from '@mui/icons-material/Diversity3';
+import PermIdentityIcon from '@mui/icons-material/PermIdentity';
 
 const PlaceCard = (props) => {
-    const {place, setSelectedPlaceMyPlaces, deletePlace, session} = props;
+    const {place, setSelectedPlaceMyPlaces, deletePlace, session, showDeleteButton } = props;
     const [open, setOpen] = React.useState(false);
 
     const handleClickOpen = () => {
@@ -34,26 +36,33 @@ const PlaceCard = (props) => {
     return (
         <div>
             <Card style={{margin: '25px', marginTop:'0px'}}>
+
                 <CardHeader
                     component='div' style={{paddingBottom: '10px'}}
                     action={
                         <>
+                            <Chip icon = {place.privacy === "Public" ? <Diversity3Icon/> : <PermIdentityIcon/>} label={place.privacy}  />
                             <IconButton aria-label="view" onClick={()=>setSelectedPlaceMyPlaces({lat: place.latitude, lng: place.longitude})}>
                                 <TravelExploreRoundedIcon style={{color: '#6986e8'}}/>
                             </IconButton>
-                            <IconButton aria-label="menu" onClick={handleClickOpen}>
-                                <DeleteRoundedIcon style={{color: '#dc6868'}} />
-                            </IconButton>
-
+                            {showDeleteButton ? (
+                                <IconButton aria-label="menu" onClick={handleClickOpen}>
+                                    <DeleteRoundedIcon style={{color: '#dc6868'}} />
+                                </IconButton>
+                            ) : null}
                         </>
                     }
+
                     title={<Typography variant="h5" style={{fontWeight: "bold"}}>{place.name}</Typography>}
+
                     subheader={<Typography variant="h6" color="textSecondary">{place.category}</Typography>}
+
                 />
                 <CardContent component="div" style={{paddingTop: '0px'}} >
                     <Typography variant="body2" component="p">
                         {place.description}
                     </Typography>
+
                 </CardContent>
             </Card>
             <DeletePlaceConfirmDialog open={open} handleClose={handleClose} handleDeletePlace={handleDeletePlace}/>

diff --git a/webapp/src/components/Sidebar/Sidebar.jsx b/webapp/src/components/Sidebar/Sidebar.jsx
@@ -9,7 +9,7 @@ const Sidebar = (props) => {
 
     const {places, setPlaces, selectedButton, setSelectedButton, selectedPoint,
         setSelectedPoint,setSelectedPlaceMyPlaces,deletePlace, setPlacesLength, userWebId, handleLogout, session,
-        selectedFriendPlaces, setSelectedFriendPlaces} = props;
+        selectedFriendPlaces, setSelectedFriendPlaces, deleteFriend} = props;
     const handleSelectedButtonChange = (selectedButton) => {
         setSelectedButton(selectedButton);
     };
@@ -28,7 +28,8 @@ const Sidebar = (props) => {
                                     setSelectedPlaceMyPlaces={setSelectedPlaceMyPlaces} deletePlace={deletePlace}
                                     setPlacesLength={setPlacesLength} userWebId={userWebId} handleLogout={handleLogout}
                                     session={session} setSelectedButton={setSelectedButton}
-                                    selectedFriendPlaces={selectedFriendPlaces} setSelectedFriendPlaces={setSelectedFriendPlaces}/>
+                                    selectedFriendPlaces={selectedFriendPlaces} setSelectedFriendPlaces={setSelectedFriendPlaces}
+                                    deleteFriend={deleteFriend}/>
                 </Grid>
             </Grid>
         </ div>

diff --git a/webapp/src/components/SocialSidebar/SocialSidebar.jsx b/webapp/src/components/SocialSidebar/SocialSidebar.jsx
@@ -6,7 +6,7 @@ import FriendCard from "../FriendCard/FriendCard";
 
 const SocialSidebar = (props) => {
     // const classes = useStyles();
-    const {userWebId, setSelectedFriend,setSelectedButton} = props;
+    const {userWebId, setSelectedFriend,setSelectedButton, deleteFriend} = props;
     const [friends, setFriends] = useState([]);
     useEffect(() => {
         getFriends(userWebId).then((friends) => {
@@ -17,7 +17,8 @@ const SocialSidebar = (props) => {
     const showFriends = () => {
         console.log(friends);
         return friends?.map((friend) => (
-            <FriendCard key={friend.friendURL} friend={friend} setSelectedButton={setSelectedButton} setSelectedFriend={setSelectedFriend} />
+            <FriendCard key={friend.friendURL} friend={friend} setSelectedButton={setSelectedButton} setSelectedFriend={setSelectedFriend}
+            deleteFriend = {deleteFriend} userWebId={userWebId}/>
         ));
     };