fixup card modals

src/components/card-modal/card-modal-context.tsx

@@ -5,7 +5,7 @@ import { CardModal } from "./card-modal";
 
 type CardModalContextConfig = {
   code: string;
-  deckId?: string;
+  deckId?: string | number;
   canEdit?: boolean;
 };
 

src/components/card-modal/card-modal.tsx

@@ -22,6 +22,7 @@ import { CustomizationsEditor } from "../customizations/customizations-editor";
 import { Button } from "../ui/button";
 import { useDialogContext } from "../ui/dialog.hooks";
 import { Modal } from "../ui/modal";
+import { useCardModalContext } from "./card-modal-context";
 import { CardModalQuantities } from "./card-modal-quantities";
 
 type Props = {
@@ -32,11 +33,19 @@ type Props = {
 
 export function CardModal({ canEdit, code, deckId }: Props) {
   const modalContext = useDialogContext();
+  const cardModalContext = useCardModalContext();
 
   const onCloseModal = useCallback(() => {
     modalContext?.setOpen(false);
   }, [modalContext]);
 
+  const onOpenModal = useCallback(
+    (code: string) => {
+      cardModalContext?.setOpen({ canEdit, code, deckId });
+    },
+    [canEdit, deckId, cardModalContext],
+  );
+
   // FIXME: Remove this hack when we have refactored the deck edit state.
   const activeDeck = useStore((state) =>
     deckId
@@ -46,8 +55,6 @@ export function CardModal({ canEdit, code, deckId }: Props) {
       : undefined,
   );
 
-  console.log(activeDeck);
-
   const cardWithRelations = useStore((state) =>
     selectCardWithRelations(state, code, true),
   );
@@ -86,6 +93,7 @@ export function CardModal({ canEdit, code, deckId }: Props) {
             const cards = Array.isArray(value) ? value : [value];
             return (
               <CardSet
+                onOpenModal={onOpenModal}
                 key={key}
                 set={{
                   title: formatRelationTitle(key),

src/components/cardset.tsx

@@ -13,13 +13,18 @@ import { ListCard } from "./list-card/list-card";
 import { Checkbox } from "./ui/checkbox";
 
 type Props = {
-  canOpenModal?: boolean;
   onChangeCardQuantity?: (code: string, quantity: number) => void;
+  onOpenModal?: (code: string) => void;
   onSelect?: (id: string) => void;
   set: CardSetType;
 };
 
-export function CardSet({ onChangeCardQuantity, onSelect, set }: Props) {
+export function CardSet({
+  onChangeCardQuantity,
+  onOpenModal,
+  onSelect,
+  set,
+}: Props) {
   const canCheckOwnership = useStore(selectCanCheckOwnership);
   const cardOwnedCount = useStore(selectCardOwnedCount);
 
@@ -50,6 +55,7 @@ export function CardSet({ onChangeCardQuantity, onSelect, set }: Props) {
             onChangeCardQuantity={
               set.canSetQuantity ? onChangeCardQuantity : undefined
             }
+            onOpenModal={onOpenModal}
             owned={cardOwnedCount(card)}
             quantities={
               set.quantities

src/pages/card-view/card-view-cards.tsx

@@ -1,7 +1,6 @@
 import { Redirect } from "wouter";
 
 import { Card } from "@/components/card/card";
-import { Customizations } from "@/components/customizations/customizations";
 import { CustomizationsEditor } from "@/components/customizations/customizations-editor";
 import { Faq } from "@/pages/card-view/faq";
 import { useStore } from "@/store";
@@ -56,14 +55,10 @@ export function CardViewCards({
     <>
       <Card resolvedCard={cardWithRelations}>
         {cardWithRelations.card.customization_options ? (
-          activeDeck ? (
-            <CustomizationsEditor
-              activeDeck={activeDeck}
-              card={cardWithRelations.card}
-            />
-          ) : (
-            <Customizations card={cardWithRelations.card} />
-          )
+          <CustomizationsEditor
+            activeDeck={activeDeck}
+            card={cardWithRelations.card}
+          />
         ) : undefined}
       </Card>
 

src/pages/choose-investigator/choose-investigator.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Link } from "wouter";
 
 import { CardList } from "@/components/card-list/card-list";
+import { useCardModalContext } from "@/components/card-modal/card-modal-context";
 import { Filters } from "@/components/filters/filters";
 import { Masthead } from "@/components/masthead";
 import { Button } from "@/components/ui/button";
@@ -17,6 +18,7 @@ import css from "./choose-investigator.module.css";
 import { SignatureLink } from "./signature-link";
 
 function DeckCreateChooseInvestigator() {
+  const modalContext = useCardModalContext();
   const [filtersOpen, onToggleFilters] = useState(false);
 
   const goBack = useGoBack();
@@ -38,6 +40,13 @@ function DeckCreateChooseInvestigator() {
     [onToggleFilters, filtersOpen],
   );
 
+  const onOpenModal = useCallback(
+    (code: string) => {
+      modalContext.setOpen({ code });
+    },
+    [modalContext],
+  );
+
   useEffect(() => {
     setActiveList("create_deck");
   }, [resetFilters, setActiveList]);
@@ -59,6 +68,7 @@ function DeckCreateChooseInvestigator() {
           <h1 className={css["title"]}>Choose investigator</h1>
         </header>
         <CardList
+          onOpenModal={onOpenModal}
           renderListCardAction={(card) => (
             <Link asChild to={`/deck/create/${card.code}`}>
               <Button as="a" size="lg" variant="bare">

src/pages/deck-create/deck-create-card-sets.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 
+import { useCardModalContext } from "@/components/card-modal/card-modal-context";
 import { CardSet } from "@/components/cardset";
 import { useStore } from "@/store";
 import {
@@ -12,6 +13,8 @@ import css from "./deck-create.module.css";
 import { useAccentColor } from "../../utils/use-accent-color";
 
 export function DeckCreateCardSets() {
+  const modalContext = useCardModalContext();
+
   const onChangeCardQuantity = useStore(
     (state) => state.deckCreateChangeExtraCardQuantity,
   );
@@ -32,13 +35,21 @@ export function DeckCreateCardSets() {
   const investigator = useStore(selectDeckCreateInvestigator);
   const cssVariables = useAccentColor(investigator.card.faction_code);
 
+  const onOpenModal = useCallback(
+    (code: string) => {
+      modalContext.setOpen({ code });
+    },
+    [modalContext],
+  );
+
   return (
     <div className={css["card-selections"]} style={cssVariables}>
       {cardSets.map((set) =>
         set.cards.length ? (
           <CardSet
             key={set.id}
             onChangeCardQuantity={onChangeCardQuantity}
+            onOpenModal={onOpenModal}
             onSelect={handleCheckedChange}
             set={set}
           />