From eb95216797f9f439cf9290efd0aaa74c01241c5b Mon Sep 17 00:00:00 2001 From: Philip Jackson Date: Thu, 19 Nov 2020 15:44:35 +1300 Subject: [PATCH] Update Gutenboarding to use new --- .../components/domain-picker-button/index.tsx | 6 ++++-- .../landing/gutenboarding/components/header/index.tsx | 6 ++++-- .../gutenboarding/components/locale-context/index.tsx | 9 ++++++--- .../components/window-locale-effect-manager/index.tsx | 6 ++++-- client/landing/gutenboarding/hooks/use-on-login.ts | 8 ++++---- client/landing/gutenboarding/hooks/use-on-signup.ts | 10 +++++----- .../landing/gutenboarding/hooks/use-selected-plan.ts | 6 +++--- .../landing/gutenboarding/hooks/use-step-navigation.ts | 6 +++--- .../gutenboarding/onboarding-block/domains/index.tsx | 4 +++- .../gutenboarding/onboarding-block/plans/index.tsx | 4 +++- .../onboarding-block/style-preview/preview.tsx | 8 ++++---- package.json | 1 + 12 files changed, 44 insertions(+), 30 deletions(-) diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/client/landing/gutenboarding/components/domain-picker-button/index.tsx index 764de30434bc3..5f62e7d0898d0 100644 --- a/client/landing/gutenboarding/components/domain-picker-button/index.tsx +++ b/client/landing/gutenboarding/components/domain-picker-button/index.tsx @@ -7,6 +7,7 @@ import { useSelect } from '@wordpress/data'; import { Icon, chevronDown } from '@wordpress/icons'; import { sprintf } from '@wordpress/i18n'; import { useI18n } from '@automattic/react-i18n'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -22,7 +23,8 @@ import { DOMAIN_SUGGESTIONS_STORE } from '../../stores/domain-suggestions'; import './style.scss'; const DomainPickerButton: React.FunctionComponent = () => { - const { __, i18nLocale } = useI18n(); + const { __ } = useI18n(); + const locale = useLocale(); const makePath = usePath(); const { domain, selectedDesign, siteTitle, siteVertical } = useSelect( ( select ) => select( ONBOARD_STORE ).getState() @@ -43,7 +45,7 @@ const DomainPickerButton: React.FunctionComponent = () => { include_wordpressdotcom: false, include_dotblogsubdomain: false, quantity: 1, // this will give the recommended domain only - locale: i18nLocale, + locale, } ); }, [ suggestionQuery ] diff --git a/client/landing/gutenboarding/components/header/index.tsx b/client/landing/gutenboarding/components/header/index.tsx index e462b4c20d5b9..9b1d48637cccf 100644 --- a/client/landing/gutenboarding/components/header/index.tsx +++ b/client/landing/gutenboarding/components/header/index.tsx @@ -6,6 +6,7 @@ import { useI18n } from '@automattic/react-i18n'; import { Icon, wordpress } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; import { Button } from '@wordpress/components'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -23,7 +24,8 @@ import Link from '../link'; import './style.scss'; const Header: React.FunctionComponent = () => { - const { __, i18nLocale } = useI18n(); + const { __ } = useI18n(); + const locale = useLocale(); const currentStep = useCurrentStep(); const { siteTitle } = useSelect( ( select ) => select( ONBOARD_STORE ).getState() ); @@ -53,7 +55,7 @@ const Header: React.FunctionComponent = () => {
{ __( 'Site Language' ) } - { i18nLocale } + { locale }
); diff --git a/client/landing/gutenboarding/components/locale-context/index.tsx b/client/landing/gutenboarding/components/locale-context/index.tsx index 0ecf3ae8e322b..91d5ec7023abf 100644 --- a/client/landing/gutenboarding/components/locale-context/index.tsx +++ b/client/landing/gutenboarding/components/locale-context/index.tsx @@ -14,6 +14,7 @@ import { getLanguageSlugs } from '../../../../lib/i18n-utils'; import { getUrlParts } from '../../../../lib/url/url-parts'; import config from '../../../../config'; import type { User } from '@automattic/data-stores'; +import { LocaleProvider } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -90,9 +91,11 @@ export const LocaleContext: React.FunctionComponent = ( { children } ) => { return ( - - { localeDataLoaded ? children : null } - + + + { localeDataLoaded ? children : null } + + ); }; diff --git a/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx b/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx index c2fef5f2cd589..c3a32077bcc00 100644 --- a/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx +++ b/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx @@ -4,9 +4,11 @@ import { switchWebpackCSS } from '../../../../lib/i18n-utils/switch-locale'; import { useI18n } from '@automattic/react-i18n'; import * as React from 'react'; +import { useLocale } from '@automattic/i18n-utils'; export const WindowLocaleEffectManager: React.FunctionComponent = () => { - const { __, isRTL, i18nLocale } = useI18n(); + const { __, isRTL } = useI18n(); + const locale = useLocale(); // Some languages may need to set an html lang attribute that is different from their slug let lang = __( 'html_lang_attribute' ); @@ -14,7 +16,7 @@ export const WindowLocaleEffectManager: React.FunctionComponent = () => { // Some languages don't have the translation for html_lang_attribute // or maybe we are dealing with the default `en` locale. Return the general purpose locale slug if ( lang === 'html_lang_attribute' ) { - lang = i18nLocale; + lang = locale; } React.useEffect( () => { diff --git a/client/landing/gutenboarding/hooks/use-on-login.ts b/client/landing/gutenboarding/hooks/use-on-login.ts index 60f5ad14be36c..114224a841de1 100644 --- a/client/landing/gutenboarding/hooks/use-on-login.ts +++ b/client/landing/gutenboarding/hooks/use-on-login.ts @@ -3,7 +3,7 @@ */ import * as React from 'react'; import { useDispatch, useSelect } from '@wordpress/data'; -import { useI18n } from '@automattic/react-i18n'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -19,7 +19,7 @@ import { useNewQueryParam } from '../path'; **/ export default function useOnSignup() { - const { i18nLocale } = useI18n(); + const locale = useLocale(); const { createSite } = useDispatch( ONBOARD_STORE ); const currentUser = useSelect( ( select ) => select( USER_STORE ).getCurrentUser() ); const isCreatingSite = useSelect( ( select ) => select( SITE_STORE ).isFetchingSite() ); @@ -30,14 +30,14 @@ export default function useOnSignup() { React.useEffect( () => { if ( ! isCreatingSite && ! newSite && currentUser && shouldTriggerCreate ) { - createSite( currentUser.username, i18nLocale, undefined, visibility ); + createSite( currentUser.username, locale, undefined, visibility ); } }, [ createSite, currentUser, isCreatingSite, newSite, - i18nLocale, + locale, shouldTriggerCreate, visibility, ] ); diff --git a/client/landing/gutenboarding/hooks/use-on-signup.ts b/client/landing/gutenboarding/hooks/use-on-signup.ts index 4709d9f1f5546..835d596c97d3e 100644 --- a/client/landing/gutenboarding/hooks/use-on-signup.ts +++ b/client/landing/gutenboarding/hooks/use-on-signup.ts @@ -3,7 +3,7 @@ */ import * as React from 'react'; import { useDispatch, useSelect } from '@wordpress/data'; -import { useI18n } from '@automattic/react-i18n'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -18,7 +18,7 @@ import { useNewSiteVisibility } from './use-selected-plan'; **/ export default function useOnSignup() { - const { i18nLocale } = useI18n(); + const locale = useLocale(); const { createSite } = useDispatch( ONBOARD_STORE ); const newUser = useSelect( ( select ) => select( USER_STORE ).getNewUser() ); @@ -27,14 +27,14 @@ export default function useOnSignup() { const handleCreateSite = React.useCallback( ( username: string, bearerToken?: string, isPublicSite?: number ) => { - createSite( username, i18nLocale, bearerToken, isPublicSite ); + createSite( username, locale, bearerToken, isPublicSite ); }, - [ createSite, i18nLocale ] + [ createSite, locale ] ); React.useEffect( () => { if ( newUser && newUser.bearerToken && newUser.username && ! newSite ) { handleCreateSite( newUser.username, newUser.bearerToken, visibility ); } - }, [ newSite, newUser, i18nLocale, handleCreateSite, visibility ] ); + }, [ newSite, newUser, locale, handleCreateSite, visibility ] ); } diff --git a/client/landing/gutenboarding/hooks/use-selected-plan.ts b/client/landing/gutenboarding/hooks/use-selected-plan.ts index e69b0c1b440c6..349a14cc27b3f 100644 --- a/client/landing/gutenboarding/hooks/use-selected-plan.ts +++ b/client/landing/gutenboarding/hooks/use-selected-plan.ts @@ -3,7 +3,7 @@ */ import { Site } from '@automattic/data-stores'; import { useSelect } from '@wordpress/data'; -import { useI18n } from '@automattic/react-i18n'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -20,9 +20,9 @@ export function usePlanFromPath() { } export function useSelectedPlan() { - const { i18nLocale } = useI18n(); + const locale = useLocale(); // Pre-load the plans details to ensure the plans are fetched early from the API endpoint. - useSelect( ( select ) => select( PLANS_STORE ).getPlansDetails( i18nLocale ) ); + useSelect( ( select ) => select( PLANS_STORE ).getPlansDetails( locale ) ); const selectedFeatures = useSelect( ( select ) => select( ONBOARD_STORE ).getSelectedFeatures() ); const selectedPlan = useSelect( ( select ) => select( ONBOARD_STORE ).getPlan() ); diff --git a/client/landing/gutenboarding/hooks/use-step-navigation.ts b/client/landing/gutenboarding/hooks/use-step-navigation.ts index e85c54c034853..440d4f9948564 100644 --- a/client/landing/gutenboarding/hooks/use-step-navigation.ts +++ b/client/landing/gutenboarding/hooks/use-step-navigation.ts @@ -3,7 +3,7 @@ */ import { useHistory } from 'react-router-dom'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useI18n } from '@automattic/react-i18n'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -29,7 +29,7 @@ export default function useStepNavigation(): { goBack: () => void; goNext: () => const makePath = usePath(); const history = useHistory(); const currentStep = useCurrentStep(); - const { i18nLocale } = useI18n(); + const locale = useLocale(); let steps: StepType[]; @@ -59,7 +59,7 @@ export default function useStepNavigation(): { goBack: () => void; goNext: () => const { onSignupDialogOpen } = useSignup(); const handleSiteCreation = () => currentUser - ? createSite( currentUser.username, i18nLocale, undefined, newSiteVisibility ) + ? createSite( currentUser.username, locale, undefined, newSiteVisibility ) : onSignupDialogOpen(); // Logic necessary to skip Domains or Plans steps diff --git a/client/landing/gutenboarding/onboarding-block/domains/index.tsx b/client/landing/gutenboarding/onboarding-block/domains/index.tsx index add355a058b2d..8ff1245505744 100644 --- a/client/landing/gutenboarding/onboarding-block/domains/index.tsx +++ b/client/landing/gutenboarding/onboarding-block/domains/index.tsx @@ -15,6 +15,7 @@ import { NextButton, SkipButton, } from '@automattic/onboarding'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -40,7 +41,8 @@ interface Props { } const DomainsStep: React.FunctionComponent< Props > = ( { isModal } ) => { - const { __, i18nLocale: locale } = useI18n(); + const { __ } = useI18n(); + const locale = useLocale(); const history = useHistory(); const { goBack, goNext } = useStepNavigation(); diff --git a/client/landing/gutenboarding/onboarding-block/plans/index.tsx b/client/landing/gutenboarding/onboarding-block/plans/index.tsx index 0c59a29fe57fc..247e86a23bb56 100644 --- a/client/landing/gutenboarding/onboarding-block/plans/index.tsx +++ b/client/landing/gutenboarding/onboarding-block/plans/index.tsx @@ -8,6 +8,7 @@ import { useI18n } from '@automattic/react-i18n'; import PlansGrid from '@automattic/plans-grid'; import type { Plans } from '@automattic/data-stores'; import { Title, SubTitle, ActionButtons, BackButton } from '@automattic/onboarding'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -27,7 +28,8 @@ interface Props { } const PlansStep: React.FunctionComponent< Props > = ( { isModal } ) => { - const { __, i18nLocale: locale } = useI18n(); + const { __ } = useI18n(); + const locale = useLocale(); const history = useHistory(); const makePath = usePath(); const { goBack, goNext } = useStepNavigation(); diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx index 6eeda0e174873..3feb69b7b265c 100644 --- a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx +++ b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { addQueryArgs } from '@wordpress/url'; import { useSelect } from '@wordpress/data'; -import { useI18n } from '@automattic/react-i18n'; +import { useLocale } from '@automattic/i18n-utils'; /** * Internal dependencies @@ -55,7 +55,7 @@ interface Props { viewport: Viewport; } const Preview: React.FunctionComponent< Props > = ( { viewport } ) => { - const { i18nLocale } = useI18n(); + const language = useLocale(); const [ previewHtml, setPreviewHtml ] = React.useState< string >(); const { selectedDesign, selectedFonts, siteTitle } = useSelect( ( select ) => select( STORE_KEY ).getState() @@ -73,7 +73,7 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => { selectedDesign.theme ) }/${ encodeURIComponent( selectedDesign.template ) }/`; const url = addQueryArgs( templateUrl, { - language: i18nLocale, + language, site_title: siteTitle, ...( selectedFonts && { font_headings: selectedFonts.headings, @@ -105,7 +105,7 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => { eff(); }, // Disable reason: We'll handle font change elsewhere. - [ i18nLocale, selectedDesign ] // eslint-disable-line react-hooks/exhaustive-deps + [ language, selectedDesign ] // eslint-disable-line react-hooks/exhaustive-deps ); React.useEffect( () => { diff --git a/package.json b/package.json index 5a08937b68b2e..d0e59ce0712c2 100644 --- a/package.json +++ b/package.json @@ -164,6 +164,7 @@ "@automattic/color-studio": "^2.3.0", "@automattic/components": "^1.0.0-alpha.1", "@automattic/data-stores": "^1.0.0-alpha.1", + "@automattic/i18n-utils": "^1.0.0", "@automattic/languages": "^1.0.0", "@automattic/typography": "^1.0.0", "@automattic/viewport": "^1.0.0",