refactor: usePreference + update TS tooling (#2333)

package.json

@@ -56,17 +56,17 @@
     "@lerna-lite/list": "^1.12.0",
     "@lerna-lite/run": "^1.12.0",
     "@standardnotes/config": "^2.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
     "changelog-parser": "^2.8.1",
     "css-loader": "^6.7.2",
-    "eslint": "^8.27.0",
+    "eslint": "^8.40.0",
     "eslint-plugin-prettier": "^4.2.1",
     "lint-staged": "^13.0.3",
     "npm-check-updates": "^16.4.1",
-    "prettier": "^2.7.1",
+    "prettier": "2.8.1",
     "sass-loader": "^13.2.0",
-    "typescript": "4.9.3",
+    "typescript": "5.0.4",
     "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -28,15 +28,6 @@ export enum PrefKey {
   AutoLightThemeIdentifier = 'autoLightThemeIdentifier',
   AutoDarkThemeIdentifier = 'autoDarkThemeIdentifier',
   NoteAddToParentFolders = 'noteAddToParentFolders',
-  MobileSortNotesBy = 'mobileSortBy',
-  MobileSortNotesReverse = 'mobileSortReverse',
-  MobileNotesHideNotePreview = 'mobileHideNotePreview',
-  MobileNotesHideDate = 'mobileHideDate',
-  MobileNotesHideTags = 'mobileHideTags',
-  MobileLastExportDate = 'mobileLastExportDate',
-  MobileDoNotShowAgainUnsupportedEditors = 'mobileDoNotShowAgainUnsupportedEditors',
-  MobileSelectedTagUuid = 'mobileSelectedTagUuid',
-  MobileNotesHideEditorIcon = 'mobileHideEditorIcon',
   NewNoteTitleFormat = 'newNoteTitleFormat',
   CustomNoteTitleFormat = 'customNoteTitleFormat',
   UpdateSavingStatusIndicator = 'updateSavingStatusIndicator',
@@ -102,15 +93,6 @@ export type PrefValue = {
   [PrefKey.AutoLightThemeIdentifier]: FeatureIdentifier | 'Default' | 'Dark'
   [PrefKey.AutoDarkThemeIdentifier]: FeatureIdentifier | 'Default' | 'Dark'
   [PrefKey.NoteAddToParentFolders]: boolean
-  [PrefKey.MobileSortNotesBy]: CollectionSortProperty
-  [PrefKey.MobileSortNotesReverse]: boolean
-  [PrefKey.MobileNotesHideNotePreview]: boolean
-  [PrefKey.MobileNotesHideDate]: boolean
-  [PrefKey.MobileNotesHideTags]: boolean
-  [PrefKey.MobileLastExportDate]: Date | undefined
-  [PrefKey.MobileDoNotShowAgainUnsupportedEditors]: boolean
-  [PrefKey.MobileSelectedTagUuid]: string | undefined
-  [PrefKey.MobileNotesHideEditorIcon]: boolean
   [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat
   [PrefKey.CustomNoteTitleFormat]: string
   [PrefKey.EditorLineHeight]: EditorLineHeight

packages/web/package.json

@@ -27,7 +27,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@babel/preset-env": "*",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
     "@lexical/react": "0.10.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@simplewebauthn/browser": "^7.1.0",
@@ -62,13 +62,13 @@
     "@types/wicg-file-system-access": "^2020.9.5",
     "@zip.js/zip.js": "^2.6.60",
     "autoprefixer": "^10.4.13",
-    "babel-loader": "^9.1.0",
+    "babel-loader": "^9.1.2",
     "circular-dependency-plugin": "^5.2.2",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "*",
     "dayjs": "^1.11.7",
     "dotenv": "^16.0.3",
-    "eslint": "^8.29.0",
+    "eslint": "*",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",

packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx

@@ -81,7 +81,7 @@ const ClipperView = ({
     })
   }, [application])
 
-  const defaultTagId = usePreference<string>(PrefKey.ClipperDefaultTagUuid)
+  const defaultTagId = usePreference(PrefKey.ClipperDefaultTagUuid)
   const [defaultTag, setDefaultTag] = useState<SNTag | undefined>()
   const defaultTagRef = useStateRef(defaultTag)
 

packages/web/src/javascripts/Components/NotesOptions/SuperExportModal.tsx

@@ -1,8 +1,8 @@
-import { ApplicationEvent, PrefKey, PrefValue } from '@standardnotes/snjs'
-import { useEffect, useState } from 'react'
+import { PrefKey, PrefValue } from '@standardnotes/snjs'
 import { useApplication } from '../ApplicationProvider'
 import Dropdown from '../Dropdown/Dropdown'
 import Modal from '../Modal/Modal'
+import usePreference from '@/Hooks/usePreference'
 
 type Props = {
   exportNotes: () => void
@@ -11,14 +11,7 @@ type Props = {
 
 const SuperExportModal = ({ exportNotes, close }: Props) => {
   const application = useApplication()
-  const [superNoteExportFormat, setSuperNoteExportFormat] = useState<PrefValue[PrefKey.SuperNoteExportFormat]>(
-    () => application.getPreference(PrefKey.SuperNoteExportFormat) || 'json',
-  )
-  useEffect(() => {
-    return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
-      setSuperNoteExportFormat(application.getPreference(PrefKey.SuperNoteExportFormat) || 'json')
-    })
-  }, [application, superNoteExportFormat])
+  const superNoteExportFormat = usePreference(PrefKey.SuperNoteExportFormat)
 
   return (
     <Modal

packages/web/src/javascripts/Components/Preferences/Panes/General/Moments.tsx

@@ -21,7 +21,7 @@ const Moments: FunctionComponent<Props> = ({ application }: Props) => {
   const momentsEnabled = application.momentsService.isEnabled
   const premiumModal = usePremiumModal()
 
-  const defaultTagId = usePreference<string>(PrefKey.MomentsDefaultTagUuid)
+  const defaultTagId = usePreference(PrefKey.MomentsDefaultTagUuid)
   const [defaultTag, setDefaultTag] = useState<SNTag | undefined>()
 
   useEffect(() => {

packages/web/src/javascripts/Constants/PrefDefaults.ts

@@ -5,6 +5,7 @@ import {
   EditorLineHeight,
   EditorFontSize,
   EditorLineWidth,
+  PrefValue,
 } from '@standardnotes/models'
 import { FeatureIdentifier } from '@standardnotes/snjs'
 
@@ -37,4 +38,12 @@ export const PrefDefaults = {
   [PrefKey.CustomNoteTitleFormat]: 'YYYY-MM-DD [at] hh:mm A',
   [PrefKey.UpdateSavingStatusIndicator]: true,
   [PrefKey.PaneGesturesEnabled]: true,
-} as const
+  [PrefKey.MomentsDefaultTagUuid]: undefined,
+  [PrefKey.ClipperDefaultTagUuid]: undefined,
+  [PrefKey.DefaultEditorIdentifier]: FeatureIdentifier.PlainEditor,
+  [PrefKey.SuperNoteExportFormat]: 'json',
+  [PrefKey.SystemViewPreferences]: {},
+  [PrefKey.AuthenticatorNames]: '',
+} satisfies {
+  [key in PrefKey]: PrefValue[key]
+}

packages/web/src/javascripts/Hooks/usePreference.tsx

@@ -1,17 +1,18 @@
 import { useApplication } from '@/Components/ApplicationProvider'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
 import { useEffect, useState } from 'react'
 
-export default function usePreference<T>(preference: PrefKey) {
+export default function usePreference<Key extends PrefKey>(preference: Key) {
   const application = useApplication()
 
-  const [value, setValue] = useState<T>(application.getPreference(preference) as T)
+  const [value, setValue] = useState(application.getPreference(preference, PrefDefaults[preference]))
 
   useEffect(() => {
     return application.addEventObserver(async () => {
-      const latestValue = application.getPreference(preference)
+      const latestValue = application.getPreference(preference, PrefDefaults[preference])
 
-      setValue(latestValue as T)
+      setValue(latestValue)
     }, ApplicationEvent.PreferencesChanged)
   }, [application, preference])
 

packages/web/src/javascripts/Utils/NoteExportUtils.ts

@@ -1,5 +1,6 @@
 import { WebApplication } from '@/Application/WebApplication'
 import { InvisibleSuperConverter } from '@/Components/SuperEditor/Tools/InvisibleMarkdownConverter'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { NoteType, PrefKey, SNNote } from '@standardnotes/snjs'
 
 export const getNoteFormat = (application: WebApplication, note: SNNote) => {
@@ -8,7 +9,10 @@ export const getNoteFormat = (application: WebApplication, note: SNNote) => {
   const isSuperNote = note.noteType === NoteType.Super
 
   if (isSuperNote) {
-    const superNoteExportFormatPref = application.getPreference(PrefKey.SuperNoteExportFormat) || 'json'
+    const superNoteExportFormatPref = application.getPreference(
+      PrefKey.SuperNoteExportFormat,
+      PrefDefaults[PrefKey.SuperNoteExportFormat],
+    )
 
     return superNoteExportFormatPref
   }