feat: convert components and pages to TypeScript

components/Alert.js → components/Alert.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
 import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid'
 
-export default class Alert extends React.Component {
-  render() {
+type AlertProps = {
+  success: boolean | null
+  message: string | null
+}
+
+export default class Alert extends React.Component<AlertProps> {
+  override render() {
     const icon = this.props.success ? (
       <CheckCircleIcon className="h-5 w-5 text-green-400" />
     ) : (

components/Home.js → components/Home.tsx

@@ -87,9 +87,8 @@ const comments = [
   },
 ]
 
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
-}
+const classNames = (...classes: (string | false | null | undefined)[]) =>
+  classes.filter(Boolean).join(' ')
 
 export default function Home() {
   return (

components/Layout.js → components/Layout.tsx

@@ -1,9 +1,13 @@
-import { Fragment } from 'react'
+import { Fragment, type ReactNode } from 'react'
 import Link from 'next/link'
 import { Menu, Popover, Transition } from '@headlessui/react'
 import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'
 import { BellIcon, Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 
+type LayoutProps = {
+  children: ReactNode
+}
+
 const user = {
   name: 'Whitney Francis',
   email: 'whitney@example.com',
@@ -17,11 +21,10 @@ const navigation = [
   { name: 'Company', href: '#' },
 ]
 
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
-}
+const classNames = (...classes: (string | false | null | undefined)[]) =>
+  classes.filter(Boolean).join(' ')
 
-export default function Layout(props) {
+export default function Layout(props: LayoutProps) {
   const userNavigation = [
     { name: 'Admin Settings', href: '/app/settings' },
     { name: 'Your Profile', href: '#' },

components/LoginWithEmail.js → components/LoginWithEmail.tsx

@@ -3,8 +3,14 @@ import Link from 'next/link'
 import { EnvelopeIcon } from '@heroicons/react/24/solid'
 import Alert from './Alert'
 
-export default class LoginWithEmail extends React.Component {
-  render() {
+type LoginWithEmailProps = {
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void | Promise<void>
+  success: boolean | null
+  message: string | null
+}
+
+export default class LoginWithEmail extends React.Component<LoginWithEmailProps> {
+  override render() {
     return (
       <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
@@ -18,7 +24,7 @@ export default class LoginWithEmail extends React.Component {
           <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
             <Alert success={this.props.success} message={this.props.message} />
 
-            <form onSubmit={this.props.onSubmit.bind(this)} className="space-y-6">
+            <form onSubmit={this.props.onSubmit} className="space-y-6">
               <div>
                 <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                   Email address

components/LoginWithSSO.js → components/LoginWithSSO.tsx

@@ -3,8 +3,14 @@ import Link from 'next/link'
 import { LockClosedIcon } from '@heroicons/react/24/solid'
 import Alert from './Alert'
 
-export default class LoginWithSSO extends React.Component {
-  render() {
+type LoginWithSSOProps = {
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void | Promise<void>
+  success: boolean | null
+  message: string | null
+}
+
+export default class LoginWithSSO extends React.Component<LoginWithSSOProps> {
+  override render() {
     return (
       <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
@@ -16,9 +22,9 @@ export default class LoginWithSSO extends React.Component {
 
         <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
           <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-            <Alert succeeded={this.props.succeeded} message={this.props.message} />
+            <Alert success={this.props.success} message={this.props.message} />
 
-            <form onSubmit={this.props.onSubmit.bind(this)} className="space-y-6">
+            <form onSubmit={this.props.onSubmit} className="space-y-6">
               <div>
                 <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                   Email Address

components/Settings.js → components/Settings.tsx

@@ -1,15 +1,22 @@
 import { Cog6ToothIcon, UserCircleIcon } from '@heroicons/react/24/outline'
 
+type Intent = 'sso' | 'dsync' | 'audit_logs' | 'domain_verification'
+
+type SettingsProps = {
+  onSubmit: (intent: Intent, e: React.FormEvent<HTMLFormElement>) => void | Promise<void>
+  success: boolean | null
+  message: string | null
+}
+
 const subNavigation = [
   { name: 'Admin Settings', href: '#', icon: Cog6ToothIcon, current: true },
   { name: 'Your Profile', href: '#', icon: UserCircleIcon, current: false },
 ]
 
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
-}
+const classNames = (...classes: (string | false | null | undefined)[]) =>
+  classes.filter(Boolean).join(' ')
 
-export default function Settings(props) {
+export default function Settings(props: SettingsProps) {
   return (
     <main className="max-w-7xl mx-auto pb-10 lg:py-12 lg:px-8">
       <div className="lg:grid lg:grid-cols-12 lg:gap-x-5">

globals.d.ts

@@ -0,0 +1 @@
+declare module '*.css'

pages/_app.js → pages/_app.tsx

@@ -1,7 +1,8 @@
 import '../styles/tailwind.css'
+import type { AppProps } from 'next/app'
 import { DatadogPagesRouter } from '@datadog/browser-rum-nextjs'
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <DatadogPagesRouter />

pages/app/index.js → pages/app/index.tsx

@@ -4,7 +4,7 @@ import Home from '../../components/Home'
 import Layout from '../../components/Layout'
 
 export default class extends React.Component {
-  render() {
+  override render() {
     return (
       <main>
         <Head>

pages/app/login.js → pages/app/login.tsx

@@ -2,8 +2,13 @@ import React from 'react'
 import Head from 'next/head'
 import LoginWithEmail from '../../components/LoginWithEmail'
 
-export default class extends React.Component {
-  constructor(props) {
+type State = {
+  success: boolean | null
+  message: string | null
+}
+
+export default class extends React.Component<{}, State> {
+  constructor(props: {}) {
     super(props)
 
     this.state = {
@@ -12,11 +17,11 @@ export default class extends React.Component {
     }
   }
 
-  async onSubmit(e) {
+  onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     try {
-      const email = e.target.email.value
+      const email = (e.currentTarget.elements.namedItem('email') as HTMLInputElement).value
       const state = 'app'
 
       const res = await fetch('/api/magic-link', {
@@ -37,15 +42,15 @@ export default class extends React.Component {
         success: true,
         message: 'We just sent a magic link to your email.',
       })
-    } catch (e) {
+    } catch (err) {
       this.setState({
         success: false,
-        message: e.message,
+        message: err instanceof Error ? err.message : String(err),
       })
     }
   }
 
-  render() {
+  override render() {
     return (
       <main>
         <Head>
@@ -54,7 +59,7 @@ export default class extends React.Component {
         </Head>
 
         <LoginWithEmail
-          onSubmit={this.onSubmit.bind(this)}
+          onSubmit={this.onSubmit}
           success={this.state.success}
           message={this.state.message}
         />

pages/app/settings.js → pages/app/settings.tsx

@@ -3,8 +3,15 @@ import Head from 'next/head'
 import Settings from '../../components/Settings'
 import Layout from '../../components/Layout'
 
-export default class extends React.Component {
-  constructor(props) {
+type Intent = 'sso' | 'dsync' | 'audit_logs' | 'domain_verification'
+
+type State = {
+  success: boolean | null
+  message: string | null
+}
+
+export default class extends React.Component<{}, State> {
+  constructor(props: {}) {
     super(props)
 
     this.state = {
@@ -13,7 +20,7 @@ export default class extends React.Component {
     }
   }
 
-  async onSubmit(intent, e) {
+  onSubmit = async (intent: Intent, e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     try {
@@ -37,12 +44,12 @@ export default class extends React.Component {
     } catch (err) {
       this.setState({
         success: false,
-        message: err.message,
+        message: err instanceof Error ? err.message : String(err),
       })
     }
   }
 
-  render() {
+  override render() {
     return (
       <main>
         <Head>
@@ -52,7 +59,7 @@ export default class extends React.Component {
 
         <Layout>
           <Settings
-            onSubmit={this.onSubmit.bind(this)}
+            onSubmit={this.onSubmit}
             success={this.state.success}
             message={this.state.message}
           />

pages/app/sso.js → pages/app/sso.tsx

@@ -2,8 +2,13 @@ import React from 'react'
 import Head from 'next/head'
 import LoginWithSSO from '../../components/LoginWithSSO'
 
-export default class extends React.Component {
-  constructor(props) {
+type State = {
+  success: boolean | null
+  message: string | null
+}
+
+export default class extends React.Component<{}, State> {
+  constructor(props: {}) {
     super(props)
 
     this.state = {
@@ -12,7 +17,7 @@ export default class extends React.Component {
     }
   }
 
-  async onSubmit(e) {
+  onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     try {
@@ -33,15 +38,15 @@ export default class extends React.Component {
       }
 
       window.location.href = data.authorizationURL
-    } catch (e) {
+    } catch (err) {
       this.setState({
         success: false,
-        message: e.message,
+        message: err instanceof Error ? err.message : String(err),
       })
     }
   }
 
-  render() {
+  override render() {
     return (
       <main>
         <Head>
@@ -50,7 +55,7 @@ export default class extends React.Component {
         </Head>
 
         <LoginWithSSO
-          onSubmit={this.onSubmit.bind(this)}
+          onSubmit={this.onSubmit}
           success={this.state.success}
           message={this.state.message}
         />