mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-10-02 16:20:36 -05:00
Fix hydration error with rotations component
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user