@material-ui/pickers#DateTimePicker JavaScript Examples

DateTimepicker = ({ ...props }) => {
  const [clearedDate, handleClearedDateChange] = React.useState(null);
  const [selectedDate, setSelectedDate] = React.useState();

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DateTimePicker
        clearable
        label={props.label}
        error={props.error ? props.error : false}
        helperText={props.helperText ? props.helperText : null}
        inputVariant="outlined"
        value={props.value ? props.value : clearedDate}
        onChange={props.onChange}
        format={props.format}
        fullwidth = {true}
      />
    </MuiPickersUtilsProvider>
  );
}

CustomDateTimePicker = props => {
  return (
    <MuiThemeProvider theme={customTheme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DateTimePicker
          label={props.label}
          inputVariant="outlined"
          value={props.value}
          placeholder={props.placeholder}
          onChange={props.onChange}
          helperText={props.helperText}
          {...props}
          fullWidth
        />
      </MuiPickersUtilsProvider>
    </MuiThemeProvider>
  );
}

TimeDialog = props => {
  const classes = useStyles();

  const {
    open, onClose, onChange, applicationId, isNew, time: timeO, note: noteO, type: typeO, timeLogId,
  } = props;
  const [type, setType] = useState(isNew ? '' : typeO);
  const [note, setNote] = useState(isNew ? '' : noteO);
  const formatedTime = isNew ? new Date() : new Date(timeO);
  const [time, setTime] = useState(formatedTime);
  const [error, setError] = useState('');

  const handleSubmit = (evt) => {
    evt.preventDefault();
    if (isNew) {
      APIService.addTimeLog(applicationId, type, time, note)
        .then(onChange)
        .catch(() => setError('Error in adding time logs'));
    } else {
      APIService.updateTimeLog(applicationId, timeLogId, type, time, note)
        .then(onChange)
        .catch(() => setError('Error in updating time logs'));
    }
  };

  return (
    <Dialog open={open} onClose={onClose} aria-labelledby="Add time log">
      <DialogTitle style={{ marginLeft: '8px' }} id="add-title">Add Time log</DialogTitle>
      <DialogContent>
        <form className={classes.form} onSubmit={handleSubmit}>

          <DropDownMenu
            label="Type"
            value={type}
            onChange={e => setType(e.target.value)}
            options={TIMELOG_TYPES}
          />
          <DateTimePicker
            style={{ margin: '8px' }}
            label="Event time"
            inputVariant="outlined"
            variant="inline"
            value={time}
            onChange={setTime}
          />
          <Input
            type="text"
            label="Note"
            multiline
            rows="6"
            onChange={e => setNote(e.target.value)}
            value={note}
          />
          <Button type="submit">{isNew ? 'Add' : 'Update'}</Button>
          <p className={classes.error}>
            {error}
          </p>
        </form>
      </DialogContent>
    </Dialog>
  );
}

export default function Expenses() {
    const classes = useStyles()
    const [redirectToSignin, setRedirectToSignin] = useState(false)
    const [saved, setSaved] = useState(false)
    const [error, setError] = useState('')
    const [expenses, setExpenses] = useState([])
    const jwt = auth.isAuthenticated()
    const date = new Date(), y = date.getFullYear(), m = date.getMonth()
    const [firstDay, setFirstDay] = useState(new Date(y, m, 1))
    const [lastDay, setLastDay] = useState(new Date(y, m + 1, 0))
    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal
        listByUser({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setRedirectToSignin(true)
          } else {
            setExpenses(data)
          }
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])
    const handleSearchFieldChange = name => date => {
        if(name=='firstDay'){
            setFirstDay(date)
        }else{
            setLastDay(date)
        }
    }
    const searchClicked = () => {
        listByUser({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}).then((data) => {
            if (data.error) {
              setRedirectToSignin(true)
            } else {
              setExpenses(data)
            }
        })
    }
    const handleChange = (name, index) => event => {
        const updatedExpenses = [...expenses]
        updatedExpenses[index][name] = event.target.value
        setExpenses(updatedExpenses)
    }
    const handleDateChange = index => date => {
        const updatedExpenses = [...expenses]
        updatedExpenses[index].incurred_on = date
        setExpenses(updatedExpenses)
      }
    const clickUpdate = (index) => {
        let expense = expenses[index]
        update({
            expenseId: expense._id
          }, {
            t: jwt.token
          }, expense).then((data) => {
            if (data.error) {
              setError(data.error)
            } else {
              setSaved(true)
              setTimeout(()=>{setSaved(false)}, 3000)
            }
        })
    }
    const removeExpense = (expense) => {
        const updatedExpenses = [...expenses]
        const index = updatedExpenses.indexOf(expense)
        updatedExpenses.splice(index, 1)
        setExpenses(updatedExpenses)
    }
    
    if (redirectToSignin) {
        return <Redirect to='/signin'/>
    }
    return (
      <div className={classes.root}>
      <div className={classes.search}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DatePicker
                    disableFuture
                    format="dd/MM/yyyy"
                    label="SHOWING RECORDS FROM"
                    className={classes.textField}
                    views={["year", "month", "date"]}
                    value={firstDay}
                    onChange={handleSearchFieldChange('firstDay')}
                />
                <DatePicker
                    format="dd/MM/yyyy"
                    label="TO"
                    className={classes.textField}
                    views={["year", "month", "date"]}
                    value={lastDay}
                    onChange={handleSearchFieldChange('lastDay')}
                />      
        </MuiPickersUtilsProvider>
        <Button variant="contained" color="secondary" onClick={searchClicked}>GO</Button>
        </div>
        
      {expenses.map((expense, index) => {
            return   <span key={index}>
        <ExpansionPanel className={classes.panel}>
          <ExpansionPanelSummary
            expandIcon={<Edit />}
          >
            <div className={classes.info}>
                <Typography className={classes.amount}>$ {expense.amount}</Typography><Divider style={{marginTop: 4, marginBottom: 4}}/>
                <Typography>
                    {expense.category}
                </Typography>
                <Typography className={classes.date}>{new Date(expense.incurred_on).toLocaleDateString()}</Typography>  
            </div>
            <div>
                <Typography className={classes.heading}>{expense.title}</Typography>
                <Typography className={classes.notes}>
                    {expense.notes}
                </Typography>
            </div>
          </ExpansionPanelSummary>
          <Divider/>
          <ExpansionPanelDetails style={{display: 'block'}}>
          <div>
              <TextField label="Title" className={classes.textField} value={expense.title} onChange={handleChange('title', index)} margin="normal"/>
             <TextField label="Amount ($)" className={classes.textField} value={expense.amount} onChange={handleChange('amount', index)} margin="normal" type="number"/>
          </div>
          <div>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DateTimePicker
                    label="Incurred on"
                    className={classes.textField}
                    views={["year", "month", "date"]}
                    value={expense.incurred_on}
                    onChange={handleDateChange(index)}
                    showTodayButton
                />
          </MuiPickersUtilsProvider>
          <TextField label="Category" className={classes.textField} value={expense.category} onChange={handleChange('category', index)} margin="normal"/>
          </div>
          <TextField
            label="Notes"
            multiline
            rows="2"
            value={expense.notes}
            onChange={handleChange('notes', index)}
            className={classes.textField}
            margin="normal"
          />
          <div className={classes.buttons}>
          {
            error && (<Typography component="p" color="error">
              <Icon color="error" className={classes.error}>error</Icon>
              {error}</Typography>)
          }
          {
              saved && <Typography component="span" color="secondary" className={classes.status}>Saved</Typography>
          }
            <Button color="primary" variant="contained" onClick={()=> clickUpdate(index)} className={classes.submit}>Update</Button>
            <DeleteExpense expense={expense} onRemove={removeExpense}/>
          </div>    
          </ExpansionPanelDetails>
        </ExpansionPanel>
        </span>
        })}
      </div>
    )
  }

export default function NewExpense() {
  const classes = useStyles()
  
  const [values, setValues] = useState({
      title: '',
      category: '',
      amount: '',
      incurred_on: new Date(),
      notes: '',
      error: ''
  })
  const jwt = auth.isAuthenticated()
  
  const handleChange = name => event => {
    setValues({...values, [name]: event.target.value })
  }
  const handleDateChange = date => {
    setValues({...values, incurred_on: date })
  }

  const clickSubmit = () => {
    const expense = {
        title: values.title || undefined,
        category: values.category || undefined,
        amount: values.amount || undefined,
        incurred_on: values.incurred_on || undefined,
        notes: values.notes || undefined 
    }
    create({
        t: jwt.token
    }, expense).then((data) => {
        if (data.error) {
          setValues({...values, error: data.error})
        } else {
          setValues({...values, error: '', redirect: true})
        }
    })
  }

    if (values.redirect) {
      return (<Redirect to={'/'}/>)
    }
    return (<div>
      <Card className={classes.card}>
        <CardContent>
          <Typography type="headline" component="h2" className={classes.title}>
            Expense Record
          </Typography>
          <br/>
          <TextField id="title" label="Title" className={classes.textField} value={values.title} onChange={handleChange('title')} margin="normal"/><br/>
          <TextField id="amount" label="Amount ($)" className={classes.textField} value={values.amount} onChange={handleChange('amount')} margin="normal" type="number"/><br/>
          
          <TextField id="category" label="Category" className={classes.textField} value={values.category} onChange={handleChange('category')} margin="normal"/><br/>
          <br/>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DateTimePicker
                    label="Incurred on"
                    className={classes.textField}
                    views={["year", "month", "date"]}
                    value={values.incurred_on}
                    onChange={handleDateChange}
                    showTodayButton
                />
          </MuiPickersUtilsProvider>
          <br/>
          <br/>
          <TextField
            id="multiline-flexible"
            label="Notes"
            multiline
            rows="2"
            value={values.notes}
            onChange={handleChange('notes')}
            className={classes.textField}
            margin="normal"
          /><br/> <br/>
           {
            values.error && (<Typography component="p" color="error">
              <Icon color="error" className={classes.error}>error</Icon>
              {values.error}</Typography>)
          }
        </CardContent>
        <CardActions>
          <Button color="primary" variant="contained" onClick={clickSubmit} className={classes.submit}>Submit</Button>
          <Link to='/myauctions' className={classes.submit}><Button variant="contained">Cancel</Button></Link>
        </CardActions>
      </Card>
    </div>)
}

EventEditor = (props) => {
  const { formType, submitFunction, submitting } = props;

  const router = useRouter();
  const { register, handleSubmit, control, watch, reset } = useForm();
  const useCustomInternalName = watch('useCustomInternalName');

  const [bannerFile, setBannerFile] = useState(null);
  const [presenterImageFile, setPresenterImageFile] = useState(null);
  const [editorReady, setEditorReady] = useState(formType !== 'edit');

  useEffect(async () => {
    if (formType === 'edit') {
      // Get event ID from query string
      const parsedQueryString = queryString.parse(location.search);
      if (!parsedQueryString.id) {
        toastErrorCenter('No event ID was specified for editing.');
        await router.push('/events');
        return;
      }

      const eventId = parsedQueryString.id;

      // Get the event data to edit
      let res;
      try {
        res = await axios.get(`${API_ROOT}/events/${eventId}`);
      } catch (err) {
        toastErrorCenter('An error occurred while getting the event data.');
        await router.push(`/events/${eventId}`);
        return;
      }

      // Load event data into the form
      reset(res.data);
      setEditorReady(true);
    }
  }, []);

  // Prepare form data to be submitted
  const prepareFormData = (submittedData) => {
    const eventData = cloneDeep(submittedData);

    // Set empty string values and undefined to null
    for (const [key, value] of Object.entries(eventData)) {
      if (value === '' || value === undefined) {
        eventData[key] = null;
      }
    }

    // Convert datetimes to ISO strings
    if (eventData.startDateTime) {
      eventData.startDateTime = new Date(eventData.startDateTime).toISOString();
    }

    if (eventData.endDateTime) {
      eventData.endDateTime = new Date(eventData.endDateTime).toISOString();
    }

    // Prepare FormData by serializing form data to JSON and appending files if they exist
    // Remove files from form data before serializing
    delete eventData.banner;
    delete eventData.presenterImage;

    const formData = new FormData();
    formData.append('formDataJson', JSON.stringify(eventData));
    if (bannerFile) {
      formData.append('bannerFile', bannerFile);
    }
    if (presenterImageFile) {
      formData.append('presenterImageFile', presenterImageFile);
    }

    // Submit the form
    submitFunction(formData);
  };

  return (
    <>
      <form onSubmit={handleSubmit(prepareFormData)}>
        <div className={formStyles.labeledInput}>
          <label htmlFor="title">Title*</label>
          <input
            type="text"
            id="title"
            name="title"
            disabled={!editorReady || submitting}
            placeholder={!editorReady ? 'Loading...' : ''}
            ref={register}
            required
          />
        </div>

        {(formType === 'create' || formType === 'edit') && (
          <div className={eventEditorStyles.presenterInputs}>
            <div className={formStyles.labeledInput}>
              <label htmlFor="presenter">Presenter</label>
              <input
                type="text"
                id="presenter"
                name="presenter"
                disabled={!editorReady || submitting}
                ref={register}
              />
            </div>
            <div className={formStyles.labeledInput}>
              <label
                className={eventEditorStyles.presenterImageLabel}
                htmlFor="presenterImage"
              >
                {windowSupported() && window.innerWidth <= 700
                  ? 'Presenter Image'
                  : 'Image'}
              </label>
              <Controller
                name="presenterImage"
                control={control}
                render={({ onChange }) => (
                  <PresenterImageUpload
                    onChange={onChange}
                    setPresenterImageFile={setPresenterImageFile}
                  />
                )}
              />
            </div>
          </div>
        )}

        <div className={formStyles.labeledInput}>
          <label htmlFor="banner">
            Banner (Will be resized to a 16:9 aspect ratio)
            {formType === 'request' && '*'}
          </label>
          <Controller
            name="banner"
            control={control}
            render={({ onChange }) => (
              <BannerUpload onChange={onChange} setBannerFile={setBannerFile} />
            )}
          />
        </div>

        <MuiPickersUtilsProvider utils={DayJsUtils}>
          <div className={formStyles.twoColumn}>
            <div className={formStyles.labeledInput}>
              <label htmlFor="startDateTime">
                Start Date and Time{formType === 'request' && '*'}
              </label>
              <Controller
                control={control}
                name="startDateTime"
                id="startDateTime"
                as={
                  <DateTimePicker
                    defaultValue={null}
                    variant="dialog"
                    format="MM/DD/YYYY, h:mm A"
                    TextFieldComponent={(props) => <input {...props} />}
                    readOnly={!editorReady || submitting}
                    required={formType === 'request'}
                    emptyLabel
                    showTodayButton
                  />
                }
              />
            </div>

            <div className={formStyles.labeledInput}>
              <label htmlFor="endDateTime">
                End Date and Time{formType === 'request' && '*'}
              </label>
              <Controller
                control={control}
                name="endDateTime"
                id="endDateTime"
                as={
                  <DateTimePicker
                    variant="dialog"
                    format="MM/DD/YYYY, h:mm A"
                    TextFieldComponent={(props) => <input {...props} />}
                    readOnly={!editorReady || submitting}
                    required={formType === 'request'}
                    emptyLabel
                    showTodayButton
                  />
                }
              />
            </div>
          </div>
        </MuiPickersUtilsProvider>

        <div className={formStyles.labeledInput}>
          <label htmlFor="eventLocation">
            Location (Either Online or a building's address and room number)
            {formType === 'request' && '*'}
          </label>
          <input
            type="text"
            id="eventLocation"
            name="eventLocation"
            disabled={!editorReady || submitting}
            required={formType === 'request'}
            ref={register}
          />
        </div>

        <div className={formStyles.labeledInput}>
          <label htmlFor="externalLink">
            External Link (This can be a direct Zoom/Google Meet link)
            {formType === 'request' && '*'}
          </label>
          <input
            type="text"
            id="externalLink"
            name="externalLink"
            disabled={!editorReady || submitting}
            required={formType === 'request'}
            ref={register}
          />
        </div>

        <div className={formStyles.labeledInput}>
          <label htmlFor="externalLinkButtonText">
            External Link Button Text (The green button on the event page)
            {formType === 'request' && '*'}
          </label>
          <input
            type="text"
            id="externalLinkButtonText"
            name="externalLinkButtonText"
            disabled={!editorReady || submitting}
            required={formType === 'request'}
            ref={register}
          />
        </div>

        <div className={formStyles.labeledInput}>
          <label htmlFor="shortDescription">
            Short Event Description (Under 250 characters)
            {formType === 'request' && '*'}
          </label>
          <input
            type="text"
            id="shortDescription"
            name="shortDescription"
            disabled={!editorReady || submitting}
            required={formType === 'request'}
            ref={register}
          />
        </div>

        <div className={formStyles.labeledInput}>
          <label htmlFor="longDescription">
            Long Description{formType === 'request' && '*'}
          </label>
          <textarea
            rows="10"
            id="longDescription"
            name="longDescription"
            disabled={!editorReady || submitting}
            required={formType === 'request'}
            ref={register}
          />
        </div>

        <div
          className={`${formStyles.customInternalName} ${formStyles.checkbox} ${formStyles.checkboxCentered}`}
        >
          <input
            type="checkbox"
            name="useCustomInternalName"
            id="useCustomInternalName"
            disabled={!editorReady || submitting}
            ref={register}
          />
          <label htmlFor="useCustomInternalName">
            Use Custom Internal Name
          </label>
        </div>

        {useCustomInternalName && (
          <div className={`${formStyles.labeledInput}`}>
            <label htmlFor="internalName">
              Internal Name (must-be-lowercase-kebab-case-like-this)*
            </label>
            <input
              type="text"
              id="internalName"
              name="internalName"
              pattern="^([a-z][a-z0-9]*)(-[a-z0-9]+)*$"
              disabled={!editorReady || submitting}
              required={useCustomInternalName}
              ref={register}
            />
          </div>
        )}

        {formType === 'create' && (
          <Button
            classNamePassed={`${formStyles.formButton} ${commonStyles.actionButton}`}
            type="submit"
            disabled={!editorReady || submitting}
          >
            {submitting ? 'Creating Event...' : 'Create Event'}
          </Button>
        )}

        {formType === 'request' && (
          <Button
            classNamePassed={`${formStyles.formButton} ${commonStyles.actionButton}`}
            type="submit"
            disabled={!editorReady || submitting}
          >
            {submitting ? 'Submitting Request...' : 'Submit Request'}
          </Button>
        )}

        {formType === 'edit' && (
          <Button
            classNamePassed={`${formStyles.formButton} ${commonStyles.actionButton}`}
            type="submit"
            disabled={!editorReady || submitting}
          >
            {submitting ? 'Saving...' : 'Save Changes'}
          </Button>
        )}
      </form>
    </>
  );
}

Home = (props) => {
    const { Title } = Typography;
    const {user} = UserSession();
    const handleLogout  = ()=>{
        firebase.auth().signOut().then(function() {
          }).catch(function(error) {
           
          });
    }
    const { TextArea } = Input;
    const [check, setCheck]= useState(false);

    const [options, setOptions] = useState([{
        index:1,
        title:"",
        count : 0
    }, {
        index:2,
        title:"",
        count : 0
    }]);
    const [selectedDate, handleDateChange] = useState(new Date());
    function onChangeSwitch(checked) {
        setCheck(!check);
      }
    const [title, setTitle] = useState('');
    const handleSubmit = (e)=>{
        if(options.length<2)
        toast.error("Minimum 2 options required!");
        else {
            let flag=0;
            for(let i=0;i<options.length;i++)
            {
                if(options[i].title=="")
                {
                    toast.error("Please fill all the options!");
                    flag=1;
                    break;
                }
            }
            if(flag==0)
            {
                if(title=="")
                {
                    toast.error("Title cannot be empty!");
                    flag=1;
                }
                else{
                  let poll = {};
                  if(check)
                  {
                      poll.expire = true;
                      poll.date = selectedDate;
                  }
                  else
                  poll.expire = false;
                  poll.id = shortid.generate();
                  poll.title = title;
                  poll.creator = user.displayName;
                  poll.votes = {};
                  poll.options = options;
                  createPoll(poll);
                  toast.success("Poll Generated Successfully ?");
                  setTimeout(()=>{
                    props.history.push(`/${poll.id}`);
                  }, 2000)
                }
            }
            

        }
    }
    const fadeEffect = {
        exit : {
            opacity:0,
            x:-300,
            transition:{
            
                duration:5
            }
        }
    }
    const handleTitle = (e)=>{
        setTitle(e.target.value)
    }
    const handleDelete = (index)=>{
        let array = options;
        let x = []
        array.forEach((option)=>{
           if(option.index!==index)
           {
            //    console.log(option.index, index);
            //    console.log(option.title)
                x.push(option)
           }
        }
        );

        array  = x;
        let i = 1;
        array.forEach((option=>{
            option.index = i;
            i=i+1;
        }))
       // console.log(array);
        setOptions(array);
    }
   
    const handleClick = (e)=>{
        let option = {
            index : options.length +1,
            title: "",
            count : 0
        }
        if(options.length==4)
        toast.warning("Maximum 4 options allowed")
        else
        setOptions([...options, option]);

    }
    
    const handleChange = (index, e)=>{
        let x = options;
        x.forEach((option)=>{
            if(option.index===index)
            option.title = e.target.value;
           
        })
        setOptions([...x]);
    }

    return (
        <div>
               <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <div className="logout_grid">
                <div>
               <h1 className="animate__animated animate__pulse heading">Create a Realtime Poll Instantly!⚡
               </h1>
               </div>
               <div>
               <Button type="primary" onClick={handleLogout} size="large" className="btn_logout"> Logout <LogoutOutlined /></Button>
               </div>
               </div>
               <ToastContainer newestOnTop autoClose={2000}/>
               <div className="flex_home">
                   <div style={{flexGrow:"2"}} className="min_wide">
               <TextArea   placeholder="Ask a Question..." className="title" onChange={handleTitle} autoSize={{minRows:1.5}}/>
               <br/>
               <br/>
               <div className="flex_btns">
               <Button type="primary" onClick = {handleClick} > Add an Option <PlusCircleTwoTone /></Button>
               
              
               <div>
               <span style={{fontSize:"1rem"}}>Auto Expire after a fixed time</span> &nbsp;<Switch onChange={onChangeSwitch} />
               </div> 
           
               
               {check ? (<DateTimePicker value={selectedDate} disablePast onChange={handleDateChange}/>) : (null)}
               
               </div>
               <AnimatePresence>
               {!options.length ? (null) : (options.map((option)=>(
               
                    <motion.div  exit={{x:-800}} initial={{y:-30, opacity:0}} animate={{opacity:1, y:0, transition: {y:{duration:0.5}}}} key={option.index} className="options">
                    <input type="text" placeholder ={`Option ${option.index}`}  className="option" value={option.title} onChange={(value)=>handleChange(option.index, value)} />
                    <DeleteTwoTone twoToneColor="#eb2f96" style={{fontSize:"1.2rem"}} onClick={()=>{handleDelete(option.index)}}/>
                    </motion.div>
             
               )))}
                      </AnimatePresence>
        {!options.length ? (null) : (<Button type="primary" size="large" className="submit" onClick={handleSubmit}> Generate Poll ?</Button>)}
        </div>
        <div style={{flexGrow:"1"}}>
        <img 
               src="https://image.freepik.com/free-vector/costumer-survey-concept-illustration_114360-459.jpg"  className="home_img animate__animated animate__fadeIn"/>
        </div>
        </div>
        </MuiPickersUtilsProvider>
        </div>
    )
}

function Settings() {
  const {
    event,
    updatePublicPeriod,
    setHasFreeMovement: setEventHasFreeMovement,
    setJitsiServer: setEventJitsiServer,
  } = useContext(store);
  const [hasFreeMovement, setHasFreeMovement] = useState(event.hasFreeMovement);
  const [jitsiServer, setJitsiServer] = useState(event.jitsiServer);
  const [startDate, setStartDate] = useState(
    event.publicPeriod.startDate.toDate()
  );
  const [endDate, setEndDate] = useState(event.publicPeriod.endDate.toDate());
  const { t } = useTranslation("translation");

  // avoid state inconsistency if changed from another client
  useEffect(() => {
    setStartDate(event.publicPeriod.startDate.toDate());
    setEndDate(event.publicPeriod.endDate.toDate());
  }, [event.publicPeriod]);
  useEffect(() => {
    setHasFreeMovement(event.hasFreeMovement);
  }, [event.hasFreeMovement]);
  useEffect(() => {
    setJitsiServer(event.jitsiServer);
  }, [event.jitsiServer]);

  return (
    <div className="Settings-container">
      <Typography variant="h5" align="center" style={{ marginBottom: "20px" }}>
        {t("Event Settings")}
      </Typography>
      <TextField
        label="Jitsi server"
        name="jitsiServer"
        fullWidth
        value={jitsiServer}
        onChange={(event) => setJitsiServer(event.target.value)}
        variant="outlined"
        style={{ marginBottom: "20px" }}
      />
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DateTimePicker
          label={t("Event Start Date")}
          inputVariant="outlined"
          value={startDate}
          onChange={setStartDate}
          style={{ marginBottom: "20px" }}
        />
      </MuiPickersUtilsProvider>

      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DateTimePicker
          label={t("Event End Date")}
          inputVariant="outlined"
          value={endDate}
          onChange={setEndDate}
          style={{ marginBottom: "20px" }}
        />
      </MuiPickersUtilsProvider>
      <FormControlLabel
        control={
          <Checkbox
            checked={hasFreeMovement}
            onChange={(event) => setHasFreeMovement(event.target.checked)}
            name="freeMovement"
            color="primary"
          />
        }
        label={t("Free Movement")}
      />
      <Button
        variant="contained"
        color="secondary"
        size="large"
        style={{ margin: "0 auto", fontWeight: 600 }}
        type="submit"
        onClick={() => {
          updatePublicPeriod({ startDate, endDate });
          setEventHasFreeMovement(hasFreeMovement);
          setEventJitsiServer(jitsiServer);
        }}
      >
        {t("Update")}
      </Button>
    </div>
  );
}