From 5d00a5d94da006f1bc20225d8d1fb5893a29f9d8 Mon Sep 17 00:00:00 2001 From: UO278249 Date: Mon, 1 May 2023 04:39:13 +0200 Subject: [PATCH 1/6] Added confirmation on locations added and feedback while loading. --- restapi/src/builders/locationBuilder.ts | 5 +- restapi/src/types.d.ts | 6 +- .../components/FriendsPage/FriendsView.tsx | 2 +- webapp/src/components/Map.tsx | 226 +++++++++++------- webapp/src/types.d.ts | 8 +- 5 files changed, 146 insertions(+), 101 deletions(-) diff --git a/restapi/src/builders/locationBuilder.ts b/restapi/src/builders/locationBuilder.ts index 55bcfe4..deb69bc 100644 --- a/restapi/src/builders/locationBuilder.ts +++ b/restapi/src/builders/locationBuilder.ts @@ -16,10 +16,11 @@ export function thingToLocation(locationThing:Thing) : Location { latitude: getDecimal(locationThing, SCHEMA_INRUPT.latitude)!, longitude: getDecimal(locationThing, SCHEMA_INRUPT.longitude)!, isShared: false, - isOwnLocation: false + isOwnLocation: false, + owner:"" } } - +//TODO: añadir owner export function locationToThing(location:Location):Thing{ return buildThing(createThing()) .addStringNoLocale(SCHEMA_INRUPT.name, location.name) diff --git a/restapi/src/types.d.ts b/restapi/src/types.d.ts index cac0b87..b092363 100644 --- a/restapi/src/types.d.ts +++ b/restapi/src/types.d.ts @@ -7,14 +7,16 @@ export type Location = { latitude:number, longitude:number isShared:boolean, - isOwnLocation:boolean + isOwnLocation:boolean, + owner:string }; export type Review = { markerId:string, comment:string, score:double, - encodedPhoto:string + encodedPhoto:string, + owner:string } export type Friend = { diff --git a/webapp/src/components/FriendsPage/FriendsView.tsx b/webapp/src/components/FriendsPage/FriendsView.tsx index a200851..0e8906f 100644 --- a/webapp/src/components/FriendsPage/FriendsView.tsx +++ b/webapp/src/components/FriendsPage/FriendsView.tsx @@ -129,7 +129,7 @@ export default function FriendsView(): JSX.Element { Your friends {isLoading - ? (

Cargando amigos

) + ? (

Loading friends

) : ( diff --git a/webapp/src/components/Map.tsx b/webapp/src/components/Map.tsx index 975c407..fb4b262 100644 --- a/webapp/src/components/Map.tsx +++ b/webapp/src/components/Map.tsx @@ -25,7 +25,7 @@ import { Text, useDisclosure, CardFooter, - ButtonGroup + ButtonGroup, Spinner, AlertIcon, AlertTitle, AlertDescription, Alert, useToast, createStandaloneToast } from '@chakra-ui/react'; import "../css/react_leaflet.css"; import 'leaflet/dist/leaflet.css'; @@ -38,7 +38,6 @@ import {LocationType} from "../locationType"; import DetailsDrawer from './mapComponents/LocationReviewsView' export function LocationMarkerWithStore() { - // const [position, setPosition] : LatLng = {lat: 0, lng: 0}; const dispatch = useDispatch(); const [lati, setLat] = useState(0); const [lngi, setLng] = useState(0); @@ -48,9 +47,11 @@ export function LocationMarkerWithStore() { const initialRef = React.useRef(null) var [name, setName] = React.useState('') var [category, setCategory] = React.useState('bar') - var [details, setDetails] = React.useState('') var [isShared, setShared] = React.useState(false) + var [locationAdded, setLocationAdded] = React.useState(false) + const { ToastContainer, toast } = createStandaloneToast() + const idToast = 'addedLocSuccess-Toast' const map = useMapEvents({ click: (e) => { @@ -60,7 +61,6 @@ export function LocationMarkerWithStore() { onOpen(); setName('') setCategory('bar') - setDetails('') setShared(false) }, @@ -70,60 +70,82 @@ export function LocationMarkerWithStore() { //This need to be optimiced because I think it generates again //all the markers on top of each other return ( - - - - - - - -
{ - event.preventDefault(); - const marker : MapMarker = {latitude : lati, longitude : lngi, - name: name,locationType: category as LocationType, id: lati + " - " + lngi,isShared: isShared}; + <> + {locationAdded && !toast.isActive(idToast) ? + (setLocationAdded(false),toast({ + id: idToast, + title: 'Marker Added', + description: "New Location added succesfully.", + status: 'success', + duration: 3000, + isClosable: true, + })) : + ( + + + + + + + { + event.preventDefault(); + const marker: MapMarker = { + latitude: lati, + longitude: lngi, + name: name, + locationType: category as LocationType, + id: lati + " - " + lngi, + isShared: isShared, + owner: "" + }; - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault(); - addLocationMutation(marker); - }; - handleSubmit(event) - setName('') - setCategory('bar') - setDetails('') - setShared(false) - }}> - - - Name - setName(e.currentTarget.value)}/> - - - Category - - - - setShared(e.target.checked)}> - Public - - - - - - - - - - - + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + addLocationMutation(marker); + if(!isError) { + setLocationAdded(true); + } + }; + handleSubmit(event) + setName('') + setCategory('bar') + setShared(false) + }}> + + + Name + setName(e.currentTarget.value)}/> + + + Category + + + + setShared(e.target.checked)}> + Public + + + + + + + + + + + ) + } + ); } @@ -162,8 +184,15 @@ export default function MapElement(): JSX.Element { attribution='© - - {locations?.filter( loc => { + {isLoading + ? + ( + + Loading markers + + ) : + <> + ({locations?.filter( loc => { if(loc.isShared && showSharedLocations == false) return false if(loc.locationType == LocationType.restaurant && showRestaurants) return true if(loc.locationType == LocationType.bar && showBars) return true @@ -183,10 +212,13 @@ export default function MapElement(): JSX.Element { latitude={location.latitude} longitude={location.longitude} isShared={location.isShared} + owner={location.owner} /> - ))} + ))}) + + } @@ -268,38 +300,46 @@ export const FilterModal : FC = ( props ) : JSX.Element => { } export function PopupContent(marker: MapMarker){ + + const deleteAction = ()=> { + + } return( - - - } spacing='4' minWidth={'sm'}> - - - Name - - - {marker.name} - - - - - Category - - - {marker.locationType} - - - - - - - - - - + + + } spacing='4' minWidth={'sm'}> + + + Name + + + {marker.name} + + + + + Category + + + {marker.locationType} + + + + + + + + {marker.owner=="" ? : <> } + + + ) -} \ No newline at end of file +} diff --git a/webapp/src/types.d.ts b/webapp/src/types.d.ts index bad4dfa..0af4036 100644 --- a/webapp/src/types.d.ts +++ b/webapp/src/types.d.ts @@ -6,15 +6,17 @@ export type MapMarker = { locationType:LocationType, latitude:number, longitude:number, - isShared: boolean + isShared: boolean, + owner:string }; export type Review = { markerId:string, comment:string, photo:File, - score:double - encodedPhoto:string + score:double, + encodedPhoto:string, + owner:string } From d88e515451fee2157c4079115070fba47ef703eb Mon Sep 17 00:00:00 2001 From: UO278249 Date: Mon, 1 May 2023 04:41:52 +0200 Subject: [PATCH 2/6] Added feedback on a review added and while loading reviews. Added showing the name of the owner of the review --- .../mapComponents/LocationReviewsView.tsx | 68 +++++++++++++++---- 1 file changed, 53 insertions(+), 15 deletions(-) diff --git a/webapp/src/components/mapComponents/LocationReviewsView.tsx b/webapp/src/components/mapComponents/LocationReviewsView.tsx index a167d79..2f48b9d 100644 --- a/webapp/src/components/mapComponents/LocationReviewsView.tsx +++ b/webapp/src/components/mapComponents/LocationReviewsView.tsx @@ -9,15 +9,32 @@ import { DrawerHeader, DrawerOverlay, FormControl, - FormLabel, Heading, Input, + FormLabel, + Heading, + Input, Modal, ModalBody, ModalCloseButton, - ModalContent, ModalFooter, + ModalContent, + ModalFooter, ModalHeader, ModalOverlay, - Stack, Text, Textarea, Image, - useDisclosure, Flex, DrawerFooter, Spacer, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverHeader, PopoverBody, PopoverCloseButton + Stack, + Text, + Textarea, + Image, + useDisclosure, + Flex, + DrawerFooter, + Spacer, + Popover, + PopoverTrigger, + PopoverContent, + PopoverArrow, + PopoverHeader, + PopoverBody, + PopoverCloseButton, + Spinner, createStandaloneToast } from "@chakra-ui/react"; import React, {ChangeEvent, useState} from "react"; // @ts-ignore @@ -51,17 +68,23 @@ export default function DetailsDrawer(marker: MapMarker) { -

Reviews

- - {reviews?.map( (review) => ( + {isLoading + ? (

Loading reviews

) : + ( + ({reviews?.map((review) => ( - {review.encodedPhoto!="" ? : <> } - {review.score >0 ? : <> } + {review.owner} + {review.encodedPhoto!="" ? + : <> } + {review.score >0 ? : <> } {review.comment.length != 0 ?{review.comment} : <> } ))} - + ) + } @@ -71,7 +94,8 @@ export default function DetailsDrawer(marker: MapMarker) { id={marker.id} latitude={marker.latitude} longitude={marker.longitude} - isShared={marker.isShared}/> + isShared={marker.isShared} + owner={marker.owner}/> @@ -95,6 +119,10 @@ export function AddCommentForm(marker: MapMarker) { } }; + var [reviewAdded, setReviewAdded] = React.useState(false) + const { ToastContainer, toast } = createStandaloneToast() + const idToast = 'addedRevSuccess-Toast' + const resetAndOpen = () => { onOpen() setTextComment(""); @@ -110,7 +138,16 @@ export function AddCommentForm(marker: MapMarker) { Add a Review - + {reviewAdded && !toast.isActive(idToast) ? + (setReviewAdded(false),toast({ + id: idToast, + title: 'Review Added', + description: "Your review has been added succesfully.", + status: 'success', + duration: 3000, + isClosable: true, + })) : + ( @@ -123,7 +160,7 @@ export function AddCommentForm(marker: MapMarker) {
{ event.preventDefault(); - const review : Review = {markerId:marker.id, comment:textComment, photo: file ,score:rating, encodedPhoto: ""}; + const review : Review = {markerId:marker.id, comment:textComment, photo: file ,score:rating, encodedPhoto: "", owner:""}; const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); @@ -132,6 +169,7 @@ export function AddCommentForm(marker: MapMarker) { .then(result => { review.encodedPhoto = result; addReviewMutation(review); + setReviewAdded(true); }) .catch(err => { console.log(err); @@ -224,7 +262,7 @@ export function AddCommentForm(marker: MapMarker) { - + )} ); } @@ -240,7 +278,7 @@ export function InformationPopup(){ Adding Reviews - While adding a review you can upload an image, add a score or/and add + While adding a review you can upload an image, add a score or/and add a text comment without or adding any of the other two but you must submit at least one. From ed908e1b129e62007948f8b3dc6de7a41b0e08df Mon Sep 17 00:00:00 2001 From: UO278249 Date: Mon, 1 May 2023 16:00:01 +0200 Subject: [PATCH 3/6] Changes on feedback while adding reviews and locations. Added owner on marker popup and added filters to my locations and friend locations. --- webapp/src/components/Map.tsx | 181 ++++++++++-------- .../mapComponents/LocationReviewsView.tsx | 25 ++- webapp/src/types.d.ts | 3 +- 3 files changed, 112 insertions(+), 97 deletions(-) diff --git a/webapp/src/components/Map.tsx b/webapp/src/components/Map.tsx index fb4b262..45bf638 100644 --- a/webapp/src/components/Map.tsx +++ b/webapp/src/components/Map.tsx @@ -31,12 +31,13 @@ import "../css/react_leaflet.css"; import 'leaflet/dist/leaflet.css'; import {Icon, LatLngExpression} from 'leaflet'; import markerIconPng from "leaflet/dist/images/marker-icon.png"; -import {useDispatch, useSelector} from 'react-redux'; +import {useDispatch} from 'react-redux'; import {useAddLocationMutation, useGetLocationsQuery} from "../app/services/Location"; import type {MapMarker} from '../types'; import {LocationType} from "../locationType"; import DetailsDrawer from './mapComponents/LocationReviewsView' + export function LocationMarkerWithStore() { const dispatch = useDispatch(); const [lati, setLat] = useState(0); @@ -49,9 +50,7 @@ export function LocationMarkerWithStore() { var [category, setCategory] = React.useState('bar') var [isShared, setShared] = React.useState(false) - var [locationAdded, setLocationAdded] = React.useState(false) - const { ToastContainer, toast } = createStandaloneToast() - const idToast = 'addedLocSuccess-Toast' + const toast = useToast(); const map = useMapEvents({ click: (e) => { @@ -71,80 +70,75 @@ export function LocationMarkerWithStore() { //all the markers on top of each other return ( <> - {locationAdded && !toast.isActive(idToast) ? - (setLocationAdded(false),toast({ - id: idToast, - title: 'Marker Added', - description: "New Location added succesfully.", - status: 'success', - duration: 3000, - isClosable: true, - })) : - ( - - - - - - - { - event.preventDefault(); - const marker: MapMarker = { - latitude: lati, - longitude: lngi, - name: name, - locationType: category as LocationType, - id: lati + " - " + lngi, - isShared: isShared, - owner: "" - }; + + + + + + + + { + event.preventDefault(); + const marker: MapMarker = { + latitude: lati, + longitude: lngi, + name: name, + locationType: category as LocationType, + id: lati + " - " + lngi, + isShared: isShared, + owner: "", + isOwnLocation:true + }; - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault(); - addLocationMutation(marker); - if(!isError) { - setLocationAdded(true); - } - }; - handleSubmit(event) - setName('') - setCategory('bar') - setShared(false) - }}> - - - Name - setName(e.currentTarget.value)}/> - - - Category - - - - setShared(e.target.checked)}> - Public - - - - - - - - - - - ) - } + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + addLocationMutation(marker); + toast({ + title: 'Marker Added', + description: "The location has been added successfully", + status: 'success', + duration: 7000, + isClosable: true, + }); + }; + handleSubmit(event) + setName('') + setCategory('bar') + setShared(false) + }}> + + + Name + setName(e.currentTarget.value)}/> + + + Category + + + + setShared(e.target.checked)}> + Public + + + + + + + + + + + ); } @@ -160,6 +154,8 @@ export default function MapElement(): JSX.Element { const [showSights, setShowSights] = useState(true) const [showMonuments, setShowMonuments] = useState(true) const [showSharedLocations, setShowSharedLocations] = useState(true) + const [showMyLocations, setShowMyLocations] = useState(true) + const [showFriendLocations, setShowFriendLocations] = useState(true) return ( showSights} setShowSights={setShowSights} showMonuments={() => showMonuments} setShowMonuments={setShowMonuments} showSharedLocations={() => showSharedLocations} setShowSharedLocations={setShowSharedLocations} + showMyLocations={() => showMyLocations} setShowMyLocations={setShowMyLocations} + showFriendLocations={() => showFriendLocations} setShowFriendLocations={setShowFriendLocations} /> @@ -194,6 +192,8 @@ export default function MapElement(): JSX.Element { <> ({locations?.filter( loc => { if(loc.isShared && showSharedLocations == false) return false + if(loc.isOwnLocation && showMyLocations == false) return false + if(loc.isOwnLocation == false && showFriendLocations == false) return false if(loc.locationType == LocationType.restaurant && showRestaurants) return true if(loc.locationType == LocationType.bar && showBars) return true if(loc.locationType == LocationType.shop && showShops) return true @@ -213,6 +213,7 @@ export default function MapElement(): JSX.Element { longitude={location.longitude} isShared={location.isShared} owner={location.owner} + isOwnLocation={location.isOwnLocation} /> @@ -238,6 +239,10 @@ interface FilterModalProps { setShowMonuments : React.Dispatch>, showSharedLocations : () => boolean, setShowSharedLocations : React.Dispatch>, + showMyLocations : () => boolean, + setShowMyLocations : React.Dispatch>, + showFriendLocations : () => boolean, + setShowFriendLocations : React.Dispatch>, } export const FilterModal : FC = ( props ) : JSX.Element => { @@ -250,7 +255,9 @@ export const FilterModal : FC = ( props ) : JSX.Element => { { id: "shops", name: "Shops", value: props.showShops, onChange: props.setShowShops }, { id: "sights", name: "Sights", value: props.showSights, onChange: props.setShowSights }, { id: "monuments", name: "Monuments", value: props.showMonuments, onChange: props.setShowMonuments }, - { id: "sharedLocations", name: "Shared Locations", value: props.showSharedLocations, onChange: props.setShowSharedLocations } + { id: "sharedLocations", name: "Public Locations", value: props.showSharedLocations, onChange: props.setShowSharedLocations }, + { id: "myLocations", name: "My Locations", value: props.showMyLocations, onChange: props.setShowMyLocations }, + { id: "friendLocations", name: "Friend Locations", value: props.showFriendLocations, onChange: props.setShowFriendLocations } ] }; @@ -304,6 +311,7 @@ export function PopupContent(marker: MapMarker){ const deleteAction = ()=> { } + return( @@ -312,7 +320,7 @@ export function PopupContent(marker: MapMarker){ Name - + {marker.name} @@ -320,10 +328,18 @@ export function PopupContent(marker: MapMarker){ Category - + {marker.locationType} + + + Created by + + + {marker.owner} + + @@ -334,8 +350,9 @@ export function PopupContent(marker: MapMarker){ latitude={marker.latitude} longitude={marker.longitude} isShared={marker.isShared} - owner={marker.owner}/> - {marker.owner=="" ? : <> } diff --git a/webapp/src/components/mapComponents/LocationReviewsView.tsx b/webapp/src/components/mapComponents/LocationReviewsView.tsx index 2f48b9d..7bf53e4 100644 --- a/webapp/src/components/mapComponents/LocationReviewsView.tsx +++ b/webapp/src/components/mapComponents/LocationReviewsView.tsx @@ -95,7 +95,8 @@ export default function DetailsDrawer(marker: MapMarker) { latitude={marker.latitude} longitude={marker.longitude} isShared={marker.isShared} - owner={marker.owner}/> + owner={marker.owner} + isOwnLocation={marker.isOwnLocation}/> @@ -137,17 +138,7 @@ export function AddCommentForm(marker: MapMarker) { - - {reviewAdded && !toast.isActive(idToast) ? - (setReviewAdded(false),toast({ - id: idToast, - title: 'Review Added', - description: "Your review has been added succesfully.", - status: 'success', - duration: 3000, - isClosable: true, - })) : - ( + @@ -169,7 +160,13 @@ export function AddCommentForm(marker: MapMarker) { .then(result => { review.encodedPhoto = result; addReviewMutation(review); - setReviewAdded(true); + toast({ + title: 'Review Added', + description: "Your review has been added successfully", + status: 'success', + duration: 7000, + isClosable: true, + }); }) .catch(err => { console.log(err); @@ -262,7 +259,7 @@ export function AddCommentForm(marker: MapMarker) { - )} + ); } diff --git a/webapp/src/types.d.ts b/webapp/src/types.d.ts index 0af4036..c06b6cd 100644 --- a/webapp/src/types.d.ts +++ b/webapp/src/types.d.ts @@ -7,7 +7,8 @@ export type MapMarker = { latitude:number, longitude:number, isShared: boolean, - owner:string + owner: string, + isOwnLocation: boolean }; export type Review = { From 09705cdbbc2eb860e0b07f2ee44461090c344a91 Mon Sep 17 00:00:00 2001 From: UO278249 Date: Tue, 2 May 2023 00:35:30 +0200 Subject: [PATCH 4/6] Deleted filter option Public locations as it did not make much sense and now trying to make a marker without name makes a warning popup show without exiting the form. --- webapp/src/components/Map.tsx | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/Map.tsx b/webapp/src/components/Map.tsx index 45bf638..7afd114 100644 --- a/webapp/src/components/Map.tsx +++ b/webapp/src/components/Map.tsx @@ -64,7 +64,19 @@ export function LocationMarkerWithStore() { }, }) - + const checkAndClose = () => { + if(name.trim().length > 0 && category.trim().length > 0) { + onClose(); + } else { + toast({ + title: 'Marker not added', + description: "Locations must have a non blank name, please try again.", + status: 'warning', + duration: 7000, + isClosable: true, + }); + } + }; //Use .map to iterate and generate the corresponding markers //This need to be optimiced because I think it generates again //all the markers on top of each other @@ -79,6 +91,7 @@ export function LocationMarkerWithStore() {
{ + if(name.trim().length > 0 && category.trim().length > 0) { event.preventDefault(); const marker: MapMarker = { latitude: lati, @@ -98,7 +111,7 @@ export function LocationMarkerWithStore() { title: 'Marker Added', description: "The location has been added successfully", status: 'success', - duration: 7000, + duration: 3000, isClosable: true, }); }; @@ -106,7 +119,7 @@ export function LocationMarkerWithStore() { setName('') setCategory('bar') setShared(false) - }}> + }}}> Name @@ -134,7 +147,7 @@ export function LocationMarkerWithStore() { - + @@ -153,7 +166,6 @@ export default function MapElement(): JSX.Element { const [showShops, setShowShops] = useState(true) const [showSights, setShowSights] = useState(true) const [showMonuments, setShowMonuments] = useState(true) - const [showSharedLocations, setShowSharedLocations] = useState(true) const [showMyLocations, setShowMyLocations] = useState(true) const [showFriendLocations, setShowFriendLocations] = useState(true) @@ -171,7 +183,6 @@ export default function MapElement(): JSX.Element { showShops={() => showShops} setShowShops={setShowShops} showSights={() => showSights} setShowSights={setShowSights} showMonuments={() => showMonuments} setShowMonuments={setShowMonuments} - showSharedLocations={() => showSharedLocations} setShowSharedLocations={setShowSharedLocations} showMyLocations={() => showMyLocations} setShowMyLocations={setShowMyLocations} showFriendLocations={() => showFriendLocations} setShowFriendLocations={setShowFriendLocations} /> @@ -181,6 +192,8 @@ export default function MapElement(): JSX.Element { {isLoading ? @@ -191,7 +204,6 @@ export default function MapElement(): JSX.Element { ) : <> ({locations?.filter( loc => { - if(loc.isShared && showSharedLocations == false) return false if(loc.isOwnLocation && showMyLocations == false) return false if(loc.isOwnLocation == false && showFriendLocations == false) return false if(loc.locationType == LocationType.restaurant && showRestaurants) return true @@ -237,8 +249,6 @@ interface FilterModalProps { setShowSights : React.Dispatch>, showMonuments : () => boolean, setShowMonuments : React.Dispatch>, - showSharedLocations : () => boolean, - setShowSharedLocations : React.Dispatch>, showMyLocations : () => boolean, setShowMyLocations : React.Dispatch>, showFriendLocations : () => boolean, @@ -255,14 +265,13 @@ export const FilterModal : FC = ( props ) : JSX.Element => { { id: "shops", name: "Shops", value: props.showShops, onChange: props.setShowShops }, { id: "sights", name: "Sights", value: props.showSights, onChange: props.setShowSights }, { id: "monuments", name: "Monuments", value: props.showMonuments, onChange: props.setShowMonuments }, - { id: "sharedLocations", name: "Public Locations", value: props.showSharedLocations, onChange: props.setShowSharedLocations }, { id: "myLocations", name: "My Locations", value: props.showMyLocations, onChange: props.setShowMyLocations }, { id: "friendLocations", name: "Friend Locations", value: props.showFriendLocations, onChange: props.setShowFriendLocations } ] }; const propsChecked = (props.showBars() && props.showRestaurants() && props.showShops() - && props.showMonuments() && props.showSharedLocations() && props.showSights()); + && props.showMonuments() && props.showSights()); return ( <> From 62d7f545feddcd3b138e60af84d6ebb5e7a7c3c9 Mon Sep 17 00:00:00 2001 From: UO278249 Date: Tue, 2 May 2023 23:01:28 +0200 Subject: [PATCH 5/6] Added feedback while adding a friend in friendsView and changed preview image display on add review form. --- .../components/FriendsPage/FriendsView.tsx | 111 ++++++++++-------- webapp/src/components/Map.tsx | 2 + .../mapComponents/LocationReviewsView.tsx | 12 +- 3 files changed, 73 insertions(+), 52 deletions(-) diff --git a/webapp/src/components/FriendsPage/FriendsView.tsx b/webapp/src/components/FriendsPage/FriendsView.tsx index 0e8906f..5dda3f2 100644 --- a/webapp/src/components/FriendsPage/FriendsView.tsx +++ b/webapp/src/components/FriendsPage/FriendsView.tsx @@ -1,25 +1,23 @@ import React, { ReactNode } from 'react'; import { - Stack, - Container, - Box, - Flex, - Text, - Heading, - SimpleGrid, - Grid, - Table, - Thead, - Th, - Tr, - Tbody, - useColorModeValue, - FormControl, - Input, - FormLabel, - Button, - HStack, - Spinner, + Stack, + Container, + Box, + Text, + Heading, + Grid, + Table, + Thead, + Th, + Tr, + Tbody, + useColorModeValue, + FormControl, + Input, + FormLabel, + Button, + HStack, + Spinner, useToast, } from '@chakra-ui/react'; import {useGetFriendsQuery, useAddFriendMutation} from "../../app/services/Friend"; import {Friend} from '../../types'; @@ -30,6 +28,7 @@ export function AddFriendsView(){ let [addFriendMutation, {isLoading, isError, error}] = useAddFriendMutation(); let [webId, setWebId] = React.useState(''); let [nickName, setNickName] = React.useState(''); + const toast = useToast(); return ( @@ -39,31 +38,48 @@ export function AddFriendsView(){
{ - event.preventDefault(); - const newFriend: Friend = { - webId: webId, nickName: nickName, - loMapOnly: false, name: "", profilePic: "", - }; - const handleSubmit = (event: React.FormEvent) => { + if(webId.trim().length>0 && nickName.trim().length>0) { event.preventDefault(); - //TODO: Remove this after testing it all works correctly - console.log("webid: " + newFriend.webId); - console.log("nickname: " + newFriend.nickName); - - addFriendMutation(newFriend); - }; - handleSubmit(event) - /* TODO: - Right now when we do this, the textfield is not restored so: - - visually there is something written - - You can submit the form because the is something written - - But the field that is sent is empty - - We need to restore the textfield someway or dont erase the content here - - setWebId(""); - setNickName(""); - */ - + setWebId(''); + setNickName(''); + const newFriend: Friend = { + webId: webId, nickName: nickName, + loMapOnly: false, name: "", profilePic: "", + }; + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + //TODO: Remove this after testing it all works correctly + console.log("webid: " + newFriend.webId); + console.log("nickname: " + newFriend.nickName); + addFriendMutation(newFriend); + if (!isError) { + toast({ + title: 'Friend Added', + description: "The friend has been added successfully.", + status: 'success', + duration: 7000, + isClosable: true, + }); + } else { + toast({ + title: 'Friend not added', + description: "There has been an error adding the friend.", + status: 'error', + duration: 7000, + isClosable: true, + }); + } + }; + handleSubmit(event) + } else { + toast({ + title: 'Fields not correctly filled', + description: "Please fill both fields before submitting.", + status: 'warning', + duration: 7000, + isClosable: true, + }); + } }}/> @@ -72,6 +88,7 @@ export function AddFriendsView(){ placeholder="asdfghjkl123456" _placeholder={{color: 'gray.500'}} type="text" + value={webId} onChange={(e) => setWebId(e.currentTarget.value)} /> @@ -83,6 +100,7 @@ export function AddFriendsView(){ placeholder="Motosarius" _placeholder={{color: 'gray.500'}} type="text" + value={nickName} onChange={(e) => setNickName(e.currentTarget.value)} /> @@ -95,9 +113,10 @@ export function AddFriendsView(){ _hover={{ bg: 'orange.500', }}> - Add + {isLoading ? + ( ) : + (

Add

)} - diff --git a/webapp/src/components/Map.tsx b/webapp/src/components/Map.tsx index 7afd114..9f43a41 100644 --- a/webapp/src/components/Map.tsx +++ b/webapp/src/components/Map.tsx @@ -45,6 +45,8 @@ export function LocationMarkerWithStore() { const {isOpen, onClose, onOpen} = useDisclosure(); let [addLocationMutation, {isLoading, isError, error}] = useAddLocationMutation(); + + const initialRef = React.useRef(null) var [name, setName] = React.useState('') var [category, setCategory] = React.useState('bar') diff --git a/webapp/src/components/mapComponents/LocationReviewsView.tsx b/webapp/src/components/mapComponents/LocationReviewsView.tsx index 7bf53e4..d03946c 100644 --- a/webapp/src/components/mapComponents/LocationReviewsView.tsx +++ b/webapp/src/components/mapComponents/LocationReviewsView.tsx @@ -189,10 +189,6 @@ export function AddCommentForm(marker: MapMarker) { handleSubmit(event) }}> - {(file.name != "") && - - } - or click to upload an image - + ) : + () + } Date: Tue, 2 May 2023 23:39:25 +0200 Subject: [PATCH 6/6] Small change deleted unused function. --- webapp/src/components/Map.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/webapp/src/components/Map.tsx b/webapp/src/components/Map.tsx index d1dd306..a04990a 100644 --- a/webapp/src/components/Map.tsx +++ b/webapp/src/components/Map.tsx @@ -321,10 +321,6 @@ export const FilterModal : FC = ( props ) : JSX.Element => { export function PopupContent(marker: MapMarker){ - const deleteAction = ()=> { - - } - return(