Porting to Typescript

.eslintrc.json

@@ -10,6 +10,8 @@
     "react/prop-types": "off",
     "comma-dangle": "off",
     "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"]
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error"]
   }
 }

components/AddRule.js

@@ -27,7 +27,7 @@ const fields = [
   }
 ]
 
-const AddRule = ({ onAddRule }) => {
+const AddRule = () => {
   const formRef = useRef()
   const [error, setError] = useState(null)
   const router = useRouter()

components/Footer.js → components/Footer.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { Flex, Box, Link } from 'ooni-components'
 import styled from 'styled-components'
 
@@ -16,7 +17,12 @@ const FooterColumn = styled(Flex).attrs({
   mx: 3
 })``
 
-const FooterItem = ({ label, link }) => (
+type FooterItemProps = {
+  label: React.ReactNode,
+  link: string
+}
+
+const FooterItem: React.FunctionComponent<FooterItemProps> = ({ label, link }) => (
   <Link my={1} mx={3} color='gray2' href={link}>{label}</Link>
 )
 

components/Layout.js → components/Layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import NextHead from 'next/head'
 import styled from 'styled-components'
 import { Container, Flex } from 'ooni-components'
@@ -11,14 +11,18 @@ const PageWrapper = styled(Flex)`
   min-height: 100vh;
 `
 
-const Layout = ({ title = '', children }) => {
+type LayoutProps = {
+  title: string,
+  children: React.ReactNode
+}
+const Layout: React.FunctionComponent<LayoutProps> = ({ title = '', children }) => {
   return (
     <>
       <NextHead>
         <title>{title}</title>
       </NextHead>
       <PageWrapper>
-        <NavBar title={title} />
+        <NavBar />
         <Container sx={{ flex: 1, width: '100%' }}>
           {children}
         </Container>

components/List.js

@@ -120,7 +120,7 @@ const Button = styled.button`
 // Dynamic button
 // * Starts editing a row
 // * Switches to a two button component to confirm or cancel a row edit operation.
-const EditButton = ({ resetRow, onRowUpdate, row: { index, values, state: { isEditing, dirty }, setState } }) => {
+const EditButton = ({ resetRow, onRowUpdate, row: { index, values, state: { isEditing, /* dirty */ }, setState } }) => {
   const onEdit = useCallback(() => {
     // TODO: Don't edit if another row is still being edited
     setState(state => ({ ...state, isEditing: true }))

components/Loading.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
 
-const rotate = (dir) => keyframes`
+const rotate = (dir: number) => keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -19,12 +19,12 @@ const Spinner = styled.div<SpinnerProps>`
   animation: ${props => rotate(props.$dir)} ${props => 2 / props.speed}s linear infinite;
 `
 
-interface LoadingProps {
-  readonly size?: number;
-  readonly speed?: number;
-  readonly dir?: number;
+type LoadingProps = {
+  size?: number;
+  speed?: number;
+  dir?: number;
 }
-const Loading: React.FC<LoadingProps> = ({ size = 64, speed = 1, dir = 1 }) => (
+const Loading: React.FunctionComponent<LoadingProps> = ({ size = 64, speed = 1, dir = 1 }) => (
   <Spinner speed={speed} $dir={dir}>
     <svg
       xmlns="http://www.w3.org/2000/svg"

components/LoginForm.js → components/LoginForm.tsx

@@ -22,33 +22,39 @@ const StyledInputContainer = styled(Box).attrs({
   }
 `
 
-export const LoginModal = ({ isShowing, hide, onLogin }) =>
-  <Modal show={isShowing} onHideClick={hide}>
-    <LoginForm onLogin={onLogin} />
-  </Modal>
+type LoginFormData = {
+  email_address: string,
+  nickname: string
+}
 
-export const LoginForm = ({ onLogin }) => {
-  const [submitting, setSubmitting] = useState(false)
-  const [loginError, setError] = useState(null)
+type LoginFormProps = {
+  onLogin: Function
+}
 
-  const { handleSubmit, register, formState, reset } = useForm({
+export const LoginForm: React.FunctionComponent<LoginFormProps> = ({ onLogin }) => {
+  const [submitting, setSubmitting] = useState(false)
+  const [loginError, setError] = useState<string | null>(null)
+  const { handleSubmit, register, formState, reset } = useForm<LoginFormData>({
     mode: 'onTouched',
   })
 
   const { errors, isValid, isDirty } = formState
 
-  const onSubmit = useCallback((data) => {
+  const onSubmit = useCallback((data: LoginFormData) => {
     const { email_address, nickname } = data
-    const registerApi = async (email_address, nickname) => {
+    const registerApi = async (email_address: string, nickname: string) => {
       try {
         await registerUser(email_address, nickname)
         if (typeof onLogin === 'function') {
           onLogin()
         }
       } catch (e) {
-        setError(e.message)
         // Reset form to mark `isDirty` as false
         reset({}, { keepValues: true })
+        console.error(e)
+        if (e instanceof Error) {
+          setError(e.message)
+        }
       } finally {
         setSubmitting(false)
       }
@@ -119,4 +125,14 @@ export const LoginForm = ({ onLogin }) => {
   )
 }
 
+type LoginModalProps = {
+  isShowing: boolean,
+  hide: Function,
+  onLogin: Function
+}
+export const LoginModal: React.FunctionComponent<LoginModalProps> = ({ isShowing, hide, onLogin }) =>
+  <Modal show={isShowing} onHideClick={hide}>
+    <LoginForm onLogin={onLogin} />
+  </Modal>
+
 export default LoginForm