WIP: Bug fixes

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;

frontend/src/components/Apartment/MarkerWithAptCard.tsx

@@ -3,6 +3,8 @@
 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 @@
         }, 100)
       }
     >
-      <img
-        src={hoveredIdx === idx ? aptIcon : mapPinIcon}
-        alt={apt.buildingData.name}
-        style={{
-          height: `${markerSize}px`,
-          width: `${markerSize * 0.75}px`,
-          transform: `translate(-50%, -50%) scale(${hoveredIdx === idx ? 1.6 : 1})`,
-          transition: 'transform 0.3s',
-          cursor: 'pointer',
+      <Link
+        {...{
+          to: `/apartment/${apt.buildingData.id}`,
+          style: { textDecoration: 'none' },
+          component: RouterLink,
         }}
-      />
-      {hoveredIdx === idx && (
-        <div
+      >
+        <img
+          src={hoveredIdx === idx ? aptIcon : mapPinIcon}
+          alt={apt.buildingData.name}
           style={{
-            position: 'absolute',
-            left: 10,
-            top: 10,
-            zIndex: 2000,
+            height: `${markerSize}px`,
+            width: `${markerSize * 0.75}px`,
+            transform: `translate(-50%, -50%) scale(${hoveredIdx === idx ? 1.6 : 1})`,
+            transition: 'transform 0.3s',
+            cursor: 'pointer',
           }}
-          onMouseEnter={() => setCardHovered(true)}
-          onMouseLeave={() => {
-            setCardHovered(false);
-            setHoveredIdx(null);
-          }}
-        >
-          <NewApartmentCard
-            buildingData={apt.buildingData}
-            numReviews={apt.numReviews}
-            avgRating={apt.avgRating || 0}
-            company={apt.company}
-            user={user}
-            setUser={setUser}
-          />
-        </div>
-      )}
+        />
+        {hoveredIdx === idx && (
+          <div
+            style={{
+              position: 'absolute',
+              left: 10,
+              top: 10,
+              zIndex: 2000,
+            }}
+            onMouseEnter={() => setCardHovered(true)}
+            onMouseLeave={() => {
+              setCardHovered(false);
+              setHoveredIdx(null);
+            }}
+          >
+            <NewApartmentCard
+              buildingData={apt.buildingData}
+              numReviews={apt.numReviews}
+              avgRating={apt.avgRating || 0}
+              company={apt.company}
+              user={user}
+              setUser={setUser}
+            />
+          </div>
+        )}
+      </Link>
     </div>
   );
 };

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<CantFindApartmentForm> => {
     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<HTMLInputElement>) => {
+    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' },
           }}
         />
+        <Typography className={bodyText} style={{ marginBottom: '0' }}>
+          Leave a Review (Optional)
+        </Typography>
+        <TextField
+          fullWidth
+          error={reviewProfanityError}
+          id="review"
+          rows={4}
+          multiline
+          placeholder="Share your experience living here!"
+          onChange={updateApartmentReview}
+          style={{ margin: '0', marginBottom: '30px' }}
+          helperText={
+            addressProfanityError ? ' This contains profanity. Please edit it and try again.' : ''
+          }
+        />
         <UploadPhotos
           photosLimit={PHOTOS_LIMIT}
           photoMaxMB={PHOTO_MAX_MB}

frontend/src/pages/SearchResultsPage.tsx

@@ -4,15 +4,14 @@ import { useLocation } from 'react-router-dom';
 import { get } from '../utils/call';
 import { colors } from '../colors';
 import { CardData } from '../App';
-import ApartmentCards from '../components/ApartmentCard/ApartmentCards';
 import { useTitle } from '../utils';
-import { useSaveScrollPosition } from '../utils/saveScrollPosition';
 import { defaultFilters } from '../components/Search/FilterSection';
 import Autocomplete from '../components/Search/Autocomplete';
 import SearchResultsPageApartmentCards from '../components/ApartmentCard/SearchResultsPageApartmentCards';
 import SearchResultsMap from '../components/Search/SearchResultsMap';
 import SortDropDown from '../components/Search/SortDropDown';
 import { ApartmentWithId } from '../../../common/types/db-types';
+import { useModal } from '../components/utils/Footer/ContactModalContext';
 
 const useStyles = makeStyles({
   header: {
@@ -94,6 +93,7 @@ const SearchResultsPage = ({ user, setUser }: Props): ReactElement => {
   }, [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}
             />
+            <div style={{ textAlign: 'center', marginTop: '50px' }}>
+              <Typography variant="body1" color="textSecondary">
+                Can't find your apartment? Tell us about it{' '}
+                <span
+                  onClick={openModal}
+                  style={{
+                    color: colors.red1,
+                    textDecoration: 'underline',
+                    cursor: 'pointer',
+                  }}
+                >
+                  here
+                </span>
+                !
+              </Typography>
+            </div>
           </div>
           <div className={mapContainer}>
             <SearchResultsMap
@@ -265,6 +281,27 @@ const SearchResultsPage = ({ user, setUser }: Props): ReactElement => {
               sortMethod={sortBy}
               orderLowToHigh={sortLowToHigh}
             />
+            <div
+              style={{
+                textAlign: 'center',
+                marginTop: '10px',
+              }}
+            >
+              <Typography variant="body1" color="textSecondary">
+                Can't find your apartment? Tell us about it{' '}
+                <span
+                  onClick={openModal}
+                  style={{
+                    color: colors.red1,
+                    textDecoration: 'underline',
+                    cursor: 'pointer',
+                  }}
+                >
+                  here
+                </span>
+                !
+              </Typography>
+            </div>
           </div>
         </div>
       )}