I am trying making basic Todo list. I have created basic React todo list and save it to my database. I set dueDatetime query where it sets the time. I made query like this:
{
“overdue”: [],
“today”: [],
“tomorrow”: [],
rest of the upcoming dates
}
I have made one helper function where it will get the data. Display the length of the tasks. My Overdue, today and tomorrow task display as expected but my rest of the upcoming tasks length does work properly. The result expected like this image. But I am getting this image. I filter the rest of the date data then used reduce method and try to get same dates tasks length but my logic does not work. I don't what I am making mistake. I think My reduce function logic does not work. I share my code in CodesandBox
My Helper function
export const groupByDates = (data) => {
const oneDay = 24 * 3600 * 1000;
let today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
today = today.getTime();
const overdue = data.filter(
(task) => new Date(task).getTime() < today
);
const todayTask = data.filter((task) => {
const due = new Date(task).getTime();
return due >= today && due < today + oneDay;
});
const tomorrow = data.filter((task) => {
const due = new Date(task).getTime();
return due >= today + oneDay && due < today + oneDay * 2;
});
const rest = data.filter( // this logic does not work
(task) => new Date(task).getTime() >= today + oneDay * 2
).reduce((groups, d) => {
const key = d?.toString().slice(0, 15);
console.log(key);
if (!groups[key]) {
groups[key] = [];
}
groups[key].push(d);
return groups;
}, {});
return { overdue, today: todayTask, tomorrow, rest: Object.keys(rest) };
};
This is my frontend code.`**
import React from "react";
import "./styles.css";
import date from "./Date.json";
import styled from "styled-components";
export default function App() {
const signledate = date?.data?.map((i) => {
return new Date(i.dueDatetime);
});
// console.log(signledate);
const datadate = date?.data?.slice(0, 1)?.map((i) => {
return i.dueDatetime;
});
console.log(signledate);
console.log(new Date());
return (
<Container>
<Card>
<Text>You have 10 overdue</Text>
</Card>
<Card>
<Text>Today you have 6 tasks</Text>
</Card>
<Card>
<Text>Tomorrow you have 20 tasks</Text>
</Card>
<Card>
<Text>Jan 23 5 task </Text>
</Card>
<Card>
<Text>Jan 24 2 task </Text>
</Card>
</Container>
);
}
const Container = styled.div`
display: flex;
flex-direction: row;
`;
const Card = styled.div`
background-color: lightblue;
height: 100px;
width: 300px;
border-radius: 20px;
margin: 10px;
`;
const Text = styled.text`
font-size: 12px;
padding: 20px;
`;
This is my dymmydata in json
{
"data": [
{
"dueDatetime": "2021-01-21T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-03-15T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-22T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-23T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-25T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-04-15T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-04-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-04-26T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-22T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-05-15T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-05-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-05-24T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-02-07T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-22T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-06-17T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-21T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-07-05T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-07-15T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-07-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-07-19T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-08-02T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-08-15T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-22T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-08-16T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-08-30T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-09-13T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-09-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-09-16T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-23T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-21T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-10-15T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-10-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-10-25T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-11-08T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-22T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-11-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-11-22T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-12-06T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-12-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-12-16T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2019-12-20T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-01-03T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-01-15T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-01-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-01-17T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-01-31T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-02-14T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-02-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-02-17T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-22T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-03-13T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-03-14T22:28:14Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-03-15T16:30:11.007867Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2020-03-16T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-27T13:37:56.587949Z",
"repeatInformation": {
"type": "weeks",
"interval": 2,
"day": null,
"annualStart": null,
"annualEnd": null
}
},
{
"dueDatetime": "2021-01-23T14:30:22.149836Z",
"repeatInformation": {
"type": "months",
"interval": 1,
"day": "any weekday",
"annualStart": null,
"annualEnd": null
}
}
]
}
Please try following code:
Date.js
export const groupByDates = (data) => {
const oneDay = 24 * 3600 * 1000;
let today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
today = today.getTime();
const overdue = data.filter((task) => new Date(task).getTime() < today);
const todayTask = data.filter((task) => {
const due = new Date(task).getTime();
return due >= today && due < today + oneDay;
});
const tomorrow = data.filter((task) => {
const due = new Date(task).getTime();
return due >= today + oneDay && due < today + oneDay * 2;
});
const rest = data
.filter((task) => new Date(task).getTime() >= today + oneDay * 2)
.reduce((groups, d) => {
const key = d?.toString().slice(0, 15);
console.log(key);
if (!groups[key]) {
groups[key] = [];
}
groups[key].push(d);
return groups;
}, {});
return { overdue, today: todayTask, tomorrow, rest: rest };
};
App.js
import React from "react";
import date from "./date.json";
import { groupByDates } from "./Date";
import styled from "styled-components";
export default function App() {
const dummyData = date?.data?.map((i) => i.dueDatetime);
const groupedDate = groupByDates(dummyData);
return (
<Container>
<Card>
<Text>You have {groupedDate.overdue.length} overdue</Text>
</Card>
<Card>
<Text>Today you have {groupedDate.today.length} tasks</Text>
</Card>
<Card>
<Text>Tomorrow you have {groupedDate.tomorrow.length} tasks</Text>
</Card>
{Object.keys(groupedDate.rest).map((item, index) => {
return (
<Card key={index}>
<Text>{item}</Text>
<Text>{groupedDate?.rest[item].length}</Text>
</Card>
);
})}
</Container>
);
}