Create-listing process

[cemgunay]

this commit fixes #6

usePusher

• Seperated usePusher and put it in hooks to go with our structure

/pages/listing/[listingId]

• Fixed the problem of client not subscribing when they would navigate out of the listing page and back in
• just had to change from channel.unsubscribe to pusher.unsubscribe('channel') lol
• Added an additional check to make it more robust and check if we were already subscribed if (!pusher.channel("bids-channel"))

[cemgunay]

this commit fixes #10

Components

AmenityItem

• Component to toggle which amenities are included

AuthInput

• added option to change class of input accordingly with classNameInput prop
• can show dollar sign if isPrice prop is provided

AuthTextArea

• Same as AuthInput but as a text area used for title and description for listing process

AutoCompleteField

• Utilizes use-places-autocomplete along with google maps/places api (google script must be loaded) to create a dropdown of suggestions and enter selected address into a state

BedroomItem

• Each bedroom item for creating a listing that updates "basics" with bedtypes and if an ensuite or not

BedTypeItem

• To select bed types included in bedroom

CreateListingBottomBar

• Bottom bar for all create listing that deals with navigation and progress bar between pages

CreateListingTopBar

• Includes the save and exit button which takes you to manage-listings

CreateListingLayout

• Component that wraps its children (all create listing pages) and provides the top and bottom bar along with a loading screen if data is still being fetched from databse
• The loading screen is a custom function given as props

DatePicker

• Updated DatePicker to show initial/default values based on the formData prop given
• Updated to handle min and max dates if provided
• Updated to handle array of dates differently therefore must provide propertyToUpdate which would be the property in the formData given

IncrementalBathroomInput

• To update the number of bathrooms in listing with plus minus button that go in increments of 1

IncrementalBedroomInput

• To update the number of bedrooms in listing with plus minus button that go in increments of 1 and add or remove bedroomItems

Input

• Updated to also propogate refs

ListingPreview

• Same as the ListingItem preview however has data coming from the listing form context provider (used to show preview of what listing will look like when in create listing)

EnterAddress

• Includes the AutoComplete field and a google map

Map

• Google map using @react-google-maps/api (must be loaded before component is rendered)
• Centers the map on a given lat/lng and then is draggable and the center lat/lngs are updated

OverviewCard

• Used for Each individual step in overview page (more just css and for layout)

PrivacyType

• Radio buttons used to select the privacy type and set the given data to checked or not
• Entire, Private, Shared

PropertyType

• Radio buttons used to select the property type and set the given data to checked or not
• House, Apartment, Dorm, Townhouse

TextArea

• Same as Input component but for text areas

UtilityItem

• Component to toggle which utilities are included

Context

ListingFormContext

• Initializes empty listing object
• Pulls lsitingId from params
• Loads users info from auth context
• Reducers to manage and update each part of form
• Pulls from database on navigation and loads into the listing state
• Pushes to database when invoked
• Also provides isLoading state, used to conditionally render loading screens

App

• Added ListingFormProvider

Pages

Listing

• Added functionality to keep track of active number of bids with pusher

Signup

• Added propertyToUpdate as dateOfBirth when calling DatePicker

Info

• First landing page and info when user clicks create a listing

Overview

• Show the create listing form steps
• On Get Started - Call api endpoint to create a listing

AboutYourPlace

• Page 1 in Create-Listing
• User sets propertyType and privacyType

Location

• Page 2 in Create-Listing
• 3 parts
  • Part 1, the user enters address (EnterAddress) and clicks an autocomplete suggestion or selects manually enter address and gets taken to next page
  • Part 2, the user confirms address (ConfirmAddress). If user clicked an autocomplete suggestion, these fields are prefilled otherwise they are empty and user has to fill them in
  • There is field validation and they must fill in required fields
  • When user edits address or enters a new address there is a check done by the use-places-autocomplete api that suggests a more correct address and the user can select to use this one and the fields are updated accordingly or they can use what they manually entered
  • Part 3, the user confirms marker (ConfirmMarker). The map is centered with a marker on the centered around the lat/lng they provided from the address
  • They can move the map around and this will update the lat/lng for their address but not the actual address (Solely for map purpose)

Basics

• Page 3 in Create-Listing
• User sets the number of bedrooms and bathrooms
• Also determines the bed types in each bedroom and if its an ensuire

Amenities

• Page 4 in Create-Listing
• User toggles which amenities are included in the place

Images

• Page 5 in Create-Listing
• User can upload images that fit the constraints
• Must upload 3 images
• Can delete and re-order images

Title

• Page 6 in Create-Listing
• User must add a title
  • it cannot be less than 4 characters

Description

• Page 7 in Create-Listing
• User adds a description if they want
  • If they do decide to add a description it cannot be less than 10 characters

Price

• Page 8 in Create-Listing
• User edits the price of the listing
  • Cannot be less than 10 and more than 4 digits
• User can also toggle what utilities are included in the price

Dates

• Page 9 in Create-Listing
• User selects a move in date and move out date
• User can also add viewing dates

Publish

• Page 10 (Last Page) in Create-Listing
• User can view what listing preview will look like along with a preview of the full listing page
• User must accept the terms and conditions to publish listing

Preview

• Additional page to show what full listing page would look like as a preview (same as listing page but getting data from context instead of database)

Reducers

New reducers folder with the reducers used to create listing

Utils

• Created cloudinary config file **- in tailwind config i tried doing an animation for incremental input field but it didnt work
  • I wanted react-icon to flash with primary color from white everytime you click**

Models

Listing

• Updated images to use cloudinaryUrl instead of url
• Added default values to lat and lng of null
• Added default values to moveInDate and moveOutDate of null
• Changed viewingDates array type from string to date
• Added default values to propertyType and privacyType of ""
• Added test amenities

API Routes

api/listings/index.js

• Added handle POST request for creating a new listing
• Added handle PUT request for updating a new listing - Add verification checks to PUT request such as you must be the userId

[cemgunay]

The new listings photos wont show up because of how I changed the photo url to be cloudinaryUrl but we can update that later when we have more listings with the new way for testing

[nathanclairmonte]

Finally got around to reviewing this branch! Sorry for the delay man. Everything looks great tho this is topppp notch work. Here are a few thoughts that came to mind:

Potential changes:

• Need to hook up the "List a sublet" button on the profile page to link to the start page of this create a listing process. Right now all those options are using divs (since I did them as placeholders), so we can just replace that div with a <Link> and link over to either the create-listing/overview page.
• Right now on the dates stage, the year picker on the DatePicker component only goes up until the current year (since it was originally for date of birth, dates in the future didn't make much sense). Also goes all the way back 100 years for the same reason. Think we should use a different year range for the move in/move out and viewing dates, bc those dates will all be future dates, and also don't need to stretch back 100 years either. Especially since we're setting the min date to be the current date.
• Another issue with the DatePicker:
  • Inside the DatePicker we accept a prop setFormData, and on the create-listing/[listingId]/dates page we are passing the handleDateChange function to this prop.
  • The handleDateChange function takes a second argument called property, on which we are running the .includes() function. If this argument is not passed, we end up trying to call undefined.includes() which throws an error.
  • Now if the propertyToUpdate prop includes "viewingDates", the setFormData function is called with the date as first argument and the index (calculated from the propertyToUpdate prop) as second argument, and everything runs fine. However, if the propertyToUpdate prop doesn't include "viewingDates" (as is the case when we're setting move in/move out dates instead of the viewing dates), then the setFormData function is called with no second argument (bc this was the original functionality for when we use the DatePicker on the sign up page).
  • Problem is, when we try to set move in/move out dates, we get an error bc it's defaulting to this original functionality and then we end up calling handleDateChange (via calling the setFormData prop function) with no second argument and we get an error.
  • Now this could be quick-fixed by adding a dummy second argument to setFormData in the default case on the DatePicker, but then that would break the DatePicker functionality on the sign up page
  • SO, tldr, I think we should make a whole new DatePicker component (maybe renaming the first one to DateOfBirthPicker). That way we can handle the new year range we need as well as this small setFormData/handleDateChange bug in like a brand new component instead of trying to adapt the old one to work in two different scenarios.
  • The DateOfBirthPicker would be the exact same as what it was before any changes for the create listing stuff, and then the new DatePicker would have the new year range as well as checks to handle the various cases for handleDateChange. Lmk if this makes sense/if you agree!
• Wasn't actually able to get to the "preview" stage because of this DatePicker error, but I looked at the code and it looks like it should be fine!

Opinions (things that aren't really problems, just thoughts on things we could change. Mainly styling opinions):

• On the "location" stage of the process, step 3 (i.e. moving the pin), the text should probably also let the user know that they can move the pin if that makes sense. Right now it's phrased as a yes/no for whether it's in the right spot, but some users (esp less tech-savvy ones) may not realise that they can actually move the pin if it isn't in the right spot.
• Could probably make the buttons on the IncrementalBedroomInput a little larger
• I think the "Back" button in the bottom bar of this process should be an outline variant button instead of an underline button. Not a huuuge deal but I think it'd be more streamlined and like visually pleasing for the user if it has a similar style to the "Next" button (like width/height, rounded corners, etc.). Also would make the clicking area a bit bigger which is almost always a UX positive.
• On the images stage, when an image is uploaded (or uploading) and we have those like three dots in the top right corner, the popover that comes up could use a little extra styling to make it more clear that those three things are like clickable options (instead of just text). Maybe some divider lines and hover highlighting or something like that? The x-axis padding/margin could be reduced a little too.
• Maybe allow more than 165 chars for description? I guess depends on how long we want these descriptions to be. Felt a little short though.
• For the price stage, aren't hydro and electricity the same thing?