From a5d85962d1999ae6002dee1236c18c2bc7212ddb Mon Sep 17 00:00:00 2001
From: karashiiro <49822414+karashiiro@users.noreply.github.com>
Date: Tue, 5 Jul 2022 16:32:16 -0700
Subject: [PATCH] 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.
---
components/GameMateria/GameMateria.tsx | 8 +++-----
components/List/ListItem/ListItem.tsx | 12 ++++++++++--
components/List/ListItemHeader/ListItemHeader.tsx | 8 +++-----
components/List/ListItemMarket/ListItemMarket.tsx | 10 +++++-----
components/ListingsTable/ListingsTable.tsx | 5 ++++-
.../Market/MarketDataCenter/MarketDataCenter.tsx | 8 +++++++-
components/Market/MarketWorld/MarketWorld.tsx | 11 +++++------
components/SalesTable/SalesTable.tsx | 11 +++++------
hooks/useSettings.ts | 12 +++++++++---
pages/_app.tsx | 2 +-
pages/list/[listId].tsx | 1 +
pages/market/[itemId].tsx | 9 +++++++--
types/universalis/lang.ts | 1 +
13 files changed, 61 insertions(+), 37 deletions(-)
create mode 100644 types/universalis/lang.ts
diff --git a/components/GameMateria/GameMateria.tsx b/components/GameMateria/GameMateria.tsx
index 802d39f..ecab47f 100644
--- 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
index 754810e..65714dd 100644
--- 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 (
@@ -29,7 +32,7 @@ export default function ListItem({
-
+
{reqIsOwner && (
)}
-
+
);
diff --git a/components/List/ListItemHeader/ListItemHeader.tsx b/components/List/ListItemHeader/ListItemHeader.tsx
index b9da689..6bd4bbe 100644
--- 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
index ae2caac..11c1dc1 100644
--- a/components/List/ListItemMarket/ListItemMarket.tsx
+++ b/components/List/ListItemMarket/ListItemMarket.tsx
@@ -1,8 +1,8 @@
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';
@@ -10,12 +10,10 @@ 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 ;
}
@@ -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
index dcadca4..519ca5f 100644
--- 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) => (
-
+
)),
diff --git a/components/Market/MarketDataCenter/MarketDataCenter.tsx b/components/Market/MarketDataCenter/MarketDataCenter.tsx
index 8bc1e1c..843ac2a 100644
--- 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;
+ 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
index 964585c..be1e4c9 100644
--- 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
index a74c33c..b7e25c8 100644
--- a/components/SalesTable/SalesTable.tsx
+++ b/components/SalesTable/SalesTable.tsx
@@ -4,7 +4,7 @@ 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[];
@@ -12,6 +12,7 @@ interface SalesTableProps {
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 (
@@ -106,6 +104,7 @@ export default function SalesTable({
averageNq,
crossWorld,
includeDiff,
+ lang,
start,
end,
}: SalesTableProps) {
@@ -183,7 +182,7 @@ export default function SalesTable({
}
>
- {(sale) => }
+ {(sale) => }
);
diff --git a/hooks/useSettings.ts b/hooks/useSettings.ts
index f6605c6..813a71b 100644
--- 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,
(name: keyof Settings, value: any) => void
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 33e9fc0..14982bc 100644
--- 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
index 23ef658..6836068 100644
--- a/pages/list/[listId].tsx
+++ b/pages/list/[listId].tsx
@@ -176,6 +176,7 @@ const List: NextPage = ({ 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
index 3b7266f..e142fbc 100644
--- a/pages/market/[itemId].tsx
+++ b/pages/market/[itemId].tsx
@@ -117,11 +117,16 @@ const Market: NextPage = ({ hasSession, lists, markets, itemId, dc,
-
+
{selectedWorld && (
-
+
)}
diff --git a/types/universalis/lang.ts b/types/universalis/lang.ts
new file mode 100644
index 0000000..1288802
--- /dev/null
+++ b/types/universalis/lang.ts
@@ -0,0 +1 @@
+export type Language = 'ja' | 'en' | 'de' | 'fr' | 'chs';