From a2d59cd0ffed6597d5e2bc639ebc8bb6258117b1 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 10 Oct 2022 10:00:37 +0800
Subject: [PATCH] refactor(console): refresh preview on custom phrases updated
 (#2083)

---
 packages/console/src/hooks/use-ui-languages.ts               | 1 +
 .../src/pages/SignInExperience/components/Preview.tsx        | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/console/src/hooks/use-ui-languages.ts b/packages/console/src/hooks/use-ui-languages.ts
index baa429fa7..a2fe64eca 100644
--- a/packages/console/src/hooks/use-ui-languages.ts
+++ b/packages/console/src/hooks/use-ui-languages.ts
@@ -27,6 +27,7 @@ const useUiLanguages = () => {
   );
 
   return {
+    customPhrases: customPhraseList,
     languages,
     error,
     isLoading: !customPhraseList && !error,
diff --git a/packages/console/src/pages/SignInExperience/components/Preview.tsx b/packages/console/src/pages/SignInExperience/components/Preview.tsx
index c104f6e2c..d3f9ee403 100644
--- a/packages/console/src/pages/SignInExperience/components/Preview.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Preview.tsx
@@ -33,6 +33,7 @@ const Preview = ({ signInExperience, className }: Props) => {
   const [platform, setPlatform] = useState<'desktopWeb' | 'mobile' | 'mobileWeb'>('desktopWeb');
   const { data: allConnectors } = useSWR<ConnectorResponse[], RequestError>('/api/connectors');
   const previewRef = useRef<HTMLIFrameElement>(null);
+  const { customPhrases } = useUiLanguages();
 
   const { languages } = useUiLanguages();
 
@@ -109,7 +110,7 @@ const Preview = ({ signInExperience, className }: Props) => {
   }, [allConnectors, language, mode, platform, signInExperience]);
 
   const postPreviewMessage = useCallback(() => {
-    if (!config) {
+    if (!config || !customPhrases) {
       return;
     }
 
@@ -117,7 +118,7 @@ const Preview = ({ signInExperience, className }: Props) => {
       { sender: 'ac_preview', config },
       window.location.origin
     );
-  }, [config]);
+  }, [config, customPhrases]);
 
   useEffect(() => {
     postPreviewMessage();