fix: month grouping error in timeline page (#2861)

This commit is contained in:
Wen Sun 2024-01-30 08:56:03 +09:00 committed by GitHub
parent a16bde23f7
commit 50f7f131ea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 20 additions and 6 deletions

View file

@ -1,6 +1,6 @@
import { Tooltip } from "@mui/joy";
import classNames from "classnames";
import { getNormalizedDateString } from "@/helpers/datetime";
import { getNormalizedDateString, getDateWithOffset } from "@/helpers/datetime";
interface Props {
// Format: 2021-1
@ -26,8 +26,8 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
const ActivityCalendar = (props: Props) => {
const { month: monthStr, data, onClick } = props;
const year = new Date(monthStr).getFullYear();
const month = new Date(monthStr).getMonth() + 1;
const year = new Date(monthStr).getUTCFullYear();
const month = new Date(monthStr).getUTCMonth() + 1;
const dayInMonth = new Date(year, month, 0).getDate();
const firstDay = new Date(year, month - 1, 1).getDay();
const lastDay = new Date(year, month - 1, dayInMonth).getDay();
@ -47,7 +47,9 @@ const ActivityCalendar = (props: Props) => {
return (
<div className={classNames("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
{days.map((day, index) => {
const date = getNormalizedDateString(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`);
const date = getNormalizedDateString(
getDateWithOffset(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`),
);
const count = data[date] || 0;
const isToday = new Date().toDateString() === new Date(date).toDateString();
const tooltipText = count ? `${count} memos in ${date}` : date;

View file

@ -169,3 +169,15 @@ export function isFutureDate(t?: Date | number | string): boolean {
const timestamp = getTimeStampByDate(t ? t : Date.now());
return timestamp > Date.now();
}
/**
* Calculates a new Date object by adjusting the provided date, timestamp, or date string
* based on the current timezone offset.
*
* @param t - The input date, timestamp, or date string (optional). If not provided,
* the current date and time will be used.
* @returns A new Date object adjusted by the current timezone offset.
*/
export function getDateWithOffset(t?: Date | number | string): Date {
return new Date(getTimeStampByDate(t) + new Date().getTimezoneOffset() * 60 * 1000);
}

View file

@ -148,9 +148,9 @@ const Timeline = () => {
<div className={classNames("flex shrink-0", md ? "flex-col w-40 pr-4 pl-2 pb-8" : "flex-row w-full pl-1 mt-2 mb-2")}>
<div className={classNames("w-full flex flex-col", md && "mt-4 mb-2")}>
<span className="font-medium text-3xl leading-none mb-1">
{new Date(group.month).toLocaleString(i18n.language, { month: "short" })}
{new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
</span>
<span className="opacity-60">{new Date(group.month).getFullYear()}</span>
<span className="opacity-60">{new Date(group.month).getUTCFullYear()}</span>
<span className="text-xs opacity-40">Total: {sum(Object.values(group.data))}</span>
</div>
<ActivityCalendar month={group.month} data={group.data} onClick={(date) => setSelectedDay(date)} />