Use day.js (#1487)

Author: evroon

frontend/src/components/modals/activate_next_round_modal.tsx

@@ -12,6 +12,7 @@ import {
   UpcomingMatchesResponse,
 } from '@openapi';
 import { startNextRound } from '@services/round';
+import dayjs from 'dayjs';
 
 export default function ActivateNextRoundModal({
   tournamentId,
@@ -46,7 +47,7 @@ export default function ActivateNextRoundModal({
             await startNextRound(
               tournamentId,
               stageItem.id,
-              values.adjust_to_time ? new Date() : null
+              values.adjust_to_time ? dayjs() : null
             );
             await swrStagesResponse.mutate();
             await swrUpcomingMatchesResponse.mutate();

frontend/src/components/modals/tournament_modal.tsx

@@ -21,6 +21,7 @@ import { assert_not_none } from '@components/utils/assert';
 import { Club, Tournament, TournamentsResponse } from '@openapi';
 import { getBaseApiUrl, getClubs } from '@services/adapter';
 import { createTournament } from '@services/tournament';
+import dayjs from 'dayjs';
 
 export function TournamentLogo({ tournament }: { tournament: Tournament | null }) {
   if (tournament == null || tournament.logo_path == null) return null;
@@ -45,7 +46,7 @@ function GeneralTournamentForm({
   const { t } = useTranslation();
   const form = useForm({
     initialValues: {
-      start_time: new Date().toISOString(),
+      start_time: dayjs(),
       name: '',
       club_id: null,
       dashboard_public: true,
@@ -123,7 +124,7 @@ function GeneralTournamentForm({
             color="indigo"
             leftSection={<IconCalendarTime size="1.1rem" stroke={1.5} />}
             onClick={() => {
-              form.setFieldValue('start_time', new Date().toISOString());
+              form.setFieldValue('start_time', dayjs());
             }}
           >
             {t('now_button')}

frontend/src/components/utils/match.tsx

@@ -1,4 +1,5 @@
 import { MatchWithDetails } from '@openapi';
+import dayjs from 'dayjs';
 import { formatStageItemInput } from './stage_item_input';
 import { Translator } from './types';
 
@@ -14,25 +15,23 @@ export interface SchedulerSettings {
 }
 
 export function getMatchStartTime(match: MatchWithDetails) {
-  return new Date(match.start_time || '');
+  return dayjs(match.start_time || '');
 }
 
 export function getMatchEndTime(match: MatchWithDetails) {
-  return new Date(
-    getMatchStartTime(match).getTime() + 60000 * (match.duration_minutes + match.margin_minutes)
-  );
+  return getMatchStartTime(match).add(match.duration_minutes + match.margin_minutes, 'minutes');
 }
 
 export function isMatchHappening(match: MatchWithDetails) {
-  return getMatchStartTime(match) < new Date() && getMatchEndTime(match) > new Date();
+  return getMatchStartTime(match) < dayjs() && getMatchEndTime(match) > dayjs();
 }
 
 export function isMatchInTheFutureOrPresent(match: MatchWithDetails) {
-  return getMatchEndTime(match) > new Date();
+  return getMatchEndTime(match) > dayjs();
 }
 
 export function isMatchInTheFuture(match: MatchWithDetails) {
-  return getMatchStartTime(match) > new Date();
+  return getMatchStartTime(match) > dayjs();
 }
 
 export function formatMatchInput1(

frontend/src/components/utils/util.tsx

@@ -9,32 +9,6 @@ export function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-function getTodayAtMidnight() {
-  const d = new Date();
-  d.setHours(0, 0, 0, 0);
-  return d;
-}
-
-export function getDefaultTimeRange(selectMultipleDates: boolean) {
-  const maxDate = getTodayAtMidnight();
-  const minDate = getTodayAtMidnight();
-
-  let offset = 1;
-  if (minDate.getDay() === 0) {
-    offset = 2;
-  } else if (minDate.getDay() === 1) {
-    offset = 3;
-  }
-
-  minDate.setDate(minDate.getDate() - offset);
-
-  if (!selectMultipleDates) {
-    maxDate.setDate(minDate.getDate());
-  }
-
-  return [minDate, maxDate];
-}
-
 export function getTournamentIdFromRouter() {
   const params = useParams();
   const { id: idString }: any = params;

frontend/src/pages/tournaments/[id]/settings.tsx

@@ -44,6 +44,7 @@ import {
   unarchiveTournament,
   updateTournament,
 } from '@services/tournament';
+import dayjs from 'dayjs';
 
 export function TournamentLogo({ tournament }: { tournament: Tournament | null }) {
   if (tournament == null || tournament.logo_path == null) return null;
@@ -126,7 +127,7 @@ function GeneralTournamentForm({
 
   const form = useForm({
     initialValues: {
-      start_time: new Date(tournament.start_time),
+      start_time: dayjs(tournament.start_time),
       name: tournament.name,
       club_id: `${tournament.club_id}`,
       dashboard_public: tournament.dashboard_public,
@@ -202,7 +203,7 @@ function GeneralTournamentForm({
               color="indigo"
               leftSection={<IconCalendarTime size="1.1rem" stroke={1.5} />}
               onClick={() => {
-                form.setFieldValue('start_time', new Date());
+                form.setFieldValue('start_time', dayjs());
               }}
             >
               {t('set_to_new_button')}

frontend/src/services/adapter.tsx

@@ -21,6 +21,7 @@ import {
   UpcomingMatchesResponse,
   UserPublicResponse,
 } from '@openapi';
+import dayjs from 'dayjs';
 import { getLogin, performLogout, tokenPresent } from './local_storage';
 
 export function handleRequestError(response: AxiosError) {
@@ -100,7 +101,7 @@ function getTimeState() {
   // Used to force a refresh on SWRResponse, even when the response stays the same.
   // For example, when the page layout depends on time, but the response contains
   // timestamps that don't change, this is necessary.
-  return { time: new Date() };
+  return { time: dayjs() };
 }
 
 const fetcher = (url: string) =>

frontend/src/services/round.tsx

@@ -1,3 +1,4 @@
+import { Dayjs } from 'dayjs';
 import { createAxios, handleRequestError } from './adapter';
 
 export async function createRound(tournament_id: number, stage_item_id: number) {
@@ -28,7 +29,7 @@ export async function updateRound(
 export async function startNextRound(
   tournament_id: number,
   stage_item_id: number,
-  adjust_to_time: Date | null
+  adjust_to_time: Dayjs | null
 ) {
   return createAxios()
     .post(`tournaments/${tournament_id}/stage_items/${stage_item_id}/start_next_round`, {

frontend/src/services/tournament.tsx

@@ -1,3 +1,4 @@
+import { Dayjs } from 'dayjs';
 import { createAxios, handleRequestError } from './adapter';
 
 export async function createTournament(
@@ -7,7 +8,7 @@ export async function createTournament(
   dashboard_endpoint: string,
   players_can_be_in_multiple_teams: boolean,
   auto_assign_courts: boolean,
-  start_time: string,
+  start_time: Dayjs,
   duration_minutes: number,
   margin_minutes: number
 ) {