Update packages

.nvmrc

@@ -1 +1 @@
-16.14
+18.18

package.json

@@ -8,7 +8,8 @@
     "dev": "parcel serve ./src/index.html",
     "lint": "yarn lint:scripts && yarn lint:styles",
     "lint:scripts": "eslint .",
-    "lint:styles": "stylelint 'src/**/*.tsx'"
+    "lint:styles": "stylelint 'src/**/*.tsx'",
+    "type": "yarn tsc --noEmit"
   },
   "dependencies": {
     "@emotion/react": "^11.9.3",

src/components/Preferences/BookmarkRow.tsx

@@ -4,7 +4,7 @@ import axios from 'axios'
 
 import styled from '@emotion/styled'
 
-import type { BookmarkLink } from '../../types'
+import type { BookmarkLink, BookmarkLinks } from '../../types'
 
 import { SettingsContext } from '../../context/SettingsProvider'
 
@@ -79,7 +79,7 @@ const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
       const newBookmark = { id: Date.now(), label, url, icon, category }
 
       if (bookmarks !== undefined) {
-        setSetting('bookmarks', [...bookmarks, newBookmark])
+        setSetting<BookmarkLinks>('bookmarks', [...bookmarks, newBookmark])
       } else {
         setSetting('bookmarks', [newBookmark])
       }
@@ -93,7 +93,7 @@ const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
   const updateBookmark = () => {
     const b = bookmarks || []
     const i =
-      bookmarks?.findIndex((c: BookmarkLink) => c.id === bookmark?.id) || 0
+      bookmarks?.findIndex((c: BookmarkLink) => c.id === bookmark?.id) ?? 0
     b[i as number] = {
       ...b[i as number],
       label,

src/components/Preferences/Theme.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 
+import type { Theme } from '@emotion/react'
 import styled from '@emotion/styled'
 
 import { SettingsContext } from '../../context/SettingsProvider'
@@ -45,7 +46,7 @@ type AvailableOption =
   | 'highlight'
   | 'inputFocus'
 
-const Theme = (): JSX.Element => {
+const Themer = (): JSX.Element => {
   const {
     settings: { prefersDarkMode = matchMediaFallback() },
     setSetting,
@@ -59,18 +60,21 @@ const Theme = (): JSX.Element => {
       <label>Theme</label>
       <ColorOptions>
         {theme &&
-          Object.keys(theme.colors).map((option: string) => (
+          Object.keys(theme.colors).map(option => (
             <div key={option}>
               <ColorInput
                 type="color"
                 value={theme.colors[option as AvailableOption]}
                 onChange={e => {
-                  setSetting(prefersDarkMode ? 'themeDark' : 'themeLight', {
-                    colors: {
-                      ...theme.colors,
-                      [option]: e.target.value,
-                    },
-                  })
+                  setSetting<Theme>(
+                    prefersDarkMode ? 'themeDark' : 'themeLight',
+                    {
+                      colors: {
+                        ...theme.colors,
+                        [option]: e.target.value,
+                      },
+                    }
+                  )
                 }}
               />
               <label>{option}</label>
@@ -89,4 +93,4 @@ const Theme = (): JSX.Element => {
   )
 }
 
-export default Theme
+export default Themer

src/context/SettingsProvider.tsx

@@ -36,14 +36,7 @@ export interface Settings {
 
 interface SettingsContextType {
   settings: Settings
-  setSetting: <
-    T extends
-      | string
-      | boolean
-      | BookmarkLink[]
-      | undefined
-      | Record<string, any>
-  >(
+  setSetting: <T extends string | boolean | BookmarkLink[] | Theme | undefined>(
     setting: string,
     value: T
   ) => void
@@ -71,12 +64,7 @@ const SettingsProvider = ({ children }: SettingsProviderProps): JSX.Element => {
   }, [])
 
   const setSetting = <
-    T extends
-      | string
-      | boolean
-      | BookmarkLink[]
-      | undefined
-      | Record<string, unknown>
+    T extends string | boolean | BookmarkLink[] | undefined | Theme,
   >(
     setting: string,
     value: T
@@ -96,10 +84,10 @@ const SettingsProvider = ({ children }: SettingsProviderProps): JSX.Element => {
     setSettings(s)
   }
 
+  const value = { settings, setSetting, deleteSetting, setSettings, store }
+
   return (
-    <SettingsContext.Provider
-      value={{ settings, setSetting, deleteSetting, setSettings, store }}
-    >
+    <SettingsContext.Provider value={value}>
       {children}
     </SettingsContext.Provider>
   )

src/types.ts

@@ -8,7 +8,7 @@ export type BookmarkLink = {
   id: number
   label: string
   url: string
-  icon?: string
+  icon?: string | null
   category?: string
 }