From fb339b4551f8f37ffb0e0cf0d62157ec4a011792 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Fern=C3=A1ndez=20de=20Alba?= Date: Thu, 17 Oct 2024 08:58:35 +0200 Subject: [PATCH] Apply suggestions from code review Co-authored-by: Steve Piercy --- packages/client/news/6069.internal | 2 +- packages/components/news/6069.breaking | 8 +++---- packages/providers/README.md | 29 +++++++++++++++----------- 3 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/client/news/6069.internal b/packages/client/news/6069.internal index eecc7fd5b3..d62f585cd5 100644 --- a/packages/client/news/6069.internal +++ b/packages/client/news/6069.internal @@ -1 +1 @@ -Upgrade @tanstack/react-query @sneridagh +Upgrade `@tanstack/react-query`. @sneridagh diff --git a/packages/components/news/6069.breaking b/packages/components/news/6069.breaking index 6e315dd566..c2801c7201 100644 --- a/packages/components/news/6069.breaking +++ b/packages/components/news/6069.breaking @@ -1,6 +1,6 @@ -Removed the `FlattenToAppURLProvider` since is no longer needed @sneridagh -The components in here are meant to to need it. -Refactored the `Link` component to not use it since `react-aria-components` use the React Client Routing facilities that can be injected in the React tree. +Removed the `FlattenToAppURLProvider` since it's no longer needed. @sneridagh +The components in here need it. +Refactored the `Link` component to not use it, since `react-aria-components` uses the React Client Routing facilities that can be injected into the React tree. Breaking: - - Use the new providers in @plone/providers instead to make the new Link work with them + - Use the new providers in `@plone/providers` instead to make the new `Link` work with them. diff --git a/packages/providers/README.md b/packages/providers/README.md index 71cacee650..5ff5ca04bf 100644 --- a/packages/providers/README.md +++ b/packages/providers/README.md @@ -2,7 +2,7 @@ This package contains utility providers for Plone React components. The main purpose is to provide dependency injection of common required artifacts needed by any app. -This artifacts are: +These artifacts include: - Router related - Plone Client - URL handling methods @@ -28,7 +28,7 @@ interface PloneProvider { } ``` -It should be instantated at the top of your app. +It should be instantiated at the top of your app. You have to provide the required props depending on the framework and the router used. This is the example for a Next.js app. Please refer to the {file}`apps` folder of the Volto repository for more examples of the usage of `PloneProvider` in different React frameworks. @@ -115,7 +115,7 @@ export default Providers; ``` -You can use anywhere in your app by using the hook `usePloneProvider`. +You can use it anywhere in your app by using the hook `usePloneProvider`. ```tsx import { usePloneProvider } from '@plone/providers'; @@ -123,17 +123,20 @@ import { usePloneProvider } from '@plone/providers'; const { ploneClient } = usePloneProvider() ``` -or any other context property. +Alternatively, you can use it in any other context property. ```tsx const { navigate } = usePloneProvider() ``` -### `PloneClientProvider` +## `PloneClientProvider` `PloneProvider` in a group of other smaller providers. -In case you need them separatedly, you can also instantiate and use them standalone. -However, only do this is the framework has some limitation on using the bulk `PloneClientProvider`. +You can also instantiate and use them as standalone providers. +However, you should do this only if the framework has some limitation on using the bulk `PloneClientProvider`. + +The following snippets show its usage. +First, instantiate the provider. ```ts export type PloneClientProviderProps = { @@ -143,7 +146,7 @@ export type PloneClientProviderProps = { }; ``` -and the related hook: +Second, use its related hook through the following example. ```tsx import { usePloneClient } from '@plone/providers'; @@ -157,11 +160,13 @@ or const { getContentQuery } = usePloneClient() ``` -### `AppRouterProvider` +## `AppRouterProvider` This provider is included also in `PloneProvider`. -In case you need it separatedly, you can also instantiate and use it standalone. -However, only do this is the framework has some limitation on using the bulk `PloneClientProvider`. +You can also instantiate and use it as a standalone provider. +However, you should do this only if the framework has some limitation on using the bulk `PloneClientProvider`. + +The following code example shows its usage. ```ts interface AppRouterProps { @@ -174,7 +179,7 @@ interface AppRouterProps { } ``` -and the related hook: +The following code sample shows its related hook. ```tsx import { useAppRouter } from '@plone/providers';