[#7] removed timezones from popup and added toggle when select free busy

src/features/Events/EventDisplay.tsx

@@ -92,6 +92,7 @@ export default function EventDisplayModal({
     event.repetition ?? ({} as RepetitionObject)
   );
   const [alarm, setAlarm] = useState("");
+  const [busy, setBusy] = useState("");
   const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
   const [timezone, setTimezone] = useState(event?.timezone ?? "UTC");
   const [newCalId, setNewCalId] = useState(event.calId);
@@ -503,12 +504,10 @@ export default function EventDisplayModal({
                 <InputLabel id="busy">is Busy</InputLabel>
                 <Select
                   labelId="busy"
-                  value={""}
+                  value={busy}
                   disabled={!isOwn}
                   label="is busy"
-                  onChange={(e: SelectChangeEvent) =>
-                    console.log(e.target.value)
-                  }
+                  onChange={(e) => setBusy(e.target.value)}
                 >
                   <MenuItem value={"free"}>Free</MenuItem>
                   <MenuItem value={"busy"}>Busy </MenuItem>

src/features/Events/EventModal.tsx

@@ -76,6 +76,7 @@ function EventPopover({
   const [attendees, setAttendees] = useState<userAttendee[]>([]);
   const [alarm, setAlarm] = useState("");
   const [eventClass, setEventClass] = useState("PUBLIC");
+  const [busy, setBusy] = useState("");
 
   const [timezone, setTimezone] = useState(
     Intl.DateTimeFormat().resolvedOptions().timeZone
@@ -285,23 +286,6 @@ function EventPopover({
                 repetition={repetition}
                 setRepetition={setRepetition}
               />
-              <FormControl fullWidth margin="dense" size="small">
-                <InputLabel id="timezone-select-label">Time Zone</InputLabel>
-                <Select
-                  labelId="timezone-select-label"
-                  value={timezone}
-                  label="Time Zone"
-                  onChange={(e: SelectChangeEvent) =>
-                    setTimezone(e.target.value)
-                  }
-                >
-                  {Object.keys(timezones).map((key) => (
-                    <MenuItem key={key} value={timezones[key].aliasTo}>
-                      {key}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
               <FormControl fullWidth margin="dense" size="small">
                 <InputLabel id="alarm">Alarm</InputLabel>
                 <Select
@@ -345,11 +329,9 @@ function EventPopover({
                 <InputLabel id="busy">is Busy</InputLabel>
                 <Select
                   labelId="busy"
-                  value={""}
+                  value={busy}
                   label="is busy"
-                  onChange={(e: SelectChangeEvent) =>
-                    console.log(e.target.value)
-                  }
+                  onChange={(e) => setBusy(e.target.value)}
                 >
                   <MenuItem value={"free"}>Free</MenuItem>
                   <MenuItem value={"busy"}>Busy </MenuItem>