feat: data passing

src/app/tools/tankopedia/[id]/layout.tsx

@@ -5,15 +5,13 @@ import { tankIcon } from '../../../../core/blitzkit/tankIcon';
 import strings from '../../../../lang/en-US.json';
 import * as Duel from '../../../../stores/duel';
 
-interface TankopediaLayoutProps {
+export default async function Layout({
-  children: ReactNode;
-  params: { id: string };
-}
-
-export default async function TankopediaLayout({
   children,
   params,
-}: TankopediaLayoutProps) {
+}: {
+  children: ReactNode;
+  params: { id: string };
+}) {
   const id = Number(params.id);
   const awaitedTankDefinitions = await tankDefinitions;
   const tank = awaitedTankDefinitions[id];
@@ -23,7 +21,7 @@ export default async function TankopediaLayout({
   const description = `Statistics, armor profiles, and equipment for ${tank.name}`;
 
   return (
-    <Duel.Provider>
+    <Duel.Provider data={id}>
       <title>{title}</title>
       <meta name="description" content={description} />
       <meta property="og:title" content={title} />

src/app/tools/tankopedia/[id]/page.tsx

@@ -13,8 +13,7 @@ import { TechTreeSection } from './components/Model/TechTreeSection';
 import { ShotDisplaySection } from './components/ShotDisplaySection';
 import { VideoSection } from './components/VideoSection';
 
-// TODO: remove this param if not needed for duel assignment
+export default function Page() {
-export default function Page({ params }: { params: { id: string } }) {
   const exempt = useAdExempt();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const mutateDuel = Duel.useMutation();

src/core/zustand/createNextSafeStore.tsx

@@ -1,5 +1,4 @@
 import { Draft, produce } from 'immer';
-import { usePathname } from 'next/navigation';
 import {
   createContext,
   ReactNode,
@@ -10,9 +9,9 @@ import {
 } from 'react';
 import { StoreApi, useStore as useStoreZustand } from 'zustand';
 
-interface StoreProviderProps {
+type StoreProviderProps<InitData> = {
   children: ReactNode;
-}
+} & (InitData extends unknown ? { data?: InitData } : { data: InitData });
 
 // idk why zustand doesn't export this
 type ExtractState<S> = S extends {
@@ -21,27 +20,26 @@ type ExtractState<S> = S extends {
   ? T
   : never;
 
-interface InitialContext {
+export function createNextSafeStore<Store extends StoreApi<unknown>, InitData>(
-  pathName: string;
+  initialize: (data: InitData) => Store | Promise<Store>,
-}
-
-export function createNextSafeStore<Store extends StoreApi<unknown>>(
-  initial: (context: InitialContext) => Store | Promise<Store>,
 ) {
   type Type = Store extends StoreApi<infer T> ? T : never;
 
   const Context = createContext<Store | undefined>(undefined);
 
-  function Provider({ children }: StoreProviderProps) {
+  function Provider(props: StoreProviderProps<InitData>) {
-    const pathName = usePathname();
     const storeRef = useRef<Store>();
-    const context = { pathName };
+    const storePromise = useMemo(
-    const storePromise = useMemo(async () => await initial(context), []);
+      async () => await initialize((props as { data: InitData }).data),
+      [],
+    );
     const awaitedStore = useReact(storePromise);
     if (!storeRef.current) storeRef.current = awaitedStore;
 
     return (
-      <Context.Provider value={storeRef.current}>{children}</Context.Provider>
+      <Context.Provider value={storeRef.current}>
+        {props.children}
+      </Context.Provider>
     );
   }
 

src/stores/duel/index.ts

@@ -50,8 +50,7 @@ export interface Duel {
 }
 
 export const { Provider, use, useMutation, useStore } = createNextSafeStore(
-  async ({ pathName }) => {
+  async (id: number) => {
-    const id = Number(pathName.split('/')[3]);
     const awaitedTankDefinitions = await tankDefinitions;
     const awaitedProvisionDefinitions = await provisionDefinitions;
     const tank = awaitedTankDefinitions[id];