Make sorting by locale case insensitive

kubk · Dec 8, 2023 · 84467d2 · 84467d2
1 parent 4471516
commit 84467d2
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 50 deletions.
diff --git a/src/screens/deck-form/card-list.tsx b/src/screens/deck-form/card-list.tsx
@@ -32,7 +32,7 @@ export const CardList = observer(() => {
         marginBottom: 16,
       })}
     >
-      <h4 className={css({ textAlign: "center" })}>Cards</h4>
+      <h3 className={css({ textAlign: "center" })}>Cards</h3>
       {deckFormStore.form.cards.length > 1 && (
         <>
           <Input
@@ -63,8 +63,6 @@ export const CardList = observer(() => {
             ].map((item, i) => {
               const isSelected =
                 deckFormStore.cardFilter.sortBy.value === item.fieldName;
-              const isAsc =
-                deckFormStore.cardFilter.sortDirection.value === "asc";
 
               return (
                 <button
@@ -73,22 +71,16 @@ export const CardList = observer(() => {
                     reset.button,
                     css({
                       color: isSelected ? theme.linkColor : undefined,
+                      cursor: "pointer",
                       fontSize: 16,
                     }),
                   )}
                   onClick={() => {
-                    if (
-                      deckFormStore.cardFilter.sortBy.value === item.fieldName
-                    ) {
-                      deckFormStore.cardFilter.sortDirection.onChange(
-                        isAsc ? "desc" : "asc",
-                      );
-                    } else {
-                      deckFormStore.cardFilter.sortBy.onChange(item.fieldName);
-                    }
+                    deckFormStore.changeSort(item.fieldName);
                   }}
                 >
-                  {item.label} {isSelected ? (isAsc ? "↓" : "↑") : null}
+                  {item.label}{" "}
+                  {isSelected ? (deckFormStore.isSortAsc ? "↓" : "↑") : null}
                 </button>
               );
             })}

diff --git a/src/store/deck-form-store.test.ts b/src/store/deck-form-store.test.ts
@@ -227,7 +227,7 @@ describe("deck form store", () => {
     expect(store.form.cards).toHaveLength(3);
   });
 
-  it("sorting", () => {
+  it("sorting - filtering cards", () => {
     const store = new DeckFormStore();
     store.loadForm();
     assert(store.form);
@@ -262,4 +262,21 @@ describe("deck form store", () => {
 
     expect(store.filteredCards.map(cardToId)).toEqual([5, 4, 3, undefined]);
   });
+
+  it("sorting - toggling direction & change sortBy field", () => {
+    const store = new DeckFormStore();
+
+    store.cardFilter.sortBy.onChange("createdAt");
+    store.cardFilter.sortDirection.onChange("asc");
+
+    store.changeSort("createdAt");
+
+    expect(store.cardFilter.sortBy.value).toEqual("createdAt");
+    expect(store.cardFilter.sortDirection.value).toEqual("desc");
+
+    store.changeSort("frontAlpha");
+
+    expect(store.cardFilter.sortBy.value).toEqual("frontAlpha");
+    expect(store.cardFilter.sortDirection.value).toEqual("desc");
+  });
 });
diff --git a/src/store/deck-form-store.ts b/src/store/deck-form-store.ts
@@ -81,17 +81,50 @@ export class DeckFormStore {
     sortDirection: new TextField<CardFilterDirection>("desc"),
   };
 
+  constructor() {
+    makeAutoObservable(this, {}, { autoBind: true });
+  }
+
+  get deckFormScreen() {
+    if (this.cardFormIndex !== undefined) {
+      return "cardForm";
+    }
+    if (this.isCardList) {
+      return "cardList";
+    }
+    return "deckForm";
+  }
+
+  loadForm() {
+    if (this.form) {
+      return;
+    }
+
+    const screen = screenStore.screen;
+    assert(screen.type === "deckForm");
+
+    if (screen.deckId) {
+      const deck = deckListStore.myDecks.find(
+        (myDeck) => myDeck.id === screen.deckId,
+      );
+      assert(deck, "Deck not found in deckListStore");
+      this.form = createUpdateForm(screen.deckId, deck);
+    } else {
+      this.form = {
+        title: createDeckTitleField(""),
+        description: new TextField(""),
+        cards: [],
+      };
+    }
+  }
+
   get isDeckSaveButtonVisible() {
     return Boolean(
       (this.form?.description.isTouched || this.form?.title.isTouched) &&
         this.form?.cards.length > 0,
     );
   }
 
-  constructor() {
-    makeAutoObservable(this, {}, { autoBind: true });
-  }
-
   goToCardList() {
     if (!this.form) {
       return;
@@ -123,15 +156,20 @@ export class DeckFormStore {
         return true;
       })
       .sort((a, b) => {
+        const aFront = a.front.value.toLowerCase();
+        const bFront = b.front.value.toLowerCase();
+        const aBack = a.back.value.toLowerCase();
+        const bBack = b.back.value.toLowerCase();
+
         if (this.cardFilter.sortBy.value === "frontAlpha") {
           return this.cardFilter.sortDirection.value === "desc"
-            ? b.front.value.localeCompare(a.front.value)
-            : a.front.value.localeCompare(b.front.value);
+            ? bFront.localeCompare(aFront)
+            : aFront.localeCompare(bFront);
         }
         if (this.cardFilter.sortBy.value === "backAlpha") {
           return this.cardFilter.sortDirection.value === "desc"
-            ? b.back.value.localeCompare(a.back.value)
-            : a.back.value.localeCompare(b.back.value);
+            ? bBack.localeCompare(aBack)
+            : aBack.localeCompare(bBack);
         }
         if (this.cardFilter.sortBy.value === "createdAt") {
           if (this.cardFilter.sortDirection.value === "desc") {
@@ -148,37 +186,16 @@ export class DeckFormStore {
       });
   }
 
-  get deckFormScreen() {
-    if (this.cardFormIndex !== undefined) {
-      return "cardForm";
-    }
-    if (this.isCardList) {
-      return "cardList";
+  changeSort(sortBy: CardFilterSortBy) {
+    if (this.cardFilter.sortBy.value === sortBy) {
+      this.cardFilter.sortDirection.onChange(this.isSortAsc ? "desc" : "asc");
+    } else {
+      this.cardFilter.sortBy.onChange(sortBy);
     }
-    return "deckForm";
   }
 
-  loadForm() {
-    if (this.form) {
-      return;
-    }
-
-    const screen = screenStore.screen;
-    assert(screen.type === "deckForm");
-
-    if (screen.deckId) {
-      const deck = deckListStore.myDecks.find(
-        (myDeck) => myDeck.id === screen.deckId,
-      );
-      assert(deck, "Deck not found in deckListStore");
-      this.form = createUpdateForm(screen.deckId, deck);
-    } else {
-      this.form = {
-        title: createDeckTitleField(""),
-        description: new TextField(""),
-        cards: [],
-      };
-    }
+  get isSortAsc() {
+    return this.cardFilter.sortDirection.value === "asc";
   }
 
   get cardForm() {