From 45a7f9a885f1371ca044dae9dc8bfa73c0c48015 Mon Sep 17 00:00:00 2001
From: Egor Gorbachev <7gorbachevm@gmail.com>
Date: Mon, 5 Feb 2024 22:05:02 +0700
Subject: [PATCH] Prioritize new forgotten cards (#12)

* Prioritize new forgotten cards
---
 .gitignore                                    |   1 -
 src/lib/mobx-form/persistable-field.ts        |   2 +-
 src/screens/component-catalog/components.tsx  |  11 +-
 .../component-catalog/select-story.tsx        |  23 ++
 .../store/card-under-review-store.ts          |   7 +-
 .../deck-review/store/review-store.test.ts    | 340 +++++++++++++-----
 src/screens/deck-review/store/review-store.ts |  27 +-
 src/store/deck-list-store.ts                  |   9 +-
 src/store/user-store.ts                       |  12 +-
 9 files changed, 318 insertions(+), 114 deletions(-)
 create mode 100644 src/screens/component-catalog/select-story.tsx

diff --git a/.gitignore b/.gitignore
index b90522f5..4d9c3d23 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,4 +26,3 @@ ngrok
 .dev.vars
 
 dumper/dump.sql
-gitexporter.config.json
diff --git a/src/lib/mobx-form/persistable-field.ts b/src/lib/mobx-form/persistable-field.ts
index 52e70aa9..19fe371e 100644
--- a/src/lib/mobx-form/persistable-field.ts
+++ b/src/lib/mobx-form/persistable-field.ts
@@ -2,7 +2,7 @@ import { makePersistable } from "mobx-persist-store";
 import { FieldWithValue } from "./field-with-value.ts";
 import { storageAdapter } from "../telegram/storage-adapter.ts";
 
-export const persistableField = <T extends FieldWithValue<any>>(
+export const persistableField = <T extends FieldWithValue<unknown>>(
   field: T,
   storageKey: string,
   expireIn?: number,
diff --git a/src/screens/component-catalog/components.tsx b/src/screens/component-catalog/components.tsx
index adb4b87b..8fd2b847 100644
--- a/src/screens/component-catalog/components.tsx
+++ b/src/screens/component-catalog/components.tsx
@@ -1,15 +1,18 @@
 import { Button } from "../../ui/button.tsx";
 import { ReactNode } from "react";
 import { CardPreviewStory } from "./card-preview-story.tsx";
+import { SelectStory } from "./select-story.tsx";
 
-export type Component = { name: string; component: ReactNode };
+export type Component = {
+  name: string;
+  component: ReactNode;
+};
 
 export const components: Array<Component> = [
   {
     name: "Button",
     component: <Button>Button</Button>,
   },
-
   {
     name: "Button - outline",
     component: <Button outline>Button</Button>,
@@ -39,4 +42,8 @@ export const components: Array<Component> = [
       />
     ),
   },
+  {
+    name: "Select",
+    component: <SelectStory />,
+  },
 ];
diff --git a/src/screens/component-catalog/select-story.tsx b/src/screens/component-catalog/select-story.tsx
new file mode 100644
index 00000000..7943192e
--- /dev/null
+++ b/src/screens/component-catalog/select-story.tsx
@@ -0,0 +1,23 @@
+import { Select } from "../../ui/select.tsx";
+import { useState } from "react";
+
+const countries = [
+  { value: "us", label: "United States" },
+  { value: "fr", label: "France" },
+  { value: "de", label: "Germany" },
+];
+
+type Country = (typeof countries)[number]["value"];
+
+export const SelectStory = () => {
+  const [value, setValue] = useState<Country>("us");
+  return (
+    <Select
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue);
+      }}
+      options={countries}
+    />
+  );
+};
diff --git a/src/screens/deck-review/store/card-under-review-store.ts b/src/screens/deck-review/store/card-under-review-store.ts
index ec243ae7..e993d42e 100644
--- a/src/screens/deck-review/store/card-under-review-store.ts
+++ b/src/screens/deck-review/store/card-under-review-store.ts
@@ -12,6 +12,7 @@ import { assert } from "../../../lib/typescript/assert.ts";
 import { removeAllTags } from "../../../lib/sanitize-html/remove-all-tags.ts";
 import { userStore } from "../../../store/user-store.ts";
 import { BooleanToggle } from "../../../lib/mobx-form/boolean-toggle.ts";
+import { CardReviewType } from "../../../../functions/db/deck/get-cards-to-review-db.ts";
 
 export enum CardState {
   Remember = "remember",
@@ -36,7 +37,11 @@ export class CardUnderReviewStore {
   // A hack for iOS when the card content is too large
   isOverflowing = new BooleanToggle(false);
 
-  constructor(card: DeckCardDbType, deck: DeckWithCardsWithReviewType) {
+  constructor(
+    card: DeckCardDbType,
+    deck: DeckWithCardsWithReviewType,
+    public cardReviewType: CardReviewType,
+  ) {
     this.id = card.id;
     this.front = card.front;
     this.back = card.back;
diff --git a/src/screens/deck-review/store/review-store.test.ts b/src/screens/deck-review/store/review-store.test.ts
index ea5b5ea8..ed37b92e 100644
--- a/src/screens/deck-review/store/review-store.test.ts
+++ b/src/screens/deck-review/store/review-store.test.ts
@@ -12,7 +12,27 @@ vi.mock("mobx-persist-store", () => {
   };
 });
 
-const deckCardsMock: DeckCardDbTypeWithType[] = [
+const createDeckWithCards = (cards: DeckCardDbTypeWithType[]) => {
+  const deckMock: DeckWithCardsWithReviewType = {
+    id: 1,
+    name: "English",
+    description: "English words",
+    deck_card: cards,
+    cardsToReview: cards,
+    speak_field: null,
+    speak_locale: null,
+    created_at: "2023-10-06T02:13:20.985Z",
+    author_id: 1,
+    share_id: "share_id_mock2",
+    is_public: false,
+    available_in: null,
+    deck_category: null,
+    category_id: null,
+  };
+  return deckMock;
+};
+
+const repeatCardsMock: DeckCardDbTypeWithType[] = [
   {
     id: 3,
     deck_id: 1,
@@ -46,24 +66,65 @@ const deckCardsMock: DeckCardDbTypeWithType[] = [
     answer_type: "remember",
     answers: null,
   },
+  {
+    id: 6,
+    deck_id: 1,
+    created_at: "2023-10-06T02:13:20.985Z",
+    example: null,
+    front: "card 4",
+    back: "card 4",
+    type: "repeat",
+    answer_type: "remember",
+    answers: null,
+  },
 ];
 
-const deckMock: DeckWithCardsWithReviewType = {
-  id: 1,
-  name: "English",
-  description: "English words",
-  deck_card: deckCardsMock,
-  cardsToReview: deckCardsMock,
-  speak_field: null,
-  speak_locale: null,
-  created_at: "2023-10-06T02:13:20.985Z",
-  author_id: 1,
-  share_id: "share_id_mock2",
-  is_public: false,
-  available_in: null,
-  deck_category: null,
-  category_id: null,
-};
+const newCardsMock: DeckCardDbTypeWithType[] = [
+  {
+    id: 3,
+    deck_id: 1,
+    created_at: "2023-10-06T02:13:20.985Z",
+    example: null,
+    front: "time",
+    back: "Время",
+    type: "new",
+    answer_type: "remember",
+    answers: null,
+  },
+  {
+    id: 4,
+    deck_id: 1,
+    created_at: "2023-10-06T02:13:20.985Z",
+    example: null,
+    front: "year",
+    back: "Год",
+    type: "new",
+    answer_type: "remember",
+    answers: null,
+  },
+  {
+    id: 5,
+    deck_id: 1,
+    created_at: "2023-10-06T02:13:20.985Z",
+    example: null,
+    front: "way",
+    back: "Дорога",
+    type: "new",
+    answer_type: "remember",
+    answers: null,
+  },
+  {
+    id: 6,
+    deck_id: 1,
+    created_at: "2023-10-06T02:13:20.985Z",
+    example: null,
+    front: "card 4",
+    back: "card 4",
+    type: "new",
+    answer_type: "remember",
+    answers: null,
+  },
+];
 
 vi.mock("../lib/telegram/storage-adapter.ts", () => {
   return {
@@ -122,41 +183,50 @@ describe("card form store", () => {
 
   it("basic", () => {
     const reviewStore = new ReviewStore();
-    reviewStore.startDeckReview(deckMock);
+    reviewStore.startDeckReview(createDeckWithCards(repeatCardsMock));
     expect(reviewStore.isFinished).toBeFalsy();
 
     expect(reviewStore.cardsToReview.map(cardToSnapshot))
       .toMatchInlineSnapshot(`
-      [
-        {
-          "back": "Время",
-          "deckName": "English",
-          "example": null,
-          "front": "time",
-          "id": 3,
-          "isOpened": false,
-          "state": undefined,
-        },
-        {
-          "back": "Год",
-          "deckName": "English",
-          "example": null,
-          "front": "year",
-          "id": 4,
-          "isOpened": false,
-          "state": undefined,
-        },
-        {
-          "back": "Дорога",
-          "deckName": "English",
-          "example": null,
-          "front": "way",
-          "id": 5,
-          "isOpened": false,
-          "state": undefined,
-        },
-      ]
-    `);
+        [
+          {
+            "back": "Время",
+            "deckName": "English",
+            "example": null,
+            "front": "time",
+            "id": 3,
+            "isOpened": false,
+            "state": undefined,
+          },
+          {
+            "back": "Год",
+            "deckName": "English",
+            "example": null,
+            "front": "year",
+            "id": 4,
+            "isOpened": false,
+            "state": undefined,
+          },
+          {
+            "back": "Дорога",
+            "deckName": "English",
+            "example": null,
+            "front": "way",
+            "id": 5,
+            "isOpened": false,
+            "state": undefined,
+          },
+          {
+            "back": "card 4",
+            "deckName": "English",
+            "example": null,
+            "front": "card 4",
+            "id": 6,
+            "isOpened": false,
+            "state": undefined,
+          },
+        ]
+      `);
 
     reviewStore.open();
     expect(reviewStore.currentCard?.isOpened).toBeTruthy();
@@ -165,27 +235,36 @@ describe("card form store", () => {
     expect(reviewStore.isFinished).toBeFalsy();
     expect(reviewStore.cardsToReview.map(cardToSnapshot))
       .toMatchInlineSnapshot(`
-      [
-        {
-          "back": "Год",
-          "deckName": "English",
-          "example": null,
-          "front": "year",
-          "id": 4,
-          "isOpened": false,
-          "state": undefined,
-        },
-        {
-          "back": "Дорога",
-          "deckName": "English",
-          "example": null,
-          "front": "way",
-          "id": 5,
-          "isOpened": false,
-          "state": undefined,
-        },
-      ]
-    `);
+        [
+          {
+            "back": "Год",
+            "deckName": "English",
+            "example": null,
+            "front": "year",
+            "id": 4,
+            "isOpened": false,
+            "state": undefined,
+          },
+          {
+            "back": "Дорога",
+            "deckName": "English",
+            "example": null,
+            "front": "way",
+            "id": 5,
+            "isOpened": false,
+            "state": undefined,
+          },
+          {
+            "back": "card 4",
+            "deckName": "English",
+            "example": null,
+            "front": "card 4",
+            "id": 6,
+            "isOpened": false,
+            "state": undefined,
+          },
+        ]
+      `);
     expect(reviewStore.currentCard?.id).toBe(4);
 
     reviewStore.open();
@@ -194,44 +273,56 @@ describe("card form store", () => {
     expect(reviewStore.isFinished).toBeFalsy();
     expect(reviewStore.cardsToReview.map(cardToSnapshot))
       .toMatchInlineSnapshot(`
-      [
-        {
-          "back": "Дорога",
-          "deckName": "English",
-          "example": null,
-          "front": "way",
-          "id": 5,
-          "isOpened": false,
-          "state": undefined,
-        },
-        {
-          "back": "Год",
-          "deckName": "English",
-          "example": null,
-          "front": "year",
-          "id": 4,
-          "isOpened": false,
-          "state": "forget",
-        },
-      ]
-    `);
+        [
+          {
+            "back": "Дорога",
+            "deckName": "English",
+            "example": null,
+            "front": "way",
+            "id": 5,
+            "isOpened": false,
+            "state": undefined,
+          },
+          {
+            "back": "card 4",
+            "deckName": "English",
+            "example": null,
+            "front": "card 4",
+            "id": 6,
+            "isOpened": false,
+            "state": undefined,
+          },
+          {
+            "back": "Год",
+            "deckName": "English",
+            "example": null,
+            "front": "year",
+            "id": 4,
+            "isOpened": false,
+            "state": "forget",
+          },
+        ]
+      `);
 
     reviewStore.open();
     reviewStore.changeState(CardState.Remember);
     expect(reviewStore.isFinished).toBeFalsy();
-    expect(reviewStore.cardsToReview).toHaveLength(1);
+    expect(reviewStore.cardsToReview).toHaveLength(2);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Remember);
 
     reviewStore.open();
     reviewStore.changeState(CardState.Remember);
     expect(reviewStore.isFinished).toBeTruthy();
 
     expect(reviewStore.result.forgotIds).toEqual([4]);
-    expect(reviewStore.result.rememberIds).toEqual([3, 5]);
+    expect(reviewStore.result.rememberIds).toEqual([3, 5, 6]);
   });
 
   it("current next", () => {
     const reviewStore = new ReviewStore();
-    reviewStore.startDeckReview(deckMock);
+    reviewStore.startDeckReview(createDeckWithCards(repeatCardsMock));
     expect(reviewStore.isFinished).toBeFalsy();
 
     expect(reviewStore.currentCard?.id).toEqual(3);
@@ -249,6 +340,11 @@ describe("card form store", () => {
     reviewStore.open();
     reviewStore.changeState(CardState.Remember);
 
+    expect(reviewStore.currentCard?.id).toEqual(6);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Remember);
+
     expect(reviewStore.currentCard?.id).toEqual(4);
 
     reviewStore.open();
@@ -264,26 +360,81 @@ describe("card form store", () => {
 
   it("hit wrong many times", () => {
     const reviewStore = new ReviewStore();
-    reviewStore.startDeckReview(deckMock);
+    reviewStore.startDeckReview(createDeckWithCards(repeatCardsMock));
+    expect(reviewStore.isFinished).toBeFalsy();
+    expect(reviewStore.currentCard?.id).toEqual(3);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(4);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(5);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(6);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(3);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(4);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(5);
+
+    expect(reviewStore.result.forgotIds).toHaveLength(4);
+    expect(reviewStore.result.rememberIds).toHaveLength(0);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Remember);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Remember);
+
+    reviewStore.open();
+    reviewStore.changeState(CardState.Remember);
+
+    expect(reviewStore.result.forgotIds).toHaveLength(4);
+    expect(reviewStore.result.rememberIds).toHaveLength(0);
+    expect(reviewStore.currentCard?.id).toEqual(4);
+  });
+
+  it("hit wrong many times - prioritize forgotten new cards", () => {
+    const reviewStore = new ReviewStore();
+    reviewStore.startDeckReview(createDeckWithCards(newCardsMock));
+
     expect(reviewStore.isFinished).toBeFalsy();
+    expect(reviewStore.currentCard?.id).toEqual(3);
 
     reviewStore.open();
     reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(4);
 
     reviewStore.open();
     reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(5);
 
     reviewStore.open();
     reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(3);
 
     reviewStore.open();
     reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(4);
 
     reviewStore.open();
     reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(5);
 
     reviewStore.open();
     reviewStore.changeState(CardState.Forget);
+    expect(reviewStore.currentCard?.id).toEqual(3);
 
     expect(reviewStore.result.forgotIds).toHaveLength(3);
     expect(reviewStore.result.rememberIds).toHaveLength(0);
@@ -299,5 +450,6 @@ describe("card form store", () => {
 
     expect(reviewStore.result.forgotIds).toHaveLength(3);
     expect(reviewStore.result.rememberIds).toHaveLength(0);
+    expect(reviewStore.currentCard?.id).toEqual(6);
   });
 });
diff --git a/src/screens/deck-review/store/review-store.ts b/src/screens/deck-review/store/review-store.ts
index 952b7280..29bf4d2d 100644
--- a/src/screens/deck-review/store/review-store.ts
+++ b/src/screens/deck-review/store/review-store.ts
@@ -35,7 +35,7 @@ export class ReviewStore {
     }
 
     deck.cardsToReview.forEach((card) => {
-      this.cardsToReview.push(new CardUnderReviewStore(card, deck));
+      this.cardsToReview.push(new CardUnderReviewStore(card, deck, card.type));
     });
 
     this.initializeInitialCurrentNextCards();
@@ -47,7 +47,7 @@ export class ReviewStore {
     }
     this.cardsToReview = [];
     deck.deck_card.forEach((card) => {
-      this.cardsToReview.push(new CardUnderReviewStore(card, deck));
+      this.cardsToReview.push(new CardUnderReviewStore(card, deck, "repeat"));
     });
     if (this.cardsToReview.length) {
       this.isStudyAnyway = true;
@@ -62,7 +62,9 @@ export class ReviewStore {
 
     myDecks.forEach((deck) => {
       deck.cardsToReview.forEach((card) => {
-        this.cardsToReview.push(new CardUnderReviewStore(card, deck));
+        this.cardsToReview.push(
+          new CardUnderReviewStore(card, deck, card.type),
+        );
       });
     });
 
@@ -78,7 +80,9 @@ export class ReviewStore {
       deck.cardsToReview
         .filter((card) => card.type === "repeat")
         .forEach((card) => {
-          this.cardsToReview.push(new CardUnderReviewStore(card, deck));
+          this.cardsToReview.push(
+            new CardUnderReviewStore(card, deck, card.type),
+          );
         });
     });
 
@@ -144,7 +148,20 @@ export class ReviewStore {
         this.result.forgotIds.push(currentCard.id);
       }
       currentCard.close();
-      this.cardsToReview.push(currentCard);
+
+      if (currentCard.cardReviewType === "new") {
+        // Calculate new index, ensuring it doesn't exceed the array length
+        const newIndex = Math.min(
+          currentCardIdx + 2,
+          this.cardsToReview.length,
+        );
+        // Insert the card at the new index
+        // This way, the incorrectly answered card is reinserted 3 positions ahead,
+        // or at the end of the queue if there are less than 3 cards left.
+        this.cardsToReview.splice(newIndex, 0, currentCard);
+      } else {
+        this.cardsToReview.push(currentCard);
+      }
     }
 
     if (
diff --git a/src/store/deck-list-store.ts b/src/store/deck-list-store.ts
index 5a5779ee..092b261a 100644
--- a/src/store/deck-list-store.ts
+++ b/src/store/deck-list-store.ts
@@ -15,7 +15,10 @@ import {
   type DeckWithCardsDbType,
 } from "../../functions/db/deck/decks-with-cards-schema.ts";
 import { type RouteType, screenStore } from "./screen-store.ts";
-import { type CardToReviewDbType } from "../../functions/db/deck/get-cards-to-review-db.ts";
+import {
+  CardReviewType,
+  type CardToReviewDbType,
+} from "../../functions/db/deck/get-cards-to-review-db.ts";
 import { assert } from "../lib/typescript/assert.ts";
 import { ReviewStore } from "../screens/deck-review/store/review-store.ts";
 import { reportHandledError } from "../lib/rollbar/rollbar.tsx";
@@ -31,7 +34,7 @@ export enum StartParamType {
 }
 
 export type DeckCardDbTypeWithType = DeckCardDbType & {
-  type: "new" | "repeat";
+  type: CardReviewType;
 };
 
 export type DeckWithCardsWithReviewType = DeckWithCardsDbType & {
@@ -648,7 +651,7 @@ const getCardsToReview = (
   deck: DeckWithCardsDbType,
   cardsToReview: CardToReviewDbType[],
 ) => {
-  const map = new Map<number, "new" | "repeat">();
+  const map = new Map<number, CardReviewType>();
 
   cardsToReview.forEach((cardToReview) => {
     if (cardToReview.deck_id == deck.id) {
diff --git a/src/store/user-store.ts b/src/store/user-store.ts
index 6d228477..2f6fb104 100644
--- a/src/store/user-store.ts
+++ b/src/store/user-store.ts
@@ -6,23 +6,21 @@ import { makePersistable } from "mobx-persist-store";
 import { storageAdapter } from "../lib/telegram/storage-adapter.ts";
 import { BooleanToggle } from "../lib/mobx-form/boolean-toggle.ts";
 import { CardAnswerType } from "../../functions/db/custom-types.ts";
+import { persistableField } from "../lib/mobx-form/persistable-field.ts";
 
 export class UserStore {
   userInfo?: UserDbType;
   plans?: PlansForUser;
-  isCardFormattingOn = new BooleanToggle(false);
+  isCardFormattingOn = persistableField(
+    new BooleanToggle(false),
+    "isCardFormattingOn",
+  );
   defaultCardType: CardAnswerType = "remember";
   isSpeakingCardsMuted = new BooleanToggle(false);
 
   constructor() {
     makeAutoObservable(this, {}, { autoBind: true });
 
-    makePersistable(this.isCardFormattingOn, {
-      name: "isCardFormattingOn",
-      properties: ["value"],
-      storage: storageAdapter,
-    });
-
     makePersistable(this, {
       name: "defaultCardType",
       properties: ["defaultCardType"],