fix: fix email items list

src/components/EmailsList/index.tsx

@@ -1,77 +1,81 @@
-import { getRandomArbitrary, getRandomName } from '@/services/random-value'
+import { getRandomArbitrary, getRandomName } from "@/services/random-value";
-import EmailItem, { IEmailItem } from '../EmailItem'
+import EmailItem, { IEmailItem } from "../EmailItem";
-import styles from './styles.module.css'
+import styles from "./styles.module.css";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from "react";
 
 const getEmails = (): IEmailItem[] => {
-    const emails: IEmailItem[] = []
+  const emails: IEmailItem[] = [];
 
-    for (let index = 0; index < 5; index++) {
+  for (let index = 0; index < 5; index++) {
-        emails.push({
+    emails.push({
-            email: getRandomName(),
+      email: getRandomName(),
-            price: [9, 9, 9, 9, 9, 5, 13.67][getRandomArbitrary(0, 7)]
+      price: [9, 9, 9, 9, 9, 5, 13.67][getRandomArbitrary(0, 7)],
-        })
+    });
-        
+  }
-    }
-
-    return emails
-}
 
+  return emails;
+};
 
 function EmailsList(): JSX.Element {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
-  const [countUsers, setCountUsers] = useState(752)
+  const [countUsers, setCountUsers] = useState(752);
-  const [emails, setEmails] = useState(getEmails())
+  const [emails, setEmails] = useState(getEmails());
-  const [elementIdx, setElementIdx] = useState(0)
+  const [elementIdx, setElementIdx] = useState(0);
   const itemsRef = useRef<HTMLDivElement[]>([]);
 
   useEffect(() => {
-    const randomDelay = getRandomArbitrary(3000, 5000)
+    const randomDelay = getRandomArbitrary(3000, 5000);
     const countUsersTimeOut = setTimeout(() => {
-        setCountUsers((prevState) => prevState + 1)
+      setCountUsers((prevState) => prevState + 1);
-    }, randomDelay)
+    }, randomDelay);
-    return () => clearTimeout(countUsersTimeOut)
+    return () => clearTimeout(countUsersTimeOut);
-  }, [countUsers])
+  }, [countUsers]);
 
   useEffect(() => {
-    let randomDelay = getRandomArbitrary(500, 5000)
+    let randomDelay = getRandomArbitrary(500, 5000);
     if (!elementIdx) {
-      randomDelay = 0
+      randomDelay = 0;
     }
 
     const itemsRefInterval = setInterval(() => {
-        if (itemsRef.current[elementIdx - 1]) {
+      if (itemsRef.current[elementIdx - 1]) {
-          itemsRef.current[elementIdx - 1].remove()
+        itemsRef.current[elementIdx - 1].remove();
-				}
+      }
-        if (itemsRef.current[elementIdx]?.style) {
+      setEmails((prevState) => {
-          itemsRef.current[elementIdx].classList.add(styles.hidden)
+        const array = prevState.slice(0);
-        }
+        array.push({
-				setEmails((prevState) => {
+          email: getRandomName(),
-					const array = prevState.slice(0)
+          price: [9, 9, 9, 9, 9, 5, 13.67][getRandomArbitrary(0, 7)],
-					array.push({
+        });
-							email: getRandomName(),
+        return array;
-							price: [9, 9, 9, 9, 9, 5, 13.67][getRandomArbitrary(0, 7)]
+      });
-					})
+      setElementIdx((prevState) => prevState + 1);
-					return array
+    }, randomDelay);
-        })
+    return () => clearInterval(itemsRefInterval);
-        setElementIdx((prevState) => prevState + 1)
+  }, [emails, elementIdx]);
-    }, randomDelay)
-    return () => clearInterval(itemsRefInterval)
-  }, [emails, elementIdx])
 
   return (
     <div className={styles.container}>
-        <span className={styles['title']}>{t('people_joined_today', { countPeoples: <strong>{countUsers}</strong> })}</span>
+      <span className={styles["title"]}>
-        <div className={styles['emails-container']}>
+        {t("people_joined_today", {
-            {emails.map(({email, price}, idx) => (
+          countPeoples: <strong>{countUsers}</strong>,
-							<div className={styles['email-item']} ref={(el: HTMLDivElement) => itemsRef.current[idx] = el} key={idx}>
+        })}
-									<EmailItem email={email} price={price} />
+      </span>
-							</div>
+      <div className={styles["emails-container"]}>
-            ))}
+        {emails.map(({ email, price }, idx) => (
-        </div>
+          <div
+            className={`${styles["email-item"]} ${elementIdx > idx ? styles["hidden"] : ""}`}
+            style={{ display: elementIdx - 1 > idx ? "none" : "" }}
+            ref={(el: HTMLDivElement) => (itemsRef.current[idx] = el)}
+            key={idx}
+          >
+            <EmailItem email={email} price={price} />
+          </div>
+        ))}
+      </div>
     </div>
-  )
+  );
 }
 
-export default EmailsList
+export default EmailsList;

src/components/EmailsList/styles.module.css

@@ -30,7 +30,7 @@
 .email-item {
   margin-top: 0;
   opacity: 1;
-  will-change: margin-top, opacity;
+  will-change: margin-bottom, opacity;
 }
 
 .hidden {