Timezone compensation

src/client/src/TournamentCreator.js

@@ -17,11 +17,11 @@ function postTournament(showError, tournamentName, tournamentDescription, tourna
     showError("Tournament description cannot be empty");
     return;
   }
-  if (!tournamentStartDate || tournamentStartDate === "") {
+  if (!tournamentStartDate || tournamentStartDate === "" || tournamentStartDate === 0) {
     showError("Tournament start date cannot be empty");
     return;
   }
-  if (!tournamentEndDate || tournamentEndDate === "") {
+  if (!tournamentEndDate || tournamentEndDate === "" || tournamentEndDate === 0) {
     showError("Tournament end date cannot be empty");
     return;
   }
@@ -75,15 +75,14 @@ function TournamentForm(props) {
     setMaxTeamsExponent(event.target.value);
   }
 
-  const [startTime, setStartTime] = React.useState([new Date(), new Date()]);
+  const [startTime, setStartTime] = React.useState(new Date());
-  const [endTime, setEndTime] = React.useState([new Date(), new Date()]);
+  const [endTime, setEndTime] = React.useState(new Date());
 
   function submitTournament(event) {
     event.preventDefault();
-    console.log(maxTeamsExponent)
     let maxTeams = Math.pow(2, maxTeamsExponent);
-    let tournamentStart = new Date(startTime).toUTCString();
+    let tournamentStart = new Date(startTime).valueOf() - new Date().getTimezoneOffset() * 60000;
-    let tournamentEnd = new Date(endTime).toUTCString();
+    let tournamentEnd = new Date(endTime).valueOf() - new Date().getTimezoneOffset() * 60000;
     postTournament(
       props.showError,
       document.getElementById("nameInput").value,
@@ -92,7 +91,6 @@ function TournamentForm(props) {
       tournamentEnd,
       maxTeams
     );
-    console.log(tournamentStart, tournamentEnd);
   }
 
   const marks = [
@@ -116,10 +114,7 @@ function TournamentForm(props) {
           <Grid item xs={4}>
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DateTimePicker label={"Start Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={startTime}
-              onChange={(newValue) => {
+              onChange={setStartTime}
-                setStartTime(newValue);
-                // console.log(new Date(newValue).toUTCString());
-              }}
               renderInput={(params) => <TextField id="startDatePicker" {...params} sx={{margin: "0 2.5%"}} />}
             />
             </LocalizationProvider>
@@ -128,10 +123,7 @@ function TournamentForm(props) {
           
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DateTimePicker label={"End Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={endTime}
-              onChange={(newValue) => {
+              onChange={setEndTime}
-                setEndTime(newValue);
-                // console.log(new Date(newValue).toUTCString());
-              }}
               renderInput={(params) => <TextField id="endDatePicker" {...params} sx={{margin: "0 2.5%"}} />}
             />
           </LocalizationProvider>

src/client/src/TournamentManager.js

@@ -49,14 +49,13 @@ let submitChanges = curryTournamentId => event => {
     return;
   }
 
-  tournamentStartDate = new Date(tournamentStartDate).toUTCString();
+  tournamentStartDate = new Date(tournamentStartDate).valueOf() - new Date().getTimezoneOffset() * 60 * 1000;
-  tournamentEndDate = new Date(tournamentEndDate).toUTCString();
+  tournamentEndDate = new Date(tournamentEndDate).valueOf() - new Date().getTimezoneOffset() * 60 * 1000;
 
 
   let formData = new FormData();
   formData.append("name", tournamentName);
   formData.append("description", tournamentDescription);
-  // formData.append("image", tournamentImageFile);
   formData.append("startDate", tournamentStartDate);
   formData.append("endDate", tournamentEndDate);
   // formData.append("teamLimit", tournamentMaxTeams);
@@ -104,8 +103,8 @@ let deleteTournament = tournamentId => event => {
 
 function ManageTournament(props) {
 
-  const [startTime, setStartTime] = React.useState([new Date(),null]);
+  const [startTime, setStartTime] = React.useState(new Date());
-  const [endTime, setEndTime] = React.useState([new Date(),null]);
+  const [endTime, setEndTime] = React.useState(new Date());
   
   React.useEffect(() => {
     fetch(
@@ -119,11 +118,18 @@ function ManageTournament(props) {
         
         document.getElementById("editName").value = data.data.name;
         document.getElementById("editDesc").value = data.data.description;
-        setStartTime(data.data.startTime.slice(0, 16));
+        // Get the time from the server, add the local timezone offset and set the input fields
-        setEndTime(data.data.endTime.slice(0, 16));
+        let startDate = new Date(data.data.startTime.slice(0, 16));
+        let endDate = new Date(data.data.endTime.slice(0, 16));
+        let localTimeOffset = new Date().getTimezoneOffset() * 60*1000; // Minutes -> Milliseconds
+        startDate = new Date(startDate.getTime() - localTimeOffset);
+        endDate = new Date(endDate.getTime() - localTimeOffset);
+
+        setStartTime(startDate);
+        setEndTime(endDate);
       })
       .catch((err) => showError(err));
-  }, [endTime, props.tournamentId, startTime]);
+  }, [props.tournamentId]);
 
   return (
     <>
@@ -136,10 +142,7 @@ function ManageTournament(props) {
             <Grid item xs={4}>
               <LocalizationProvider dateAdapter={AdapterDateFns}>
                 <DateTimePicker label={"Start Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={startTime}
-                  onChange={(newValue) => {
+                  onChange={setStartTime}
-                    setStartTime(newValue);
-                    console.log(new Date(newValue).toUTCString());
-                  }}
                   renderInput={(params) => <TextField id="editStartDate" {...params} />}
                 />
               </LocalizationProvider>
@@ -147,19 +150,13 @@ function ManageTournament(props) {
               <Grid item xs={4}>
               <LocalizationProvider dateAdapter={AdapterDateFns}>
                 <DateTimePicker label={"End Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm:" inputFormat="yyyy-MM-dd HH:mm" value={endTime}             
-                  onChange={(newValue) => {
+                  onChange={setEndTime}
-                    setEndTime(newValue);
-                    console.log(new Date(newValue).toUTCString());
-                  }}
                   renderInput={(params) => <TextField id="editEndDate" {...params} />}
                 />
               </LocalizationProvider>
               </Grid>
             </Grid>
         </Box>
-          {/* <TextField type="datetime-local" id="editStartDate" label="Edit Start Time" InputLabelProps={{shrink: true,}}/>
-          <TextField type="datetime-local" id="editEndDate" label="Edit End Time" InputLabelProps={{shrink: true}}/> */}
-
           <Button type="submit" variant="contained" onClick={submitChanges(props.tournamentId)} color="primary" >
             Save Tournament Details
           </Button>   
@@ -175,30 +172,6 @@ function showError(error) {
   console.error(error);
 }
 
-function ClipboardButton(props) {
-  const [open, setOpen] = React.useState(false);
-  function copyString() {
-    navigator.clipboard.writeText(props.clipboardContent || "");
-    setOpen(true);
-  }
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') { return }
-    setOpen(false);
-  };
-  const closeAction = <>
-    <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
-      <CloseIcon fontSize="small" />
-    </IconButton>
-  </>
-    
-  return (
-    <>
-      <Button onClick={copyString} variant="outlined" color="primary" sx={{margin: "auto 5px"}} >Copy {props.name}</Button>
-      <Snackbar open={open} autoHideDuration={1500} onClose={handleClose} message={props.name + " copied to clipboard"} action={closeAction} />
-    </>
-  );
-}
-
 export default function TournamentManager(props) {
   const { tournamentId } = useParams();
 
@@ -221,8 +194,6 @@ export default function TournamentManager(props) {
         <Button variant="contained" color="error" onClick={deleteTournament(tournamentId)} sx={{margin: "auto 5px"}} endIcon={<DeleteIcon />}>
           Delete Tournament
         </Button>
-        <ClipboardButton clipboardContent={"https://discord.gg/asura"} name="Discord Invite Link" />
-        <ClipboardButton clipboardContent={"https://asura.feal.no/tournament/" + tournamentId} name="Tournament Link" />
       </Box>
     </Paper>
 

src/client/src/components/TournamentBar.js

@@ -1,7 +1,32 @@
 import * as React from "react";
 import { useParams } from "react-router-dom";
 import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
-import { Stack, Paper, Typography, Box, Button, Grid } from "@mui/material"
+import { Stack, Paper, Typography, Box, Button, Grid, Snackbar, IconButton } from "@mui/material"
+import CloseIcon from '@mui/icons-material/Close';
+
+function ClipboardButton(props) {
+  const [open, setOpen] = React.useState(false);
+  function copyString() {
+    navigator.clipboard.writeText(props.clipboardContent || "");
+    setOpen(true);
+  }
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') { return }
+    setOpen(false);
+  };
+  const closeAction = <>
+    <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+      <CloseIcon fontSize="small" />
+    </IconButton>
+  </>
+    
+  return (
+    <>
+      <Button onClick={copyString} variant="outlined" color="primary" sx={{margin: "auto 5px"}} >Copy {props.name}</Button>
+      <Snackbar open={open} autoHideDuration={1500} onClose={handleClose} message={props.name + " copied to clipboard"} action={closeAction} />
+    </>
+  );
+}
 
 function ButtonLink(props) {
   return (
@@ -14,10 +39,17 @@ function ButtonLink(props) {
 export default function TournamentBar(props) {
     const { tournamentId } = useParams();
     return (
-        <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
+        <Paper sx={{width: "90vw", margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center"> 
+          <Stack direction="row" paddingTop={'0.5%'}>
             <ButtonLink targetPath="" tournamentId={tournamentId} activeTitle={props.pageTitle} title="View Tournament" />
             <ButtonLink targetPath="/manage" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Edit Tournament" />
             <ButtonLink targetPath="/teams" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Manage Teams" />
+          </Stack>
+          <Stack direction="row" paddingBottom={'0.5%'}>
+            <ClipboardButton clipboardContent={"https://discord.gg/asura"} name="Discord Invite Link" />
+            <ClipboardButton clipboardContent={"https://asura.feal.no/tournament/" + tournamentId} name="Tournament Link" />
+          </Stack>
         </Paper>
+
     )
 }