From afbb2749517870b6e18f4144bfa8f14961d729da Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Mon, 14 Aug 2023 17:05:49 +0700
Subject: [PATCH] fix: update typed bio on locale change

---
 components/homepage/TypedBios.tsx | 70 +++++++++++++++++--------------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/components/homepage/TypedBios.tsx b/components/homepage/TypedBios.tsx
index 4fee2d4e..56ad12e7 100644
--- a/components/homepage/TypedBios.tsx
+++ b/components/homepage/TypedBios.tsx
@@ -1,41 +1,49 @@
-import React from 'react'
+import { useTranslation } from 'next-i18next'
+import { useEffect, useRef } from 'react'
 import Typed from 'typed.js'
 import { Twemoji } from '../Twemoji'
-import { useTranslation } from 'next-i18next'
+import { useLocale } from '~/hooks/useLocale'
+
+function createTypedInstance(el: HTMLElement) {
+  return new Typed(el, {
+    stringsElement: '#bios',
+    typeSpeed: 40,
+    backSpeed: 10,
+    loop: true,
+    backDelay: 1000,
+  })
+}
 
 export function TypedBios() {
-  let el = React.useRef(null)
-  let typed = React.useRef(null)
-  let { t } = useTranslation('common')
+  let el = useRef(null)
+  let typed = useRef(null)
+  let [locale] = useLocale()
+  let tr = useTranslation('common')
 
-  React.useEffect(() => {
-    typed.current = new Typed(el.current, {
-      stringsElement: '#bios',
-      typeSpeed: 40,
-      backSpeed: 10,
-      loop: true,
-      backDelay: 1000,
-    })
-    return () => typed.current.destroy()
-  }, [])
+  useEffect(() => {
+    if (tr.ready) {
+      typed.current?.destroy()
+      typed.current = createTypedInstance(el.current)
+    }
+  }, [locale, tr])
 
   return (
     <div>
       <ul id="bios" className="hidden">
-        <li>{t('bio_1')}</li>
-        <li>{t('bio_2')}</li>
-        <li>{t('bio_3')}</li>
-        <li>{t('bio_4')}</li>
-        <li>{t('bio_5')}</li>
-        <li>{t('bio_6')}</li>
-        <li>{t('bio_7')}</li>
-        <li>{t('bio_8')}</li>
-        <li>{t('bio_9')}</li>
+        <li>{tr.t('bio_1')}</li>
+        <li>{tr.t('bio_2')}</li>
+        <li>{tr.t('bio_3')}</li>
+        <li>{tr.t('bio_4')}</li>
+        <li>{tr.t('bio_5')}</li>
+        <li>{tr.t('bio_6')}</li>
+        <li>{tr.t('bio_7')}</li>
+        <li>{tr.t('bio_8')}</li>
+        <li>{tr.t('bio_9')}</li>
         <li>
-          {t('bio_10')} <Twemoji emoji="dog" />
+          {tr.t('bio_10')} <Twemoji emoji="dog" />
         </li>
         <li>
-          {t('bio_11')}
+          {tr.t('bio_11')}
           <span className="ml-1">
             <Twemoji emoji="soccer-ball" />,
             <Twemoji emoji="man-swimming" />,
@@ -43,16 +51,16 @@ export function TypedBios() {
             <Twemoji emoji="volleyball" />
           </span>
         </li>
-        <li>{t('bio_12')}</li>
+        <li>{tr.t('bio_12')}</li>
         <li>
-          {t('bio_13')} <Twemoji emoji="musical-keyboard" /> & <Twemoji emoji="guitar" />
+          {tr.t('bio_13')} <Twemoji emoji="musical-keyboard" /> & <Twemoji emoji="guitar" />
         </li>
-        <li>{t('bio_14')}</li>
+        <li>{tr.t('bio_14')}</li>
         <li>
-          {t('bio_15')} <Twemoji emoji="chess-pawn" />
+          {tr.t('bio_15')} <Twemoji emoji="chess-pawn" />
         </li>
         <li>
-          {t('bio_16')} <Twemoji emoji="video-game" />.
+          {tr.t('bio_16')} <Twemoji emoji="video-game" />.
         </li>
       </ul>
       <span ref={el} className="text-neutral-900 dark:text-neutral-200" />