import React, { useState, useEffect } from "react"; import { Card, Table } from "antd"; import { FaBirthdayCake } from "react-icons/fa"; import { getUsersService } from "../../utils/services"; import { _notification } from "../../utils/_helpers"; const columns = [ { title: "Name", dataIndex: "name", key: "name" }, { title: "Left", dataIndex: "daysLeft", key: "daysLeft", render: daysLeft => `${daysLeft} days` }, { title: "DOB", dataIndex: "dob", key: "dob", render: dob => `${dob.split("T")[0]}` } ]; const SpamDays = () => { let today = new Date(); const [isLoading, setIsLoading] = useState(false); const [users, setUsers] = useState([]); const getBday = obj => { let days; if (obj.dob) { let bday = new Date(obj.dob.split("T")[0]); let bdayThisYear = new Date( today.getFullYear(), bday.getMonth(), bday.getDate() ); today.setHours(0, 0, 0, 0); if (today > bdayThisYear) { bdayThisYear.setFullYear(today.getFullYear() + 1); } let diff = bdayThisYear - today; days = Math.round(diff / 8.64e7); } if (days <= 30) { return { ...obj, daysLeft: days }; } }; useEffect(() => { (async () => { setIsLoading(true); let arr = []; try { let params = { sortBy: "name" }; const { data } = await getUsersService(params); data.forEach(d => { if (getBday(d)) arr.push(getBday(d)); }); setUsers(arr); setIsLoading(false); } catch (err) { _notification("warning", "Error", err.message); } })(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <> <Card style={{ marginTop: "16px" }}> <div style={{ display: "flex", justifyContent: "space-between" }} > <h2 style={{ fontWeight: 700 }}>Spam Days</h2> <span> <FaBirthdayCake style={{ height: "2em", width: "auto" }} /> </span> </div> <hr /> <Table loading={isLoading} dataSource={users} columns={columns} pagination={false} /> </Card> </> ); }; export default SpamDays;