diff --git a/src/components/EmailsList/index.tsx b/src/components/EmailsList/index.tsx index f28e245..6a9dd07 100644 --- a/src/components/EmailsList/index.tsx +++ b/src/components/EmailsList/index.tsx @@ -1,77 +1,81 @@ -import { getRandomArbitrary, getRandomName } from '@/services/random-value' -import EmailItem, { IEmailItem } from '../EmailItem' -import styles from './styles.module.css' -import { useTranslation } from 'react-i18next' -import { useEffect, useRef, useState } from 'react' +import { getRandomArbitrary, getRandomName } from "@/services/random-value"; +import EmailItem, { IEmailItem } from "../EmailItem"; +import styles from "./styles.module.css"; +import { useTranslation } from "react-i18next"; +import { useEffect, useRef, useState } from "react"; const getEmails = (): IEmailItem[] => { - const emails: IEmailItem[] = [] + const emails: IEmailItem[] = []; - for (let index = 0; index < 5; index++) { - emails.push({ - email: getRandomName(), - price: [9, 9, 9, 9, 9, 5, 13.67][getRandomArbitrary(0, 7)] - }) - - } - - return emails -} + for (let index = 0; index < 5; index++) { + emails.push({ + email: getRandomName(), + price: [9, 9, 9, 9, 9, 5, 13.67][getRandomArbitrary(0, 7)], + }); + } + return emails; +}; function EmailsList(): JSX.Element { - const { t } = useTranslation() - const [countUsers, setCountUsers] = useState(752) - const [emails, setEmails] = useState(getEmails()) - const [elementIdx, setElementIdx] = useState(0) + const { t } = useTranslation(); + const [countUsers, setCountUsers] = useState(752); + const [emails, setEmails] = useState(getEmails()); + const [elementIdx, setElementIdx] = useState(0); const itemsRef = useRef([]); useEffect(() => { - const randomDelay = getRandomArbitrary(3000, 5000) + const randomDelay = getRandomArbitrary(3000, 5000); const countUsersTimeOut = setTimeout(() => { - setCountUsers((prevState) => prevState + 1) - }, randomDelay) - return () => clearTimeout(countUsersTimeOut) - }, [countUsers]) + setCountUsers((prevState) => prevState + 1); + }, randomDelay); + return () => clearTimeout(countUsersTimeOut); + }, [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]) { - itemsRef.current[elementIdx - 1].remove() - } - if (itemsRef.current[elementIdx]?.style) { - itemsRef.current[elementIdx].classList.add(styles.hidden) - } - setEmails((prevState) => { - const array = prevState.slice(0) - array.push({ - email: getRandomName(), - price: [9, 9, 9, 9, 9, 5, 13.67][getRandomArbitrary(0, 7)] - }) - return array - }) - setElementIdx((prevState) => prevState + 1) - }, randomDelay) - return () => clearInterval(itemsRefInterval) - }, [emails, elementIdx]) + if (itemsRef.current[elementIdx - 1]) { + itemsRef.current[elementIdx - 1].remove(); + } + setEmails((prevState) => { + const array = prevState.slice(0); + array.push({ + email: getRandomName(), + price: [9, 9, 9, 9, 9, 5, 13.67][getRandomArbitrary(0, 7)], + }); + return array; + }); + setElementIdx((prevState) => prevState + 1); + }, randomDelay); + return () => clearInterval(itemsRefInterval); + }, [emails, elementIdx]); return (
- {t('people_joined_today', { countPeoples: {countUsers} })} -
- {emails.map(({email, price}, idx) => ( -
itemsRef.current[idx] = el} key={idx}> - -
- ))} -
+ + {t("people_joined_today", { + countPeoples: {countUsers}, + })} + +
+ {emails.map(({ email, price }, idx) => ( +
idx ? styles["hidden"] : ""}`} + style={{ display: elementIdx - 1 > idx ? "none" : "" }} + ref={(el: HTMLDivElement) => (itemsRef.current[idx] = el)} + key={idx} + > + +
+ ))} +
- ) + ); } -export default EmailsList +export default EmailsList; diff --git a/src/components/EmailsList/styles.module.css b/src/components/EmailsList/styles.module.css index 404a90c..94361ff 100644 --- a/src/components/EmailsList/styles.module.css +++ b/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 {