Fix hydration error with rotations component

This commit is contained in:
Kalle
2026-04-21 08:33:19 +03:00
parent b6d0f7fe1c
commit 8b576bc0b4
2 changed files with 8 additions and 10 deletions

View File

@@ -12,7 +12,6 @@ import { useTimeFormat } from "~/hooks/useTimeFormat";
import { shortStageName } from "~/modules/in-game-lists/stage-ids";
import type { RankedModeShort, StageId } from "~/modules/in-game-lists/types";
import {
databaseTimestampNow,
databaseTimestampToDate,
dateToDatabaseTimestamp,
} from "~/utils/dates";
@@ -39,7 +38,7 @@ export function SplatoonRotations() {
const [activeFilter, setActiveFilter] =
React.useState<RotationModeFilter>("ALL");
const nowUnixLive = useNowUnix();
const nowUnixLive = useNowUnix(data.now);
const allInThePast = data.rotations.every(
(rotation) => rotation.endTime <= nowUnixLive,
@@ -48,8 +47,6 @@ export function SplatoonRotations() {
if (allInThePast || data.rotations.length === 0) return null;
const nowUnix = databaseTimestampNow();
const rotationsByType = new Map<
string,
{
@@ -63,8 +60,8 @@ export function SplatoonRotations() {
if (activeFilter !== "ALL" && rotation.mode !== activeFilter) continue;
const isCurrent =
rotation.startTime <= nowUnix && rotation.endTime > nowUnix;
const isNext = rotation.startTime > nowUnix;
rotation.startTime <= nowUnixLive && rotation.endTime > nowUnixLive;
const isNext = rotation.startTime > nowUnixLive;
if (!isCurrent && !isNext) continue;
@@ -130,12 +127,11 @@ export function SplatoonRotations() {
);
}
function useNowUnix() {
const [now, setNow] = React.useState(() =>
dateToDatabaseTimestamp(new Date()),
);
function useNowUnix(initialNow: number) {
const [now, setNow] = React.useState(initialNow);
React.useEffect(() => {
setNow(dateToDatabaseTimestamp(new Date()));
const interval = setInterval(() => {
setNow(dateToDatabaseTimestamp(new Date()));
}, 60_000);

View File

@@ -8,6 +8,7 @@ import * as Seasons from "~/features/mmr/core/Seasons";
import * as QSettingsRepository from "~/features/sendouq-settings/QSettingsRepository.server";
import * as SplatoonRotationRepository from "~/features/splatoon-rotations/SplatoonRotationRepository.server";
import { cache, IN_MILLISECONDS, ttl } from "~/utils/cache.server";
import { databaseTimestampNow } from "~/utils/dates";
import type { SerializeFrom } from "~/utils/remix";
import { discordAvatarUrl, teamPage, userPage } from "~/utils/urls";
import * as ShowcaseTournaments from "../core/ShowcaseTournaments.server";
@@ -44,6 +45,7 @@ export const loader = async () => {
leaderboards,
rotations,
weaponPool,
now: databaseTimestampNow(),
};
};