migrating client to TS

.eslintrc.js

@@ -6,8 +6,9 @@ module.exports = {
     'prettier',
     'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    'plugin:react/recommended',
   ],
-  plugins: ['@typescript-eslint', 'no-only-tests'],
+  plugins: ['@typescript-eslint', 'no-only-tests', 'react'],
   parserOptions: {
     ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module', // Allows for the use of imports

package.json

@@ -46,6 +46,10 @@
     "@types/express": "^4.17.2",
     "@types/jest": "^24.9.0",
     "@types/node": "^13.1.8",
+    "@types/pretty-bytes": "^5.2.0",
+    "@types/react": "^16.9.18",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-highlight": "^0.12.2",
     "@typescript-eslint/eslint-plugin": "^2.17.0",
     "@typescript-eslint/parser": "^2.17.0",
     "@typescript-eslint/typescript-estree": "^2.17.0",
@@ -63,8 +67,10 @@
     "prettier": "^1.19.1",
     "prettier-eslint": "^9.0.1",
     "react-dev-utils": "^8.0.0",
+    "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
     "ts-jest": "^24.3.0",
+    "ts-loader": "^6.2.1",
     "ts-node": "^8.6.2",
     "typescript": "^3.7.5",
     "webpack": "^4.41.5",

src/routes/queues.ts

@@ -1,10 +1,7 @@
 import { parse as parseRedisInfo } from 'redis-info'
 import { RequestHandler, Request } from 'express'
 import { Job } from 'bull'
-import {
-  Job as JobMq,
-  //  Queue as QueueMq
-} from 'bullmq'
+import { Job as JobMq } from 'bullmq'
 
 import { BullBoardQueues, BullBoardQueue } from '../@types'
 
@@ -86,7 +83,7 @@ const getDataForQueues = async (
     }
   }
 
-  const counts = await Promise.all(
+  const queues = await Promise.all(
     pairs.map(async ([name, { queue }]) => {
       const counts = await queue.getJobCounts(...statuses)
 
@@ -105,7 +102,7 @@ const getDataForQueues = async (
 
   return {
     stats,
-    queues: counts,
+    queues,
   }
 }
 

src/ui/components/App.js → src/ui/components/App.tsx

@@ -1,10 +1,19 @@
 import React from 'react'
-import Queue from './Queue'
-import RedisStats from './RedisStats'
-import Header from './Header'
-import useStore from './hooks/useStore'
 
-export default function App({ basePath }) {
+import { Queue as QueueElement } from './Queue'
+import { RedisStats } from './RedisStats'
+import { Header } from './Header'
+import { useStore } from './hooks/useStore'
+import { Job, JobCounts } from 'bull'
+import { Job as JobMq } from 'bullmq'
+
+interface Queueue {
+  name: string
+  counts: JobCounts
+  jobs: (Job | JobMq)[]
+}
+
+export const App = ({ basePath }: { basePath: string }) => {
   const {
     state,
     selectedStatuses,
@@ -23,9 +32,14 @@ export default function App({ basePath }) {
           'Loading...'
         ) : (
           <>
-            <RedisStats stats={state.data.stats} />
-            {state.data.queues.map(queue => (
-              <Queue
+            {state.data && state.data.stats ? (
+              <RedisStats stats={state.data.stats} />
+            ) : (
+              <>No stats to display </>
+            )}
+
+            {state.data.queues.map((queue: Queueue) => (
+              <QueueElement
                 queue={queue}
                 key={queue.name}
                 selectedStatus={selectedStatuses[queue.name]}

src/ui/components/Header.js → src/ui/components/Header.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import useScrolled from './hooks/useScrolled'
 
-export default function Header() {
+import { useScrolled } from './hooks/useScrolled'
+
+export const Header = () => {
   const scrolled = useScrolled()
 
   return (