Update snapshots and update Root depiction

* Fix issue #1684
sillsdev · Sep 19, 2022 · a9e7dbd · a9e7dbd
1 parent 66ab169
commit a9e7dbd
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 61 deletions.
diff --git a/src/components/TreeView/DomainTile.tsx b/src/components/TreeView/DomainTile.tsx
@@ -5,7 +5,8 @@ import {
   KeyboardArrowDown,
   KeyboardArrowUp,
 } from "@material-ui/icons";
-import React, { ReactElement } from "react";
+import { t } from "i18next";
+import React, { CSSProperties, ReactElement } from "react";
 
 import { SemanticDomain } from "api/models";
 
@@ -22,17 +23,26 @@ interface DomainTileProps {
   direction?: Direction | undefined;
 }
 
+const RootId = "Sem";
+
+export function domainText(
+  domain: SemanticDomain,
+  extraProps: CSSProperties = {}
+): ReactElement {
+  return (
+    <div style={{ ...extraProps, textTransform: "capitalize" }}>
+      <Typography variant={"overline"}>
+        {domain.id !== RootId ? domain.id : ""}
+      </Typography>
+      <Typography variant={"body1"}>
+        {domain.id !== "Sem" ? domain.name : t("addWords.domain")}
+      </Typography>
+    </div>
+  );
+}
+
 // Creates a semantic domain tile, which can be clicked on to navigate to that semantic domain
 export default class DomainTile extends React.Component<DomainTileProps> {
-  domainText(domain: SemanticDomain): ReactElement {
-    return (
-      <div style={{ textTransform: "capitalize" }}>
-        <Typography variant={"overline"}>{domain.id}</Typography>
-        <Typography variant={"body1"}>{domain.name}</Typography>
-      </div>
-    );
-  }
-
   textWithArrow(
     domain: SemanticDomain,
     direction: Direction | undefined
@@ -41,7 +51,7 @@ export default class DomainTile extends React.Component<DomainTileProps> {
       case Direction.Down:
         return (
           <div>
-            {this.domainText(domain)}
+            {domainText(domain)}
             <KeyboardArrowDown />
           </div>
         );
@@ -56,7 +66,7 @@ export default class DomainTile extends React.Component<DomainTileProps> {
             <Grid item>
               <ChevronLeft />
             </Grid>
-            <Grid item>{this.domainText(domain)}</Grid>
+            <Grid item>{domainText(domain)}</Grid>
           </Grid>
         );
       case Direction.Right:
@@ -67,7 +77,7 @@ export default class DomainTile extends React.Component<DomainTileProps> {
             justifyContent="space-around"
             wrap="nowrap"
           >
-            <Grid item>{this.domainText(domain)}</Grid>
+            <Grid item>{domainText(domain)}</Grid>
             <Grid item>
               <ChevronRight />
             </Grid>
@@ -77,11 +87,11 @@ export default class DomainTile extends React.Component<DomainTileProps> {
         return (
           <div>
             <KeyboardArrowUp />
-            {this.domainText(domain)}
+            {domainText(domain)}
           </div>
         );
       default:
-        return <div>{this.domainText(domain)}</div>;
+        return <div>{domainText(domain)}</div>;
     }
   }
 

diff --git a/src/components/TreeView/TreeViewActions.ts b/src/components/TreeView/TreeViewActions.ts
@@ -1,9 +1,9 @@
 import { defaultState } from "./TreeViewReducer";
+import { TreeActionType, TreeViewAction } from "./TreeViewReduxTypes";
 import { SemanticDomain, SemanticDomainTreeNode } from "api/models";
 import { getSemanticDomainTreeNode } from "backend";
 import { StoreState } from "types";
 import { StoreStateDispatch } from "types/Redux/actions";
-import { TreeActionType, TreeViewAction } from "./TreeViewReduxTypes";
 
 export function closeTreeAction(): TreeViewAction {
   return { type: TreeActionType.CLOSE_TREE };

diff --git a/src/components/TreeView/TreeViewHeader.tsx b/src/components/TreeView/TreeViewHeader.tsx
@@ -1,14 +1,12 @@
-import {
-  Button,
-  ImageList,
-  ImageListItem,
-  Typography,
-} from "@material-ui/core";
+import { Button, ImageList, ImageListItem } from "@material-ui/core";
 import { useCallback, useEffect } from "react";
 import { Key } from "ts-key-enum";
 
 import { SemanticDomain, SemanticDomainTreeNode } from "api";
-import DomainTile, { Direction } from "components/TreeView/DomainTile";
+import DomainTile, {
+  domainText,
+  Direction,
+} from "components/TreeView/DomainTile";
 
 export interface TreeHeaderProps {
   currentDomain: SemanticDomainTreeNode;
@@ -40,10 +38,7 @@ export function TreeViewHeader(props: TreeHeaderProps) {
           id="current-domain"
           style={{ height: "95%" }}
         >
-          <div style={{ textTransform: "capitalize", minWidth: 200 }}>
-            <Typography variant="overline">{props.currentDomain.id}</Typography>
-            <Typography variant="h6">{props.currentDomain.name}</Typography>
-          </div>
+          {domainText(props.currentDomain, { minWidth: 200 })}
         </Button>
       </ImageListItem>
       <ImageListItem cols={2}>

diff --git a/src/components/TreeView/tests/TreeViewActions.test.tsx b/src/components/TreeView/tests/TreeViewActions.test.tsx
@@ -1,14 +1,14 @@
 import configureMockStore from "redux-mock-store";
 import thunk from "redux-thunk";
 
+import { TreeActionType } from "../TreeViewReduxTypes";
 import * as backend from "backend";
 import {
   setDomainLanguageAction,
   traverseTreeAction,
 } from "components/TreeView/TreeViewActions";
 import { defaultState } from "components/TreeView/TreeViewReducer";
 import { newSemanticDomainTreeNode } from "types/semanticDomain";
-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
@@ -4,7 +4,6 @@ import renderer, {
   ReactTestRenderer,
 } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
-
 import "tests/mockReactI18next";
 import thunk from "redux-thunk";
 

diff --git a/src/components/TreeView/tests/TreeViewReducer.test.tsx b/src/components/TreeView/tests/TreeViewReducer.test.tsx
@@ -1,12 +1,12 @@
-import {
-  TreeViewAction,
-  TreeActionType,
-} from "components/TreeView/TreeViewReduxTypes";
 import {
   treeViewReducer,
   defaultState,
   TreeViewState,
 } from "components/TreeView/TreeViewReducer";
+import {
+  TreeViewAction,
+  TreeActionType,
+} from "components/TreeView/TreeViewReduxTypes";
 import { StoreAction, StoreActionTypes } from "rootActions";
 import { newSemanticDomain } from "types/semanticDomain";
 

diff --git a/src/components/TreeView/tests/__snapshots__/TreeDepiction.test.tsx.snap b/src/components/TreeView/tests/__snapshots__/TreeDepiction.test.tsx.snap
@@ -84,7 +84,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    
+                    head
                   </p>
                 </div>
               </div>
@@ -197,11 +197,11 @@ Array [
                 >
                   1
                 </span>
-                <h6
-                  className="MuiTypography-root MuiTypography-h6"
+                <p
+                  className="MuiTypography-root MuiTypography-body1"
                 >
                   parent
-                </h6>
+                </p>
               </div>
             </span>
             <span
@@ -1014,11 +1014,11 @@ Array [
                 >
                   1.2
                 </span>
-                <h6
-                  className="MuiTypography-root MuiTypography-h6"
+                <p
+                  className="MuiTypography-root MuiTypography-body1"
                 >
                   kid2
-                </h6>
+                </p>
               </div>
             </span>
             <span
@@ -1165,7 +1165,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    depth=3
+                    
                   </p>
                 </div>
                 <svg
@@ -1388,11 +1388,11 @@ Array [
                 >
                   1.2.1
                 </span>
-                <h6
-                  className="MuiTypography-root MuiTypography-h6"
+                <p
+                  className="MuiTypography-root MuiTypography-body1"
                 >
                   depth=3
-                </h6>
+                </p>
               </div>
             </span>
             <span
@@ -1762,11 +1762,11 @@ Array [
                 >
                   1.0
                 </span>
-                <h6
-                  className="MuiTypography-root MuiTypography-h6"
+                <p
+                  className="MuiTypography-root MuiTypography-body1"
                 >
                   kid0
-                </h6>
+                </p>
               </div>
             </span>
             <span
@@ -2254,7 +2254,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    evenData0
+                    
                   </p>
                 </div>
                 <svg
@@ -2349,7 +2349,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    evenData1
+                    
                   </p>
                 </div>
                 <svg
@@ -2444,7 +2444,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    evenData2
+                    
                   </p>
                 </div>
                 <svg
@@ -2539,7 +2539,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    evenData3
+                    
                   </p>
                 </div>
                 <svg
@@ -2762,11 +2762,11 @@ Array [
                 >
                   1.2.1.1.1
                 </span>
-                <h6
-                  className="MuiTypography-root MuiTypography-h6"
+                <p
+                  className="MuiTypography-root MuiTypography-body1"
                 >
                   depth=5
-                </h6>
+                </p>
               </div>
             </span>
             <span
@@ -3071,11 +3071,11 @@ Array [
                 >
                   1.1
                 </span>
-                <h6
-                  className="MuiTypography-root MuiTypography-h6"
+                <p
+                  className="MuiTypography-root MuiTypography-body1"
                 >
                   kid1
-                </h6>
+                </p>
               </div>
             </span>
             <span
@@ -3475,7 +3475,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    oddData0
+                    
                   </p>
                 </div>
                 <svg
@@ -3570,7 +3570,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    oddData1
+                    
                   </p>
                 </div>
                 <svg
@@ -3665,7 +3665,7 @@ Array [
                   <p
                     className="MuiTypography-root MuiTypography-body1"
                   >
-                    oddData2
+                    
                   </p>
                 </div>
                 <svg

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -11,7 +11,10 @@ i18n
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    //debug: true, // Uncomment to troubleshoot
+    //debug: true, // Uncomment to troubleshoot// detection: options,
+    // ignoring localStorage and cookies for the detection order lets the user change languages
+    // more easily (just switch in the browser and reload, instead of clearing all site data)
+    detection: { order: ["queryString", "path", "navigator"] },
     supportedLngs: uiWritingSystems.map((ws) => ws.bcp47),
     // nonExplicitSupportedLngs will (e.g.) use 'es' if the browser is 'es-MX'
     nonExplicitSupportedLngs: true,