@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/hooks/use-panel-page.ts

@@ -0,0 +1,54 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useCallback } from 'react';
+import {
+  createStoredValue,
+  type StoredCodec,
+} from '@terrafirmagreg-team/ui/lib/utils/stored-value';
+
+const codec: StoredCodec<Record<string, number>> = {
+  read: (raw) => {
+    if (!raw) return {};
+    try {
+      const parsed: unknown = JSON.parse(raw);
+      if (!parsed || typeof parsed !== 'object') return {};
+      const out: Record<string, number> = {};
+      for (const [key, value] of Object.entries(
+        parsed as Record<string, unknown>,
+      )) {
+        const page = Math.floor(Number(value));
+        if (Number.isFinite(page) && page > 0) out[key] = page;
+      }
+      return out;
+    } catch {
+      return {};
+    }
+  },
+  write: (value) => JSON.stringify(value),
+};
+
+const useStoredPanelPages = createStoredValue(
+  'wiki.recipe.panelPage',
+  codec,
+);
+
+export function usePanelPage(dataset: DatasetRef) {
+  const [pages, setPages] = useStoredPanelPages();
+  const refKey = `${dataset.id}/${dataset.version ?? ''}`;
+  const setPage = useCallback(
+    (page: number) => {
+      setPages((prev) => {
+        const next = page > 0 ? page : 0;
+        if ((prev[refKey] ?? 0) === next) return prev;
+        const copy = { ...prev };
+        if (next > 0) copy[refKey] = next;
+        else delete copy[refKey];
+        return copy;
+      });
+    },
+    [refKey, setPages],
+  );
+  return { page: pages[refKey] ?? 0, setPage };
+}
+

package/src/hooks/use-panel-tabs.ts

@@ -0,0 +1,43 @@
+'use client';
+
+import { createElement, useMemo } from 'react';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { panelTabRows } from '@terrafirmagreg-team/recipe/lib/panel';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { RecipeCompactIndex } from '@terrafirmagreg-team/recipe/types';
+
+export function usePanelTabs(
+  index: RecipeCompactIndex | null,
+  names: Record<string, Record<string, string>>,
+  lang: Lang,
+) {
+  const t = useTranslations();
+  return useMemo(
+    () => [
+      {
+        id: '',
+        icon: createElement(Entry, {
+          id: 'minecraft:compass',
+          kind: 'item',
+          size: 'lg',
+          href: false,
+        }),
+        help: t('All items', { note: 'recipe.all_items' }),
+      },
+      ...panelTabRows(index, names, lang).map((row) => ({
+        id: row.id,
+        icon: createElement(Entry, {
+            ...(row.iconRef
+              ? { reference: row.iconRef }
+              : { id: row.icon, kind: 'item' as const }),
+            size: 'lg',
+            href: false,
+          }),
+        help: row.help,
+      })),
+    ],
+    [index, lang, names, t],
+  );
+}
+

package/src/hooks/use-query.ts

@@ -0,0 +1,186 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useEffect, useState } from 'react';
+import { useLocationSearchParams } from '@terrafirmagreg-team/ui/hooks/page/use-location-search';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import {
+  recipeCalcHref,
+  recipeHref,
+  recipePlaceFromParams,
+} from '@terrafirmagreg-team/recipe/lib/links';
+import { canonicalStackId } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { RecipeRelation } from '@terrafirmagreg-team/recipe/types';
+
+function urlPage(params: URLSearchParams, key: string) {
+  const raw = Number.parseInt(params.get(key) || '1', 10);
+  return Number.isFinite(raw) && raw > 0 ? raw - 1 : 0;
+}
+
+function urlRelation(
+  params: URLSearchParams,
+): RecipeRelation | undefined {
+  const value = params.get('relation');
+  return value === 'uses' || value === 'tags' ? value : undefined;
+}
+
+export function useRecipeQuery(dataset: DatasetRef, lang: Lang) {
+  const params = useLocationSearchParams();
+
+  const place = recipePlaceFromParams(params);
+  const isCalc = place.kind === 'calc';
+  const isTool = place.kind !== 'type';
+  const rawItem = params.get('item') ?? undefined;
+  const rawFluid = params.get('fluid') ?? undefined;
+  const item = isTool ? undefined : rawItem;
+  const fluid = isTool || item ? undefined : rawFluid;
+  const recipeId = isCalc ? undefined : (params.get('id') ?? undefined);
+  const solo = isTool || !recipeId ? undefined : (params.get('solo') ?? undefined);
+  const relation = isTool ? undefined : urlRelation(params);
+  const tab = params.get('tab') ?? undefined;
+  const tree = isCalc ? (params.get('tree') ?? '') : undefined;
+  const isAlloy = place.kind === 'alloy';
+  const alloyUnit =
+    isAlloy && params.get('unit') === 'ingot' ? ('ingot' as const) : undefined;
+  const alloyMix = isAlloy ? (params.get('mix') ?? undefined) : undefined;
+  const searchParam = isTool ? '' : (params.get('search') ?? '');
+  const rpageValue = isTool ? 0 : urlPage(params, 'rpage');
+
+  const [query, setQuery] = useState(searchParam);
+  const [lastSearch, setLastSearch] = useState(searchParam);
+  if (lastSearch !== searchParam) {
+    setLastSearch(searchParam);
+    setQuery(searchParam);
+  }
+
+  useEffect(() => {
+    if (!isTool) return;
+    const stray = isCalc
+      ? params.get('type') ||
+        params.get('item') ||
+        params.get('fluid') ||
+        params.get('id') ||
+        params.get('solo') ||
+        params.get('relation') ||
+        params.get('search') ||
+        params.get('rpage') ||
+        params.get('unit') ||
+        params.get('mix')
+      : params.get('type') ||
+        params.get('item') ||
+        params.get('fluid') ||
+        params.get('relation') ||
+        params.get('search') ||
+        params.get('rpage') ||
+        params.get('solo') ||
+        params.get('tree') ||
+        (isAlloy ? null : params.get('unit') || params.get('mix'));
+    if (!stray) return;
+    replaceUrlState(
+      isCalc
+        ? recipeCalcHref(dataset, lang, tree || undefined)
+        : recipeHref(dataset, lang, {
+            tool: place.kind,
+            id: recipeId,
+            unit: alloyUnit,
+            mix: alloyMix,
+            tab,
+          }),
+    );
+  }, [
+    isTool,
+    isCalc,
+    place.kind,
+    lang,
+    dataset,
+    params,
+    tree,
+    recipeId,
+    tab,
+    isAlloy,
+    alloyUnit,
+    alloyMix,
+  ]);
+
+  useEffect(() => {
+    if (isTool) return;
+    if (rawItem && rawFluid) {
+      replaceUrlState(
+        recipeHref(dataset, lang, {
+          type: params.get('type') ?? undefined,
+          item: rawItem,
+          id: recipeId,
+          solo,
+          relation,
+          tab,
+          search: searchParam || undefined,
+          rpage: rpageValue + 1,
+        }),
+      );
+    }
+  }, [
+    isTool,
+    lang,
+    dataset,
+    params,
+    rawItem,
+    rawFluid,
+    recipeId,
+    solo,
+    relation,
+    tab,
+    searchParam,
+    rpageValue,
+  ]);
+
+  useEffect(() => {
+    if (isTool || (rawItem && rawFluid)) return;
+    const canonItem = rawItem ? canonicalStackId(rawItem) : undefined;
+    const canonFluid = rawFluid ? canonicalStackId(rawFluid) : undefined;
+    if (canonItem === rawItem && canonFluid === rawFluid) return;
+    replaceUrlState(
+      recipeHref(dataset, lang, {
+        type: params.get('type') ?? undefined,
+        item: canonItem,
+        fluid: canonFluid,
+        id: recipeId,
+        solo,
+        relation,
+        tab,
+        search: searchParam || undefined,
+        rpage: rpageValue + 1,
+      }),
+    );
+  }, [
+    isTool,
+    lang,
+    dataset,
+    params,
+    rawItem,
+    rawFluid,
+    recipeId,
+    solo,
+    relation,
+    tab,
+    searchParam,
+    rpageValue,
+  ]);
+
+  return {
+    place,
+    item,
+    fluid,
+    recipeId,
+    alloyUnit,
+    alloyMix,
+    solo,
+    relation,
+    tab,
+    tree,
+    query,
+    setQuery,
+    rpage: rpageValue,
+  };
+}
+

package/src/hooks/use-session.ts

@@ -0,0 +1,88 @@
+'use client';
+
+import { useEffect, useMemo } from 'react';
+import { useVersionedDataset } from '@terrafirmagreg-team/kit/hooks/use-versioned-dataset';
+import { useRecipeIndex } from '@terrafirmagreg-team/recipe/hooks/use-index';
+import { useRecipeQuery } from '@terrafirmagreg-team/recipe/hooks/use-query';
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { clientDumpLang } from '@terrafirmagreg-team/dump/lib/dump/client/dump';
+import { useRecipeIndexNames } from '@terrafirmagreg-team/recipe/lib/index-store';
+import {
+  RECIPE_ALL_TYPE,
+  recipeHref,
+  recipePlaceOpts,
+} from '@terrafirmagreg-team/recipe/lib/links';
+import { recipeUsedItems } from '@terrafirmagreg-team/recipe/lib/used-items';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import type {
+  RecipeHrefOpts,
+  RecipePageData,
+  RecipeSession,
+} from '@terrafirmagreg-team/recipe/types';
+
+export function useRecipeSession(page: RecipePageData): RecipeSession {
+  const { dataset: id, lang } = page;
+  const dataset =
+    useVersionedDataset(id.id, { versions: page.versions }) ?? id;
+  const query = useRecipeQuery(dataset, lang);
+  const { index, indexLoading } = useRecipeIndex(dataset, lang);
+  const placeOpts = recipePlaceOpts(query.place);
+
+  const indexNames = useRecipeIndexNames(dataset);
+  const names = useMemo(
+    () => indexNames ?? index?.names ?? {},
+    [indexNames, index],
+  );
+  const langRaw = useAsyncValue(
+    () => clientDumpLang(dataset, lang),
+    [dataset, lang],
+  );
+  const langMap = useMemo(
+    () => ({ ...names.en_us, ...langRaw, ...names[lang] }),
+    [langRaw, names, lang],
+  );
+  const used = useMemo(() => recipeUsedItems(index), [index]);
+  const nav: RecipeHrefOpts = {
+    ...placeOpts,
+    tab: query.tab,
+    item: query.item,
+    fluid: query.fluid,
+    id: query.recipeId,
+    relation: query.relation,
+    search: query.query || undefined,
+    rpage: query.rpage + 1,
+  };
+
+  const firstType = useMemo(() => {
+    const counts = index?.typeCounts;
+    if (!counts) return undefined;
+    return index?.categories
+      ?.map((row) => row.id)
+      .find((id) => (counts[id] ?? 0) > 0);
+  }, [index]);
+  const bareIndex =
+    query.place.kind === 'type' &&
+    query.place.id === RECIPE_ALL_TYPE &&
+    !query.item &&
+    !query.fluid;
+  useEffect(() => {
+    if (!bareIndex || !firstType) return;
+    replaceUrlState(recipeHref(dataset, lang, { ...nav, type: firstType }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- nav rebuilds per render
+  }, [bareIndex, firstType, dataset, lang]);
+
+  return {
+    page,
+    dataset,
+    lang,
+    ...query,
+    placeOpts,
+    nav,
+    index,
+    indexLoading,
+    names,
+    langMap,
+    used,
+  };
+}
+

package/src/hooks/use-sidebar-group.ts

@@ -0,0 +1,16 @@
+import {
+  createStoredValue,
+  literalCodec,
+} from '@terrafirmagreg-team/ui/lib/utils/stored-value';
+import type { RecipeSidebarGroup } from '@terrafirmagreg-team/recipe/types';
+
+const useStoredSidebarGroup = createStoredValue(
+  'wiki.recipe.sidebarGroup',
+  literalCodec<RecipeSidebarGroup>(['flat', 'mod'], 'mod'),
+);
+
+export function useSidebarGroup() {
+  const [sidebarGroup, setSidebarGroup] = useStoredSidebarGroup();
+  return { sidebarGroup, setSidebarGroup };
+}
+

package/src/hooks/use-tag-members.ts

@@ -0,0 +1,16 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { loadAllTagMembers } from '@terrafirmagreg-team/recipe/lib/client-index';
+
+export function useTagMembers(
+  dataset: DatasetRef,
+  enabled: boolean,
+): Record<string, string[]> | undefined {
+  return useAsyncValue(
+    enabled ? () => loadAllTagMembers(dataset) : false,
+    [dataset, enabled],
+  );
+}
+

package/src/hooks/use-tool-recipes.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+import { loadCategoryRecipes } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+
+export function useToolRecipes<T>(
+  session: RecipeSession | null,
+  category: string,
+  parse: (recipe: Recipe) => T,
+): { value: T[] | undefined; pending: boolean } {
+  const index = session?.index;
+  const dataset = session?.dataset;
+
+  return useAsyncResult(
+    index && dataset
+      ? () =>
+          loadCategoryRecipes(dataset, index, category).then((recipes) =>
+            recipes.map(parse),
+          )
+      : undefined,
+    [dataset, index, category, parse],
+  );
+}
+

package/src/hooks/use-type-filter.ts

@@ -0,0 +1,73 @@
+'use client';
+
+import { useEffect, useMemo } from 'react';
+import { groupByCategory } from '@terrafirmagreg-team/recipe/lib/group';
+import { TAG_RECIPE_TYPE } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { RECIPE_ALL_TYPE, recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import type {
+  RecipeCompactRow,
+  RecipeSession,
+} from '@terrafirmagreg-team/recipe/types';
+
+export function useTypeFilter(
+  session: Pick<
+    RecipeSession,
+    | 'dataset'
+    | 'lang'
+    | 'index'
+    | 'nav'
+    | 'place'
+    | 'item'
+    | 'fluid'
+    | 'recipeId'
+  >,
+  rows: RecipeCompactRow[],
+) {
+  const { dataset, lang, index, nav, place, recipeId } = session;
+  const groups = useMemo(
+    () => groupByCategory(rows, index?.types ?? [], index?.categories),
+    [rows, index],
+  );
+
+  const urlType =
+    place?.kind === 'type' && place.id !== RECIPE_ALL_TYPE
+      ? place.id
+      : undefined;
+  const valid = groups.some((group) => group.category === urlType)
+    ? urlType
+    : undefined;
+  const primary =
+    (recipeId
+      ? groups.find((group) => group.rows.some((row) => row.id === recipeId))
+          ?.category
+      : undefined) ??
+    groups.find((group) => group.category !== TAG_RECIPE_TYPE)?.category ??
+    groups[0]?.category;
+  const active = valid ?? primary ?? '';
+  const activeRows =
+    groups.find((group) => group.category === active)?.rows ?? [];
+
+  useEffect(() => {
+    if (!primary || valid) return;
+    replaceUrlState(
+      recipeHref(dataset, lang, { ...nav, type: primary, rpage: undefined }),
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- nav rebuilds per render
+  }, [primary, valid, dataset, lang]);
+
+  const setActive = (next: string) => {
+    if (next === active || next === urlType) return;
+    replaceUrlState(
+      recipeHref(dataset, lang, { ...nav, type: next, rpage: undefined }),
+    );
+  };
+
+  return {
+    ids: groups.map((group) => group.category),
+    active,
+    setActive,
+    rows: activeRows,
+  };
+}
+