diff --git a/src/components/DataEntry/DataEntryHeader/tests/DataEntryHeader.test.tsx b/src/components/DataEntry/DataEntryHeader/tests/DataEntryHeader.test.tsx index 4bdad4845a..e9b9d8ef41 100644 --- a/src/components/DataEntry/DataEntryHeader/tests/DataEntryHeader.test.tsx +++ b/src/components/DataEntry/DataEntryHeader/tests/DataEntryHeader.test.tsx @@ -4,11 +4,11 @@ import configureMockStore from "redux-mock-store"; import "tests/mockReactI18next"; +import { SemanticDomainFull } from "api"; import DataEntryHeader, { getQuestions, } from "components/DataEntry/DataEntryHeader/DataEntryHeader"; import { newSemanticDomain } from "types/semanticDomain"; -import { SemanticDomainFull } from "api"; const mockStore = configureMockStore()(); const mockCallback = jest.fn(); diff --git a/src/components/TreeView/TreeSearch.tsx b/src/components/TreeView/TreeSearch.tsx index d3ee192493..d4740e452c 100644 --- a/src/components/TreeView/TreeSearch.tsx +++ b/src/components/TreeView/TreeSearch.tsx @@ -1,12 +1,13 @@ import { Grid, TextField } from "@material-ui/core"; +import React, { ReactElement, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Key } from "ts-key-enum"; + import { SemanticDomainTreeNode } from "api"; import { getSemanticDomainTreeNode, getSemanticDomainTreeNodeByName, } from "backend"; -import React, { ReactElement, useState } from "react"; -import { useTranslation } from "react-i18next"; -import { Key } from "ts-key-enum"; export interface TreeSearchProps { currentDomain: SemanticDomainTreeNode; @@ -99,7 +100,7 @@ export function useTreeSearch(props: TreeSearchProps): TreeSearchState { // Search for domain if (!isNaN(parseInt(input))) { // make a blocking call to the backend API for the domain id instead of using the map - let domain = await getSemanticDomainTreeNode(input, "en"); + const domain = await getSemanticDomainTreeNode(input, "en"); if (domain) { animateSuccessfulSearch(domain, event); // Return to indicate success and skip setting error state. diff --git a/src/components/TreeView/TreeViewActions.ts b/src/components/TreeView/TreeViewActions.ts index 4acb3e77b6..5f054fc00c 100644 --- a/src/components/TreeView/TreeViewActions.ts +++ b/src/components/TreeView/TreeViewActions.ts @@ -1,20 +1,9 @@ +import { defaultState } from "./TreeViewReducer"; import { SemanticDomain, SemanticDomainTreeNode } from "api/models"; import { getSemanticDomainTreeNode } from "backend"; +import { StoreState } from "types"; import { StoreStateDispatch } from "types/Redux/actions"; - -export enum TreeActionType { - CLOSE_TREE = "CLOSE_TREE", - OPEN_TREE = "OPEN_TREE", - SET_DOMAIN_LANGUAGE = "SET_DOMAIN_LANGUAGE", - TRAVERSE_TREE = "TRAVERSE_TREE", - SET_CURRENT_DOMAIN = "SET_CURRENT_DOMAIN", -} - -export interface TreeViewAction { - type: TreeActionType; - domain?: SemanticDomain; - language?: string; -} +import { TreeActionType, TreeViewAction } from "./TreeViewReduxTypes"; export function closeTreeAction(): TreeViewAction { return { type: TreeActionType.CLOSE_TREE }; @@ -46,10 +35,22 @@ export function setCurrentDomain( return { type: TreeActionType.SET_CURRENT_DOMAIN, domain }; } -export function updateTreeLanguage(language: string, headString = "") { +export function updateTreeLanguage(language: string) { return async (dispatch: StoreStateDispatch) => { if (language) { dispatch(setDomainLanguageAction(language)); } }; } + +export function initTreeDomain(language: string) { + return async (dispatch: StoreStateDispatch, getState: () => StoreState) => { + const currentDomain = getState().treeViewState.currentDomain; + if (currentDomain === defaultState.currentDomain) { + if (!currentDomain.lang) { + currentDomain.lang = language ?? "en"; + } + dispatch(traverseTreeAction(currentDomain)); + } + }; +} diff --git a/src/components/TreeView/TreeViewComponent.tsx b/src/components/TreeView/TreeViewComponent.tsx index 6f3b2bdc32..b5a2ece655 100644 --- a/src/components/TreeView/TreeViewComponent.tsx +++ b/src/components/TreeView/TreeViewComponent.tsx @@ -8,6 +8,7 @@ import { SemanticDomain, SemanticDomainTreeNode, WritingSystem } from "api"; import TreeDepiction from "components/TreeView/TreeDepiction"; import TreeSearch from "components/TreeView/TreeSearch"; import { + initTreeDomain, traverseTreeAction, updateTreeLanguage, } from "components/TreeView/TreeViewActions"; @@ -36,6 +37,7 @@ export function TreeView(props: TreeViewProps): ReactElement { ); const [visible, setVisible] = useState(true); const dispatch = useDispatch(); + const { i18n } = props; useEffect(() => { /* Select the language used for the semantic domains. @@ -43,18 +45,13 @@ export function TreeView(props: TreeViewProps): ReactElement { * Secondary: What is the current browser/ui language? */ const newLang = getSemDomWritingSystem(semDomWritingSystem)?.bcp47 ?? - props.i18n.resolvedLanguage; + i18n.resolvedLanguage; if (newLang && newLang !== semDomLanguage) { - const headString = props.t("addWords.domain") as string; - dispatch(updateTreeLanguage(newLang, headString)); + dispatch(updateTreeLanguage(newLang)); // Don't update when props updates, except props.i18n.resolvedLanguage } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ - semDomLanguage, - semDomWritingSystem, - dispatch, - props.i18n.resolvedLanguage, - ]); + dispatch(initTreeDomain(newLang)); + }, [semDomLanguage, semDomWritingSystem, dispatch, i18n.resolvedLanguage]); function animateHandler(domain: SemanticDomain): Promise { if (visible) { diff --git a/src/components/TreeView/TreeViewReducer.ts b/src/components/TreeView/TreeViewReducer.ts index 7552d00667..d384d01c65 100644 --- a/src/components/TreeView/TreeViewReducer.ts +++ b/src/components/TreeView/TreeViewReducer.ts @@ -2,7 +2,7 @@ import { SemanticDomainTreeNode } from "api/models"; import { TreeViewAction, TreeActionType, -} from "components/TreeView/TreeViewActions"; +} from "components/TreeView/TreeViewReduxTypes"; import i18n from "i18n"; import { StoreAction, StoreActionTypes } from "rootActions"; @@ -23,6 +23,7 @@ export const defaultState: TreeViewState = { previous: undefined, next: undefined, parent: undefined, + children: undefined, }, }; @@ -45,11 +46,6 @@ export const treeViewReducer = ( ...state, language: action.language, }; - case TreeActionType.TRAVERSE_TREE: - if (!action.domain) { - throw new Error("Cannot traverse tree without specifying domain."); - } - return { ...state }; case TreeActionType.SET_CURRENT_DOMAIN: if (!action.domain) { throw new Error("Cannot set the current domain to undefined."); diff --git a/src/components/TreeView/TreeViewReduxTypes.tsx b/src/components/TreeView/TreeViewReduxTypes.tsx new file mode 100644 index 0000000000..2d7d744b0b --- /dev/null +++ b/src/components/TreeView/TreeViewReduxTypes.tsx @@ -0,0 +1,14 @@ +import { SemanticDomain } from "api/models"; + +export enum TreeActionType { + CLOSE_TREE = "CLOSE_TREE", + OPEN_TREE = "OPEN_TREE", + SET_DOMAIN_LANGUAGE = "SET_DOMAIN_LANGUAGE", + SET_CURRENT_DOMAIN = "SET_CURRENT_DOMAIN", +} + +export interface TreeViewAction { + type: TreeActionType; + domain?: SemanticDomain; + language?: string; +} diff --git a/src/components/TreeView/tests/TreeSearch.test.tsx b/src/components/TreeView/tests/TreeSearch.test.tsx index 296b3d6525..38d463f78a 100644 --- a/src/components/TreeView/tests/TreeSearch.test.tsx +++ b/src/components/TreeView/tests/TreeSearch.test.tsx @@ -1,12 +1,12 @@ -import { render, RenderResult, screen } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import { act, renderHook } from "@testing-library/react-hooks"; import userEvent from "@testing-library/user-event"; import React from "react"; import { Key } from "ts-key-enum"; import "tests/mockReactI18next"; +import { SemanticDomainTreeNode } from "api"; import * as backend from "backend"; - import TreeSearch, { insertDecimalPoints, testId, @@ -14,7 +14,6 @@ import TreeSearch, { useTreeSearch, } from "components/TreeView/TreeSearch"; import domMap, { mapIds } from "components/TreeView/tests/MockSemanticDomain"; -import { SemanticDomainTreeNode } from "api"; import { newSemanticDomainTreeNode } from "types/semanticDomain"; // Handles diff --git a/src/components/TreeView/tests/TreeViewActions.test.tsx b/src/components/TreeView/tests/TreeViewActions.test.tsx index 7cd2fd2b33..2aead87c83 100644 --- a/src/components/TreeView/tests/TreeViewActions.test.tsx +++ b/src/components/TreeView/tests/TreeViewActions.test.tsx @@ -1,13 +1,14 @@ +import configureMockStore from "redux-mock-store"; +import thunk from "redux-thunk"; + +import * as backend from "backend"; import { setDomainLanguageAction, traverseTreeAction, - TreeActionType, } from "components/TreeView/TreeViewActions"; import { defaultState } from "components/TreeView/TreeViewReducer"; import { newSemanticDomainTreeNode } from "types/semanticDomain"; -import * as backend from "backend"; -import configureMockStore from "redux-mock-store"; -import thunk from "redux-thunk"; +import { TreeActionType } from "../TreeViewReduxTypes"; jest.mock("backend", () => ({ getSemanticDomainTreeNode: (id: string, lang: string) => diff --git a/src/components/TreeView/tests/TreeViewComponent.test.tsx b/src/components/TreeView/tests/TreeViewComponent.test.tsx index ec2c8b2eca..4ec3815fcd 100644 --- a/src/components/TreeView/tests/TreeViewComponent.test.tsx +++ b/src/components/TreeView/tests/TreeViewComponent.test.tsx @@ -6,6 +6,7 @@ import renderer, { import configureMockStore from "redux-mock-store"; import "tests/mockReactI18next"; +import thunk from "redux-thunk"; import TreeDepiction from "components/TreeView/TreeDepiction"; import TreeView from "components/TreeView/TreeViewComponent"; @@ -26,12 +27,10 @@ jest.mock("@material-ui/core", () => { Zoom: realMaterialUi.Container, }; }); - -const mockStore = configureMockStore()({ +const mockStore = configureMockStore([thunk])({ treeViewState: { ...treeViewState, currentDomain: mockMap[mockDomain.id], - domainMap: mockMap, }, currentProjectState: { project: { semDomWritingSystem: newWritingSystem() }, diff --git a/src/components/TreeView/tests/TreeViewReducer.test.tsx b/src/components/TreeView/tests/TreeViewReducer.test.tsx index 26052b523d..33e4e0cdb1 100644 --- a/src/components/TreeView/tests/TreeViewReducer.test.tsx +++ b/src/components/TreeView/tests/TreeViewReducer.test.tsx @@ -1,14 +1,14 @@ import { TreeViewAction, TreeActionType, -} from "components/TreeView/TreeViewActions"; +} from "components/TreeView/TreeViewReduxTypes"; import { treeViewReducer, defaultState, TreeViewState, } from "components/TreeView/TreeViewReducer"; import { StoreAction, StoreActionTypes } from "rootActions"; -import { TreeSemanticDomain } from "types/semanticDomain"; +import { newSemanticDomain } from "types/semanticDomain"; describe("Test the TreeViewReducer", () => { it("Returns defaultState when passed undefined", () => { @@ -28,13 +28,13 @@ describe("Test the TreeViewReducer", () => { treeViewReducer( { ...defaultState, - currentDomain: defaultState.currentDomain.subdomains[0], + currentDomain: defaultState.currentDomain, }, { type: "Nothing" } as any as TreeViewAction ) ).toEqual({ ...defaultState, - currentDomain: defaultState.currentDomain.subdomains[0], + currentDomain: defaultState.currentDomain, }); }); @@ -57,10 +57,10 @@ describe("Test the TreeViewReducer", () => { }); it("Returns state with a new SemanticDomain when requested to change this value", () => { - const payload = new TreeSemanticDomain("testId", "testName"); + const payload = newSemanticDomain("testId", "testName"); expect( treeViewReducer(defaultState, { - type: TreeActionType.TRAVERSE_TREE, + type: TreeActionType.SET_CURRENT_DOMAIN, domain: payload, }) ).toEqual({ ...defaultState, currentDomain: payload });