feat: re-implement move deck

improve debug modal, refactoring

Author: h16nning

src/app/deck/DebugDeckModal.tsx

@@ -1,4 +1,6 @@
 import { useStatesOf } from "@/logic/card/hooks/useStatesOf";
+import { useSubDecks } from "@/logic/deck/hooks/useSubDecks";
+import { useSuperDecks } from "@/logic/deck/hooks/useSuperDecks";
 import { NoteType } from "@/logic/note/note";
 import { Anchor, Modal, Stack, Text } from "@mantine/core";
 import { State } from "fsrs.js";
@@ -19,6 +21,11 @@ function DebugDeckModal({
   cards,
 }: DebugDeckModalProps) {
   const states = useStatesOf(cards);
+
+  const [superDecks] = useSuperDecks(deck);
+
+  const [subDecks] = useSubDecks(deck);
+
   return (
     <Modal opened={opened} onClose={() => setOpened(false)} title="Debug">
       <Stack justify="space-between">
@@ -32,14 +39,20 @@ function DebugDeckModal({
             </Text>
             <Text fz="xs">
               <b>SubDecks: </b>
-              {deck.subDecks.map((subDeckId) => (
-                <span key={subDeckId}>
-                  <Anchor href={"/deck/" + subDeckId}>{subDeckId}</Anchor>,{" "}
+              {subDecks?.map((s) => (
+                <span key={s.id}>
+                  <Anchor href={"/deck/" + s.id}>{s.name}</Anchor>,{" "}
                 </span>
               ))}
             </Text>
             <Text fz="xs">
-              <b>SuperDecks: </b>"{deck.superDecks}"
+              <b>SuperDecks: </b>"
+              {superDecks?.map((s) => (
+                <span key={s.id}>
+                  <Anchor href={"/deck/" + s.id}>{s.name}</Anchor>,{" "}
+                </span>
+              ))}
+              "
             </Text>
             <Text fz="xs">
               <b>Cards: </b>"

src/app/deck/DeckMenu.tsx

@@ -22,6 +22,7 @@ import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import DebugDeckModal from "./DebugDeckModal";
+import MoveDeckModal from "./MoveDeckModal";
 import RenameDeckModal from "./RenameDeckModal";
 
 interface DeckMenuProps {
@@ -45,11 +46,12 @@ function DeckMenu({
   const [developerMode] = useSetting("developerMode");
 
   const [deleteModalOpened, setDeleteModalOpened] = useState<boolean>(false);
+  const [moveModalOpened, setMoveModalOpened] = useState<boolean>(false);
   const [renameModalOpened, setRenameModalOpened] = useState<boolean>(false);
   const [importModalOpened, setImportModalOpened] = useState<boolean>(false);
   const [debugModalOpened, setDebugModalOpened] = useState<boolean>(false);
 
-  const tryDeleteDeck = useCallback(async () => {
+  const handleDelete = useCallback(async () => {
     if (!deck) {
       return;
     }
@@ -107,7 +109,7 @@ function DeckMenu({
           <Menu.Item
             leftSection={<IconArrowsExchange size={16} />}
             rightSection={showShortcutHints && <Kbd>m</Kbd>}
-            disabled
+            onClick={() => setMoveModalOpened(true)}
           >
             {t("deck.menu.move")}
           </Menu.Item>
@@ -160,7 +162,7 @@ function DeckMenu({
       {deck && cards && (
         <>
           <DangerousConfirmModal
-            dangerousAction={() => tryDeleteDeck()}
+            dangerousAction={() => handleDelete()}
             dangerousDependencies={[deck]}
             dangerousTitle={"Delete Deck"}
             dangerousDescription={
@@ -174,6 +176,11 @@ function DeckMenu({
             opened={renameModalOpened}
             setOpened={setRenameModalOpened}
           />
+          <MoveDeckModal
+            deck={deck}
+            opened={moveModalOpened}
+            setOpened={setMoveModalOpened}
+          />
           <DebugDeckModal
             deck={deck}
             cards={cards}

src/app/deck/MoveDeckModal.tsx

@@ -0,0 +1,77 @@
+import { successfullyMovedCardTo } from "@/components/Notification/Notification";
+import { Deck } from "@/logic/deck/deck";
+import { useDecks } from "@/logic/deck/hooks/useDecks";
+import { moveDeck } from "@/logic/deck/moveDeck";
+import { Button, Group, Modal, Select, Stack, Text } from "@mantine/core";
+import { IconArrowsExchange } from "@tabler/icons-react";
+import { useState } from "react";
+
+interface MoveDeckModalProps {
+  deck: Deck;
+  opened: boolean;
+  setOpened: Function;
+}
+
+export default function MoveDeckModal({
+  deck,
+  opened,
+  setOpened,
+}: MoveDeckModalProps) {
+  const oldSuperDeck = deck.superDecks
+    ? deck.superDecks[deck.superDecks.length - 1]
+    : null;
+
+  const [decks, areDecksReady] = useDecks((decks) =>
+    decks?.filter((d) => d.id !== oldSuperDeck)
+  );
+  const [newDeckID, setNewDeckID] = useState<string | null>(null);
+
+  return (
+    <Modal title={"Move Deck"} opened={opened} onClose={() => setOpened(false)}>
+      <Stack>
+        <Select
+          searchable
+          label="Move To"
+          nothingFoundMessage="No Decks Found"
+          disabled={!areDecksReady}
+          //withinPortal
+          data={
+            decks?.map((deck) => ({
+              value: deck.id,
+              label: deck.name,
+            })) ?? []
+          }
+          value={newDeckID}
+          onChange={(value) => {
+            setNewDeckID(value);
+          }}
+        />
+        {decks?.length === 0 && (
+          <Text fz="sm">
+            It seems like there are no other valid decks to move this deck to.
+            Try creating another one.
+          </Text>
+        )}
+        <Group justify="flex-end">
+          <Button
+            onClick={() => {
+              const newDeck = decks?.find((deck) => deck.id === newDeckID);
+              if (newDeck !== undefined) {
+                moveDeck(deck.id, newDeck.id);
+                successfullyMovedCardTo(newDeck.name);
+                setOpened(false);
+              } else {
+              }
+            }}
+            leftSection={<IconArrowsExchange />}
+            disabled={
+              !areDecksReady || !newDeckID || newDeckID === oldSuperDeck
+            }
+          >
+            Move Deck
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

src/app/editor/MoveCardModal.tsx

@@ -1,4 +1,4 @@
-import { successfullyMovedTo } from "@/components/Notification/Notification";
+import { successfullyMovedCardTo } from "@/components/Notification/Notification";
 import { Card } from "@/logic/card/card";
 import { moveCard } from "@/logic/card/moveCard";
 import { useDecks } from "@/logic/deck/hooks/useDecks";
@@ -56,7 +56,7 @@ export default function MoveCardModal({
               const newDeck = decks?.find((deck) => deck.id === newDeckID);
               if (newDeck !== undefined) {
                 moveCard(card, newDeck);
-                successfullyMovedTo(newDeck.name);
+                successfullyMovedCardTo(newDeck.name);
                 setOpened(false);
               } else {
               }

src/components/Notification/Notification.tsx

@@ -31,7 +31,7 @@ export function successfullyAdded() {
   });
 }
 
-export function successfullyMovedTo(deckName: string) {
+export function successfullyMovedCardTo(deckName: string) {
   return notifications.show({
     title: "Card Moved",
     message: `Card moved to ${deckName}!`,
@@ -43,6 +43,18 @@ export function successfullyMovedTo(deckName: string) {
   });
 }
 
+export function successfullyMovedDeckTo(deckName: string) {
+  return notifications.show({
+    title: "Deck Moved",
+    message: `Deck moved to ${deckName}!`,
+    autoClose: 1000,
+    color: "teal",
+    withCloseButton: false,
+    icon: <IconArrowsExchange />,
+    className: classes,
+  });
+}
+
 export function successfullyDeleted(type: "card" | "deck" | "note") {
   return notifications.show({
     title: { card: "Card Deleted", deck: "Deck Deleted", note: "Note Deleted" }[

src/logic/deck/moveDeck.ts

@@ -0,0 +1,46 @@
+import { db } from "../db";
+
+export async function moveDeck(deckId: string, newSuperDeckId: string) {
+  return db.transaction("rw", db.decks, async () => {
+    // Get the deck with the given id
+    const deck = await db.decks.get(deckId);
+    if (!deck) {
+      throw new Error(`Deck with id ${deckId} not found`);
+    }
+
+    // Get the new superdeck with the given id
+    const newSuperDeck = await db.decks.get(newSuperDeckId);
+    if (!newSuperDeck) {
+      throw new Error(`Deck with id ${newSuperDeckId} not found`);
+    } else {
+      db.decks.update(newSuperDeck.id, {
+        subDecks: [...newSuperDeck.subDecks, deckId],
+      });
+    }
+
+    if (deck.superDecks) {
+      const oldSuperDeck = await db.decks.get(
+        deck.superDecks[deck.superDecks.length - 1]
+      );
+
+      // remove deck from old superdeck
+      if (oldSuperDeck) {
+        if (oldSuperDeck.id === newSuperDeckId) {
+          console.warn(
+            "Tried to move deck to its current superdeck. Ignoring."
+          );
+          return;
+        }
+
+        await db.decks.update(oldSuperDeck.id, {
+          subDecks: oldSuperDeck.subDecks.filter(
+            (subDeckId) => subDeckId !== deckId
+          ),
+        });
+      }
+    }
+    await db.decks.update(deck, {
+      superDecks: [...(newSuperDeck.superDecks ?? []), newSuperDeckId],
+    });
+  });
+}

src/logic/type-implementations/double-sided/DoubleSidedNote.tsx

@@ -1,63 +1,20 @@
 import DoubleSidedCardEditor from "@/app/editor/NoteEditor/DoubleSidedCardEditor";
 import { NoteEditorProps, NoteTypeAdapter } from "@/logic/NoteTypeAdapter";
 import { Card, HTMLtoPreviewString } from "@/logic/card/card";
-import { createCardSkeleton } from "@/logic/card/createCardSkeleton";
 import { deleteCard } from "@/logic/card/deleteCard";
-import { newCard } from "@/logic/card/newCard";
 import { db } from "@/logic/db";
-import { Deck } from "@/logic/deck/deck";
 import { NoteContent } from "@/logic/note/NoteContent";
-import { newNote } from "@/logic/note/newNote";
-import { NoteType } from "@/logic/note/note";
-import { Note } from "@/logic/note/note";
-import { updateNoteContent } from "@/logic/note/updateNoteContent";
+import { Note, NoteType } from "@/logic/note/note";
 import common from "@/style/CommonStyles.module.css";
 import { Divider, Stack, Title } from "@mantine/core";
+import createDoubleSidedNote from "./createDoubleSidedNote";
+import { updateDoubleSidedNote } from "./updateDoubleSidedNote";
 
 export const DoubleSidedNoteTypeAdapter: NoteTypeAdapter<NoteType.DoubleSided> =
   {
-    async createNote(params: { field1: string; field2: string }, deck: Deck) {
-      function createDoubleSidedCard(
-        noteId: string,
-        frontIsField1: boolean,
-        front: string
-      ) {
-        return {
-          ...createCardSkeleton(),
-          note: noteId,
-          preview: HTMLtoPreviewString(front),
-          content: {
-            type: NoteType.DoubleSided,
-            frontIsField1: frontIsField1,
-          },
-        };
-      }
-      return db.transaction("rw", db.notes, db.decks, db.cards, async () => {
-        const noteId = await newNote(deck, {
-          type: NoteType.DoubleSided,
-          field1: params.field1,
-          field2: params.field2,
-        });
-        await newCard(createDoubleSidedCard(noteId, true, params.field1), deck);
-        await newCard(
-          createDoubleSidedCard(noteId, false, params.field2),
-          deck
-        );
-      });
-    },
+    createNote: createDoubleSidedNote,
 
-    async updateNote(
-      params: { field1: string; field2: string },
-      existingNote: Note<NoteType.DoubleSided>
-    ) {
-      return db.transaction("rw", db.notes, db.cards, async () => {
-        await updateNoteContent(existingNote.id, {
-          type: NoteType.DoubleSided,
-          field1: params.field1,
-          field2: params.field2,
-        });
-      });
-    },
+    updateNote: updateDoubleSidedNote,
 
     displayQuestion(
       card: Card<NoteType.DoubleSided>,

src/logic/type-implementations/double-sided/createDoubleSidedNote.ts

@@ -0,0 +1,37 @@
+import { HTMLtoPreviewString } from "@/logic/card/card";
+import { createCardSkeleton } from "@/logic/card/createCardSkeleton";
+import { newCard } from "@/logic/card/newCard";
+import { db } from "@/logic/db";
+import { Deck } from "@/logic/deck/deck";
+import { newNote } from "@/logic/note/newNote";
+import { NoteType } from "@/logic/note/note";
+
+export default async function createDoubleSidedNote(
+  params: { field1: string; field2: string },
+  deck: Deck
+) {
+  function createDoubleSidedCard(
+    noteId: string,
+    frontIsField1: boolean,
+    front: string
+  ) {
+    return {
+      ...createCardSkeleton(),
+      note: noteId,
+      preview: HTMLtoPreviewString(front),
+      content: {
+        type: NoteType.DoubleSided,
+        frontIsField1: frontIsField1,
+      },
+    };
+  }
+  return db.transaction("rw", db.notes, db.decks, db.cards, async () => {
+    const noteId = await newNote(deck, {
+      type: NoteType.DoubleSided,
+      field1: params.field1,
+      field2: params.field2,
+    });
+    await newCard(createDoubleSidedCard(noteId, true, params.field1), deck);
+    await newCard(createDoubleSidedCard(noteId, false, params.field2), deck);
+  });
+}

src/logic/type-implementations/double-sided/displayDoubleSidedAnswer.tsx

@@ -0,0 +1 @@
+