sae

Author: zzq0826

src/components/Footer/Subscribe/Subscribe.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from "preact/hooks"
 import MailchimpSubscribe from "react-mailchimp-subscribe"
 import SubscribeSvg from "~/assets/svgs/footer/subscribe.svg?react"
 import { clsx } from "~/lib"
-import i18next, { changeLanguage, t } from "i18next"
+import i18next, { t } from "i18next"
 
 import EmailInput from "./EmailInput.tsx"
 import styles from "./Subscribe.module.css"
@@ -19,14 +19,9 @@ export default function Subscribe(props) {
   const [email, setEmail] = useState("")
   const [customMessage, setCustomMessage] = useState("")
   const [emailValid, setEmailValid] = useState(false)
-  const [key, setKey] = useState(0)
-
-  i18next.changeLanguage(props.lang)
 
   useEffect(() => {
-    setTimeout(() => {
-      setKey(key + 1)
-    }, 300)
+    i18next.changeLanguage(props.lang)
   }, [props.lang])
 
   useEffect(() => {
@@ -50,16 +45,16 @@ export default function Subscribe(props) {
   }
 
   return (
-    <div key={key} className={clsx(styles.container, "dark:bg-dark-highlight")}>
+    <div key={props.lang} className={clsx(styles.container, "dark:bg-dark-highlight")}>
       <div className={styles.subscribeBox}>
         <span className="text-white dark:text-black bg-black dark:bg-white rounded-[50%]">
           <SubscribeSvg></SubscribeSvg>
         </span>
 
         <div className={styles.copyBox}>
-          <div className={styles.subscribeTitle}>{ t("landing.NewsletterCTA.title") }</div>
+          <div className={styles.subscribeTitle}>{t("landing.NewsletterCTA.title")}</div>
           <div className={styles.subscribeText}>
-          { t("landing.NewsletterCTA.text") }
+            {t("landing.NewsletterCTA.text")}
           </div>
         </div>
         <MailchimpSubscribe
@@ -72,7 +67,7 @@ export default function Subscribe(props) {
                 onChange={handleChangeEmail}
                 onClick={() => handleSubmit(subscribe)}
                 onEnter={() => handleSubmit(subscribe)}
-                placeholder= { t("landing.NewsletterCTA.placeholder") }
+                placeholder={t("landing.NewsletterCTA.placeholder")}
                 end={status === "success"}
               />
               {customMessage && <div className={styles.errorMessage}>{customMessage}</div>}