Refactor Timezone to fallback to local timezone. Closes #1268

README.md

@@ -20,12 +20,12 @@ There is an endpoint to use on your CI or just for fun at `https://shouldideploy
 
 You can also provide optional parameters to customize the API response:
 
-- `tz`: The timezone to use when evaluating the date and time. The default value is UTC. Pass a valid timezone string, such as `America/New_York` or `Europe/London` default `UTC`.
+- `tz`: The timezone to use when evaluating the date and time. By default, it uses your local timezone. You can override this by passing a valid timezone string, such as `America/New_York` or `Europe/London`.
 - `date`: The date to evaluate. The default value is the current date. Pass a valid date string in the format `YYYY-MM-DD`, such as `2023-03-31`.
 
 ### Examples
 
-Get the default API response using the current date and time in the UTC timezone:
+Get the API response using your local timezone:
 
 
 ```
@@ -38,7 +38,7 @@ Get the API response for a specific timezone (e.g., Europe/London):
 https://shouldideploy.today/api?tz=Europe/London
 ```
 
-Get the API response for a specific date (e.g., 2023-03-31) in the UTC timezone:
+Get the API response for a specific date (e.g., 2023-03-31) in your local timezone:
 
 ```
 https://shouldideploy.today/api?date=2023-03-31
@@ -63,7 +63,7 @@ Example response:
 
 ```
 {
-  "timezone": "UTC",
+"timezone": "America/New_York",
   "date": "2023-03-31T00:00:00.000Z",
   "shouldideploy": false,
   "message": "It's Friday, better not deploy today."

component/footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Timezone from './timezone'
 
 interface IFooter {
@@ -7,6 +7,14 @@ interface IFooter {
 }
 
 const Footer = (props: IFooter) => {
+  useEffect(() => {
+    // Set initial timezone if not already set
+    if (!props.timezone) {
+      const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+      props.changeTimezone(localTimezone)
+    }
+  }, [])
+
   return (
     <>
       <ul className="footer-list">

component/timezone.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import names from '../helpers/timezones'
 
 interface ITimezone {
   onChange: (value: string) => void
@@ -8,34 +7,29 @@ interface ITimezone {
 
 const Timezone = (props: ITimezone) => {
   /**
-   * On change timezone propagate new timezone value
-   * @return void
+   * Get local timezone using Intl API
+   * @return string
    */
-  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    props.onChange(event.target.value)
+  const getLocalTimezone = (): string => {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone
   }
 
   /**
-   * Build options list
-   * @return JSX.Element[]
+   * On change timezone propagate new timezone value
+   * @return void
    */
-  const options = () => {
-    return names.map((name, index) => {
-      return (
-        <option value={name} key={index}>
-          {name}
-        </option>
-      )
-    })
+  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    props.onChange(event.target.value)
   }
 
-  /**
-   * Render timezone selector
-   * @return JSX.Element[]
-   */
   return (
-    <select value={props.timezone} onChange={onChange}>
-      {options()}
+    <select
+      value={props.timezone || getLocalTimezone()}
+      onChange={onChange}
+    >
+      <option value={getLocalTimezone()}>
+        {getLocalTimezone()} (Local)
+      </option>
     </select>
   )
 }