Cem all listing features

[cemgunay]

Merged the create listings and manage listings branch into one and will be adding edit listings to this branch

[cemgunay]

Refer to Create-Listing and Manage-Listing pull requests for details on those

[cemgunay]

this commit fixes issues #20 , #10, #19, #16

components

radio-group.jsx

• shadcn radio group component

CustomDialog.js

• This is like the previously created delete dialog modal but with more customization where user can determine title, description, action, and colors

EditBasics.js

• Lets user edit title, description, and status (published or not published)
• Has same validation as title, description, and price steps from create-listing
• If user tries to unpublish a listing the modal will appear telling them that it will automatically reject all offers they currently have on the listing
  • Need to create a system workflow to handle this (created note for this in project board)

EditAmenities.js

• Lets user toggle which amenities are in the property
• Uses AmenityItem component to show and toggle the amenities

EditLocation

• Lets user update their address
  • Doesnt let user update marker on map (created note for this in project board)
• Uses same validation and geo checks from location step in create-listing
  • Almost identical to the location form in create-listing

BedroomItem

• updated this component to take a setState prop and use that if dispatch isnt provided as prop since this is also used in create-listing

IncrementalBedroomInput.js

• updated this component to take a setState prop and use that if dispatch isnt provided as prop since this is also used in create-listing

IncrementalBathroomInput.js

• updated this component to take a setState prop and use that if dispatch isnt provided as prop since this is also used in create-listing

EditPropertyAndRooms.js

• Lets user update the number of bedrooms and within each bedroom the beds and if its an ensuite or not
• Lets user update the number of bathrooms
• Uses same validation from basics step in create-listing

Carousel.js

• Added option to custom style Carousel component with margin and padding using cn from classnames

EditImages.js

• Almost idential to images.js in create-listing route
• Opens a modal to edit images

DatePicker.js

• removed it and replaced it with DatePickerBirthday.js, DatePickerMovingDates.js, DatePickerViewingDates.js to make the logic simpler

DatePickerBirthday

• Reverted to first rendition of DatePicker that was used in signup.js
• Added maxDate to disable selecting days past TODAY

DatePickerMovingDates

• Takes one date instead of an object with property to update and updates it with state and returns a new date
• Can disable dates using props minDate and maxDate

DatePickerViewingDates

• Takes an array of dates and returns new dates based on index

EditPricingAndDates.js

• Lets user update the price
• Lets user update the move-in, move-out, and viewing-dates
• Uses same validation from price and dates steps in create-listing
• When doing min and max dates had to update to using startOfDay from date-fns to ensure no timing issues
• Added date error to not allow user to make move-in date later than move-out date

EditUtilities.js

• Lets user toggle which utilities are included in price
• Uses UtilityItem component to show and toggle the utilities

pages

edit.js

• this is the main edit page which calls all the neccesary components to edit a listing
• Each component has its own edit, cancel, and save functions to edit each respective field and save the updates
  • the save button is disabled according to validation logic along with if there have been any changes
  • using loadsh library to deep compare arrays and objects when needed
• includes a loading component when fetching data

images.js

• Added toast notification if upload times out or another error
• Added function to remove file preview after failed upload

signin.js

• also passes the data.token from jwt to the saveUser function

signup.js

• Updated to use DatePickerBirthday instead of DatePicker
• also passes the data.token from jwt to the saveUser function

dates.js

• Update to use DatePickerMovingDates and DatePickerViewingDates instead of DatePicker
• When doing min and max dates had to update to using startOfDay from date-fns to ensure no timing issues
• Added date error to not allow user to make move-in date later than move-out date

preview.js

• Added preview page to manage-listings route which is the same as the preview page from the create-listings route

context

AuthContext.js

• Also now passes a token which is the encoded JWT token
• on saveUser function it takes token as an arg and stores it in localStorage
• on signOut function it removes token from localStorage also

ListingFormContext.js

• Added reroute logic where if user goes to a page they get redirected to the page (step in the form) that they should be on so that they can't skip steps
• Added toast notifications to updating listing
• Takes token from useAuth and passes it in the pushToDatabase function to be used in the Authorization header in the PUT API call in form "Bearer {token}" which will be used to validate user

utils

constants.js

• Added image related constants such as min and max size

authentication.js

• Created an authentication middleware that checks if a valid token is provided in API Header Authorization
• returns req.user if valid token

api routes

listings/index.js

• Require the authentication middleware
• In the PUT request method await the response from the authentication call and return its response
  • continue with the request if valid tokenwas provided if not return the error response from authentication
  • Then check if the user trying to update the listing is the listing owner

models

Listing.js

• made bathrooms default value 0 instead of null

reducers

• Updated amenities and utilities reducer to update the entire state with toggle all case
• Updated listing reducer to add new viewing date with TODAY rather than null and to update entire dates state

[nathanclairmonte]

This stuff is fireee bro it all works so well! I love the multi-step format for adding a new listing, the image stuff is amazing, and I really love the preview at the last step too.

Manage listing is also working brilliantly and I love the styling there didn't even change anything.

One small point, I made two listings while I was running through and testing the process, but when I view the manage listings page, the two I had just made didn't seem to show up. I feel like this will end up being sorted out once we streamline all the request/listing logic tho so maybe not a huge deal yet? Not too sure

Anyways, here are the small styling changes I made!

• Updated the back button to make it an outline button (the outline variant was there but its styles were being overridden by some inline ones so I just removed those and it's working now)
• Added extra instruction "Drag to move" on the location marker step, just to make it 100% clear to users that the pin can be dragged/moved (lmk if you don't like this we can always remove it!)
• The IncrementalBathroomInput buttons weren't consistent in size with the IncrementalBedroomInput ones so I streamlined those, also made the text on both slightly bigger
• Updated the styling for the image popover (the one that shows up with the ellipses buttons once an image is uploaded). Just added separator lines between the options using border bottom
• Added a link from the "List a Sublet" button on the profile page to the /host/create-listing/info page, which I am viewing as the start of the "create a listing" process. I considered that the start point could also be the /host/create-listing/overview page, but the /info page has a button linking to that page so I assumed that was the best starting point. Lmk if you prefer something else!

[cemgunay]

To address the listings not showing up, I added the "draft" boolean field to Listing model that I was just manually doing in MongoDB but forgot to put in the code, great catch!