Use recoil types

@types/globals.d.ts

@@ -1,6 +1,3 @@
 declare module '*.png'
 declare module '*.svg'
 declare module '*.css'
-
-// TODO [+@types/recoil] remove this when types PR is merged
-declare module 'recoil'

package.json

@@ -200,6 +200,7 @@
     "@types/node": "^12.0.4",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
+    "@types/recoil": "^0.0.0",
     "@will-stone/eslint-config": "^1.12.3",
     "@will-stone/prettier-config": "^3.0.2",
     "copy-webpack-plugin": "^5.1.1",

src/renderer/atoms.ts

@@ -1,21 +1,24 @@
 import { atom } from 'recoil'
 
+import { Browser } from '../config/browsers'
+import { UrlHistoryItem } from '../main/store'
+
 export const isUrlHistoryOpenAtom = atom({
   key: 'isUrlHistoryOpenAtom',
   default: false,
 })
 
-export const urlIdAtom = atom({
+export const urlIdAtom = atom<string | undefined>({
   key: 'urlIdAtom',
   default: undefined,
 })
 
-export const urlHistoryAtom = atom({
+export const urlHistoryAtom = atom<UrlHistoryItem[]>({
   key: 'urlHistoryAtom',
   default: [],
 })
 
-export const browsersAtom = atom({
+export const browsersAtom = atom<Browser[]>({
   key: 'browsersAtom',
   default: [],
 })

src/renderer/components/browser-button.tsx

@@ -38,7 +38,7 @@ interface Props {
 }
 
 const BrowserButton: React.FC<Props> = ({ browser, className }) => {
-  const urlId: string | undefined = useRecoilValue(urlIdSelector)
+  const urlId = useRecoilValue(urlIdSelector)
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {

src/renderer/components/history-item.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 
 const HistoryItem: React.FC<Props> = ({ isStriped, item }) => {
-  const urlId: string | undefined = useRecoilValue(urlIdSelector)
+  const urlId = useRecoilValue(urlIdSelector)
   const setUrlId = useSetRecoilState(urlIdSelector)
 
   const url = Url.parse(item.url)

src/renderer/components/the-app.tsx

@@ -37,7 +37,9 @@ const App: React.FC = () => {
     electron.ipcRenderer.on(
       URL_HISTORY_CHANGED,
       (_: unknown, urlHistory: UrlHistoryItem[]) => {
-        setUrlId()
+        // TODO should this use the latest history item?
+        const undef = undefined
+        setUrlId(undef)
         setUrlHistoryState(urlHistory)
       },
     )

src/renderer/components/the-browser-buttons.tsx

@@ -2,12 +2,11 @@ import cc from 'classcat'
 import React from 'react'
 import { useRecoilValue } from 'recoil'
 
-import { Browser } from '../../config/browsers'
 import { browsersAtom } from '../atoms'
 import BrowserButton from './browser-button'
 
 const TheBrowserButtons: React.FC = () => {
-  const browsers: Browser[] = useRecoilValue(browsersAtom)
+  const browsers = useRecoilValue(browsersAtom)
 
   const threeCols = browsers.length <= 3 || browsers.length === 6
   const fourCols =

src/renderer/components/the-keyboard-listeners.tsx

@@ -1,16 +1,15 @@
 import React, { useEffect } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 
-import { Browser } from '../../config/browsers'
 import { browsersAtom, isUrlHistoryOpenAtom } from '../atoms'
 import { urlIdSelector } from '../selectors'
 import { copyUrl, escapePressed, selectBrowser } from '../sendToMain'
 
 const TheKeyboardListeners: React.FC = ({ children }) => {
   const isUrlHistoryOpen = useRecoilValue(isUrlHistoryOpenAtom)
   const setIsUrlHistoryOpen = useSetRecoilState(isUrlHistoryOpenAtom)
-  const urlId: string | undefined = useRecoilValue(urlIdSelector)
-  const browsers: Browser[] = useRecoilValue(browsersAtom)
+  const urlId = useRecoilValue(urlIdSelector)
+  const browsers = useRecoilValue(browsersAtom)
 
   useEffect(() => {
     const handler = (event: KeyboardEvent) => {

src/renderer/components/the-url-bar.tsx

@@ -4,7 +4,6 @@ import React, { useCallback } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import Url from 'url'
 
-import { UrlHistoryItem } from '../../main/store'
 import { isUrlHistoryOpenAtom, urlHistoryAtom } from '../atoms'
 import { urlItemSelector } from '../selectors'
 import { copyUrl } from '../sendToMain'
@@ -18,8 +17,8 @@ interface Props {
 const TheUrlBar: React.FC<Props> = ({ className }) => {
   const isUrlHistoryOpen = useRecoilValue(isUrlHistoryOpenAtom)
   const setIsUrlHistoryOpen = useSetRecoilState(isUrlHistoryOpenAtom)
-  const urlItem: UrlHistoryItem | undefined = useRecoilValue(urlItemSelector)
-  const urlHistory: UrlHistoryItem[] = useRecoilValue(urlHistoryAtom)
+  const urlItem = useRecoilValue(urlItemSelector)
+  const urlHistory = useRecoilValue(urlHistoryAtom)
 
   const parsedUrl = urlItem ? Url.parse(urlItem.url) : undefined
 

src/renderer/selectors.ts

@@ -7,11 +7,8 @@ import { isUrlHistoryOpenAtom, urlHistoryAtom, urlIdAtom } from './atoms'
 /**
  * Current URL
  */
-export const urlIdSelector = selector({
+export const urlIdSelector = selector<string | undefined>({
   key: 'urlIdSelector',
-  // TODO [+@types/recoil] this should be typed when recoil types are ready
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
   get: ({ get }): string | undefined => {
     const selectedId: string | undefined = get(urlIdAtom)
     const urlHistory: UrlHistoryItem[] = get(urlHistoryAtom)
@@ -25,9 +22,6 @@ export const urlIdSelector = selector({
     // If id exists, return it, else undefined
     return urlHistory.find((u) => u.id === selectedId)?.id
   },
-  // TODO [+@types/recoil] this should be typed when recoil types are ready
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
   set: ({ set }, urlId) => {
     set(isUrlHistoryOpenAtom, false)
     set(urlIdAtom, urlId)
@@ -39,11 +33,8 @@ export const urlIdSelector = selector({
  */
 export const urlItemSelector = selector({
   key: 'urlItemSelector',
-  // TODO [+@types/recoil] this should be typed when recoil types are ready
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
   get: ({ get }): UrlHistoryItem | undefined => {
-    const urlId: string | undefined = get(urlIdSelector)
+    const urlId = get(urlIdSelector)
     const urlHistory: UrlHistoryItem[] = get(urlHistoryAtom)
 
     if (urlId) {

yarn.lock

@@ -2077,6 +2077,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/recoil@^0.0.0":
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/@types/recoil/-/recoil-0.0.0.tgz#1a77a5d50d6a398b7b16b4464e516761efcbab8d"
+  integrity sha512-i00Sidw/UDe6jxCJrY5HotFfKIMIbKHGf5chJw7AsxdHe7G8m/ot71AcnbLOS1rLTtnXnENQcf8upKYsGJNvyA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"