Switch to fsrs

Might be still buggy or have placeholder values, not everything tested yet

temporary ui to debug

package.json

@@ -38,6 +38,7 @@
     "dexie-react-hooks": "^1.1.1",
     "embla-carousel-react": "^7.0.9",
     "firebase": "^9.18.0",
+    "fsrs.js": "^1.2.2",
     "html-to-text": "^9.0.4",
     "i18next": "^23.7.11",
     "react": "^18.2.0",

src/components/DebugCardModal/DebugCardModal.tsx

@@ -10,6 +10,7 @@ import {
   Space,
 } from "@mantine/core";
 import { Card, CardType } from "../../logic/card";
+import DebugCardTable from "./DebugCardTable";
 
 interface DebugCardModalProps {
   opened: boolean;
@@ -27,84 +28,7 @@ function DebugCardModal({ opened, setOpened, card }: DebugCardModalProps) {
         title="Debug"
       >
         <Stack justify="space-between">
-          {card ? (
-            <table className={classes.table}>
-              <tbody>
-                <tr>
-                  <th>Card Type:</th>
-                  <td>{card.content.type}</td>
-                </tr>
-                <tr>
-                  <th>ID:</th>
-                  <td>{card.id}</td>
-                </tr>
-                <tr>
-                  <th>Content:</th>
-                  <td>{JSON.stringify(card.content)}</td>
-                </tr>
-                <tr>
-                  <th>Decks:</th>
-                  <td>
-                    <Anchor href={"/deck/" + card.deck}>{card.deck}</Anchor>,{" "}
-                  </td>
-                </tr>
-                <tr>
-                  <th>DueDate:</th>
-                  <td>{card.dueDate?.toLocaleString()}</td>
-                </tr>
-              </tbody>
-              <tbody>
-                <thead>
-                  <th>Model</th>
-                </thead>
-                <tr>
-                  <th>Interval:</th>
-                  <td>{card.model.interval}</td>
-                </tr>
-                <tr>
-                  <th>Learned:</th>
-                  <td>{card.model.learned ? "true" : "false"}</td>
-                </tr>
-                <tr>
-                  <th>Repetitions:</th>
-                  <td>{card.model.repetitions}</td>
-                </tr>
-                <tr>
-                  <th>Ease Factor:</th>
-                  <td>{card.model.easeFactor}</td>
-                </tr>
-              </tbody>
-              <tbody>
-                <thead>
-                  <th>History</th>
-                </thead>
-                {card.history.map((repetition) => (
-                  <Fragment key={repetition.date.toISOString()}>
-                    <tr>
-                      <th>Date: </th>
-                      <td>
-                        {(typeof repetition.date === "number"
-                          ? new Date(repetition.date)
-                          : repetition.date
-                        ).toLocaleString()}
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>Result: </th>
-                      <td>{repetition.result}</td>
-                    </tr>
-                    <tr>
-                      <Space h="xs" />
-                    </tr>
-                  </Fragment>
-                ))}
-              </tbody>
-            </table>
-          ) : (
-            <Text color="dimmed" fz="sm">
-              This card could not be found.
-            </Text>
-          )}
+          <DebugCardTable card={card} />
           <Group justify="right">
             <Button onClick={() => setOpened(false)}>Close</Button>
           </Group>

src/components/DebugCardModal/DebugCardTable.tsx

@@ -0,0 +1,107 @@
+import classes from "./DebugCard.module.css";
+import { Fragment } from "react";
+import { Card, CardType } from "../../logic/card";
+import { Anchor, Space, Text } from "@mantine/core";
+
+export default function DebugCardTable({
+  card,
+}: { card: Card<CardType> | undefined }) {
+  return card ? (
+    <table className={classes.table}>
+      <tbody>
+        <tr>
+          <th>Card Type:</th>
+          <td>{card.content.type}</td>
+        </tr>
+        <tr>
+          <th>ID:</th>
+          <td>{card.id}</td>
+        </tr>
+        <tr>
+          <th>Content:</th>
+          <td>{JSON.stringify(card.content)}</td>
+        </tr>
+        <tr>
+          <th>Decks:</th>
+          <td>
+            <Anchor href={"/deck/" + card.deck}>{card.deck}</Anchor>,{" "}
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <thead>
+          <th>FSRS Model</th>
+        </thead>
+        <tr>
+          <th>Due:</th>
+          <td>
+            {card.model.due.toLocaleTimeString() +
+              " " +
+              card.model.due.toDateString()}
+          </td>
+        </tr>
+        <tr>
+          <th>Stability:</th>
+          <td>{card.model.stability}</td>
+        </tr>
+        <tr>
+          <th>Difficulty:</th>
+          <td>{card.model.difficulty}</td>
+        </tr>
+        <tr>
+          <th>Elapsed Days:</th>
+          <td>{card.model.elapsed_days}</td>
+        </tr>
+        <tr>
+          <th>Scheduled Days:</th>
+          <td>{card.model.scheduled_days}</td>
+        </tr>
+        <tr>
+          <th>Repetitions:</th>
+          <td>{card.model.reps}</td>
+        </tr>
+        <tr>
+          <th>Lapses:</th>
+          <td>{card.model.lapses}</td>
+        </tr>
+        <tr>
+          <th>State:</th>
+          <td>{card.model.state}</td>
+        </tr>
+        <tr>
+          <th>Last Review:</th>
+          <td>{card.model.last_review.toDateString()}</td>
+        </tr>
+      </tbody>
+      <tbody>
+        <thead>
+          <th>History</th>
+        </thead>
+        {card.history.map((repetition) => (
+          <Fragment key={repetition.date.toISOString()}>
+            <tr>
+              <th>Date: </th>
+              <td>
+                {(typeof repetition.date === "number"
+                  ? new Date(repetition.date)
+                  : repetition.date
+                ).toLocaleString()}
+              </td>
+            </tr>
+            <tr>
+              <th>Result: </th>
+              <td>{repetition.result}</td>
+            </tr>
+            <tr>
+              <Space h="xs" />
+            </tr>
+          </Fragment>
+        ))}
+      </tbody>
+    </table>
+  ) : (
+    <Text color="dimmed" fz="sm">
+      This card could not be found.
+    </Text>
+  );
+}

src/components/deck/DebugDeckModal.tsx

@@ -1,23 +1,23 @@
 import React from "react";
 import { Anchor, Button, Group, Modal, Stack, Text } from "@mantine/core";
 import { Deck } from "../../logic/deck";
-import { Card, CardsStats, CardType } from "../../logic/card";
+import { Card, CardType, useStatesOf } from "../../logic/card";
+import { State } from "fsrs.js";
 
 interface DebugDeckModalProps {
   opened: boolean;
   setOpened: Function;
   deck?: Deck;
   cards: Card<CardType>[];
-  stats: CardsStats;
 }
 
 function DebugDeckModal({
   opened,
   setOpened,
   deck,
   cards,
-  stats,
 }: DebugDeckModalProps) {
+  const states = useStatesOf(cards);
   return (
     <Modal
       opened={opened}
@@ -62,16 +62,20 @@ function DebugDeckModal({
               {cards.length}
             </Text>
             <Text fz="xs">
-              <b>New Cards: </b>
-              {stats.newCards}
+              <b>New: </b>
+              {states[State.New]}
             </Text>
             <Text fz="xs">
-              <b>Learning Cards: </b>
-              {stats.learningCards}
+              <b>Learning: </b>
+              {states[State.Learning]}
             </Text>
             <Text fz="xs">
-              <b>Due Cards: </b>
-              {stats.dueCards}
+              <b>Review: </b>
+              {states[State.Review]}
+            </Text>
+            <Text fz="xs">
+              <b>Relearning: </b>
+              {states[State.Relearning]}
             </Text>
           </Stack>
         ) : (

src/components/deck/DeckMenu.tsx

@@ -15,7 +15,7 @@ import DangerousConfirmModal from "../custom/DangerousConfirmModal";
 import { useNavigate } from "react-router-dom";
 import RenameCardModal from "../editcard/RenameCardModal";
 import DebugDeckModal from "./DebugDeckModal";
-import { Card, CardsStats, CardType } from "../../logic/card";
+import { Card, CardType } from "../../logic/card";
 import { useSetting } from "../../logic/Settings";
 import ImportModal from "../settings/importexport/ImportModal";
 
@@ -24,7 +24,6 @@ interface DeckMenuProps {
   isDeckReady: boolean;
   cards?: Card<CardType>[];
   areCardsReady: boolean;
-  stats: CardsStats;
   setDeckOptionsOpened: Function;
 }
 
@@ -34,7 +33,6 @@ function DeckMenu({
   setDeckOptionsOpened,
   cards,
   areCardsReady,
-  stats,
 }: DeckMenuProps) {
   const navigate = useNavigate();
 
@@ -137,7 +135,6 @@ function DeckMenu({
           <DebugDeckModal
             deck={deck}
             cards={cards}
-            stats={stats}
             opened={debugModalOpened}
             setOpened={setDebugModalOpened}
           />

src/components/deck/DeckPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Deck } from "../../logic/deck";
 import { useNavigate } from "react-router-dom";
 import ListButton from "../custom/ListButton/ListButton";
-import { useCardsOf, useStatsOf } from "../../logic/card";
+import { useCardsOf, useSimplifiedStatesOf } from "../../logic/card";
 import { useTranslation } from "react-i18next";
 
 type DeckPreviewProps = {
@@ -15,7 +15,7 @@ export default function DeckPreview({ deck, i }: DeckPreviewProps) {
   const navigate = useNavigate();
   const [t] = useTranslation();
   const [cards] = useCardsOf(deck);
-  const stats = useStatsOf(cards);
+  const states = useSimplifiedStatesOf(cards);
 
   return (
     <ListButton
@@ -28,23 +28,25 @@ export default function DeckPreview({ deck, i }: DeckPreviewProps) {
         <Group justify="space-between" w="100%" wrap="nowrap">
           <Text>{deck.name}</Text>
           <Group gap="xs" wrap="nowrap">
-            {stats.dueCards && stats.dueCards > 0 ? (
+            {states.review > 0 ? (
               <Badge variant="dot" color="blue">
-                {t("deck.review-cards-label", { count: stats.dueCards })}
+                {t("deck.review-cards-label", { count: -1 })}
               </Badge>
             ) : (
               <></>
             )}
-            {stats.newCards && stats.newCards > 0 ? (
+            {states.new > 0 ? (
               <Badge variant="dot" color="grape">
-                {t("deck.new-cards-label", { count: stats.newCards })}
+                {t("deck.new-cards-label", { count: states.new })}
               </Badge>
             ) : (
               <></>
             )}
-            {stats.learningCards && stats.learningCards > 0 ? (
+            {states.learning > 0 ? (
               <Badge variant="dot" color="orange">
-                {t("deck.learning-cards-label", { count: stats.learningCards })}
+                {t("deck.learning-cards-label", {
+                  count: states.learning,
+                })}
               </Badge>
             ) : (
               <></>