From 32d1dca9b663440e5cb739e487544b5a7c9efa1c Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Fri, 25 Aug 2023 04:01:05 +0400
Subject: [PATCH] feat: add price list page

---
 src/components/EmailsList/index.tsx | 61 +++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/components/EmailsList/index.tsx

diff --git a/src/components/EmailsList/index.tsx b/src/components/EmailsList/index.tsx
new file mode 100644
index 0000000..6cb100d
--- /dev/null
+++ b/src/components/EmailsList/index.tsx
@@ -0,0 +1,61 @@
+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 emails: IEmailItem[] = []
+
+for (let i = 0; i < 25; i++) {
+    const sublist = []
+    for (let j = 0; j < 4; j++) {
+        sublist.push({
+            email: getRandomName(),
+            price: 9
+        })
+    }
+    sublist[getRandomArbitrary(0, 4)].price = [5, 13.67][getRandomArbitrary(0, 2)]
+    emails.push(...sublist)
+}
+
+function EmailsList(): JSX.Element {
+  const { t } = useTranslation()
+  const [countUsers, setCountUsers] = useState(752)
+  const itemsRef = useRef<HTMLDivElement[]>([]);
+  let elementIdx = 0
+
+  useEffect(() => {
+    const randomDelay = getRandomArbitrary(3000, 5000)
+    const countUsersTimeOut = setTimeout(() => {
+        setCountUsers((prevState) => prevState + 1)
+    }, randomDelay)
+    return () => clearTimeout(countUsersTimeOut)
+  }, [countUsers, elementIdx])
+
+  useEffect(() => {
+    const itemsRefInterval = setInterval(() => {
+        
+        if (itemsRef.current[elementIdx]?.style) {
+            itemsRef.current[elementIdx].className = styles.hidden
+        }
+        elementIdx++
+    }, 3000)
+    return () => clearTimeout(itemsRefInterval)
+  }, [elementIdx])
+  
+
+  return (
+    <div className={styles.container}>
+        <span className={styles['title']}>{t('people_joined_today', { countPeoples: <strong>{countUsers}</strong> })}</span>
+        <div className={styles['emails-container']}>
+            {emails.map(({email, price}, idx) => (
+                <div ref={(el: HTMLDivElement) => itemsRef.current[idx] = el} key={idx}>
+                    <EmailItem email={email} price={price} />
+                </div>
+            ))}
+        </div>
+    </div>
+  )
+}
+
+export default EmailsList