Refactor get/set preferences

src/components/compose.jsx

@@ -27,7 +27,7 @@ import poweredByGiphyURL from '../assets/powered-by-giphy.svg';
 import Menu2 from '../components/menu2';
 import supportedLanguages from '../data/status-supported-languages';
 import urlRegex from '../data/url-regex';
-import { api } from '../utils/api';
+import { api, getPreferences } from '../utils/api';
 import { langDetector } from '../utils/browser-translator';
 import db from '../utils/db';
 import emojifyText from '../utils/emojify-text';
@@ -278,7 +278,7 @@ function Compose({
   const [poll, setPoll] = useState(null);
   const [scheduledAt, setScheduledAt] = useState(null);
 
-  const prefs = store.account.get('preferences') || {};
+  const prefs = getPreferences();
 
   const oninputTextarea = () => {
     if (!textareaRef.current) return;

src/components/media-post.jsx

@@ -5,6 +5,7 @@ import { memo } from 'preact/compat';
 import { useContext, useMemo } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
+import { getPreferences } from '../utils/api';
 import FilterContext from '../utils/filter-context';
 import { isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
@@ -107,11 +108,9 @@ function MediaPost({
   console.debug('RENDER Media post', id, status?.account.displayName);
 
   const hasSpoiler = sensitive;
-  const readingExpandMedia = useMemo(() => {
-    // default | show_all | hide_all
-    const prefs = store.account.get('preferences') || {};
-    return prefs['reading:expand:media']?.toLowerCase() || 'default';
-  }, []);
+  const prefs = getPreferences();
+  const readingExpandMedia =
+    prefs['reading:expand:media']?.toLowerCase() || 'default';
   const showSpoilerMedia = readingExpandMedia === 'show_all';
 
   const Parent = parent || 'div';

src/components/status.jsx

@@ -40,7 +40,7 @@ import Menu2 from '../components/menu2';
 import Modal from '../components/modal';
 import NameText from '../components/name-text';
 import Poll from '../components/poll';
-import { api } from '../utils/api';
+import { api, getPreferences } from '../utils/api';
 import { langDetector } from '../utils/browser-translator';
 import emojifyText from '../utils/emojify-text';
 import enhanceContent from '../utils/enhance-content';
@@ -344,15 +344,6 @@ const getCurrentAccID = mem(
   },
 );
 
-const getPrefs = mem(
-  () => {
-    return store.account.get('preferences') || {};
-  },
-  {
-    maxAge: 60 * 1000, // 1 minute
-  },
-);
-
 function Status({
   statusID,
   status,
@@ -448,7 +439,7 @@ function Status({
     inReplyToAccountId,
     content,
     mentions,
-    mediaAttachments,
+    mediaAttachments = [],
     reblog,
     uri,
     url,
@@ -554,16 +545,14 @@ function Status({
     inReplyToAccountId === currentAccount ||
     mentions?.find((mention) => mention.id === currentAccount);
 
-  const readingExpandSpoilers = useMemo(() => {
-    const prefs = getPrefs();
-    return !!prefs['reading:expand:spoilers'];
-  }, []);
-  const readingExpandMedia = useMemo(() => {
-    // default | show_all | hide_all
-    // Ignore hide_all because it means hide *ALL* media including non-sensitive ones
-    const prefs = getPrefs();
-    return prefs['reading:expand:media']?.toLowerCase() || 'default';
-  }, []);
+  const prefs = getPreferences();
+  const readingExpandSpoilers = !!prefs['reading:expand:spoilers'];
+
+  // default | show_all | hide_all
+  // Ignore hide_all because it means hide *ALL* media including non-sensitive ones
+  const readingExpandMedia =
+    prefs['reading:expand:media']?.toLowerCase() || 'default';
+
   // FOR TESTING:
   // const readingExpandSpoilers = true;
   // const readingExpandMedia = 'show_all';
@@ -713,8 +702,9 @@ function Status({
   const textWeight = useCallback(
     () =>
       Math.max(
-        Math.round((spoilerText.length + htmlContentLength(content)) / 140) ||
-          1,
+        Math.round(
+          ((spoilerText?.length || 0) + htmlContentLength(content)) / 140,
+        ) || 1,
         1,
       ),
     [spoilerText, content],

src/pages/catchup.jsx

@@ -15,7 +15,6 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
-import punycode from 'punycode/';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSearchParams } from 'react-router-dom';
 import { uid } from 'uid/single';
@@ -30,7 +29,7 @@ import Modal from '../components/modal';
 import NameText from '../components/name-text';
 import NavMenu from '../components/nav-menu';
 import RelativeTime from '../components/relative-time';
-import { api } from '../utils/api';
+import { api, getPreferences } from '../utils/api';
 import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
 import db from '../utils/db';
 import emojifyText from '../utils/emojify-text';
@@ -1855,10 +1854,8 @@ function PostPeek({ post, filterInfo }) {
   const isThread =
     (inReplyToId && inReplyToAccountId === account.id) || !!_thread;
 
-  const readingExpandSpoilers = useMemo(() => {
-    const prefs = store.account.get('preferences') || {};
-    return !!prefs['reading:expand:spoilers'];
-  }, []);
+  const prefs = getPreferences();
+  const readingExpandSpoilers = !!prefs['reading:expand:spoilers'];
   // const readingExpandSpoilers = true;
   const showMedia =
     readingExpandSpoilers ||

src/pages/settings.jsx

@@ -11,7 +11,7 @@ import LangSelector from '../components/lang-selector';
 import Link from '../components/link';
 import RelativeTime from '../components/relative-time';
 import languages from '../data/translang-languages';
-import { api } from '../utils/api';
+import { api, getPreferences, setPreferences } from '../utils/api';
 import getTranslateTargetLanguage from '../utils/get-translate-target-language';
 import localeCode2Text from '../utils/localeCode2Text';
 import prettyBytes from '../utils/pretty-bytes';
@@ -55,7 +55,7 @@ function Settings({ onClose }) {
   const systemTargetLanguageText = localeCode2Text(systemTargetLanguage);
   const currentTextSize = store.local.get('textSize') || DEFAULT_TEXT_SIZE;
 
-  const [prefs, setPrefs] = useState(store.account.get('preferences') || {});
+  const [prefs, setPrefs] = useState(getPreferences());
   const { masto, authenticated, instance } = api();
   // Get preferences every time Settings is opened
   // NOTE: Disabled for now because I don't expect this to change often. Also for some reason, the /api/v1/preferences endpoint is cached for a while and return old prefs if refresh immediately after changing them.
@@ -300,7 +300,7 @@ function Settings({ onClose }) {
                               ...prefs,
                               'posting:default:visibility': value,
                             });
-                            store.account.set('preferences', {
+                            setPreferences({
                               ...prefs,
                               'posting:default:visibility': value,
                             });

src/utils/api.js

@@ -1,6 +1,8 @@
 import { compareVersions, satisfies, validate } from 'compare-versions';
 import { createRestAPIClient, createStreamingAPIClient } from 'masto';
 
+import mem from '../utils/mem';
+
 import store from './store';
 import {
   getAccount,
@@ -179,8 +181,20 @@ export async function initAccount(client, instance, accessToken, vapidKey) {
   });
 }
 
+export const getPreferences = mem(
+  () => store.account.get('preferences') || {},
+  {
+    maxAge: 60 * 1000, // 1 minute
+  },
+);
+
+export function setPreferences(preferences) {
+  getPreferences.clear(); // clear memo cache
+  store.account.set('preferences', preferences);
+}
+
 export function hasPreferences() {
-  return !!store.account.get('preferences');
+  return !!getPreferences();
 }
 
 // Get preferences
@@ -190,7 +204,7 @@ export async function initPreferences(client) {
     __BENCHMARK.start('fetch-preferences');
     const preferences = await masto.v1.preferences.fetch();
     __BENCHMARK.end('fetch-preferences');
-    store.account.set('preferences', preferences);
+    setPreferences(preferences);
   } catch (e) {
     // silently fail
     console.error(e);