update required libraries

package.json

@@ -4,42 +4,41 @@
   "private": true,
   "dependencies": {
     "@types/async-lock": "^1.1.2",
-    "@types/jest": "26.0.20",
+    "@types/jest": "26.0.23",
     "@types/jsonp": "^0.2.0",
-    "@types/lokijs": "^1.5.3",
-    "@types/node": "14.14.21",
+    "@types/lokijs": "^1.5.4",
+    "@types/node": "15.6.1",
     "@types/pako": "^1.0.1",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-helmet": "^6.1.0",
+    "@types/react": "17.0.8",
+    "@types/react-dom": "17.0.5",
+    "@types/react-helmet": "^6.1.1",
     "@types/react-html-parser": "^2.0.1",
     "@types/react-router-dom": "^5.1.7",
-    "@types/react-router-hash-link": "^1.2.1",
-    "@types/react-transition-group": "^4.4.0",
-    "@types/xregexp": "^4.3.0",
-    "async-lock": "^1.2.8",
+    "@types/react-router-hash-link": "^2.4.0",
+    "@types/react-transition-group": "^4.4.1",
+    "async-lock": "^1.3.0",
     "axios": "^0.21.1",
     "jsonp": "^0.2.1",
-    "lokijs": "^1.5.11",
+    "lokijs": "^1.5.12",
     "moment": "^2.29.1",
     "pako": "^2.0.3",
-    "rc-tree": "^4.1.1",
-    "react": "^17.0.1",
+    "rc-tree": "^4.1.5",
+    "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
     "react-cookie": "^4.0.3",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
     "react-helmet": "^6.0.0",
     "react-html-parser": "^2.0.2",
     "react-image-lightbox": "^5.1.1",
-    "react-overlays": "^4.1.1",
+    "react-overlays": "^5.0.1",
     "react-router-dom": "^5.2.0",
-    "react-router-hash-link": "^2.3.1",
-    "react-scripts": "4.0.1",
+    "react-router-hash-link": "^2.4.3",
+    "react-scripts": "4.0.3",
     "react-spinner-material": "^1.3.1",
     "react-transition-group": "^4.4.1",
-    "typescript": "4.1.3",
-    "xregexp": "^4.4.1"
+    "typescript": "4.3.2",
+    "xregexp": "^5.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/database/Database.tsx

@@ -26,14 +26,14 @@ const Database = (props: Props) => {
             </Helmet>
             <Switch>
                 <Route exact path="/database" render={(props: RouteComponentProps) => <DatabaseTop lang={lang} {...props} />} />
-                <Route exact path="/database/item/:id" render={(props: RouteComponentProps<{ id: string; doi: string }>) => <DatabaseDetailItem lang={lang} {...props} />} />
-                <Route exact path="/database/item/id/:doi" render={(props: RouteComponentProps<{ id: string; doi: string }>) => <DatabaseDetailItem lang={lang} {...props} />} />
+                <Route exact path="/database/item/:id" render={(props: RouteComponentProps<{ id: string }>) => <DatabaseDetailItem lang={lang} {...props} />} />
+                <Route exact path="/database/item/id/:doi" render={(props: RouteComponentProps<{ doi: string }>) => <DatabaseDetailItem lang={lang} {...props} />} />
                 <Route exact path="/database/advanced" render={(props: RouteComponentProps) => <DatabaseAdvancedSearch lang={lang} {...props} />} />
-                <Route exact path="/database/list" render={(props: RouteComponentProps<{ id: string }>) => <DatabaseSearchByIndexId lang={lang} {...props} />} />
+                <Route exact path="/database/list" render={(props: RouteComponentProps) => <DatabaseSearchByIndexId lang={lang} {...props} />} />
                 <Route exact path="/database/list/:id" render={(props: RouteComponentProps<{ id: string }>) => <DatabaseSearchByIndexId lang={lang} {...props} />} />
                 <Route exact path="/database/search" render={(props: RouteComponentProps) => <DatabaseSearchByKeyword lang={lang} {...props} />} />
                 <Route exact path="/database/search/advanced" render={(props: RouteComponentProps) => <DatabaseSearchByAdvancedKeyword lang={lang} {...props} />} />
-                <Route exact path="/database/search/itemtype/:itemType" render={(props: RouteComponentProps<{ itemType: string; subItemType: string }>) => <DatabaseSearchByItemType lang={lang} {...props} />} />
+                <Route exact path="/database/search/itemtype/:itemType" render={(props: RouteComponentProps<{ itemType: string }>) => <DatabaseSearchByItemType lang={lang} {...props} />} />
                 <Route exact path="/database/search/itemtype/:itemType/:subItemType" render={(props: RouteComponentProps<{ itemType: string; subItemType: string }>) => <DatabaseSearchByItemType lang={lang} {...props} />} />
                 <Route component={PageNotFound} />
             </Switch>

src/database/DatabaseDetailItem.tsx

@@ -9,8 +9,8 @@ import ItemType from './item-type';
 import ItemUtil, { Item } from './lib/ItemUtil';
 
 interface Params {
-    id: string;
-    doi: string;
+    id?: string;
+    doi?: string;
 }
 
 interface Props extends RouteComponentProps<Params> {
@@ -78,7 +78,7 @@ class DatabaseDetailItem extends Component<Props, State> {
                 <Helmet>
                     <title>{Functions.mlang(this.state.item.title, lang)} - {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}</title>
                 </Helmet>
-                <h3>{Functions.mlang('[en]Detail[/en][ja]詳細[/ja]', lang)}</h3>
+                <h3>{Functions.mlang('[en]Item Detail[/en][ja]アイテム詳細[/ja]', lang)}</h3>
                 <br />
                 <ItemType.Detail lang={lang} item={this.state.item} />
             </>

src/database/DatabaseSearchByIndexId.tsx

@@ -11,7 +11,7 @@ import IndexUtil, { Index, INDEX_ID_PUBLIC } from './lib/IndexUtil';
 import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
 
 interface Params {
-    id: string;
+    id?: string;
 }
 
 export interface Props extends RouteComponentProps<Params> {
@@ -68,9 +68,10 @@ class DatabaseSearchByIndexId extends Component<Props, State> {
         const pIndexes = IndexUtil.getParents(this.state.indexId);
         const parents = pIndexes.map((value: Index) => {
             const url: string = IndexUtil.getUrl(value.id);
-            return <Fragment key={value.id}>/ <Link to={url}>{value.title}</Link> </Fragment>;
+            const title = Functions.mlang(value.title, lang);
+            return <Fragment key={value.id}>/ <Link to={url}>{title}</Link> </Fragment>;
         });
-        const title = pIndexes.map((value) => { return '/' + value.title; }).join('');
+        const title = pIndexes.map((value) => { return '/' + Functions.mlang(value.title, lang); }).join('');
         return (
             <div className="list">
                 <Helmet>

src/database/DatabaseSearchByItemType.tsx

@@ -7,7 +7,7 @@ import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
 
 interface Params {
     itemType: string;
-    subItemType: string;
+    subItemType?: string;
 }
 
 interface Props extends RouteComponentProps<Params> {

tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"