Skip to content

v6.0.0
Compare
Choose a tag to compare
@Gnito Gnito released this 29 Oct 14:51
· 79 commits to main since this release
v6.0.0
d3c7d77
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

This major release takes React v17.0.2 into use.

The biggest change is the adoption of a new DatePicker and the removal of the outdated datepicker library, React Dates. This update was necessary, as React Dates still relies on deprecated React lifecycle functions, specifically componentWillReceiveProps and componentWillUpdate.

Another notable change with React v17 is that the callback functions of the useEffect hook are now asynchronous. You should review other v17 changes in the v17 changelog to verify if any of your customizations are affected.

The final highlight is that we have begun using a nonce for script-src in the Content Security Policy.

Read more about React v17

Note: use v6.0.1 (There was a bug on GA4 integration on this one.)

Notes from React v17 upate:

  • There has been changes to event delegation on React component tree.
    • This change didn't seem to have practical consequences on this repository.
  • The callback functions of useEffect hook has become asynchronous!
    • This had some consequences on this repository:
      • Topbar / CustomLinksMenu needed to be changed a bit
      • LayoutWrapperAccountSettingsSideNav aka account settings related pages needed to be changed a bit
        • In practice, these were automatic horizontal scroll-into-view tabs on mobile layout.
    • If you have used useEffect hook with callback function on your customized client app, you should check that the callback does not rely on DOM objects.
      • If you need to have access to DOM for clean up process, you should use useLayoutEffect instead.

New DatePicker

This update removes the React Dates library from the codebase. It’s an outdated library that uses deprecated React lifecycle functions: componentWillReceiveProps and componentWillUpdate.

In place of a datepicker based on React Dates, this update includes a custom DatePicker component. The custom picker should look almost identical to the previous one, but there are a couple of changes:

  • Weekdays follow the "short" weekday syntax (provided by the Intl Web API).

  • It’s now possible to select a date range in both directions from the initially clicked boundary.

    • Previously: If you clicked on Nov 15th, you could only select dates following that day (or the current date with the 'day' unit).
    • With the new picker: If you click on Nov 15th, you can also select previous days. In this case, Nov 15th becomes the end date for the date range.

Screenshot 2024-10-29 at 16 23 04

There are two different input mechanisms:

  • Primary method: Pointer (click input to open the date picker and choose calendar dates).
  • Secondary method: Keyboard
    • Supported keys: Tab, Arrow keys, Enter, Esc, PageUp, PageDown, Home, End
    • Note: If a pointer is hovering over the calendar, the secondary method won’t highlight the range, as the pointer is considered the primary date selection method.

This datepicker change affects several parts of the code:

  • When a user filters by date range on the search page.
  • When they book a listing on the listing page.
  • When they pick a week on the availability calendar on EditListingPage.
  • When they add availability exceptions to the default schedule.

Additionally, this PR modifies timeSlot handling. Returned timeSlots are now processed so that if there are two consecutive timeSlots (where one ends with the same timestamp as the next begins) and they have the same seat count, those timeSlots are merged into a single timeSlot.

Background:
The booking calendar fetches timeSlots for each month. For day- and night-based availability, this has worked fine, as we only check if a day has availability or not. However, there has been an issue with hour-based listings: we haven't had a good setup for multi-day bookings with hour-based listings. This is because timeslots.query returns availability between specified start and end times—meaning that separate fetches for each month create artificial borders, which disrupts continuous availability/timeSlot.

This change makes it easier for customizers to add bookings that take advantage of differently priced time units, allowing bookings that span a longer time window.

For example:
Bicycle rental has day price of $100 & hour price $5.
Customer rents it between 3:00 pm on Nov 15, 2024 and 10:00 am on Nov 18, 2024.
Custom price calculation could work like this:

  • Full days: 3 * $100 per day => $300
  • Extra hours: 19 * $5 per hour => $95

Total: $395

Note: this scenario assumes that hour-based availability is used with the listing type. The 'day' and 'night' time units reserve the given day (00:00 - 24:00) on the listing's time zone. So, they operate with a bit different availability concept.

Nonce

  • We removed unsafeInline & data from the script-src directive in the Content Security Policy.
    • Instead, a nonce has been added for the affected cases:
      • The preloaded state passed from SSR
      • The code-splitted code-chunks.
      • Postponed work / todo: do something similar for the styles
    • Note: This change might have implications when updating from the upstream (i.e., from this repo).
      • If you’ve added integrations (such as Google Tag Manager) that rely on <script> elements, you may need to adjust your custom code.

Translation changes

New translations

  "DatePicker.clearButton": "Clear value",
  "DatePicker.screenreader.blockedDate": "{date} is not available",
  "DatePicker.screenreader.chooseDate": "Choose {date}",
  "DatePicker.screenreader.chooseEndDate": "Choose {date} as the end date",
  "DatePicker.screenreader.chooseStartDate": "Choose {date} as the start date",
  "DatePicker.screenreader.nextMonthButton": "Next month",
  "DatePicker.screenreader.previousMonthButton": "Previous month",
  "DatePicker.screenreader.selectedDate": "{date} is selected",
  "DatePicker.screenreader.selectedEndDate": "{date} is selected as the end date",
  "DatePicker.screenreader.selectedStartDate": "{date} is selected as the start date",
  "DatePicker.todayButton": "Show today",

Updated translations

-   "NoAccessPage.postListings.schemaTitle": "No publishing rights",
-   "NoAccessPage.postListings.heading": "You don't have publishing rights",
-   "NoAccessPage.postListings.content": "To publish listings, you need to receive publishing rights from the {marketplaceName} team.",
+   "NoAccessPage.postListings.schemaTitle": "No posting rights",
+   "NoAccessPage.postListings.heading": "You don't have posting rights",
+   "NoAccessPage.postListings.content": "To post listings, you need to receive posting rights from the {marketplaceName} team.",

What about React v18?

We are planning to continue the update work to make the codebase compatible with React v18. However, we first want to test how the app performs with React v17. In practice, this means that the project leading to v18 will be on hold for about a month.

What we know about v18 so far:

  • MyComponent.defaultProps is deprecated, and its usage generates numerous warnings.
  • Hydration issues:
    • Code-splitting needs to be reviewed on the sharetribe-scripts side.
    • matchMedia usage needs refactoring to ensure that the first client-side rendering matches the server-side rendering (SSR).
    • Topbar, SearchMap, and some other components require refactoring to ensure the first client-side rendering matches the SSR.
  • ReactDOM has been split into react-dom/server and react-dom/client
    • This change may affect how SSR setup should be arranged.

Changes v6.0.0

This major release takes the React v17.0.2 into use.

The biggest change is taking a new DatePicker into use and removing the outdated datepicker library:
React Dates. The change was necessary as the React Dates still uses deprecated React life cycle
functions componentWillReceiveProps & componentWillUpdate.

Another notable change with the React v17 was with the callback functions of useEffect hook, which
became asynchronous. You should to check other v17 changes from v17 changelog to verify if your
customizations are affected somehow.

The last highlight is that we started to use nonce for script-src on Content Security Policy.

  • [change] This updates Sharetribe Web Template to use React v17.0.2.

    Some highlights:

    #477

  • [add] CSP: start using nonce with script-src. This also removes data from script-src.
    #485

  • [add] Remove React Dates datepicker library and add a new built-in DatePicker.

    There are 3 new datepicker fields to be used with React Final Forms:

    • FieldDateRangePicker
    • FieldSingleDatePicker
    • FieldDateRangeController

    This swap is done because componentWillReceiveProps & componentWillUpdate functions, which are
    used by the outdated React Dates library, are deprecated and removed from future React versions.

    #453

  • [fix] UserCard: make the styles of contact link consistent with the other links.
    #484

  • [fix] CheckoutPage.duck.js: fix minor typo with handleSuccess function.
    #483

  • [add] Filter out bot requests that scan websites for vulnerabilities before they reach React app.
    #479

  • [change] Update copy text for Publishing listing permission to Posting listing.
    #482

Assets 2
Loading