Improve birthdate handling (#10477)

eslint-suppressions.json

@@ -264,11 +264,6 @@
       "count": 1
     }
   },
-  "src/lib/hooks/useCleanError.ts": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 1
-    }
-  },
   "src/lib/hooks/useNonReactiveCallback.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1

src/components/dialogs/BirthDateSettings.tsx

@@ -37,6 +37,14 @@ export function BirthDateSettingsDialog({
   const isBirthdateUpdateAllowed = useIsBirthdateUpdateAllowed()
   const {currentAccount} = useSession()
   const isUsingAppPassword = isAppPassword(currentAccount?.accessJwt || '')
+  const cleanError = useCleanError()
+  const defaultErrorMessage = l`We were unable to load your birthdate preferences. Please try again.`
+  const fetchErrorMessage = useMemo(() => {
+    if (error) {
+      const {raw, clean} = cleanError(error)
+      return clean || raw
+    }
+  }, [error, cleanError])
 
   return (
     <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
@@ -58,12 +66,9 @@ export function BirthDateSettingsDialog({
 
             {isLoading ? (
               <Loader size="xl" />
-            ) : error || !preferences ? (
+            ) : fetchErrorMessage || !preferences ? (
               <ErrorMessage
-                message={
-                  error?.toString() ||
-                  l`We were unable to load your birthdate preferences. Please try again.`
-                }
+                message={fetchErrorMessage || defaultErrorMessage}
                 style={[a.rounded_sm]}
               />
             ) : isUsingAppPassword ? (
@@ -123,12 +128,11 @@ function BirthdayInner({
   const cleanError = useCleanError()
   const [date, setDate] = useState(preferences.birthDate || getDateAgo(18))
   const {isPending, error, mutateAsync: setBirthDate} = useBirthdateMutation()
-  const hasChanged = date !== preferences.birthDate
+  const hasChanged = date?.getTime() !== preferences.birthDate?.getTime()
   const errorMessage = useMemo(() => {
     if (error) {
-      const e = error as Error
-      const {raw, clean} = cleanError(e)
-      return clean || raw || e.toString()
+      const {raw, clean} = cleanError(error)
+      return clean || raw
     }
   }, [error, cleanError])
 

src/lib/hooks/useCleanError.ts

@@ -1,6 +1,5 @@
 import {useCallback} from 'react'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
 type CleanedError = {
   raw: string | undefined
@@ -8,9 +7,9 @@ type CleanedError = {
 }
 
 export function useCleanError() {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
-  return useCallback<(error?: any) => CleanedError>(
+  return useCallback<(error?: unknown) => CleanedError>(
     error => {
       if (!error)
         return {
@@ -18,14 +17,17 @@ export function useCleanError() {
           clean: undefined,
         }
 
-      let raw = error.toString()
+      let raw =
+        error instanceof Error
+          ? error.message
+          : typeof error === 'string'
+            ? error
+            : JSON.stringify(error)
 
       if (isNetworkError(raw)) {
         return {
           raw,
-          clean: _(
-            msg`Unable to connect. Please check your internet connection and try again.`,
-          ),
+          clean: l`Unable to connect. Please check your internet connection and try again.`,
         }
       }
 
@@ -36,9 +38,7 @@ export function useCleanError() {
       ) {
         return {
           raw,
-          clean: _(
-            msg`The server appears to be experiencing issues. Please try again in a few moments.`,
-          ),
+          clean: l`The server appears to be experiencing issues. Please try again in a few moments.`,
         }
       }
 
@@ -51,27 +51,21 @@ export function useCleanError() {
       ) {
         return {
           raw,
-          clean: _(
-            msg`You cannot update your birthdate while using an app password. Please sign in with your main password to update your birthdate.`,
-          ),
+          clean: l`You cannot update your birthdate while using an app password. Please sign in with your main password to update your birthdate.`,
         }
       }
 
       if (raw.includes('Bad token scope') || raw.includes('Bad token method')) {
         return {
           raw,
-          clean: _(
-            msg`This feature is not available while using an app password. Please sign in with your main password.`,
-          ),
+          clean: l`This feature is not available while using an app password. Please sign in with your main password.`,
         }
       }
 
       if (raw.includes('Rate Limit Exceeded')) {
         return {
           raw,
-          clean: _(
-            msg`You've reached the maximum number of requests allowed. Please try again later.`,
-          ),
+          clean: l`You've reached the maximum number of requests allowed. Please try again later.`,
         }
       }
 
@@ -84,7 +78,7 @@ export function useCleanError() {
         clean: undefined,
       }
     },
-    [_],
+    [l],
   )
 }
 

src/state/queries/preferences/index.ts

@@ -53,7 +53,7 @@ export function usePreferencesQuery() {
         const res = await agent.getPreferences()
 
         // save to local storage to ensure there are labels on initial requests
-        saveLabelers(
+        void saveLabelers(
           agent.did,
           res.moderationPrefs.labelers.map(l => l.did),
         )