SSR Footer: Use an empty state for Automattic branding before set the…

… final value (#77916) * Use an empty state for Automattic branding before set the final value * Update the XautomatticBrandingNoun from a hook to a normal method
Automattic · Jun 13, 2023 · ce98546 · ce98546
1 parent fce2cf2
commit ce98546
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/packages/wpcom-template-parts/src/types.ts b/packages/wpcom-template-parts/src/types.ts
@@ -1,4 +1,4 @@
-import type useAutomatticBrandingNoun from './hooks/use-automattic-branding-noun';
+import type { getAutomatticBrandingNoun } from './utils';
 import type { useLocalizeUrl } from '@automattic/i18n-utils';
 
 export interface HeaderProps {
@@ -19,7 +19,7 @@ export interface PureFooterProps extends FooterProps {
 	localizeUrl?: ReturnType< typeof useLocalizeUrl >;
 	locale?: string;
 	isEnglishLocale?: boolean;
-	automatticBranding?: ReturnType< typeof useAutomatticBrandingNoun >;
+	automatticBranding?: ReturnType< typeof getAutomatticBrandingNoun >;
 	languageOptions?: LanguageOptions;
 }
 

diff --git a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx
@@ -7,8 +7,10 @@ import {
 	useLocalizeUrl,
 } from '@automattic/i18n-utils';
 import { __ } from '@wordpress/i18n';
+import { useTranslate } from 'i18n-calypso';
+import { useLayoutEffect, useState } from 'react';
 import SocialLogo from 'social-logos';
-import useAutomatticBrandingNoun from '../hooks/use-automattic-branding-noun';
+import { getAutomatticBrandingNoun } from '../utils';
 import type { FooterProps, PureFooterProps, LanguageOptions } from '../types';
 
 import './style.scss';
@@ -471,10 +473,15 @@ const UniversalNavbarFooter = ( {
 }: FooterProps ) => {
 	const localizeUrl = useLocalizeUrl();
 	const locale = useLocale();
+	const translate = useTranslate();
 	const isEnglishLocale = useIsEnglishLocale();
 	const pathNameWithoutLocale =
 		currentRoute && removeLocaleFromPathLocaleInFront( currentRoute ).slice( 1 );
-	const automatticBranding = useAutomatticBrandingNoun();
+	const [ automatticBranding, setAutomatticBranding ] = useState( { article: '', noun: '' } );
+
+	useLayoutEffect( () => {
+		setAutomatticBranding( getAutomatticBrandingNoun( translate ) );
+	}, [ translate ] );
 
 	return (
 		<PureUniversalNavbarFooter

diff --git a/...src/hooks/use-automattic-branding-noun.ts → packages/wpcom-template-parts/src/utils.ts b/...src/hooks/use-automattic-branding-noun.ts → packages/wpcom-template-parts/src/utils.ts
@@ -1,7 +1,6 @@
-import { useTranslate } from 'i18n-calypso';
+import { translate as translateMethod } from 'i18n-calypso';
 
-const useAutomatticBrandingNoun = () => {
-	const translate = useTranslate();
+export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => {
 	const automatticRoger = [
 		translate( 'An Automattic brainchild' ),
 		translate( 'An Automattic contraption' ),
@@ -23,5 +22,3 @@ const useAutomatticBrandingNoun = () => {
 		noun: branding.split( 'Automattic' )[ 1 ],
 	};
 };
-
-export default useAutomatticBrandingNoun;