I get dat from backend and I should classify these data according to creation date( today, yesterday, other).
I am using typescript react with ant design.
My code is working but I believe that there is a clean and better way to do achieve this feature
Here is my code:
import React, { useEffect, useState } from 'react';
import styles from './app.module.scss';
import { List } from 'antd';
import { getDataList } from '../../services';
import { Case } from '../../interfaces/Case';
import moment from 'moment';
import 'moment/locale/ar';
const App = () => {
const [todayData, setTodayData] = useState<Case[]>([]);
const [yesterdayData, setYesterdayData] = useState<Case[]>([]);
const [data, setData] = useState<Case[]>([]);
moment.locale('ar')
let todaysDate = new Date();
let yesterdayDate = new Date(todaysDate);
yesterdayDate.setDate(todaysDate.getDate() - 1);
const today = moment(todaysDate).locale('ar').format('dddd, DD MMM');
const yesterday = moment(yesterdayDate).locale('ar').format('dddd, DD MMM');
useEffect(() => {
getDataList()
.then((res) => {
const todayList = res.data.filter(function (data: Case) {
return moment(data.createdAt).locale('ar').format('dddd, DD MMM') === today;
});
const yesterdayList = res.data.filter(function (data: Case) {
return moment(data.createdAt).locale('ar').format('dddd, DD MMM') === yesterday;
});
const list = res.data.filter(function (data: Case) {
return data.createdAt !== today && data.createdAt !== yesterday;
});
setTodayData(todayList);
setYesterdayData(yesterdayList);
setData(list);
})
.catch((error) => {
});
}, []);
return (
<>
<List
className={styles['today_style']}
dataSource={todayData}
renderItem={(item) => (
<List.Item>
<h1> Hiiii today {item.createdAt} </h1>>
</List.Item>
)}
/>
<List
className={styles['yesterday_style']}
dataSource={yesterdayData}
renderItem={(item) => (
<List.Item>
<h1> Hiiii yesterday {item.createdAt} </h1>>
</List.Item>
)}
/>
<List
className={styles['style']}
dataSource={data}
renderItem={(item) => (
<List.Item>
<h1> Hiiii {item.createdAt} </h1>>
</List.Item>
)}
/>
</>
);
};
export default App;
any suggestions would be helpful, thank you