We Keep Coding

Pinia : state change by It self [duplicate]

This question already has answers here:
Javascript date variable assignment
(9 answers)
Closed 10 days ago.
G'day,
I would like to have 3 elements :
Current Date (to display current month)
current date less 1 month (to display the month before)
current date plus 1 month (to display the next month)
I calculate the 2 others months in getter, but when I calc my "lastmonth", it change the selectedMonth value in getter environment :
my code :
import { defineStore } from "pinia";
import type {
agendaState,
} from "#/myApp/interfaces";
export const useAgenda = defineStore("useAgenda", {
state: (): agendaState => ({
selectedMonth: new Date(),
lastMonth: new Date(),
nextMonth: new Date(),
}),
getters: {
lastMonthCalc: (state: agendaState): Date => {
console.log("selectedMonth before : ", state.selectedMonth);
const myDate = state.selectedMonth;
state.lastMonth = myDate;
state.lastMonth = new Date(
state.lastMonth.setMonth(state.lastMonth.getMonth() - 1)
);
console.log("lastMonth after : ", state.lastMonth);
return state.lastMonth;
},
nextMonthCalc: (state: agendaState): Date => {
console.log("selectedMonth before : ", state.selectedMonth);
const theDate = state.selectedMonth;
state.nextMonth = theDate;
state.nextMonth = new Date(
state.nextMonth.setMonth(state.nextMonth.getMonth() + 1)
);
console.log("nextMonth after : ", state.nextMonth);
return state.nextMonth;
},
},
});
The VueJS plugin in chrome display :
My console log looks like (in the chrome console) :
And I would like to have :
selectedMonth = Thu Feb 09 2023 11:05:41 GMT+0100 (heure normale d’Europe centrale),
lastMonth: Mon Jan 09 2023 11:05:41 GMT+0100 (heure normale d’Europe centrale),
nextMonth: Thu Mar 09 2023 11:05:41 GMT+0100 (heure normale d’Europe centrale),
Do you know why ? What is my mistake ?
I try a lot of things but nothing workss.

I find the solution .... the good code is this one :
import { defineStore } from "pinia";
import type {
agendaState,
} from "#/interfaces";
export const useAgenda = defineStore("useAgenda", {
state: (): agendaState => ({
selectedMonth: new Date(),
}),
getters: {
lastMonth: (state: agendaState): Date => {
const myDate = new Date(state.selectedMonth);
new Date(
myDate.setMonth(myDate.getMonth() - 1)
);
return myDate;
},
nextMonth: (state: agendaState): Date => {
const theDate = new Date(state.selectedMonth);
new Date(
theDate.setMonth(theDate.getMonth() + 1)
);
return theDate;
},
},
});
Thanks to my cat to show me what is the point so I change the code for this last version !!!!

How to get the date between the from date and to date?

I'm working on DayPicker to get all the range dates, but I couldn't have any good idea of knowing the dates between the start date and end date.
import { DateRange, DayPicker } from 'react-day-picker'
const [range, setRange] = useState<DateRange | undefined>()
useEffect(() => {
if(range && range.from && range.to) {
console.log('range.from', range.from)
console.log('range.to', range.to)
// range.from Mon Aug 01 2022 00:00:00 GMT-0700 (Pacific Daylight Time)
// range.to Sat Aug 06 2022 00:00:00 GMT-0700 (Pacific Daylight Time)
// I want get 8/1, 8/2, 8/3, 8/4, 8/5 as string data
}
}, [range])
return (
<DayPicker
mode="range"
defaultMonth={new Date()}
selected={range}
onSelect={setRange}
/>
)

Use date-fns and create a function.
const getDatesInRange = (startDate: Date, numberOfDays: number) => {
const dates: Date[] = [];
[...Array(numberOfDays + 1)].forEach((_, i) => {
dates.push(addDays(startDate, i));
});
console.log(dates); // For debugging purposes
return dates;
};
Add an array state const [dateRangeArray, setDateRangeArray] = useState<Date[]>(); and and we update the useEffect.
Here is the full code:
import { addDays, differenceInDays } from 'date-fns';
// inside the component
const [range, setRange] = useState<DateRange | undefined>();
const [dateRangeArray, setDateRangeArray] = useState<Date[]>();
const getDatesInRange = (startDate: Date, numberOfDays: number) => {
const dates: Date[] = [];
[...Array(numberOfDays + 1)].forEach((_, i) => {
dates.push(addDays(startDate, i));
});
console.log(dates); // For debugging purposes
return dates;
};
useEffect(() => {
if (range && range.to && range.from && dateRangeArray === undefined) {
let daysDiff = differenceInDays(range.to, range?.from);
setDateRangeArray(getDatesInRange(range.from, daysDiff));
}
if (range && range.from && range.to) {
console.log('range.from', range.from);
console.log('range.to', range.to);
// range.from Mon Aug 01 2022 00:00:00 GMT-0700 (Pacific Daylight Time)
// range.to Sat Aug 06 2022 00:00:00 GMT-0700 (Pacific Daylight Time)
// I want get 8/1, 8/2, 8/3, 8/4, 8/5 as string data
}
}, [range]);
return (
<div>
<DayPicker mode='range' defaultMonth={new Date()} selected={range} onSelect={setRange} />
</div>
);

Compare two UTC dates with date-fns

I'm trying to compare two dates in UTC format with date-fns, but I'm not getting it. The two values ​​look the same, but the isEquals() function returns false for comparison.
The purpose of the code below is to search for the schedules that are marked and check if they fit the times of the array range, if there is a compatible schedule, it returns the object by inserting it in the constant date
import React, { useState, useEffect } from 'react';
import { utcToZonedTime } from 'date-fns-tz';
import {
format,
setHours,
setMinutes,
setSeconds,
isBefore,
isEqual,
parseISO,
} from 'date-fns';
import enUS from 'date-fns/locale/en-US';
import api from '~/services/api';
const range = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
export default function Dashboard() {
const [date, setDate] = useState(new Date());
useEffect(() => {
async function loadSchedule() {
const response = await api.get('schedule', {
params: { date },
});
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const data = range.map((hour) => {
const checkDate = setSeconds(setMinutes(setHours(date, hour), 0), 0);
const compareDate = utcToZonedTime(checkDate, timezone);
return {
time: `${hour}:00h`,
past: isBefore(compareDate, new Date()),
appointment: response.data.find((appoint) =>
isEqual(parseISO(appoint.date), compareDate)
),
};
});
setSchedule(data);
}
loadSchedule();
}, [date]);
}
I made a test code to print the results on the Reactotron and below are the printed values:
console.tron.log(`${isEqual(parseISO(response.data[1].date),
compareDate)}\n
${parseISO(response.data[1].date)}\n${compareDate}`);
Result:
false
Wed Jun 10 2020 19:00:00 GMT-0300 (Brasilia Standard Time)
Wed Jun 10 2020 19:00:00 GMT-0300 (Brasilia Standard Time)
Actual values ​​for each of the dates:
console.tron.log(`${response.data[1].date}\n${compareDate}`);
2020-06-10T22:00:00.000Z
Wed Jun 10 2020 20:00:00 GMT-0300 (Brasilia Standard Time)
But if I print only the value of the compareDate variable, it changes the format:
console.tron.log(compareDate);
2020-06-10T21:00:00.002Z

date-fns's isEqual() function also takes into consideration the milliseconds value, as questioned in the comments.
This information can also be found on date-fns isEqual() docs, in the example:
// Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
var result = isEqual(
new Date(2014, 6, 2, 6, 30, 45, 0),
new Date(2014, 6, 2, 6, 30, 45, 500)
)
// it returns false`
You should import setMilliseconds() from date-fns and also use it in the line where you set checkDate value.

Moment giving wrong result when comparing dates

I am attempting to compare 2 dates and I am getting an error.
These are my functions:
const validateDate = (date: string): Moment => {
return moment(`${moment().year()}/${date}`);
};
export const themes: Theme[] = [{
siteCode: '',
costCenter: '',
theme: 'spring',
bannerImage: 'spring.jpg',
cssOverride: 'springThemeStyles.scss',
endDate: moment(validateDate('6/19')).toDate(),
startDate: moment(validateDate('3/20')).toDate()
}];
export const getActiveTheme = (): any => {
const now = moment().toDate();
console.log(now); // Thu Mar 19 2020 21:56:10 GMT-0600 (Central Standard Time)
console.log(themes[0].startDate); // Fri Mar 20 2020 00:00:00 GMT-0600 (Central Standard Time)
console.log(themes[0].startDate >= now); // true
return themes.map((t: Theme) => {
if (t.startDate >= now) { // this is always true I don't know why
if (t.theme.toLowerCase() === 'spring') {
return require('../../../styles/spring.theme.scss');
}
return null;
}
});
};
I don't get why the condition if (t.startDate >= now) {...} is always true.
Any thoughts?

It is simply because startDate is on the Fri Mar 20 2020 and now is on the Thu Mar 19 2020 so it's clear that startDate >= now should be true
Since you have set your startDate to the 20th, startDate >= now would be false when now would be on 21th

Cannot access an object property in my array map?

I'm not able to access object's properties from my array.
Here is my code:
{
this.props.viewer.messagesByUser.edges.map(edge => {
console.log("chatFriendPopPup id = ", chatFriendPopPup.id)
console.log("receiver['_id'] = ", edge.node.receiver['_id']) // returns undefined
console.log("receiver._id = ", edge.node.receiver._id) // returns undefined
console.log("receiver._id = ", edge.node.receiver)
if (edge.node.receiver._id.toString() === chatFriendPopPup.id.toString()) {
return <li > {
edge.node.body
} - seen: {
edge.node.seen
} < /li>
}
})
}
Receiver has properties like this, but I cannot get ._id
{
_id: 597 f7eb1e5131d5a50e18d14,
updatedAt: 2017 - 07 - 31 T19: 02: 09.035 Z,
createdAt: 2017 - 07 - 31 T19: 02: 09.035 Z,
fullName: 'ria atayde',
email: 'myloves#gmail.com',
}