react / classify date

Viewed 47

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

1 Answers
Related