fix: update typed bio on locale change

components/homepage/TypedBios.tsx

@@ -1,58 +1,66 @@
-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" />,
  <Twemoji emoji="ping-pong" />,
  <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" />