[ReviewEntries] Use localeCompare for all text column sorts (#3724)

Author: imnasnainaec

src/goals/ReviewEntries/ReviewEntriesTable/index.tsx

@@ -123,6 +123,10 @@ export default function ReviewEntriesTable(props: {
   const { definitionsEnabled, grammaticalInfoEnabled } = useAppSelector(
     (state: StoreState) => state.currentProjectState.project
   );
+  const vernLang = useAppSelector(
+    (state: StoreState) =>
+      state.currentProjectState.project.vernacularWritingSystem.bcp47
+  );
 
   const autoResetPageIndexRef = useRef(true);
   const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);
@@ -225,6 +229,7 @@ export default function ReviewEntriesTable(props: {
       header: t("reviewEntries.columns.vernacular"),
       id: ColumnId.Vernacular,
       size: BaselineColumnSize - 40,
+      sortingFn: sf.sortingFnVernacular(vernLang),
     }),
 
     // Senses column
@@ -332,6 +337,7 @@ export default function ReviewEntriesTable(props: {
       header: t("reviewEntries.columns.note"),
       id: ColumnId.Note,
       size: BaselineColumnSize - 40,
+      sortingFn: sf.sortingFnNote,
     }),
 
     // Flag column

src/goals/ReviewEntries/ReviewEntriesTable/sortingFn.ts

@@ -64,6 +64,13 @@ function compareDomains(a: SemanticDomain[], b: SemanticDomain[]): number {
 
 /* Custom `sortingFn` functions for `MaterialReactTable` columns. */
 
+/** Takes vernacular language bcp47 string.
+ * Returns a function that localCompares the vernacular forms. */
+export const sortingFnVernacular =
+  (lang: string): MRT_SortingFn<Word> =>
+  (a, b) =>
+    a.original.vernacular.localeCompare(b.original.vernacular, lang);
+
 /** Concatenates all sense definition texts for each word, then compares strings. */
 export const sortingFnDefinitions: MRT_SortingFn<Word> = (a, b) =>
   definitionString(a.original.senses).localeCompare(
@@ -87,6 +94,10 @@ export const sortingFnDomains: MRT_SortingFn<Word> = (a, b) =>
     gatherDomains(b.original.senses)
   );
 
+/** Compares note text. */
+export const sortingFnNote: MRT_SortingFn<Word> = (a, b) =>
+  a.original.note.text.localeCompare(b.original.note.text);
+
 /** Compares flags: `.active = true` before `= false`, then `.text` alphabetically. */
 export const sortingFnFlag: MRT_SortingFn<Word> = (a, b) =>
   compareFlags(a.original.flag, b.original.flag);