@W-18014214 useBlockNavigation implementation in SEO #2288
Conversation
| * @param {function} func | ||
| * @returns {boolean} State that is set to true during blocking, false otherwise. | ||
| */ | ||
| export const useBlockNavigation = (func) => { |
There was a problem hiding this comment.
Commenting to make it clearer what's been added: this hook will be added to pwa-kit-react-sdk
jeremy-jung1
changed the title
| @@ -20,13 +20,16 @@ | |||
| }, | |||
| "devDependencies": { | |||
| "@chakra-ui/react": "^2.8.2", | |||
| "@chakra-ui/skip-nav": "^2.0.15", | |||
There was a problem hiding this comment.
In spite of deleting node_modules and package-lock.json in this package and extension-chakra-storefront and doing npm install, the error:
Module not found: Error: Can't resolve '@chakra-ui/skip-nav' in '/Users/jangho.jung/Documents/pwa-kit/packages/extension-chakra-storefront/src/components/with-layout'
kept showing up. Adding the package in here temporarily fixed it. Will need to see what's causing this issue
| } from '@salesforce/pwa-kit-extension-sdk/react' | ||
| type SeoHOCProps = React.ComponentPropsWithoutRef<any> | ||
|
|
||
| const seoHOC = <P extends object>(WrappedComponent: React.ComponentType<P>) => { |
There was a problem hiding this comment.
Commenting to make it clear what's been added:
an seo HOC that has the callback function that will soon hold the getUrlMapping API call. Currently it is a timeout.
| */ | ||
| export type Config = Required<UserConfig> | ||
|
|
||
| interface StoreSlice { |
There was a problem hiding this comment.
Commenting to make it clear what's been added:
An extension store for isBlocked and its state updater so that it can be accessed from the storefront extension
Lint and add ignore file
bendvc
added
the
skip changelog
W-18014214
Description
This is the implementation of the useBlockNavigation function in pwa-kit-react-sdk and its example usage with a temporary callback that executes a timeout. In W-17530042 this callback will be replaced with logic that calls the getUrlMapping API and updates the routes.
A change is also made in
extension-chakra-storefrontthat adds a loading screen between the header and the footer while the navigation is blocked.Types of Changes
Changes
extension-chakra-storefrontpwa-kit-react-sdkHow to Test-Drive This PR
Testing that the navigation is being blocked with a loading screen and that the latest clicked link is activated
Testing that when
extension-seo-url-mappingis disabled, the navigation works like it used toChecklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization