Minimize useSettings calls (#15)

useSettings refreshes the expiries of all settings cookies each time it is called, which is a slow operation. This reduces its overuse.
Universalis-FFXIV · Jul 5, 2022 · a5d8596 · a5d8596
1 parent 9ff6545
commit a5d8596
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 37 deletions.
diff --git a/components/GameMateria/GameMateria.tsx b/components/GameMateria/GameMateria.tsx
@@ -1,15 +1,13 @@
 import { getItem, getMateria } from '../../data/game';
-import useSettings from '../../hooks/useSettings';
+import { Language } from '../../types/universalis/lang';
 
 interface GameMateriaProps {
   materiaId: number;
   slotId: number;
+  lang: Language;
 }
 
-export default function GameMateria({ materiaId, slotId }: GameMateriaProps) {
-  const [settings] = useSettings();
-  const lang = settings['mogboard_language'] ?? 'en';
-
+export default function GameMateria({ materiaId, slotId, lang }: GameMateriaProps) {
   const materia = getMateria(materiaId, lang);
   if (materia == null) {
     return <></>;

diff --git a/components/List/ListItem/ListItem.tsx b/components/List/ListItem/ListItem.tsx
@@ -4,6 +4,7 @@ import GameItemIcon from '../../GameItemIcon/GameItemIcon';
 import ListItemHeader from '../ListItemHeader/ListItemHeader';
 import Tooltip from '../../Tooltip/Tooltip';
 import ListItemMarket from '../ListItemMarket/ListItemMarket';
+import { Language } from '../../../types/universalis/lang';
 
 interface ListItemProps {
   itemId: number;
@@ -12,6 +13,7 @@ interface ListItemProps {
   reqIsOwner: boolean;
   showHomeWorld: boolean;
   removeItem: (itemId: number) => void;
+  lang: Language;
 }
 
 export default function ListItem({
@@ -21,6 +23,7 @@ export default function ListItem({
   reqIsOwner,
   showHomeWorld,
   removeItem,
+  lang,
 }: ListItemProps) {
   return (
     <div className="pl_i">
@@ -29,7 +32,7 @@ export default function ListItem({
       </div>
       <div>
         <h2>
-          <ListItemHeader item={item} />
+          <ListItemHeader item={item} lang={lang} />
           {reqIsOwner && (
             <Tooltip
               label={
@@ -44,7 +47,12 @@ export default function ListItem({
             </Tooltip>
           )}
         </h2>
-        <ListItemMarket item={item} market={market.items[itemId]} showHomeWorld={showHomeWorld} />
+        <ListItemMarket
+          item={item}
+          market={market.items[itemId]}
+          showHomeWorld={showHomeWorld}
+          lang={lang}
+        />
       </div>
     </div>
   );

diff --git a/components/List/ListItemHeader/ListItemHeader.tsx b/components/List/ListItemHeader/ListItemHeader.tsx
@@ -1,17 +1,15 @@
 import Link from 'next/link';
 import { getClassJobCategory, getItemKind, getItemSearchCategory } from '../../../data/game';
-import useSettings from '../../../hooks/useSettings';
 import { Item } from '../../../types/game/Item';
+import { Language } from '../../../types/universalis/lang';
 import CopyTextButton from '../../CopyTextButton/CopyTextButton';
 
 interface ListItemHeaderProps {
   item?: Item;
+  lang: Language;
 }
 
-export default function ListItemHeader({ item }: ListItemHeaderProps) {
-  const [settings] = useSettings();
-  const lang = settings['mogboard_language'] ?? 'en';
-
+export default function ListItemHeader({ item, lang }: ListItemHeaderProps) {
   if (item == null) {
     return <></>;
   }

diff --git a/components/List/ListItemMarket/ListItemMarket.tsx b/components/List/ListItemMarket/ListItemMarket.tsx
@@ -1,21 +1,19 @@
 import { t, Trans } from '@lingui/macro';
 import RelativeTime from '@yaireo/relative-time';
 import { sprintf } from 'sprintf-js';
-import useSettings from '../../../hooks/useSettings';
 import { Item } from '../../../types/game/Item';
+import { Language } from '../../../types/universalis/lang';
 import ListingsTable from '../../ListingsTable/ListingsTable';
 import SalesTable from '../../SalesTable/SalesTable';
 
 interface ListItemMarketProps {
   item?: Item;
   market: any;
   showHomeWorld: boolean;
+  lang: Language;
 }
 
-export default function ListItemMarket({ item, market, showHomeWorld }: ListItemMarketProps) {
-  const [settings] = useSettings();
-  const lang = settings['mogboard_language'] ?? 'en';
-
+export default function ListItemMarket({ item, market, showHomeWorld, lang }: ListItemMarketProps) {
   if (item == null) {
     return <div />;
   }
@@ -40,6 +38,7 @@ export default function ListItemMarket({ item, market, showHomeWorld }: ListItem
               averageNq={market.currentAveragePriceNQ}
               crossWorld={!showHomeWorld}
               includeDiff={false}
+              lang={lang}
               start={0}
               end={5}
             />
@@ -58,6 +57,7 @@ export default function ListItemMarket({ item, market, showHomeWorld }: ListItem
               averageNq={market.averagePriceNQ}
               crossWorld={!showHomeWorld}
               includeDiff={false}
+              lang={lang}
               start={0}
               end={5}
             />

diff --git a/components/ListingsTable/ListingsTable.tsx b/components/ListingsTable/ListingsTable.tsx
@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro';
 import Image from 'next/image';
 import { Fragment, PropsWithChildren } from 'react';
+import { Language } from '../../types/universalis/lang';
 import GameCityIcon from '../GameCityIcon/GameCityIcon';
 import GameMateria from '../GameMateria/GameMateria';
 import SortTable from '../SortTable/SortTable';
@@ -12,6 +13,7 @@ interface ListingsTableProps {
   averageHq: number;
   crossWorld: boolean;
   includeDiff: boolean;
+  lang: Language;
   start?: number;
   end?: number;
 }
@@ -119,6 +121,7 @@ export default function ListingsTable({
   averageHq,
   crossWorld,
   includeDiff,
+  lang,
   start,
   end,
 }: ListingsTableProps) {
@@ -131,7 +134,7 @@ export default function ListingsTable({
         hq: listing.hq,
         materia: listing.materia.map((m: { materiaID: number; slotID: number }, i: number) => (
           <Fragment key={i}>
-            <GameMateria materiaId={m.materiaID} slotId={m.slotID} />
+            <GameMateria materiaId={m.materiaID} slotId={m.slotID} lang={lang} />
             <br />
           </Fragment>
         )),

diff --git a/components/Market/MarketDataCenter/MarketDataCenter.tsx b/components/Market/MarketDataCenter/MarketDataCenter.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { sprintf } from 'sprintf-js';
 import { DataCenter } from '../../../types/game/DataCenter';
 import { Item } from '../../../types/game/Item';
+import { Language } from '../../../types/universalis/lang';
 import ListingsTable from '../../ListingsTable/ListingsTable';
 import SalesTable from '../../SalesTable/SalesTable';
 import MarketAverages from '../MarketAverages/MarketAverages';
@@ -15,13 +16,14 @@ interface MarketDataCenterProps {
   item: Item;
   dc: DataCenter;
   markets: Record<number, any>;
+  lang: Language;
 }
 
 function entriesToShow(entries: {}[]) {
   return Math.max(Math.floor(entries.length * 0.1), 10);
 }
 
-export default function MarketDataCenter({ item, dc, markets }: MarketDataCenterProps) {
+export default function MarketDataCenter({ item, dc, markets, lang }: MarketDataCenterProps) {
   const worldsSorted = dc.worlds.sort((a, b) => a.name.localeCompare(b.name));
 
   if (Object.keys(markets).length !== dc.worlds.length) {
@@ -124,6 +126,7 @@ export default function MarketDataCenter({ item, dc, markets }: MarketDataCenter
                 averageNq={nqListingsAveragePpu}
                 crossWorld={true}
                 includeDiff={true}
+                lang={lang}
                 start={0}
                 end={entriesToShow(hqListings)}
               />
@@ -139,6 +142,7 @@ export default function MarketDataCenter({ item, dc, markets }: MarketDataCenter
             averageNq={nqListingsAveragePpu}
             crossWorld={true}
             includeDiff={true}
+            lang={lang}
             start={0}
             end={entriesToShow(nqListings)}
           />
@@ -156,6 +160,7 @@ export default function MarketDataCenter({ item, dc, markets }: MarketDataCenter
                 averageNq={nqSalesAveragePpu}
                 crossWorld={true}
                 includeDiff={true}
+                lang={lang}
                 start={0}
                 end={entriesToShow(hqSales)}
               />
@@ -169,6 +174,7 @@ export default function MarketDataCenter({ item, dc, markets }: MarketDataCenter
             averageNq={nqSalesAveragePpu}
             crossWorld={true}
             includeDiff={true}
+            lang={lang}
             start={0}
             end={entriesToShow(nqSales)}
           />

diff --git a/components/Market/MarketWorld/MarketWorld.tsx b/components/Market/MarketWorld/MarketWorld.tsx
@@ -1,9 +1,8 @@
 import { t, Trans } from '@lingui/macro';
 import RelativeTime from '@yaireo/relative-time';
-import { useState, useEffect } from 'react';
-import useSettings from '../../../hooks/useSettings';
 import { Item } from '../../../types/game/Item';
 import { World } from '../../../types/game/World';
+import { Language } from '../../../types/universalis/lang';
 import ListingsTable from '../../ListingsTable/ListingsTable';
 import SalesTable from '../../SalesTable/SalesTable';
 import MarketHistoryGraph from '../MarketHistoryGraph/MarketHistoryGraph';
@@ -14,16 +13,14 @@ interface MarketWorldProps {
   item: Item;
   world: World;
   market: any;
+  lang: Language;
 }
 
 function entriesToShow(entries: {}[]) {
   return Math.max(Math.floor(entries.length * 0.1), 10);
 }
 
-export default function MarketWorld({ item, world, market }: MarketWorldProps) {
-  const [settings] = useSettings();
-  const lang = settings['mogboard_language'] ?? 'en';
-
+export default function MarketWorld({ item, world, market, lang }: MarketWorldProps) {
   const relativeTime = new RelativeTime({ locale: lang });
 
   if (market == null) {
@@ -62,6 +59,7 @@ export default function MarketWorld({ item, world, market }: MarketWorldProps) {
             averageNq={market.currentAveragePriceNQ}
             crossWorld={false}
             includeDiff={true}
+            lang={lang}
             start={0}
             end={entriesToShow(market.listings)}
           />
@@ -76,6 +74,7 @@ export default function MarketWorld({ item, world, market }: MarketWorldProps) {
             averageNq={market.averagePriceNQ}
             crossWorld={false}
             includeDiff={true}
+            lang={lang}
             start={0}
             end={entriesToShow(market.listings)}
           />

diff --git a/components/SalesTable/SalesTable.tsx b/components/SalesTable/SalesTable.tsx
@@ -4,14 +4,15 @@ import { PropsWithChildren, Suspense } from 'react';
 import SortTable from '../SortTable/SortTable';
 import Tooltip from '../Tooltip/Tooltip';
 import Image from 'next/image';
-import useSettings from '../../hooks/useSettings';
+import { Language } from '../../types/universalis/lang';
 
 interface SalesTableProps {
   sales: any[];
   averageHq: number;
   averageNq: number;
   crossWorld: boolean;
   includeDiff: boolean;
+  lang: Language;
   start?: number;
   end?: number;
 }
@@ -44,10 +45,7 @@ function SalesTableHeader({
   );
 }
 
-function SalesTableRow({ sale }: { sale: SaleRow }) {
-  const [settings] = useSettings();
-  const lang = settings['mogboard_language'] ?? 'en';
-
+function SalesTableRow({ sale, lang }: { sale: SaleRow; lang: Language }) {
   const relativeTime = new RelativeTime({ locale: lang });
   return (
     <tr>
@@ -106,6 +104,7 @@ export default function SalesTable({
   averageNq,
   crossWorld,
   includeDiff,
+  lang,
   start,
   end,
 }: SalesTableProps) {
@@ -183,7 +182,7 @@ export default function SalesTable({
           </tr>
         }
       >
-        {(sale) => <SalesTableRow sale={sale} />}
+        {(sale) => <SalesTableRow sale={sale} lang={lang} />}
       </SortTable>
     </div>
   );

diff --git a/hooks/useSettings.ts b/hooks/useSettings.ts
@@ -1,14 +1,20 @@
 import { useEffect } from 'react';
 import { useCookies } from 'react-cookie';
+import { Language } from '../types/universalis/lang';
 
-type Settings = {
+interface Settings {
   mogboard_server: string;
-  mogboard_language: 'en' | 'fr' | 'de' | 'ja' | 'chs';
+  mogboard_language: Language;
   mogboard_timezone: string;
   mogboard_leftnav: 'on' | 'off';
   mogboard_homeworld: 'yes' | 'no';
-};
+}
 
+/**
+ * Retrieve the user's site settings.
+ * WARNING: This function refreshes the expiry of all settings cookies; this is a relatively *slow* operation!
+ * Try to pass specific values from this where possible, instead of calling it in a deeply-nested loop.
+ */
 export default function useSettings(): [
   Partial<Settings>,
   (name: keyof Settings, value: any) => void

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -20,7 +20,7 @@ import { messages as messagesDe } from '../i18n/de/messages';
 import { messages as messagesFr } from '../i18n/fr/messages';
 import { messages as messagesZhHans } from '../i18n/zh-HANS/messages';
 import App from 'next/app';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { PopupData, PopupProvider } from '../components/UniversalisLayout/components/Popup/Popup';
 import {
   ModalCoverData,

diff --git a/pages/list/[listId].tsx b/pages/list/[listId].tsx
@@ -176,6 +176,7 @@ const List: NextPage<ListProps> = ({ dcs, list, reqIsOwner, ownerName }) => {
               updateList({ items });
               dispatch({ type: 'removeItem', itemId: x });
             }}
+            lang={lang}
           />
         ))}
         {stateList.items.length === 0 && (

diff --git a/pages/market/[itemId].tsx b/pages/market/[itemId].tsx
@@ -117,11 +117,16 @@ const Market: NextPage<MarketProps> = ({ hasSession, lists, markets, itemId, dc,
           </div>
           <div className="tab">
             <div className={`tab-page tab-summary ${selectedWorld == null ? 'open' : ''}`}>
-              <MarketDataCenter item={item} dc={dc} markets={markets} />
+              <MarketDataCenter item={item} dc={dc} markets={markets} lang={lang} />
             </div>
             {selectedWorld && (
               <div className="tab-page tab-cw open">
-                <MarketWorld item={item} world={selectedWorld} market={markets[selectedWorld.id]} />
+                <MarketWorld
+                  item={item}
+                  world={selectedWorld}
+                  market={markets[selectedWorld.id]}
+                  lang={lang}
+                />
               </div>
             )}
           </div>

diff --git a/types/universalis/lang.ts b/types/universalis/lang.ts
@@ -0,0 +1 @@
+export type Language = 'ja' | 'en' | 'de' | 'fr' | 'chs';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type Language = 'ja' \| 'en' \| 'de' \| 'fr' \| 'chs';