[ReviewEntries] Refactor sort-by handling (#2732)

sillsdev · Oct 30, 2023 · 891a84c · 891a84c
1 parent cc7f7a9
commit 891a84c
Show file tree

Hide file tree

Showing 14 changed files with 154 additions and 136 deletions.
diff --git a/src/goals/ReviewEntries/ReviewEntriesComponent/CellColumns.tsx b/src/goals/ReviewEntries/ReviewEntriesComponent/CellColumns.tsx
@@ -16,27 +16,13 @@ import {
   VernacularCell,
 } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
 import {
+  ColumnId,
   ReviewEntriesSense,
   ReviewEntriesWord,
   ReviewEntriesWordField,
 } from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
 import { compareFlags } from "utilities/wordUtilities";
 
-enum SortStyle {
-  // vernacular, noteText: neither have a customSort defined,
-  // so there is currently no way to trigger their SortStyles.
-  //Vernacular,
-  Sense,
-  Definition,
-  Gloss,
-  PartOfSpeech,
-  Domain,
-  Pronunciation,
-  //Note,
-  Flag,
-  None,
-}
-
 export class ColumnTitle {
   static Vernacular = t("reviewEntries.columns.vernacular");
   static Senses = t("reviewEntries.columns.senses");
@@ -67,10 +53,10 @@ export interface FieldParameterStandard {
   onRowDataChange?: (word: ReviewEntriesWord) => any;
 }
 
-let currentSort: SortStyle = SortStyle.None;
-const columns: Column<any>[] = [
+const columns: Column<ReviewEntriesWord>[] = [
   // Vernacular column
   {
+    id: ColumnId.Vernacular,
     title: ColumnTitle.Vernacular,
     // field determines what is passed as props.value to editComponent
     field: ReviewEntriesWordField.Vernacular,
@@ -84,6 +70,7 @@ const columns: Column<any>[] = [
 
   // Senses column
   {
+    id: ColumnId.Senses,
     title: ColumnTitle.Senses,
     // field determines what is passed as props.value to editComponent
     field: ReviewEntriesWordField.Senses,
@@ -99,12 +86,8 @@ const columns: Column<any>[] = [
     ): boolean => {
       return parseInt(filter) === rowData.senses.length;
     },
-    customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number => {
-      if (currentSort !== SortStyle.Sense) {
-        currentSort = SortStyle.Sense;
-      }
-      return b.senses.length - a.senses.length;
-    },
+    customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number =>
+      b.senses.length - a.senses.length,
     editComponent: (props: FieldParameterStandard) => {
       const deleteSense = (guid: string): void => {
         if (props.onRowDataChange) {
@@ -122,16 +105,13 @@ const columns: Column<any>[] = [
 
   // Definitions column
   {
+    id: ColumnId.Definitions,
     title: ColumnTitle.Definitions,
     // field determines what is passed as props.value to editComponent
     field: ReviewEntriesWordField.Senses,
     disableClick: true,
     render: (rowData: ReviewEntriesWord) => (
-      <DefinitionCell
-        value={rowData.senses}
-        rowData={rowData}
-        sortingByThis={currentSort === SortStyle.Definition}
-      />
+      <DefinitionCell rowData={rowData} value={rowData.senses} />
     ),
     editComponent: (props: FieldParameterStandard) => (
       <DefinitionCell {...props} editable />
@@ -150,10 +130,6 @@ const columns: Column<any>[] = [
       return false;
     },
     customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number => {
-      if (currentSort !== SortStyle.Definition) {
-        currentSort = SortStyle.Definition;
-      }
-
       for (
         let count = 0;
         count < a.senses.length && count < b.senses.length;
@@ -171,16 +147,13 @@ const columns: Column<any>[] = [
 
   // Glosses column
   {
+    id: ColumnId.Glosses,
     title: ColumnTitle.Glosses,
     // field determines what is passed as props.value to editComponent
     field: ReviewEntriesWordField.Senses,
     disableClick: true,
     render: (rowData: ReviewEntriesWord) => (
-      <GlossCell
-        value={rowData.senses}
-        rowData={rowData}
-        sortingByThis={currentSort === SortStyle.Gloss}
-      />
+      <GlossCell rowData={rowData} value={rowData.senses} />
     ),
     editComponent: (props: FieldParameterStandard) => (
       <GlossCell {...props} editable />
@@ -199,10 +172,6 @@ const columns: Column<any>[] = [
       return false;
     },
     customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number => {
-      if (currentSort !== SortStyle.Gloss) {
-        currentSort = SortStyle.Gloss;
-      }
-
       for (
         let count = 0;
         count < a.senses.length && count < b.senses.length;
@@ -220,6 +189,7 @@ const columns: Column<any>[] = [
 
   // Part of Speech column
   {
+    id: ColumnId.PartOfSpeech,
     title: ColumnTitle.PartOfSpeech,
     disableClick: true,
     editable: "never",
@@ -241,10 +211,6 @@ const columns: Column<any>[] = [
       return false;
     },
     customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number => {
-      if (currentSort !== SortStyle.PartOfSpeech) {
-        currentSort = SortStyle.PartOfSpeech;
-      }
-
       for (
         let count = 0;
         count < a.senses.length && count < b.senses.length;
@@ -265,15 +231,11 @@ const columns: Column<any>[] = [
 
   // Semantic Domains column
   {
+    id: ColumnId.Domains,
     title: ColumnTitle.Domains,
     // field determines what is passed as props.value to editComponent
     field: ReviewEntriesWordField.Senses,
-    render: (rowData: ReviewEntriesWord) => (
-      <DomainCell
-        rowData={rowData}
-        sortingByThis={currentSort === SortStyle.Domain}
-      />
-    ),
+    render: (rowData: ReviewEntriesWord) => <DomainCell rowData={rowData} />,
     editComponent: (props: FieldParameterStandard) => {
       const editDomains = (guid: string, domains: SemanticDomain[]): void => {
         if (props.onRowDataChange) {
@@ -329,10 +291,6 @@ const columns: Column<any>[] = [
       return false;
     },
     customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number => {
-      if (currentSort !== SortStyle.Domain) {
-        currentSort = SortStyle.Domain;
-      }
-
       let count = 0;
       let compare = 0;
 
@@ -393,6 +351,7 @@ const columns: Column<any>[] = [
 
   // Audio column
   {
+    id: ColumnId.Pronunciations,
     title: ColumnTitle.Pronunciations,
     // field determines what is passed as props.value to editComponent
     field: ReviewEntriesWordField.Pronunciations,
@@ -442,16 +401,13 @@ const columns: Column<any>[] = [
     ): boolean => {
       return parseInt(filter) === rowData.audio.length;
     },
-    customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number => {
-      if (currentSort !== SortStyle.Pronunciation) {
-        currentSort = SortStyle.Pronunciation;
-      }
-      return b.audio.length - a.audio.length;
-    },
+    customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number =>
+      b.audio.length - a.audio.length,
   },
 
   // Note column
   {
+    id: ColumnId.Note,
     title: ColumnTitle.Note,
     // field determines what is passed as props.value to editComponent
     field: ReviewEntriesWordField.Note,
@@ -469,6 +425,7 @@ const columns: Column<any>[] = [
 
   // Flag column
   {
+    id: ColumnId.Flag,
     title: ColumnTitle.Flag,
     // field determines what is passed as props.value to editComponent
     field: ReviewEntriesWordField.Flag,
@@ -486,12 +443,8 @@ const columns: Column<any>[] = [
     ): boolean => {
       return rowData.flag.text.includes(filter);
     },
-    customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number => {
-      if (currentSort !== SortStyle.Flag) {
-        currentSort = SortStyle.Flag;
-      }
-      return compareFlags(a.flag, b.flag);
-    },
+    customSort: (a: ReviewEntriesWord, b: ReviewEntriesWord): number =>
+      compareFlags(a.flag, b.flag),
   },
 
   // Delete Entry column

diff --git a/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DefinitionCell.tsx b/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DefinitionCell.tsx
@@ -18,7 +18,6 @@ import {
 
 interface DefinitionCellProps extends FieldParameterStandard {
   editable?: boolean;
-  sortingByThis?: boolean;
 }
 
 export default function DefinitionCell(

diff --git a/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DomainCell.tsx b/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DomainCell.tsx
@@ -13,6 +13,7 @@ import AlignedList, {
   SPACER,
 } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/AlignedList";
 import {
+  ColumnId,
   ReviewEntriesSense,
   ReviewEntriesWord,
 } from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
@@ -22,7 +23,6 @@ import { themeColors } from "types/theme";
 
 interface DomainCellProps {
   rowData: ReviewEntriesWord;
-  sortingByThis?: boolean;
   editDomains?: (guid: string, newDomains: SemanticDomain[]) => void;
 }
 
@@ -31,8 +31,12 @@ export default function DomainCell(props: DomainCellProps): ReactElement {
   const [senseToChange, setSenseToChange] = useState<
     ReviewEntriesSense | undefined
   >();
+
+  const sortingByThis = useSelector(
+    (state: StoreState) => state.reviewEntriesState.sortBy === ColumnId.Domains
+  );
   const selectedDomain = useSelector(
-    (state: StoreState) => state.treeViewState?.currentDomain
+    (state: StoreState) => state.treeViewState.currentDomain
   );
 
   function prepAddDomain(sense: ReviewEntriesSense): void {
@@ -90,7 +94,7 @@ export default function DomainCell(props: DomainCellProps): ReactElement {
     senseIndex: number,
     domainIndex: number
   ): { backgroundColor?: string } {
-    return props.sortingByThis && senseIndex === 0 && domainIndex === 0
+    return sortingByThis && senseIndex === 0 && domainIndex === 0
       ? { backgroundColor: themeColors.highlight as string }
       : {};
   }
@@ -124,7 +128,7 @@ export default function DomainCell(props: DomainCellProps): ReactElement {
                 <Grid item xs>
                   <Chip
                     label={t("reviewEntries.noDomain")}
-                    color={props.sortingByThis ? "default" : "secondary"}
+                    color={sortingByThis ? "default" : "secondary"}
                     style={getChipStyle(senseIndex, 0)}
                   />
                 </Grid>

diff --git a/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/GlossCell.tsx b/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/GlossCell.tsx
@@ -18,7 +18,6 @@ import {
 
 interface GlossCellProps extends FieldParameterStandard {
   editable?: boolean;
-  sortingByThis?: boolean;
 }
 
 export default function GlossCell(props: GlossCellProps): ReactElement {

diff --git a/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/DefinitionCell.test.tsx b/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/DefinitionCell.test.tsx
@@ -1,5 +1,5 @@
 import { Provider } from "react-redux";
-import renderer from "react-test-renderer";
+import { act, create } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
@@ -20,23 +20,19 @@ const mockStore = configureMockStore()({
 const mockWord = mockWords()[0];
 
 describe("DefinitionCell", () => {
-  it("renders sort-stylized", () => {
-    renderer.act(() => {
-      renderer.create(
+  it("renders", async () => {
+    await act(async () => {
+      create(
         <Provider store={mockStore}>
-          <DefinitionCell
-            rowData={mockWord}
-            value={mockWord.senses}
-            sortingByThis
-          />
+          <DefinitionCell rowData={mockWord} value={mockWord.senses} />
         </Provider>
       );
     });
   });
 
-  it("renders editable", () => {
-    renderer.act(() => {
-      renderer.create(
+  it("renders editable", async () => {
+    await act(async () => {
+      create(
         <Provider store={mockStore}>
           <DefinitionCell rowData={mockWord} value={mockWord.senses} editable />
         </Provider>

diff --git a/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/DomainCell.test.tsx b/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/DomainCell.test.tsx
@@ -1,33 +1,40 @@
 import { Provider } from "react-redux";
-import renderer from "react-test-renderer";
+import { act, create } from "react-test-renderer";
+import { Store } from "redux";
 import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
 
+import { defaultState as treeViewState } from "components/TreeView/Redux/TreeViewReduxTypes";
 import DomainCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DomainCell";
+import { ColumnId } from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 
 jest.mock("components/TreeView", () => "div");
 
-const mockStore = configureMockStore()();
+const mockStore = (sortByThis?: boolean): Store =>
+  configureMockStore()({
+    reviewEntriesState: { sortBy: sortByThis ? ColumnId.Domains : undefined },
+    treeViewState,
+  });
 const mockWord = mockWords()[0];
 
 describe("DomainCell", () => {
-  it("renders editable", () => {
-    renderer.act(() => {
-      renderer.create(
-        <Provider store={mockStore}>
+  it("renders editable", async () => {
+    await act(async () => {
+      create(
+        <Provider store={mockStore()}>
           <DomainCell rowData={mockWord} editDomains={jest.fn()} />
         </Provider>
       );
     });
   });
 
-  it("renders sort-stylized", () => {
-    renderer.act(() => {
-      renderer.create(
-        <Provider store={mockStore}>
-          <DomainCell rowData={mockWord} sortingByThis />
+  it("renders sort-stylized", async () => {
+    await act(async () => {
+      create(
+        <Provider store={mockStore(true)}>
+          <DomainCell rowData={mockWord} />
         </Provider>
       );
     });