feat: typescript migration (#833)

* feat: initial commit for typescript migration

* fix: tsconfig with next

* feat: migrate footer to ts

* feat: migrate components to ts

* fix: prettier error

* fix: prettier error

* fix: all lint errors

* fix: remove unused vscode settings

* fix: migrate and improve widget.js

* feat: migrate all helpers to ts

* fix: types

* feat: migrate api to ts

* feat: migrate page files

* Fix for tz Page component is not being set correctly when the component is rendered

* Add type check to ensure that router.query.tz is a string

---------

Co-authored-by: Alexis Sgarbossa <[email protected]>

component/footer.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import Timezone from './timezone'
+
+interface IFooter {
+  changeTimezone: (timezone: string) => void
+  timezone: string
+}
+
+const Footer = (props: IFooter) => {
+  return (
+    <>
+      <ul className="footer-list">
+        <li>Share:</li>
+        <li>
+          <a
+            href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fshouldideploy.today%2F&t=Should%20I%20Deploy%20Today%3F"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Share on Facebook"
+          >
+            Facebook
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fshouldideploy.today%2F&text=Should%20I%20Deploy%20Today%3F:%20http%3A%2F%2Fshouldideploy.today"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Tweet"
+          >
+            Twitter
+          </a>
+        </li>
+        <li>
+          Source:{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="http://github.com/baires/shouldideploy/"
+          >
+            Github
+          </a>
+        </li>
+        <li>
+          Timezone:{' '}
+          <Timezone onChange={props.changeTimezone} timezone={props.timezone} />
+        </li>
+      </ul>
+
+      <ul className="footer-list">
+        <li>
+          <a href={'/api?tz=' + props.timezone}>
+            <mark>API</mark>
+          </a>
+        </li>
+        <li>
+          <a href={'/api/slack?tz=' + props.timezone}>
+            <mark>Slack API</mark>
+          </a>
+        </li>
+      </ul>
+    </>
+  )
+}
+
+export default Footer

component/head.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+const Head = () => {
+  return (
+    <>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width" />
+      <meta
+        name="description"
+        content="A friendly reminder to all Developers, Designers, CEO's"
+      />
+
+      <meta itemProp="name" content="Should I Deploy Today" />
+      <meta
+        itemProp="description"
+        content="A friendly reminder to all Developers, Designers, CEO's"
+      />
+
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:title" content="Should I Deploy Today" />
+      <meta
+        name="twitter:description"
+        content="A friendly reminder to all Developers, Designers, CEO's"
+      />
+
+      <meta property="og:title" content="Should I Deploy Today" />
+      <meta
+        property="og:description"
+        content="A friendly reminder to all Developers, Designers, CEO's"
+      />
+      <meta property="og:url" content="https://shouldideploy.today" />
+      <meta property="og:site_name" content="Should I Deploy Today" />
+      <meta property="og:type" content="website" />
+
+      <meta name="theme-color" content="#1E1F29" />
+      <script
+        defer
+        src="https://static.cloudflareinsights.com/beacon.min.js"
+        data-cf-beacon='{"token": "f87541717296439a86907c81d3effe69"}'
+      ></script>
+    </>
+  )
+}
+
+export default Head

component/timezone.js → component/timezone.tsx

@@ -1,20 +1,25 @@
 import React from 'react'
 import names from '../helpers/timezones'
 
-export default class Timezone extends React.Component {
+interface ITimezone {
+  onChange: (value: string) => void
+  timezone: string
+}
+
+const Timezone = (props: ITimezone) => {
   /**
    * On change timezone propagate new timezone value
    * @return void
    */
-  onChange = (event) => {
-    this.props.onChange(event.target.value)
+  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    props.onChange(event.target.value)
   }
 
   /**
    * Build options list
    * @return JSX.Element[]
    */
-  options = () => {
+  const options = () => {
     return names.map((name, index) => {
       return (
         <option value={name} key={index}>
@@ -28,11 +33,11 @@ export default class Timezone extends React.Component {
    * Render timezone selector
    * @return JSX.Element[]
    */
-  render() {
-    return (
-      <select value={this.props.timezone} onChange={this.onChange}>
-        {this.options()}
-      </select>
-    )
-  }
+  return (
+    <select value={props.timezone} onChange={onChange}>
+      {options()}
+    </select>
+  )
 }
+
+export default Timezone