From e19201e175a114001872f3310b9b8946159cdcee Mon Sep 17 00:00:00 2001 From: Will Stone <654103+will-stone@users.noreply.github.com> Date: Fri, 29 May 2020 21:27:29 +0100 Subject: [PATCH] Use recoil types --- @types/globals.d.ts | 3 --- package.json | 1 + src/renderer/atoms.ts | 9 ++++++--- src/renderer/components/browser-button.tsx | 2 +- src/renderer/components/history-item.tsx | 2 +- src/renderer/components/the-app.tsx | 4 +++- src/renderer/components/the-browser-buttons.tsx | 3 +-- src/renderer/components/the-keyboard-listeners.tsx | 5 ++--- src/renderer/components/the-url-bar.tsx | 5 ++--- src/renderer/selectors.ts | 13 ++----------- yarn.lock | 7 +++++++ 11 files changed, 26 insertions(+), 28 deletions(-) diff --git a/@types/globals.d.ts b/@types/globals.d.ts index a5d654d3..25b4b28f 100644 --- a/@types/globals.d.ts +++ b/@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' diff --git a/package.json b/package.json index 1b12992c..3df6bfd3 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/atoms.ts b/src/renderer/atoms.ts index 2e07ea8e..9f5a6fd0 100644 --- a/src/renderer/atoms.ts +++ b/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({ key: 'urlIdAtom', default: undefined, }) -export const urlHistoryAtom = atom({ +export const urlHistoryAtom = atom({ key: 'urlHistoryAtom', default: [], }) -export const browsersAtom = atom({ +export const browsersAtom = atom({ key: 'browsersAtom', default: [], }) diff --git a/src/renderer/components/browser-button.tsx b/src/renderer/components/browser-button.tsx index 1fbd2028..de819ad4 100644 --- a/src/renderer/components/browser-button.tsx +++ b/src/renderer/components/browser-button.tsx @@ -38,7 +38,7 @@ interface Props { } const BrowserButton: React.FC = ({ browser, className }) => { - const urlId: string | undefined = useRecoilValue(urlIdSelector) + const urlId = useRecoilValue(urlIdSelector) const handleClick = useCallback( (event: React.MouseEvent) => { diff --git a/src/renderer/components/history-item.tsx b/src/renderer/components/history-item.tsx index 8d360496..3760bba4 100644 --- a/src/renderer/components/history-item.tsx +++ b/src/renderer/components/history-item.tsx @@ -14,7 +14,7 @@ interface Props { } const HistoryItem: React.FC = ({ isStriped, item }) => { - const urlId: string | undefined = useRecoilValue(urlIdSelector) + const urlId = useRecoilValue(urlIdSelector) const setUrlId = useSetRecoilState(urlIdSelector) const url = Url.parse(item.url) diff --git a/src/renderer/components/the-app.tsx b/src/renderer/components/the-app.tsx index 2995838f..715250c1 100644 --- a/src/renderer/components/the-app.tsx +++ b/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) }, ) diff --git a/src/renderer/components/the-browser-buttons.tsx b/src/renderer/components/the-browser-buttons.tsx index 254e0751..83c62e83 100644 --- a/src/renderer/components/the-browser-buttons.tsx +++ b/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 = diff --git a/src/renderer/components/the-keyboard-listeners.tsx b/src/renderer/components/the-keyboard-listeners.tsx index 3fb8b15c..356d1880 100644 --- a/src/renderer/components/the-keyboard-listeners.tsx +++ b/src/renderer/components/the-keyboard-listeners.tsx @@ -1,7 +1,6 @@ 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' @@ -9,8 +8,8 @@ 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) => { diff --git a/src/renderer/components/the-url-bar.tsx b/src/renderer/components/the-url-bar.tsx index c1efed71..846ec1bb 100644 --- a/src/renderer/components/the-url-bar.tsx +++ b/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 = ({ 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 diff --git a/src/renderer/selectors.ts b/src/renderer/selectors.ts index 28c412e7..c587bd4e 100644 --- a/src/renderer/selectors.ts +++ b/src/renderer/selectors.ts @@ -7,11 +7,8 @@ import { isUrlHistoryOpenAtom, urlHistoryAtom, urlIdAtom } from './atoms' /** * Current URL */ -export const urlIdSelector = selector({ +export const urlIdSelector = selector({ 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) { diff --git a/yarn.lock b/yarn.lock index 101837e2..dcb9140f 100644 --- a/yarn.lock +++ b/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"