update required libraries

package.json

@@ -4,37 +4,36 @@
   "private": true,
   "dependencies": {
     "@types/async-lock": "^1.1.1",
-    "@types/jest": "26.0.20",
-    "@types/lokijs": "^1.5.3",
-    "@types/node": "14.14.21",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-helmet": "^6.1.0",
+    "@types/jest": "26.0.23",
+    "@types/lokijs": "^1.5.4",
+    "@types/node": "15.6.1",
+    "@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/xregexp": "^4.3.0",
-    "async-lock": "^1.2.8",
+    "@types/react-router-hash-link": "^2.4.0",
+    "async-lock": "^1.3.0",
     "axios": "^0.21.1",
-    "lokijs": "^1.5.11",
+    "lokijs": "^1.5.12",
     "moment": "^2.29.1",
-    "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.1.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.1.3",
-    "react-twitter-widgets": "^1.9.5",
-    "typescript": "4.1.3",
-    "xregexp": "^4.4.1"
+    "react-twitter-widgets": "^1.10.0",
+    "typescript": "4.3.2",
+    "xregexp": "^5.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -60,6 +59,6 @@
     ]
   },
   "devDependencies": {
-    "less": "^4.1.0"
+    "less": "^4.1.1"
   }
 }

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> {

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> {

src/pico/Pico.tsx

@@ -20,7 +20,7 @@ const Pico = (props: Props) => {
         <>
             <Switch>
                 <Route strict exact path={'/' + name} render={() => <Redirect to={'/' + name + '/'} />} />
-                <Route path={'/' + name + '/'} render={(props: RouteComponentProps<{ path: string }>) => {
+                <Route path={'/' + name + '/'} render={(props: RouteComponentProps) => {
                     const { location } = props;
                     const { pathname, search } = location;
                     const path = pathname.replace('/' + name + '/', '');

tsconfig.json

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