Typescript support

.eslintrc.json

@@ -1,27 +1,15 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
+  "plugins": ["@typescript-eslint"],
   "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "standard",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended"
+    "next",
+    "standard"
   ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": ["react", "jsx-a11y", "react-hooks"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "camelcase": "off",
     "react/prop-types": "off",
-    "comma-dangle": "off"
+    "comma-dangle": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"]
   }
 }

babel.config.js

@@ -17,7 +17,7 @@ module.exports = function (api) {
   ]
 
   const plugins = [
-    'inline-react-svg', ['styled-components', { ssr: true }]
+    // styled-components plugin removed; uses SWC in next.config.js
   ]
 
   return {

components/List.js

@@ -342,6 +342,7 @@ const List = ({ data, mutateRules }) => {
       {
         id: 'delete',
         maxWidth: 16,
+        // eslint-disable-next-line react/display-name
         Cell: ({ row: { index } }) => (
             <DeleteButton onClick={() => onRowDelete(index)} />
         )

components/Loading.js → components/Loading.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled, { keyframes } from 'styled-components'
 
 const rotate = (dir) => keyframes`
@@ -9,22 +10,25 @@ const rotate = (dir) => keyframes`
   }
 `
 
-const Spinner = styled.div`
-  animation: ${props => rotate(props.dir)} ${props => 2 / props.speed}s linear infinite;
+interface SpinnerProps {
+  readonly speed: number;
+  readonly $dir: number;
+}
+
+const Spinner = styled.div<SpinnerProps>`
+  animation: ${props => rotate(props.$dir)} ${props => 2 / props.speed}s linear infinite;
 `
 
-/**
- * Configurable animated loading component
- * @param {number} [size=64] Size
- * @param {number} [speed=1] Used in css transformation as {2 / speed}s
- * @param {number} [dir=1] 1 for clockwise, -1 for counter clockwise
- * @returns Animated Loading Component
- */
-const Loading = ({ size = 64, speed = 1, dir = 1 }) => (
-  <Spinner speed={speed} dir={dir}>
+interface LoadingProps {
+  readonly size?: number;
+  readonly speed?: number;
+  readonly dir?: number;
+}
+const Loading: React.FC<LoadingProps> = ({ size = 64, speed = 1, dir = 1 }) => (
+  <Spinner speed={speed} $dir={dir}>
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      style={{ margin: 'auto', ßbackground: '#fff', display: 'block' }}
+      style={{ margin: 'auto', background: '#fff', display: 'block' }}
       width={`${size}px`}
       height={`${size}px`}
       viewBox="0 0 100 100"

components/NavBar.js

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { Flex, Box } from 'ooni-components'
+import Image from 'next/image'
 import OONILogo from 'ooni-components/components/svgs/logos/OONI-HorizontalMonochromeInverted.svg'
 import styled from 'styled-components'
 
@@ -30,7 +31,9 @@ const NavBar = () => {
   return (
     <>
       <Flex bg='blue5' color='white' p={3} alignItems='center'>
-        <NavItem><Link href='/'><OONILogo height='32px' /></Link></NavItem>
+        <NavItem><Link href='/' passHref>
+          <Image alt='OONI Logo' src={OONILogo} height='32px' width='115px' />
+        </Link></NavItem>
         <Box sx={{ position: 'absolute', right: 8 }}>
         {!loading && user && 'nick' in user && <Box> {user.nick} ({user.role}) </Box>}
         {!loading && !user && (

components/submit/Table.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react'
 import { useTable, useFlexLayout, useSortBy } from 'react-table'
-import { theme, Flex } from 'ooni-components'
+import { theme } from 'ooni-components'
 import styled from 'styled-components'
 import { MdDelete, MdEdit, MdArrowUpward, MdArrowDownward } from 'react-icons/md'
 

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -6,16 +6,16 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "category_codes": "bash scripts/fetchCategoryCodes.sh"
   },
   "dependencies": {
     "axios": "^0.21.1",
     "country-util": "^0.1.0",
     "fontsource-fira-sans": "^4.0.0",
     "immutability-helper": "^3.1.1",
-    "next": "^10.2.2",
+    "next": "^12.1.5",
     "ooni-components": "^0.4.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -28,16 +28,19 @@
     "swr": "^0.5.6"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^12.1.5",
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.4",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@welldone-software/why-did-you-render": "^6.1.4",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "babel-plugin-styled-components": "^1.12.0",
     "eslint": "^7.28.0",
+    "eslint-config-next": "^12.1.5",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "ts-migrate": "^0.1.28",
+    "typescript": "4.5.5"
   }
 }

pages/[cc].js

@@ -1,7 +1,6 @@
 import { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import { Heading } from 'ooni-components'
-import { Toaster } from 'react-hot-toast'
 
 import Layout from '../components/Layout'
 import CountryList from '../components/submit/CountryList'

pages/index.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { useRouter } from 'next/router'
-import { Flex, Box, Heading, Text, Link } from 'ooni-components'
+import { Flex, Box, Heading } from 'ooni-components'
 
 import Layout from '../components/Layout'
 import CountryList from '../components/submit/CountryList'

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}