From 3bed1608be511857f7829ae7edc1d81b922ccba0 Mon Sep 17 00:00:00 2001 From: John Kaeser Date: Fri, 19 Jan 2024 10:24:06 -0500 Subject: [PATCH 1/3] feat(connect-mixin): give implementing classes access to instance data It can be useful to check instance data before reaching out to Redux store to set properties. --- packages/web-components/src/globals/mixins/connect.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/web-components/src/globals/mixins/connect.ts b/packages/web-components/src/globals/mixins/connect.ts index 432c387c37a..8f62e33dd6a 100644 --- a/packages/web-components/src/globals/mixins/connect.ts +++ b/packages/web-components/src/globals/mixins/connect.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -13,7 +13,7 @@ import Handle from '../internal/handle'; /** * @param store A redux store. - * @returns A funciton that takes a base class and returns a mix-in that connects the component to Redux store. + * @returns A function that takes a base class and returns a mix-in that connects the component to Redux store. */ const ConnectMixin = < @@ -23,7 +23,7 @@ const ConnectMixin = TDispatchProps = { [name: string]: any } >( store: Store, - mapStateToProps: (state: TState) => TStateProps, + mapStateToProps: (state: TState, self?: any) => TStateProps, mapDispatchToProps: (dispatch: Dispatch) => TDispatchProps = () => ({} as TDispatchProps) ) => @@ -35,7 +35,7 @@ const ConnectMixin = _hStore: Handle | null = null; _handleChangeStoreState(state: TState) { - const props = mapStateToProps(state); + const props = mapStateToProps(state, this); Object.keys(props as any).forEach((name) => { const old = this[name]; const current = props[name]; From b49c3596bacc3099f4260b1bbbeab2cd5431ee74 Mon Sep 17 00:00:00 2001 From: John Kaeser Date: Fri, 19 Jan 2024 10:27:25 -0500 Subject: [PATCH 2/3] fix(masthead): container should respect user-set L0 items --- .../masthead/__stories__/masthead.stories.ts | 28 +++++++++---------- .../components/masthead/masthead-container.ts | 16 +++++++---- 2 files changed, 25 insertions(+), 19 deletions(-) diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts index 40589463e7b..420a3fd8ef1 100644 --- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts +++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts @@ -103,7 +103,7 @@ export const Default = (args) => { ${useMock ? html` - { unauthenticatedProfileItems )}" custom-profile-login="${customProfileLogin}" - auth-method="${MASTHEAD_AUTH_METHOD.DEFAULT}"> + auth-method="${MASTHEAD_AUTH_METHOD.DEFAULT}"> ` : html` { ${useMock ? html` - + ?custom-typeahead-api=${true}> ` : html` { ${useMock ? html` - + )}"> ` : html` { ${useMock ? html` - + .platformUrl="${ifNonEmpty(platformUrl)}"> ` : html` { ${useMock ? html` - + )}"> ` : html` { ${useMock ? html` - + : null}"> ` : html` { ${useMock ? html` - + .scopeParameters=${scopeParameters}> ` : html` `. */ export function mapStateToProps( - state: MastheadContainerState + state: MastheadContainerState, + self: C4DMastheadComposite ): MastheadContainerStateProps { const { localeAPI, translateAPI, profileAPI } = state; const { language } = localeAPI ?? {}; const { translations } = translateAPI ?? {}; const { request } = profileAPI ?? {}; + const { l0Data: userL0Data } = self; // Attempt to collect data from current/new and deprecated locations. - let l0Data; + let endpointl0Data; let profileItems; if (language) { - l0Data = { + endpointl0Data = { current: translations?.[language]?.masthead?.nav, deprecated: translations?.[language]?.mastheadNav?.links, }; @@ -118,8 +121,11 @@ export function mapStateToProps( return pickBy( { - // Progressively enhance to new L0 data shape. - l0Data: !language ? undefined : l0Data.current || l0Data.deprecated, + // Respect user-set L0 data. Otherwise, progressively enhance to new shape. + l0Data: + !language || userL0Data + ? undefined + : endpointl0Data.current || endpointl0Data.deprecated, // Progressively enhance to new profile items shape. authenticatedProfileItems: !language ? undefined From 93c69d2a9345dd00fc5bc0052c42b6b104770dd3 Mon Sep 17 00:00:00 2001 From: John Kaeser Date: Fri, 19 Jan 2024 11:32:11 -0500 Subject: [PATCH 3/3] fix(dotcom-shell): forward required arguments --- .../src/components/dotcom-shell/dotcom-shell-container.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts b/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts index e499f1bdbfd..8a6344b986e 100644 --- a/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts +++ b/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -29,6 +29,7 @@ import { mapStateToProps as mapStateToPropsMasthead, mapDispatchToProps as mapDispatchToPropsMasthead, } from '../masthead/masthead-container'; +import C4DMastheadComposite from '../masthead/masthead-composite'; import C4DDotcomShellComposite from './dotcom-shell-composite'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; @@ -60,11 +61,12 @@ export type DotcomShellContainerActions = * @returns The converted version of the given state, tailored for ``. */ export function mapStateToProps( - state: MastheadContainerState & FooterContainerState + state: MastheadContainerState & FooterContainerState, + self: C4DMastheadComposite ): MastheadContainerStateProps & FooterContainerStateProps { const footerProps = mapStateToPropsFooter(state); return { - ...mapStateToPropsMasthead(state), + ...mapStateToPropsMasthead(state, self), ...Object.keys(footerProps).reduce((acc, key) => { acc[key !== 'links' ? key : 'footerLinks'] = footerProps[key]; return acc;