From 01eacedde8a5f6600ef9568c079677df2b79adc2 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Sun, 20 Jun 2021 00:08:48 +0000
Subject: [PATCH] Timezone should never be  unless it has no state yet, so used
 that to simplify TimeOptions

---
 components/booking/TimeOptions.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx
index bf183a82..38aafd8b 100644
--- a/components/booking/TimeOptions.tsx
+++ b/components/booking/TimeOptions.tsx
@@ -8,29 +8,24 @@ function classNames(...classes) {
 }
 
 const TimeOptions = (props) => {
+
   const [selectedTimeZone, setSelectedTimeZone] = useState('');
   const [is24hClock, setIs24hClock] = useState(false);
-  const [isReady, setIsReady ] = useState(false);
 
   useEffect( () => {
     setIs24hClock(is24h());
     setSelectedTimeZone(timeZone());
-    setIsReady(true);
   }, []);
 
   useEffect( () => {
-    if (!isReady) {
-      return;
-    }
-    if (selectedTimeZone && selectedTimeZone !== timeZone()) {
-      props.onSelectTimeZone(selectedTimeZone)
-    }
-    if ([true,false].includes(is24h()) && is24hClock !== is24h()) {
-      props.onToggle24hFormat(is24hClock);
-    }
-  }, [is24hClock, selectedTimeZone]);
+    props.onSelectTimeZone(timeZone(selectedTimeZone));
+  }, [selectedTimeZone]);
 
-  return isReady && (
+  useEffect( () => {
+    props.onToggle24hClock(is24h(is24hClock));
+  }, [is24hClock]);
+
+  return selectedTimeZone !== "" && (
     <div className="w-full rounded shadow border bg-white px-4 py-2">
       <div className="flex mb-4">
         <div className="w-1/2 font-medium">Time Options</div>