diff --git a/common/types/db-types.ts b/common/types/db-types.ts index 20463657..cb395574 100644 --- a/common/types/db-types.ts +++ b/common/types/db-types.ts @@ -87,6 +87,7 @@ export type CantFindApartmentForm = { readonly address: string; readonly photos: readonly string[]; readonly userId?: string | null; + readonly review: string; }; export type CantFindApartmentFormWithId = CantFindApartmentForm & Id; diff --git a/frontend/src/components/Apartment/MarkerWithAptCard.tsx b/frontend/src/components/Apartment/MarkerWithAptCard.tsx index 6c7d1438..3c38fa6d 100644 --- a/frontend/src/components/Apartment/MarkerWithAptCard.tsx +++ b/frontend/src/components/Apartment/MarkerWithAptCard.tsx @@ -3,6 +3,8 @@ import { CardData } from '../../App'; import aptIcon from '../../assets/location-pin.svg'; import mapPinIcon from '../../assets/map-pin.svg'; import NewApartmentCard from '../ApartmentCard/NewApartmentCard'; +import { Link as RouterLink, useHistory } from 'react-router-dom'; +import { Link } from '@material-ui/core'; type markerWithCardProp = { readonly lat: number; @@ -60,41 +62,49 @@ export const MapMarkerWithCard = ({ }, 100) } > - {apt.buildingData.name} - {hoveredIdx === idx && ( -
+ {apt.buildingData.name} setCardHovered(true)} - onMouseLeave={() => { - setCardHovered(false); - setHoveredIdx(null); - }} - > - -
- )} + /> + {hoveredIdx === idx && ( +
setCardHovered(true)} + onMouseLeave={() => { + setCardHovered(false); + setHoveredIdx(null); + }} + > + +
+ )} + ); }; diff --git a/frontend/src/components/utils/Footer/ContactModal.tsx b/frontend/src/components/utils/Footer/ContactModal.tsx index 04216936..f8762b09 100644 --- a/frontend/src/components/utils/Footer/ContactModal.tsx +++ b/frontend/src/components/utils/Footer/ContactModal.tsx @@ -112,18 +112,21 @@ interface CantFindApartmentFormData { name: string; address: string; localPhotos: File[]; + review: string; } const defaultApartmentForm: CantFindApartmentFormData = { name: '', address: '', localPhotos: [], + review: '', }; type apartmentFormAction = | { type: 'updateApartmentName'; name: string } | { type: 'updateApartmentAddress'; address: string } | { type: 'updatePhotos'; photos: File[] } + | { type: 'updateReview'; review: string } | { type: 'reset' }; const apartmentReducer = ( @@ -137,6 +140,8 @@ const apartmentReducer = ( return { ...state, address: action.address }; case 'updatePhotos': return { ...state, localPhotos: action.photos ? [...action.photos] : [] }; + case 'updateReview': + return { ...state, review: action.review }; case 'reset': return defaultApartmentForm; default: @@ -205,6 +210,7 @@ const ContactModal = ({ user }: Props) => { const [emptyNameError, setEmptyNameError] = useState(false); const [nameProfanityError, setNameProfanityError] = useState(false); const [addressProfanityError, setAddressProfanityError] = useState(false); + const [reviewProfanityError, setReviewProfanityError] = useState(false); // Question Modal const [questionForm, questionDispatch] = useReducer(questionReducer, defaultQuestionForm); @@ -250,6 +256,7 @@ const ContactModal = ({ user }: Props) => { setNameProfanityError(false); setAddressProfanityError(false); setEmptyNameError(false); + setReviewProfanityError(false); // Clear question errors setEmptyEmailError(false); @@ -262,6 +269,7 @@ const ContactModal = ({ user }: Props) => { name, address, localPhotos, + review, }: CantFindApartmentFormData): Promise => { const photos = await Promise.all(localPhotos.map(uploadFile)); return { @@ -270,6 +278,7 @@ const ContactModal = ({ user }: Props) => { address: address, photos, userId: user?.uid, + review: review, }; }; @@ -302,6 +311,10 @@ const ContactModal = ({ user }: Props) => { }); }; + const updateApartmentReview = (event: React.ChangeEvent) => { + apartmentDispatch({ type: 'updateReview', review: event.target.value }); + }; + const removePhoto = (index: number) => { const newPhotos = apartmentForm.localPhotos.filter((_, photoIndex) => index !== photoIndex); apartmentDispatch({ type: 'updatePhotos', photos: newPhotos }); @@ -358,6 +371,9 @@ const ContactModal = ({ user }: Props) => { includesProfanity(data.address) ? setAddressProfanityError(true) : setAddressProfanityError(false); + includesProfanity(data.review) + ? setReviewProfanityError(true) + : setReviewProfanityError(false); if (modalRef.current) { modalRef.current.scrollTop = 0; } @@ -533,11 +549,27 @@ const ContactModal = ({ user }: Props) => { addressProfanityError ? ' This contains profanity. Please edit it and try again.' : '' } onChange={updateApartmentAddress} - style={{ margin: '0', marginBottom: '30px' }} + style={{ margin: '0', marginBottom: '0' }} InputProps={{ style: { fontSize: '13px' }, }} /> + + Leave a Review (Optional) + + { }, [path.search]); const isMobile = useMediaQuery('(max-width:600px)'); + const { openModal } = useModal(); useTitle('Search Result'); @@ -226,6 +226,22 @@ const SearchResultsPage = ({ user, setUser }: Props): ReactElement => { sortMethod={sortBy} orderLowToHigh={sortLowToHigh} /> +
+ + Can't find your apartment? Tell us about it{' '} + + here + + ! + +
{ sortMethod={sortBy} orderLowToHigh={sortLowToHigh} /> +
+ + Can't find your apartment? Tell us about it{' '} + + here + + ! + +
)}