Upgrade project to TypeScript

apps/backend/package.json

@@ -17,7 +17,7 @@
   "homepage": "https://github.com/shabados/presenter#readme",
   "dependencies": {
     "@electron/remote": "^2.0.8",
-    "@presenter/contract": "file:../../packages/contract",
+    "@presenter/contract": "*",
     "@presenter/node": "file:../../packages/node",
     "@presenter/swiss-knife": "file:../../packages/swiss-knife",
     "@sentry/node": "^6.19.7",

apps/backend/src/services/zoom.ts

@@ -1,15 +1,15 @@
 //! To be refactored into shared utilities - @shabados/transformers?
 import { Line, Shabad } from '@presenter/contract'
+import { mutableCounter, mutableValue } from '@presenter/node/src/mutable-value'
 import { LANGUAGES, TRANSLATION_ORDER, TRANSLITERATION_ORDER } from '@shabados/frontend/src/lib/data'
 import { customiseLine, getTranslations, getTransliterators } from '@shabados/frontend/src/lib/line'
 import { stripVishraams, toUnicode } from 'gurmukhi-utils'
 import { mapValues } from 'lodash'
 import Url from 'url-parse'
 
 import fetch from '../helpers/fetch'
-import { mutableCounter, mutableValue } from '@presenter/node/src/mutable-value'
-import { getSources, GetSourcesResult } from './database'
 import settings from '../settings'
+import { getSources, GetSourcesResult } from './database'
 
 const prepareSecondary = ( data, sorter ) => Object
   .entries( data )

apps/frontend/package.json

@@ -45,7 +45,8 @@
     "start": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "types": "tsc --noEmit"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.182",
@@ -56,6 +57,7 @@
     "@types/scroll-into-view": "^1.16.0",
     "@vitejs/plugin-react": "^1.3.2",
     "source-map-explorer": "^2.5.2",
-    "vite": "^2.9.8"
+    "vite": "^2.9.8",
+    "@presenter/contract": "file:/../../packages/contract"
   }
 }

apps/frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import './App.css'
 
+import { RecommendedSources, Shabad, Writer } from '@presenter/contract'
 import classNames from 'classnames'
 import { SnackbarProvider } from 'notistack'
 import { ElementType, lazy, PureComponent, ReactNode, Suspense } from 'react'
@@ -48,7 +49,7 @@ class App extends PureComponent {
     transitionHistory: {},
     latestLines: {},
     shabad: null,
-    recommendedSources: {},
+    recommendedSources: {} as RecommendedSources['recommendedSources'],
     writers: {},
     settings: loadSettings(),
     next: {},
@@ -71,19 +72,19 @@ class App extends PureComponent {
     controller.on( 'settings', this.onSettings )
 
     // Get recommended sources and set as settings, if there are none
-    fetch( `${BACKEND_URL}/sources` )
+    void fetch( `${BACKEND_URL}/sources` )
       .then( ( res ) => res.json() )
-      .then( ( { recommendedSources } ) => {
+      .then( ( { recommendedSources }: { recommendedSources: RecommendedSources['recommendedSources'] } ) => {
         //* Update default options and settings with fetched recommended sources
         DEFAULT_OPTIONS.local.sources = recommendedSources
         //! Re-load settings since we've modified DEFAULT_OPTIONS directly
         this.setState( { recommendedSources, settings: loadSettings() } )
       } )
 
     // Get writers
-    fetch( `${BACKEND_URL}/writers` )
+    void fetch( `${BACKEND_URL}/writers` )
       .then( ( res ) => res.json() )
-      .then( ( { writers } ) => this.setState( { writers } ) )
+      .then( ( { writers }: { writers: Writer[] } ) => this.setState( { writers } ) )
   }
 
   componentWillUnmount() {
@@ -112,9 +113,11 @@ class App extends PureComponent {
 
   onDisconnected = () => this.setState( { connected: false } )
 
-  onShabad = ( shabad: any ) => this.setState( { next: { shabad, bani: null } } )
+  onShabad = ( shabad: Shabad ) => this.setState( { next: { shabad, bani: null } } )
 
-  onLine = ( lineId: string ) => this.setState( ( { next }: any ) => ( { lineId, ...next, next: {} } ) )
+  onLine = ( lineId: string ) => this.setState(
+    ( { next }: any ) => ( { lineId, ...next, next: {} } )
+  )
 
   onViewedLines = ( viewedLines: any[] ) => this.setState( { viewedLines } )
 
@@ -179,11 +182,12 @@ class App extends PureComponent {
       [ RecommendedSourcesContext.Provider, recommendedSources ],
       [ ContentContext.Provider, { bani, shabad, lineId, mainLineId, nextLineId } ],
       [ SnackbarProvider ],
-    ] as [ElementType, any][] ).reduce( ( withContexts, [ Provider, value ] ) => ( children ) => withContexts(
-      <Provider value={value}>
-        {children}
-      </Provider>,
-    ), ( context: ReactNode ) => context )
+    ] as [ElementType, any][] )
+      .reduce( ( withContexts, [ Provider, value ] ) => ( children ) => withContexts(
+        <Provider value={value}>
+          {children}
+        </Provider>,
+      ), ( context: ReactNode ) => context )
 
     return withContexts(
       <div className={classNames( { mobile: isMobile, tablet: isTablet, desktop: isDesktop }, 'app' )}>

apps/frontend/src/Controller/Bookmarks.tsx

@@ -1,7 +1,6 @@
 import './Bookmarks.css'
 
 import { List, ListItem } from '@mui/material'
-import { func, number } from 'prop-types'
 import { useContext } from 'react'
 
 import { BookmarksContext } from '../lib/contexts'
@@ -11,7 +10,7 @@ import { withNavigationHotkeys } from '../shared/NavigationHotkeys'
 
 type BookmarkProps = {
   focused?: number,
-  register: (index: number, ref: HTMLElement) => void,
+  register: ( index: number, ref: HTMLElement | null ) => void,
 }
 
 const Bookmarks = ( { register, focused = 0 }: BookmarkProps ) => {

apps/frontend/src/Controller/History.tsx

@@ -9,7 +9,6 @@ import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import { stripVishraams } from 'gurmukhi-utils'
-import { func, number } from 'prop-types'
 import { useContext, useMemo } from 'react'
 
 import { HISTORY_DOWNLOAD_URL } from '../lib/consts'
@@ -20,7 +19,7 @@ import { withNavigationHotkeys } from '../shared/NavigationHotkeys'
 
 type HistoryProps = {
   focused?: number,
-  register: (index: number, ref: HTMLElement) => void,
+  register: ( index: number, ref: HTMLElement ) => void,
 }
 
 const History = ( { register, focused = 0 }: HistoryProps ) => {

apps/frontend/src/Controller/Navigator.js → apps/frontend/src/Controller/Navigator.tsx

@@ -16,7 +16,6 @@ import ListItem from '@mui/material/ListItem'
 import classNames from 'classnames'
 import { stripVishraams } from 'gurmukhi-utils'
 import { invert } from 'lodash'
-import { bool, func, string } from 'prop-types'
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
 
@@ -33,6 +32,17 @@ import NavigatorHotKeys from '../shared/NavigatorHotkeys'
 import ShabadInfo from './ShabadInfo'
 import ToolbarButton from './ToolbarButton'
 
+type NavigatorLineProps = {
+  register: ( id, line, ) => any,
+  gurmukhi: string,
+  focused: boolean,
+  next: boolean,
+  main: boolean,
+  id: string,
+  hotkey?: string | null,
+  timestamp?: string | null,
+}
+
 /**
 * Line component that attaches click handlers.
 * @param gurmukhi The Gurmukhi for the line to render.
@@ -44,11 +54,11 @@ const NavigatorLine = ( {
   register,
   focused,
   gurmukhi,
-  hotkey,
+  hotkey = null,
   main,
   next,
-  timestamp,
-} ) => {
+  timestamp = null,
+}: NavigatorLineProps ) => {
   // Move to the line id on click
   const onClick = () => controller.line( id )
 
@@ -83,27 +93,19 @@ const NavigatorLine = ( {
   )
 }
 
-NavigatorLine.propTypes = {
-  register: func.isRequired,
-  gurmukhi: string.isRequired,
-  focused: bool.isRequired,
-  next: bool.isRequired,
-  main: bool.isRequired,
-  id: string.isRequired,
-  hotkey: string,
-  timestamp: string,
-}
-
-NavigatorLine.defaultProps = {
-  hotkey: null,
-  timestamp: null,
+type NavigatorProps = {
+  updateFocus: () => any,
+  register: () => any,
+  focused?: string,
 }
 
 /**
  * Navigator Component.
  * Displays lines from Shabad and allows navigation.
  */
-const Navigator = ( { updateFocus, register, focused } ) => {
+const Navigator = ( {
+  updateFocus, register, focused,
+}: NavigatorProps ) => {
   const location = useLocation()
 
   const { viewedLines } = useContext( HistoryContext )
@@ -160,16 +162,6 @@ const Navigator = ( { updateFocus, register, focused } ) => {
   )
 }
 
-Navigator.propTypes = {
-  updateFocus: func.isRequired,
-  register: func.isRequired,
-  focused: string,
-}
-
-Navigator.defaultProps = {
-  focused: undefined,
-}
-
 const NavigatorNavigationHotkeys = withNavigationHotkeys( {
   arrowKeys: true,
   lineKeys: true,
@@ -190,10 +182,14 @@ const NavigatorWithAllHotKeys = ( props ) => (
 
 export default NavigatorWithAllHotKeys
 
+type BarProps = {
+  onHover: ( text: string | null ) => Record<string, any>,
+}
+
 /**
  * Used by Menu parent to render content in the bottom bar.
  */
-export const Bar = ( { onHover } ) => {
+export const Bar = ( { onHover }: BarProps ) => {
   const [ autoSelectHover, setAutoSelectHover ] = useState( false )
 
   const content = useContext( ContentContext )
@@ -292,11 +288,3 @@ export const Bar = ( { onHover } ) => {
     </div>
   )
 }
-
-Bar.propTypes = {
-  onHover: func,
-}
-
-Bar.defaultProps = {
-  onHover: () => {},
-}

apps/frontend/src/Controller/Search/Result.js → apps/frontend/src/Controller/Search/Result.tsx

@@ -1,13 +1,25 @@
 import { ListItem } from '@mui/material'
 import classNames from 'classnames'
-import { arrayOf, bool, func, number, shape, string } from 'prop-types'
 import { forwardRef, useContext } from 'react'
 
 import { RecommendedSourcesContext, SettingsContext, WritersContext } from '../../lib/contexts'
 import controller from '../../lib/controller'
 import { LANGUAGE_NAMES, SOURCE_ABBREVIATIONS, TRANSLITERATORS } from '../../lib/data'
 import { customiseLine, getTranslation } from '../../lib/line'
 
+type ResultProps = {
+  gurmukhi: string,
+  id: string,
+  typeId: number,
+  shabadId: string,
+  focused: boolean,
+  highlighter: ( {}: { gurmukhi: string } ) => any,
+  sourceId: number,
+  shabad: Record<string, any>,
+  sourcePage: number,
+  translations: { [translation: string]: string }[],
+}
+
 /**
  * Renders a single result, highlighting the match.
  * @param {string} gurmukhi The shabad line to display.
@@ -33,7 +45,7 @@ const Result = forwardRef( ( {
   highlighter,
   sourcePage,
   translations,
-}, ref ) => {
+}: ResultProps, ref ) => {
   const { local: {
     sources,
     search: {
@@ -116,17 +128,4 @@ const Result = forwardRef( ( {
   )
 } )
 
-Result.propTypes = {
-  gurmukhi: string.isRequired,
-  id: string.isRequired,
-  typeId: number.isRequired,
-  shabadId: string.isRequired,
-  focused: bool.isRequired,
-  highlighter: func.isRequired,
-  sourceId: number.isRequired,
-  shabad: shape( { } ).isRequired,
-  sourcePage: number.isRequired,
-  translations: arrayOf( shape( { translation: string.isRequired } ) ).isRequired,
-}
-
 export default Result

apps/frontend/src/Controller/Search/index.js → apps/frontend/src/Controller/Search/index.tsx

@@ -4,7 +4,6 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconButton, Input, InputAdornment, List } from '@mui/material'
 import classNames from 'classnames'
-import { func, number, oneOfType, string } from 'prop-types'
 import { stringify } from 'querystring'
 import { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -41,12 +40,18 @@ const getSearchParams = ( searchQuery ) => {
   return { anchor, value, type }
 }
 
+type SearchProps = {
+  updateFocus?: () => any,
+  register?: () => any,
+  focused?: string | number,
+}
+
 /**
  * Search Component.
  * Converts ASCII to unicode on input.
  * Displays results.
  */
-const Search = ( { updateFocus, register, focused } ) => {
+const Search = ( { updateFocus, register, focused }: SearchProps ) => {
   const { local: {
     search: {
       showResultCitations,
@@ -199,16 +204,6 @@ const Search = ( { updateFocus, register, focused } ) => {
   )
 }
 
-Search.propTypes = {
-  focused: oneOfType( [ string, number ] ),
-  register: func.isRequired,
-  updateFocus: func.isRequired,
-}
-
-Search.defaultProps = {
-  focused: undefined,
-}
-
 export default withNavigationHotkeys( {
   keymap: {
     next: [ 'down', 'tab' ],

apps/frontend/src/Controller/ToolbarButton.tsx

@@ -1,9 +1,10 @@
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import IconButton from '@mui/material/IconButton'
 
 type ToolbarButtonProps = {
   name: string,
-  icon: FontAwesomeIconProps,
+  icon: IconProp,
   className?: string,
   onClick?: () => void,
   onMouseEnter?: () => void,