From eda74cb14747ed0cfba53d5042d587dd9d41eb04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= Date: Thu, 7 Jul 2022 15:22:28 +0200 Subject: [PATCH] Expose custom fields in react context --- .../admin/src/components/Providers/index.js | 24 +++++++++++-------- .../admin/src/pages/MarketplacePage/index.js | 4 ++++ .../lib/src/contexts/CustomFieldsContext.js | 11 +++++++++ .../lib/src/hooks/useCustomFields/index.js | 18 ++++++++++++++ packages/core/helper-plugin/lib/src/index.js | 2 ++ .../providers/CustomFieldsProvider/index.js | 21 ++++++++++++++++ 6 files changed, 70 insertions(+), 10 deletions(-) create mode 100644 packages/core/helper-plugin/lib/src/contexts/CustomFieldsContext.js create mode 100644 packages/core/helper-plugin/lib/src/hooks/useCustomFields/index.js create mode 100644 packages/core/helper-plugin/lib/src/providers/CustomFieldsProvider/index.js diff --git a/packages/core/admin/admin/src/components/Providers/index.js b/packages/core/admin/admin/src/components/Providers/index.js index ecabe0f5f4..690984937f 100644 --- a/packages/core/admin/admin/src/components/Providers/index.js +++ b/packages/core/admin/admin/src/components/Providers/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { QueryClientProvider, QueryClient } from 'react-query'; -import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin'; +import { LibraryProvider, CustomFieldsProvider, StrapiAppProvider } from '@strapi/helper-plugin'; import { Provider } from 'react-redux'; import { AdminContext } from '../../contexts'; import ConfigurationsProvider from '../ConfigurationsProvider'; @@ -25,6 +25,7 @@ const Providers = ({ authLogo, children, components, + customFields, fields, getAdminInjectedComponents, getPlugin, @@ -64,15 +65,17 @@ const Providers = ({ settings={settings} > - - - - - {children} - - - - + + + + + + {children} + + + + + @@ -88,6 +91,7 @@ Providers.propTypes = { authLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.any]).isRequired, children: PropTypes.element.isRequired, components: PropTypes.object.isRequired, + customFields: PropTypes.object.isRequired, fields: PropTypes.object.isRequired, getAdminInjectedComponents: PropTypes.func.isRequired, getPlugin: PropTypes.func.isRequired, diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index 4571971289..20238edda7 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -10,6 +10,7 @@ import { LoadingIndicatorPage, useNotification, useAppInfos, + useCustomFields, } from '@strapi/helper-plugin'; import { Layout, ContentLayout } from '@strapi/design-system/Layout'; import { Main } from '@strapi/design-system/Main'; @@ -55,6 +56,9 @@ const MarketPlacePage = () => { useFocusWhenNavigate(); + const { customFields } = useCustomFields(); + console.log('customFields', customFields); + const marketplaceTitle = formatMessage({ id: 'global.marketplace', defaultMessage: 'Marketplace', diff --git a/packages/core/helper-plugin/lib/src/contexts/CustomFieldsContext.js b/packages/core/helper-plugin/lib/src/contexts/CustomFieldsContext.js new file mode 100644 index 0000000000..07fd26c870 --- /dev/null +++ b/packages/core/helper-plugin/lib/src/contexts/CustomFieldsContext.js @@ -0,0 +1,11 @@ +/** + * + * CustomFieldsContext + * + */ + +import { createContext } from 'react'; + +const CustomFieldsContext = createContext(); + +export default CustomFieldsContext; diff --git a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/index.js b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/index.js new file mode 100644 index 0000000000..059dc0db2f --- /dev/null +++ b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/index.js @@ -0,0 +1,18 @@ +/** + * + * useCustomFields + * + */ + +import { useContext, useRef } from 'react'; +import CustomFieldsContext from '../../contexts/CustomFieldsContext'; + +const useCustomFields = () => { + const { customFields } = useContext(CustomFieldsContext); + // Use a ref so we can safely add the custom fields to a hook dependencies array + const customFieldsRef = useRef(customFields); + + return { customFields: customFieldsRef.current }; +}; + +export default useCustomFields; diff --git a/packages/core/helper-plugin/lib/src/index.js b/packages/core/helper-plugin/lib/src/index.js index b4ef163b8d..33da001ac0 100644 --- a/packages/core/helper-plugin/lib/src/index.js +++ b/packages/core/helper-plugin/lib/src/index.js @@ -15,6 +15,7 @@ export { default as useAppInfos } from './hooks/useAppInfos'; export { default as useQuery } from './hooks/useQuery'; export { default as useLibrary } from './hooks/useLibrary'; +export { default as useCustomFields } from './hooks/useCustomFields'; export { default as useNotification } from './hooks/useNotification'; export { default as useStrapiApp } from './hooks/useStrapiApp'; export { default as useTracking } from './hooks/useTracking'; @@ -32,6 +33,7 @@ export { default as useLockScroll } from './hooks/useLockScroll'; // Providers export { default as GuidedTourProvider } from './providers/GuidedTourProvider'; export { default as LibraryProvider } from './providers/LibraryProvider'; +export { default as CustomFieldsProvider } from './providers/CustomFieldsProvider'; export { default as NotificationsProvider } from './providers/NotificationsProvider'; export { default as StrapiAppProvider } from './providers/StrapiAppProvider'; diff --git a/packages/core/helper-plugin/lib/src/providers/CustomFieldsProvider/index.js b/packages/core/helper-plugin/lib/src/providers/CustomFieldsProvider/index.js new file mode 100644 index 0000000000..c327519987 --- /dev/null +++ b/packages/core/helper-plugin/lib/src/providers/CustomFieldsProvider/index.js @@ -0,0 +1,21 @@ +/** + * + * CustomFieldsProvider + * + */ +import React from 'react'; +import PropTypes from 'prop-types'; +import CustomFieldsContext from '../../contexts/CustomFieldsContext'; + +const CustomFieldsProvider = ({ children, customFields }) => { + return ( + {children} + ); +}; + +CustomFieldsProvider.propTypes = { + children: PropTypes.node.isRequired, + customFields: PropTypes.object.isRequired, +}; + +export default CustomFieldsProvider;