Port CharInv goal to use redux-toolkit

.vscode/settings.json

@@ -86,6 +86,7 @@
     "thecombine",
     "upsert",
     "venv",
+    "verns",
     "wordlist",
     "wordlists"
   ],

src/components/App/DefaultState.ts

@@ -4,28 +4,28 @@ import { defaultState as currentProjectState } from "components/Project/ProjectR
 import { defaultState as exportProjectState } from "components/ProjectExport/Redux/ExportProjectReduxTypes";
 import { defaultState as pronunciationsState } from "components/Pronunciations/Redux/PronunciationsReduxTypes";
 import { defaultState as treeViewState } from "components/TreeView/Redux/TreeViewReduxTypes";
-import { defaultState as characterInventoryState } from "goals/CharacterInventory/Redux/CharacterInventoryReducer";
+import { defaultState as characterInventoryState } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
 import { defaultState as mergeDuplicateGoal } from "goals/MergeDuplicates/Redux/MergeDupsReducer";
 import { defaultState as reviewEntriesState } from "goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesReduxTypes";
 import { defaultState as analyticsState } from "types/Redux/analyticsReduxTypes";
 
 export const defaultState = {
-  //login
+  //login and signup
   loginState: { ...loginState },
 
   //project
   currentProjectState: { ...currentProjectState },
   exportProjectState: { ...exportProjectState },
 
-  //data entry and review entries
+  //data entry and review entries goal
   treeViewState: { ...treeViewState },
   reviewEntriesState: { ...reviewEntriesState },
   pronunciationsState: { ...pronunciationsState },
 
   //goal timeline and current goal
   goalsState: { ...goalTimelineState },
 
-  //merge duplicates goal
+  //merge duplicates goal and review deferred duplicates goal
   mergeDuplicateGoal: { ...mergeDuplicateGoal },
 
   //character inventory goal

src/goals/CharacterInventory/CharInv/CharacterDetail/tests/index.test.tsx

@@ -16,7 +16,7 @@ import {
   buttonIdSubmit,
 } from "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace";
 import CharacterReplaceDialog from "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/CharacterReplaceDialog";
-import { defaultState } from "goals/CharacterInventory/Redux/CharacterInventoryReducer";
+import { defaultState } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
 import { StoreState } from "types";
 
 // Dialog uses portals, which are not supported in react-test-renderer.

src/goals/CharacterInventory/CharInv/CharacterList/index.tsx

@@ -36,8 +36,9 @@ export default function CharacterList(): ReactElement {
   };
 
   useEffect(() => {
-    setOrderedChars(sortBy(allChars, sortOrder));
-  }, [allChars, setOrderedChars, sortOrder]);
+    // Spread allChars to not mutate the Redux state.
+    setOrderedChars(sortBy([...allChars], sortOrder));
+  }, [allChars, sortOrder]);
 
   return (
     <>

src/goals/CharacterInventory/CharInv/CharacterList/tests/index.test.tsx

@@ -1,24 +1,26 @@
 import { Provider } from "react-redux";
-import renderer from "react-test-renderer";
+import { ReactTestRenderer, act, create } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
 
 import CharacterList from "goals/CharacterInventory/CharInv/CharacterList";
 import CharacterCard from "goals/CharacterInventory/CharInv/CharacterList/CharacterCard";
-import { defaultState } from "goals/CharacterInventory/Redux/CharacterInventoryReducer";
-import { newCharacterSetEntry } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
+import {
+  defaultState,
+  newCharacterSetEntry,
+} from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
 
 const characterSet = ["q", "w", "e", "r", "t", "y"].map(newCharacterSetEntry);
 const mockStore = configureMockStore()({
   characterInventoryState: { ...defaultState, characterSet },
 });
 
-let testRenderer: renderer.ReactTestRenderer;
+let testRenderer: ReactTestRenderer;
 
 beforeEach(async () => {
-  await renderer.act(async () => {
-    testRenderer = renderer.create(
+  await act(async () => {
+    testRenderer = create(
       <Provider store={mockStore}>
         <CharacterList />
       </Provider>

src/goals/CharacterInventory/CharInv/index.tsx

@@ -18,7 +18,7 @@ import CharacterSetHeader from "goals/CharacterInventory/CharInv/CharacterSetHea
 import {
   exit,
   loadCharInvData,
-  resetInState,
+  resetCharInv,
   setSelectedCharacter,
   uploadInventory,
 } from "goals/CharacterInventory/Redux/CharacterInventoryActions";
@@ -54,7 +54,7 @@ export default function CharacterInventory(): ReactElement {
     dispatch(loadCharInvData());
 
     // Call when component unmounts.
-    () => dispatch(resetInState());
+    () => dispatch(resetCharInv());
   }, [dispatch]);
 
   const save = async (): Promise<void> => {

src/goals/CharacterInventory/CharInv/tests/index.test.tsx

@@ -11,7 +11,7 @@ import CharInv, {
   dialogButtonIdYes,
   dialogIdCancel,
 } from "goals/CharacterInventory/CharInv";
-import { defaultState as characterInventoryState } from "goals/CharacterInventory/Redux/CharacterInventoryReducer";
+import { defaultState as characterInventoryState } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
 
 // Replace Dialog with something that doesn't create portals,
 // because react-test-renderer does not support portals.
@@ -27,7 +27,7 @@ jest.mock("goals/CharacterInventory/CharInv/CharacterDetail", () => "div");
 jest.mock("goals/CharacterInventory/Redux/CharacterInventoryActions", () => ({
   exit: () => mockExit(),
   loadCharInvData: () => mockLoadCharInvData(),
-  resetInState: () => jest.fn(),
+  reset: () => jest.fn(),
   setSelectedCharacter: () => mockSetSelectedCharacter(),
   uploadInventory: () => mockUploadInventory(),
 }));

src/goals/CharacterInventory/Redux/CharacterInventoryActions.ts

@@ -1,3 +1,5 @@
+import { Action, PayloadAction } from "@reduxjs/toolkit";
+
 import { Project } from "api/models";
 import { getFrontierWords } from "backend";
 import router from "browserRouter";
@@ -10,84 +12,59 @@ import {
   CharacterStatus,
   CharacterChange,
 } from "goals/CharacterInventory/CharacterInventoryTypes";
+import {
+  addRejectedCharacterAction,
+  addValidCharacterAction,
+  resetCharInvAction,
+  setAllWordsAction,
+  setCharacterSetAction,
+  setRejectedCharactersAction,
+  setSelectedCharacterAction,
+  setValidCharactersAction,
+} from "goals/CharacterInventory/Redux/CharacterInventoryReducer";
 import {
   CharacterInventoryState,
   CharacterSetEntry,
-  CharacterInventoryAction,
-  CharacterInventoryType,
   getCharacterStatus,
 } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
 import { StoreState } from "types";
 import { StoreStateDispatch } from "types/Redux/actions";
 import { Path } from "types/path";
 
-// Action Creators
+// Action Creation Functions
 
-export function addToValidCharacters(
-  chars: string[]
-): CharacterInventoryAction {
-  return {
-    type: CharacterInventoryType.ADD_TO_VALID_CHARACTERS,
-    payload: chars,
-  };
+export function addRejectedCharacter(char: string): PayloadAction {
+  return addRejectedCharacterAction(char);
 }
 
-export function addToRejectedCharacters(
-  chars: string[]
-): CharacterInventoryAction {
-  return {
-    type: CharacterInventoryType.ADD_TO_REJECTED_CHARACTERS,
-    payload: chars,
-  };
+export function addValidCharacter(char: string): PayloadAction {
+  return addValidCharacterAction(char);
 }
 
-export function setValidCharacters(chars: string[]): CharacterInventoryAction {
-  return {
-    type: CharacterInventoryType.SET_VALID_CHARACTERS,
-    payload: chars,
-  };
+export function resetCharInv(): Action {
+  return resetCharInvAction();
 }
 
-export function setRejectedCharacters(
-  chars: string[]
-): CharacterInventoryAction {
-  return {
-    type: CharacterInventoryType.SET_REJECTED_CHARACTERS,
-    payload: chars,
-  };
+export function setAllWords(words: string[]): PayloadAction {
+  return setAllWordsAction(words);
 }
 
-export function setAllWords(words: string[]): CharacterInventoryAction {
-  return {
-    type: CharacterInventoryType.SET_ALL_WORDS,
-    payload: words,
-  };
+export function setCharacterSet(
+  characterSet: CharacterSetEntry[]
+): PayloadAction {
+  return setCharacterSetAction(characterSet);
 }
 
-export function setSelectedCharacter(
-  character: string
-): CharacterInventoryAction {
-  return {
-    type: CharacterInventoryType.SET_SELECTED_CHARACTER,
-    payload: [character],
-  };
+export function setRejectedCharacters(chars: string[]): PayloadAction {
+  return setRejectedCharactersAction(chars);
 }
 
-export function setCharacterSet(
-  characterSet: CharacterSetEntry[]
-): CharacterInventoryAction {
-  return {
-    type: CharacterInventoryType.SET_CHARACTER_SET,
-    payload: [],
-    characterSet,
-  };
+export function setSelectedCharacter(character: string): PayloadAction {
+  return setSelectedCharacterAction(character);
 }
 
-export function resetInState(): CharacterInventoryAction {
-  return {
-    type: CharacterInventoryType.RESET,
-    payload: [],
-  };
+export function setValidCharacters(chars: string[]): PayloadAction {
+  return setValidCharactersAction(chars);
 }
 
 // Dispatch Functions
@@ -96,10 +73,10 @@ export function setCharacterStatus(character: string, status: CharacterStatus) {
   return (dispatch: StoreStateDispatch, getState: () => StoreState) => {
     switch (status) {
       case CharacterStatus.Accepted:
-        dispatch(addToValidCharacters([character]));
+        dispatch(addValidCharacter(character));
         break;
       case CharacterStatus.Rejected:
-        dispatch(addToRejectedCharacters([character]));
+        dispatch(addRejectedCharacter(character));
         break;
       case CharacterStatus.Undecided:
         const state = getState().characterInventoryState;
@@ -120,17 +97,23 @@ export function setCharacterStatus(character: string, status: CharacterStatus) {
   };
 }
 
-// Sends the character inventory to the server.
+/** Sends the in-state character inventory to the server. */
 export function uploadInventory() {
   return async (dispatch: StoreStateDispatch, getState: () => StoreState) => {
-    const state = getState();
-    const changes = getChangesFromState(state);
+    const charInvState = getState().characterInventoryState;
+    const project = getState().currentProjectState.project;
+    const changes = getChanges(project, charInvState);
     if (!changes.length) {
       exit();
       return;
     }
-    const updatedProject = updateCurrentProject(state);
-    await dispatch(asyncUpdateCurrentProject(updatedProject));
+    await dispatch(
+      asyncUpdateCurrentProject({
+        ...project,
+        rejectedCharacters: charInvState.rejectedCharacters,
+        validCharacters: charInvState.validCharacters,
+      })
+    );
     dispatch(addCharInvChangesToGoal(changes));
     await dispatch(asyncUpdateGoal());
     exit();
@@ -146,28 +129,17 @@ export function fetchWords() {
 
 export function getAllCharacters() {
   return async (dispatch: StoreStateDispatch, getState: () => StoreState) => {
-    const state = getState();
-    const words = await getFrontierWords();
-    const charactersWithDuplicates: string[] = [];
-    words.forEach((word) => charactersWithDuplicates.push(...word.vernacular));
-    const characters = [...new Set(charactersWithDuplicates)];
-
-    const characterSet: CharacterSetEntry[] = [];
-    characters.forEach((letter) => {
-      characterSet.push({
-        character: letter,
-        occurrences: countCharacterOccurrences(
-          letter,
-          words.map((word) => word.vernacular)
-        ),
-        status: getCharacterStatus(
-          letter,
-          state.currentProjectState.project.validCharacters,
-          state.currentProjectState.project.rejectedCharacters
-        ),
-      });
-    });
-    dispatch(setCharacterSet(characterSet));
+    const allWords = getState().characterInventoryState.allWords;
+    const characters = new Set<string>();
+    allWords.forEach((w) => [...w].forEach((c) => characters.add(c)));
+    const { rejectedCharacters, validCharacters } =
+      getState().currentProjectState.project;
+    const entries: CharacterSetEntry[] = [...characters].map((c) => ({
+      character: c,
+      occurrences: countOccurrences(c, allWords),
+      status: getCharacterStatus(c, validCharacters, rejectedCharacters),
+    }));
+    dispatch(setCharacterSet(entries));
   };
 }
 
@@ -188,7 +160,10 @@ export function exit(): void {
   router.navigate(Path.Goals);
 }
 
-function countCharacterOccurrences(char: string, words: string[]): number {
+function countOccurrences(char: string, words: string[]): number {
+  if (char.length !== 1) {
+    console.error(`countOccurrences expects length 1 char, but got: ${char}`);
+  }
   let count = 0;
   for (const word of words) {
     for (const letter of word) {
@@ -200,19 +175,13 @@ function countCharacterOccurrences(char: string, words: string[]): number {
   return count;
 }
 
-function getChangesFromState(state: StoreState): CharacterChange[] {
-  const proj = state.currentProjectState.project;
-  const charInvState = state.characterInventoryState;
-  return getChanges(proj, charInvState);
-}
-
 export function getChanges(
-  proj: Project,
+  project: Project,
   charInvState: CharacterInventoryState
 ): CharacterChange[] {
-  const oldAcc = proj.validCharacters;
+  const oldAcc = project.validCharacters;
   const newAcc = charInvState.validCharacters;
-  const oldRej = proj.rejectedCharacters;
+  const oldRej = project.rejectedCharacters;
   const newRej = charInvState.rejectedCharacters;
   const allCharacters = [
     ...new Set([...oldAcc, ...newAcc, ...oldRej, ...newRej]),
@@ -261,10 +230,3 @@ function getChange(
   }
   return undefined;
 }
-
-function updateCurrentProject(state: StoreState): Project {
-  const project = state.currentProjectState.project;
-  project.validCharacters = state.characterInventoryState.validCharacters;
-  project.rejectedCharacters = state.characterInventoryState.rejectedCharacters;
-  return project;
-}