chore: correct the package name recorded in the lockfile

sanitize.css forms.css makes form controls inherit the text color, so
the rules that put them back on white left white text wherever the
surrounding panel sets it, as in the nimgsearch search panel and the
open.neuroinf.jp advanced search.

- set the text to black next to each white control background,
  matching how the browser drew the controls before sanitize.css

.gitignore

@@ -1,33 +1,25 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.eslintcache
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# database contents
-dl-limit-items.csv
-/etc/simpflink.csv
-/etc/data
-/public/database/items.json
-/public/database/file
-/src/database/assets/*.json
-/src/d3forum/assets/*.json
+node_modules
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.ncurc.js

@@ -0,0 +1,6 @@
+// Keep @types/node on the 24.x line to match the deployment target. Its
+// "latest" dist-tag points at the 22.x line, so the default target would
+// report no updates at all instead of offering 24.x patches.
+export default {
+    target: (name) => (name === '@types/node' ? 'minor' : 'latest'),
+};

README.md

@@ -1,44 +1,107 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# CBSN Platform
 
-## Available Scripts
+Static front-end for the archived [CBSN Platform](https://cbsn.neuroinf.jp/)
+(XooNIps for the Comprehensive Brain Science Network), built with
+[Vite](https://vite.dev/), React and TypeScript.
 
-In the project directory, you can run:
+## Requirements
 
-### `npm start`
+- Node.js 20.19+ / 22.12+ (Vite 8)
+- npm
 
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## Setup
 
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+```sh
+npm install
+```
 
-### `npm test`
+## Site data
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+The pages are rendered from JSON dumped out of the original XooNIps/XOOPS
+installation by [xoops-static-exporter](https://git.ni.riken.jp/niu/xoops-static-exporter)
+(`sites/cbsn.neuroinf.jp/`). All of it lives in `static-contents/`, which sits
+next to the repository rather than inside it:
 
-### `npm run build`
+```
+cbsn.neuroinf.jp/
+├── cbsn.neuroinf.jp/      this repository
+└── static-contents/
+    ├── modules/           one directory per source XOOPS module
+    │   ├── forum/         d3forum.json
+    │   └── xoonips/       tree.json, items.json, rankings, file/<id>/
+    └── rss.xml
+```
 
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
+The `RewriteBase` in every `modules/xoonips/file/<id>/.htaccess` carries the
+absolute path of that directory and has to move with the layout.
 
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+The dev and preview servers mount that directory at the site root. It is kept
+out of `dist/`, and it is not tracked in git.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+The XooNIps item types carry fields specific to this site (paper, book and
+presentation types, postscript, meeting name, ...); they are marked
+`CBSN extensions` in `src/database/`.
 
-### `npm run eject`
+## Scripts
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+| Command | Description |
+| --- | --- |
+| `npm run dev` | Start the dev server on http://localhost:5173 |
+| `npm run build` | Type-check and build into `dist/` |
+| `npm run preview` | Serve the production build on http://localhost:4173 |
+| `npm run lint` | Lint with [Biome](https://biomejs.dev/) |
+| `npm run format` | Format with Biome |
+| `npm run check` | Lint, format and organize imports, applying the safe fixes |
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+`@types/node` is pinned to the major that matches the Node runtime in use (24);
+`.ncurc.js` keeps `npm-check-updates` from bumping it past that.
 
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+There is currently no test suite.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+## Styles
 
-## Learn More
+The base stylesheet is `sanitize.css` with its `forms` and `typography` sheets,
+with its `box-sizing: border-box` kept. Where one of its defaults does not suit
+the theme, the theme rule for that place sets its own value rather than
+overriding the element everywhere.
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+## Deployment
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Build locally and copy the result up; the server does not need a toolchain.
+
+```sh
+npm ci
+npm run check
+npm run build
+../deploy.sh
+```
+
+`deploy.sh`, next to `static-contents/`, sends the data to
+`archive:/data/www/cbsn.neuroinf.jp/static-contents/`, then `dist/` to
+`.../html/`, and finally links every top-level entry of `static-contents/` into
+the document root over ssh (`ln -sfn ../static-contents/* .`). The data has to
+go first: the document root's `rsync --delete` removes those links, and they
+are only put back at the end.
+
+Apache needs `Options FollowSymLinks` and `AllowOverride All` on both
+directories. Use symlinks rather than `Alias`: an `Alias` maps the URL outside
+the document root, so `.htaccess` no longer applies and the SPA fallback and
+the redirects stop working.
+
+### Redirects
+
+`.htaccess` redirects these addresses with a 301:
+
+| From | To |
+| --- | --- |
+| `/modules/xoonips/download.php?file_id=N` | `/modules/xoonips/file/N` |
+| `/database/file/...` | `/modules/xoonips/file/...` |
+
+XOOPS-style addresses (`/modules/xoonips/detail.php?item_id=N`,
+`/modules/forum/...`, `/modules/contact`, `/index.php`) are redirected inside
+the app.
+
+## Google Analytics
+
+`GOOGLE_ANALYTICS_TRACKING_ID` in `src/config.ts` carries the GA4 measurement
+ID. Emptying it disables tracking. Only production builds send page views.

biome.json

@@ -0,0 +1,39 @@
+{
+    "$schema": "https://biomejs.dev/schemas/2.5.13/schema.json",
+    "vcs": {
+        "enabled": true,
+        "clientKind": "git",
+        "useIgnoreFile": true
+    },
+    "files": {
+        "includes": ["**", "!**/dist", "!src/common/assets", "!src/d3forum/assets"]
+    },
+    "formatter": {
+        "enabled": true,
+        "indentStyle": "space",
+        "indentWidth": 4,
+        "lineWidth": 120
+    },
+    "javascript": {
+        "formatter": {
+            "quoteStyle": "single",
+            "jsxQuoteStyle": "double",
+            "semicolons": "always",
+            "trailingCommas": "es5",
+            "arrowParentheses": "always"
+        }
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "preset": "recommended"
+        }
+    },
+    "assist": {
+        "actions": {
+            "source": {
+                "organizeImports": "on"
+            }
+        }
+    }
+}

etc/common.inc.php

@@ -1,197 +0,0 @@
-<?php
-
-require_once __DIR__.'/config.inc.php';
-
-define('PROTECTOR_SKIP_DOS_CHECK', 1);
-define('PROTECTOR_SKIP_FILESCHECKER', 1);
-
-// disable query logger
-define('XOOPS_LOGGER_ADDQUERY_DISABLED', true);
-
-// ----
-if (!file_exists($mainfile)) {
-    echo 'ERROR : mainfile.php not found'.PHP_EOL;
-    exit(1);
-}
-$xoops_path = '';
-$xoops_url = '';
-
-foreach (file($mainfile) as $line) {
-    if (preg_match('/^\s*define\s*\(\s*[\'"]XOOPS_ROOT_PATH[\'"]\s*,\s*[\'"](.+)[\'"]\)\s*;\s*$/', $line, $matches)) {
-        $xoops_path = $matches[1];
-    }
-    if (preg_match('/^\s*define\s*\(\s*[\'"]XOOPS_URL[\'"]\s*,\s*[\'"](.+)[\'"]\)\s*;\s*$/', $line, $matches)) {
-        $xoops_url = $matches[1];
-    }
-}
-
-if (isset($method) && 'POST' == strtoupper($method)) {
-    $method = 'POST';
-} else {
-    $method = 'GET';
-}
-$_SERVER['HTTP_USER_AGENT'] = 'php-cli';
-$_SERVER['REQUEST_METHOD'] = $method;
-$_ENV['HTTP_REFERER'] = $xoops_url.'/index.php';
-$_SERVER['QUERY_STRING'] = '/index.php';
-$_SERVER['REMOTE_ADDR'] = '192.168.0.1';
-
-if (file_exists($xoops_path.'/modules/xoonips/include/common.inc.php')) {
-    require_once $xoops_path.'/modules/xoonips/include/common.inc.php';
-} else {
-    require_once $xoops_path.'/mainfile.php';
-    require_once $xoops_path.'/modules/xoonips/condefs.php';
-    require_once $xoops_path.'/modules/xoonips/include/functions.php';
-}
-
-if (defined('XOOPS_DB_PROXY') && XOOPS_DB_PROXY == 1 && 'POST' == $method) {
-    die('Error: not accept POST request'."\n");
-}
-
-error_reporting(E_ALL);
-
-// remove ob fileters
-while (ob_get_level()) {
-    ob_end_clean();
-}
-
-define('MYDUMPTOOL_OUTPUTDIR', __DIR__.'/data');
-MyDumpTool::makeDirectory('');
-MyDumpTool::makeDirectory('src');
-MyDumpTool::makeDirectory('public');
-
-class MyDumpTool
-{
-    public static function decode(&$data)
-    {
-        $textutil = xoonips_getutility('text');
-        foreach ($data as $k => $v) {
-            if (is_string($v)) {
-                $v = $textutil->html_numeric_entities($v);
-                $v = mb_decode_numericentity($v, array(0x0, 0x10000, 0, 0xfffff), 'UTF-8');
-                $data[$k] = \Normalizer::normalize(trim($v), \Normalizer::FORM_C);
-            } elseif (null === $v) {
-                $data[$k] = '';
-            }
-        }
-    }
-
-    public static function convertToInt(&$data, $keys, $zerofill = false)
-    {
-        foreach ($keys as $key) {
-            if (isset($data[$key])) {
-                $data[$key] = '' === $data[$key] ? ($zerofill ? 0 : null) : (int) $data[$key];
-            }
-        }
-    }
-
-    public static function dropColumn(&$data, $keys)
-    {
-        foreach ($keys as $key) {
-            if (isset($data[$key])) {
-                unset($data[$key]);
-            }
-        }
-    }
-
-    public static function fileCopy($from, $to)
-    {
-        system('rsync -aq '.escapeshellarg($from).' '.escapeshellarg($to), $ret);
-
-        return 0 === $ret;
-    }
-
-    public static function fixHtml($text)
-    {
-        static $config = [
-        //'clean' => true,
-        'hide-comments' => true,
-        'indent' => true,
-        'output-xhtml' => true,
-        'preserve-entities' => true,
-        'show-body-only' => true,
-        'wrap' => 0,
-        'input-encoding' => 'utf8',
-        'output-encoding' => 'utf8',
-        'output-bom' => false,
-    ];
-        $text = tidy_repair_string($text, $config);
-        $text = preg_replace('/<table([^>]*)>((?:\s*<caption[^>]*>.*<\/caption>)?\s*)<tr([^>]*)>/Us', '<table\1>\2<tbody><tr\3>', $text);
-        $text = preg_replace('/<\/tr>(\s*)<\/table>/s', '</tr></tbody>\1</table>', $text);
-
-        return $text;
-    }
-
-    public static function tableExists($name)
-    {
-        global $xoopsDB;
-        $prefix = $xoopsDB->prefix();
-        $sql = <<< SQL
-SELECT 1
-  FROM `${prefix}_${name}`
-  LIMIT 1
-SQL;
-        if (!($res = $xoopsDB->query($sql))) {
-            return false;
-        }
-        $xoopsDB->freeRecordSet($res);
-
-        return true;
-    }
-
-    public static function makeDirectory(string $dirname)
-    {
-        $path = MYDUMPTOOL_OUTPUTDIR.('' !== $dirname ? '/'.$dirname : '');
-        if (!is_dir($path)) {
-            if (!@mkdir($path)) {
-                exit('Failed to create directory: '.$path.PHP_EOL);
-            }
-        }
-    }
-
-    public static function saveJson(string $fname, $data)
-    {
-        $path = MYDUMPTOOL_OUTPUTDIR.'/'.$fname;
-        if (false === file_put_contents($path, json_encode($data, JSON_UNESCAPED_UNICODE))) {
-            exit('Failed to save json file: '.$path.PHP_EOL);
-        }
-    }
-
-    public static function fileDownload($url, $fpath)
-    {
-        $fp = fopen($fpath, 'w');
-        if (false === $fp) {
-            exit('Failed to open file: '.$fpath.PHP_EOL);
-        }
-        $curl = curl_init();
-        curl_setopt($curl, CURLOPT_URL, $url);
-        curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
-        curl_setopt($curl, CURLOPT_AUTOREFERER, true);
-        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
-        curl_setopt($curl, CURLOPT_FAILONERROR, true);
-        curl_setopt($curl, CURLOPT_FILE, $fp);
-        curl_setopt($curl, CURLOPT_TIMEOUT, 5);
-        $ret = curl_exec($curl);
-        fclose($fp);
-        if (false === $ret) {
-            exit('Failed to download file, unexpected error: '.$url.PHP_EOL);
-        }
-        $code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
-        if (200 !== $code) {
-            exit('Failed to download file, invalid status code('.$code.'): '.$url.PHP_EOL);
-        }
-        curl_close($curl);
-
-        return true;
-    }
-
-    public static function getMimeType($fpath)
-    {
-        $finfo = finfo_open(FILEINFO_MIME);
-        $mime = finfo_file($finfo, $fpath);
-        finfo_close($finfo);
-        $mime = preg_replace('/(;.*)$/', '', $mime);
-
-        return $mime;
-    }
-}

etc/config.inc.php

@@ -1,6 +0,0 @@
-<?php
-
-$mainfile = '/data/www/html/mainfile.php';
-
-$XOONIPS_SIMPF_LINKFILE = __DIR__.'/simpflink.csv';
-$XOOPS_MODULE_D3FORUM = ['forum'];

etc/dumpD3Forum.php

@@ -1,162 +0,0 @@
-<?php
-
-require_once __DIR__.'/common.inc.php';
-
-if (!isset($XOOPS_MODULE_D3FORUM) || empty($XOOPS_MODULE_D3FORUM)) {
-    exit('Not configured for d3forum module'.PHP_EOL);
-}
-
-$contents = [];
-foreach ($XOOPS_MODULE_D3FORUM as $d3forum) {
-    dumpD3Forum($d3forum, $contents);
-}
-MyDumpTool::makeDirectory('src/d3forum');
-MyDumpTool::makeDirectory('src/d3forum/assets');
-MyDumpTool::saveJson('src/d3forum/assets/d3forum.json', $contents);
-
-function dumpD3Forum($d3forum, &$contents)
-{
-    global $xoopsDB;
-    $prefix = $xoopsDB->prefix();
-
-    $moduleHandler = xoops_gethandler('module');
-    $module = $moduleHandler->getByDirname($d3forum);
-    $moduleConfigHandler = xoops_gethandler('config');
-    $moduleConfig = $moduleConfigHandler->getConfigsByDirname($d3forum);
-
-    $table = $d3forum.'_categories';
-    if (!MyDumpTool::tableExists($table)) {
-        exit('d3forum('.$d3forum.') module not found'.PHP_EOL);
-    }
-
-    $gidGuest = XOOPS_GROUP_ANONYMOUS;
-
-    // get anonymous readable categories
-    $categories = [];
-    $sql = <<< SQL
-SELECT
-    `c`.*
-  FROM `${prefix}_${d3forum}_categories` AS `c`
-  INNER JOIN `${prefix}_${d3forum}_category_access` AS `ca` ON `c`.`cat_id`=`ca`.`cat_id`
-  WHERE `ca`.`groupid`=${gidGuest}
-  GROUP BY `c`.`cat_id`
-  ORDER BY `c`.`cat_order_in_tree` ASC, `c`.`cat_weight` ASC
-SQL;
-    if (!($res = $xoopsDB->query($sql))) {
-        var_dump($xoopsDB);
-        exit();
-    }
-    while ($row = $xoopsDB->fetchArray($res)) {
-        MyDumpTool::decode($row);
-        MyDumpTool::convertToInt($row, ['cat_id', 'pid', 'cat_topics_count', 'cat_posts_count', 'cat_last_post_id', 'cat_last_post_time', 'cat_topics_count_in_tree', 'cat_posts_count_in_tree', 'cat_last_post_id_in_tree', 'cat_last_post_time_in_tree', 'cat_depth_in_tree', 'cat_order_in_tree', 'cat_weight']);
-        $row['cat_path_in_tree'] = unserialize($row['cat_path_in_tree']);
-        $row['cat_options'] = unserialize($row['cat_options']);
-        $categories[] = $row;
-    }
-    $xoopsDB->freeRecordSet($res);
-    //var_dump($categories);
-
-    // get anonymous readable forums
-    $forums = [];
-    $sql = <<< SQL
-SELECT
-    `f`.*
-  FROM `${prefix}_${d3forum}_forums` AS `f`
-  INNER JOIN `${prefix}_${d3forum}_forum_access` AS `fa` ON `f`.`forum_id`=`fa`.`forum_id`
-  INNER JOIN `${prefix}_${d3forum}_category_access` AS `ca` ON `f`.`cat_id`=`ca`.`cat_id`
-  WHERE `fa`.`groupid`=${gidGuest}
-    AND `ca`.`groupid`=${gidGuest}
-  GROUP BY `f`.`forum_id`
-  ORDER BY `f`.`cat_id` ASC, `f`.`forum_weight` ASC
-SQL;
-    if (!($res = $xoopsDB->query($sql))) {
-        var_dump($xoopsDB);
-        exit();
-    }
-    while ($row = $xoopsDB->fetchArray($res)) {
-        MyDumpTool::decode($row);
-        MyDumpTool::convertToInt($row, ['forum_id', 'cat_id', 'forum_topics_count', 'forum_posts_count', 'forum_last_post_id', 'forum_last_post_time', 'forum_weight'], true);
-        $row['forum_options'] = unserialize($row['forum_options']);
-        $forums[] = $row;
-    }
-    $xoopsDB->freeRecordSet($res);
-    //var_dump($forums);
-
-    // get anonymous readable topics
-    $topics = [];
-    $sql = <<< SQL
-SELECT
-    `t`.*, 
-    `uf`.`name` AS `topic_first_uid_name`, `uf`.`uname` AS `topic_first_uid_uname`,
-    `ul`.`name` AS `topic_last_uid_name`, `ul`.`uname` AS `topic_last_uid_uname`
-  FROM `${prefix}_${d3forum}_topics` AS `t`
-  INNER JOIN `${prefix}_${d3forum}_forums` AS `f` ON `t`.`forum_id`=`f`.`forum_id`
-  INNER JOIN `${prefix}_${d3forum}_forum_access` AS `fa` ON `f`.`forum_id`=`fa`.`forum_id`
-  INNER JOIN `${prefix}_${d3forum}_category_access` AS `ca` ON `f`.`cat_id`=`ca`.`cat_id`
-  LEFT JOIN `${prefix}_users` AS `uf` ON `t`.`topic_first_uid`=`uf`.`uid`
-  LEFT JOIN `${prefix}_users` AS `ul` ON `t`.`topic_last_uid`=`ul`.`uid`
-  WHERE `fa`.`groupid`=${gidGuest}
-    AND `ca`.`groupid`=${gidGuest}
-  GROUP BY `t`.`topic_id`
-  ORDER BY `t`.`forum_id` ASC, `t`.`topic_id` ASC
-SQL;
-    if (!($res = $xoopsDB->query($sql))) {
-        var_dump($xoopsDB);
-        exit();
-    }
-    while ($row = $xoopsDB->fetchArray($res)) {
-        MyDumpTool::decode($row);
-        MyDumpTool::convertToInt($row, ['topic_id', 'forum_id', 'topic_first_uid', 'topic_first_post_id', 'topic_first_post_time', 'topic_last_uid', 'topic_last_post_id', 'topic_last_post_time', 'topic_views', 'topic_posts_count', 'topic_locked', 'topic_sticky', 'topic_solved', 'topic_invisible', 'topic_votes_sum', 'topic_votes_count'], true);
-        $topics[] = $row;
-    }
-    $xoopsDB->freeRecordSet($res);
-    //var_dump($topics);
-
-    // get anonymous readable posts
-    $posts = [];
-    $sql = <<< SQL
-SELECT
-    `p`.*, 
-    `u`.`name` AS `uid_name`, `u`.`uname` AS `uid_uname`, `u`.`rank` AS `uid_rank`, `u`.`posts` AS `uid_posts`
-  FROM `${prefix}_${d3forum}_posts` AS `p`
-  INNER JOIN `${prefix}_${d3forum}_topics` AS `t` ON `p`.`topic_id`=`t`.`topic_id`
-  INNER JOIN `${prefix}_${d3forum}_forums` AS `f` ON `t`.`forum_id`=`f`.`forum_id`
-  INNER JOIN `${prefix}_${d3forum}_forum_access` AS `fa` ON `f`.`forum_id`=`fa`.`forum_id`
-  INNER JOIN `${prefix}_${d3forum}_category_access` AS `ca` ON `f`.`cat_id`=`ca`.`cat_id`
-  LEFT JOIN `${prefix}_users` AS `u` ON `p`.`uid`=`u`.`uid`
-  WHERE `fa`.`groupid`=${gidGuest}
-    AND `ca`.`groupid`=${gidGuest}
-  GROUP BY `p`.`post_id`
-  ORDER BY `t`.`topic_id` ASC, `p`.`post_id` ASC
-SQL;
-    if (!($res = $xoopsDB->query($sql))) {
-        var_dump($xoopsDB);
-        exit();
-    }
-    while ($row = $xoopsDB->fetchArray($res)) {
-        MyDumpTool::decode($row);
-        MyDumpTool::convertToInt($row, ['post_id', 'pid', 'topic_id', 'post_time', 'modified_time', 'uid', 'uid_hidden', 'html', 'smiley', 'xcode', 'br', 'number_entity', 'special_entity', 'icon', 'attachsig', 'invisible', 'approval', 'votes_sum', 'votes_count', 'depth_in_tree', 'order_in_tree', 'uid_rank', 'uid_posts'], true);
-        MyDumpTool::dropColumn($row, ['guest_email', 'guest_url', 'guest_pass_md5', 'guest_trip']);
-        $posts[] = $row;
-    }
-    $xoopsDB->freeRecordSet($res);
-    //var_dump($posts);
-    var_dump(count($posts));
-
-    $moduleinfo = [
-        'name' => $module->get('name'),
-        'dirname' => $d3forum,
-        'message' => $moduleConfig['top_message'],
-    ];
-    MyDumpTool::decode($moduleinfo);
-
-    $data = [
-        'module' => $moduleinfo,
-        'categories' => $categories,
-        'forums' => $forums,
-        'topics' => $topics,
-        'posts' => $posts,
-    ];
-
-    $contents[] = $data;
-}

index.html

@@ -1,19 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-     <meta name="robots" content="index,follow" />
+    <meta name="robots" content="index,follow" />
     <meta name="keywords" content="neuroinformatics, xoonips, database, cbsn platform, Comprehensive Brain Science Network" />
     <meta name="author" content="Neuroinformatics Unit, RIKEN Center for Brain Science" />
     <meta name="copyright" content="Copyright &copy; 2019" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <title>CBSN platform - XooNIps for CBSN</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package.json

@@ -1,60 +1,43 @@
 {
-  "name": "cbsn",
-  "version": "1.0.0",
-  "private": true,
-  "dependencies": {
-    "@types/async-lock": "^1.1.1",
-    "@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": "^2.4.0",
-    "async-lock": "^1.3.0",
-    "axios": "^0.21.1",
-    "lokijs": "^1.5.12",
-    "moment": "^2.29.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.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": "^5.0.1",
-    "react-router-dom": "^5.2.0",
-    "react-router-hash-link": "^2.4.3",
-    "react-scripts": "4.0.3",
-    "react-spinner-material": "^1.1.3",
-    "typescript": "4.3.2",
-    "xregexp": "^5.0.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all",
-      "ie 11"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version",
-      "ie 11"
-    ]
-  }
+    "name": "cbsn",
+    "version": "2.0.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "preview": "vite preview",
+        "lint": "biome lint",
+        "format": "biome format --write",
+        "check": "biome check --write"
+    },
+    "dependencies": {
+        "@dr.pogodin/react-helmet": "^3.2.3",
+        "@orrisroot/react-html-parser": "^3.0.1",
+        "async-lock": "^1.4.1",
+        "date-fns": "^4.4.0",
+        "ky": "^2.1.0",
+        "lokijs": "^1.5.12",
+        "rc-tree": "^5.13.1",
+        "react": "^19.3.0",
+        "react-cookie": "^8.1.2",
+        "react-dom": "^19.3.0",
+        "react-ga4": "^3.0.1",
+        "react-overlays": "^5.2.1",
+        "react-router": "^8.3.1",
+        "sanitize.css": "^13.0.0",
+        "yet-another-react-lightbox": "^3.32.2"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.5.13",
+        "@types/async-lock": "^1.4.2",
+        "@types/lokijs": "^1.5.14",
+        "@types/node": "^24.13.4",
+        "@types/react": "^19.3.0",
+        "@types/react-dom": "^19.3.0",
+        "@vitejs/plugin-react": "^6.1.1",
+        "sirv": "^3.0.2",
+        "typescript": "~7.0.2",
+        "vite": "^8.3.0"
+    }
 }

public/.htaccess

@@ -2,7 +2,10 @@ RewriteEngine on
 RewriteBase /
 
 RewriteCond %{QUERY_STRING} (^|&)file_id=([0-9]+)($|&)
-RewriteRule ^modules/xoonips/download.php /database/file/%2? [R=301,L]
+RewriteRule ^modules/xoonips/download.php /modules/xoonips/file/%2? [R=301,L]
+
+# File downloads moved under /modules/xoonips/ ; keep the v1.0.0 links alive.
+RewriteRule ^database/file/(.*)$ /modules/xoonips/file/$1 [R=301,L]
 
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d [OR]

public/manifest.json

@@ -1,15 +1,15 @@
 {
-  "short_name": "CBSN Platform",
-  "name": "Comprehensive Brain Science Network Platform",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+    "short_name": "CBSN Platform",
+    "name": "Comprehensive Brain Science Network Platform",
+    "icons": [
+        {
+            "src": "favicon.ico",
+            "sizes": "16x16",
+            "type": "image/x-icon"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
 }

src/App.css

@@ -1 +1 @@
-@import url('./common/assets/theme/style.css');
+@import url("./common/assets/theme/style.css");

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});

src/App.tsx

@@ -1,20 +1,17 @@
-import React, { Component } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { HelmetProvider } from '@dr.pogodin/react-helmet';
 import { CookiesProvider } from 'react-cookie';
+import { BrowserRouter } from 'react-router';
 import AppRoot from './common/AppRoot';
 import './App.css';
 
-class App extends Component {
-
-    render() {
-        return (
-            <CookiesProvider>
-                <BrowserRouter>
-                    <AppRoot />
-                </BrowserRouter >
-            </CookiesProvider>
-        );
-    }
-}
+const App = () => (
+    <HelmetProvider>
+        <CookiesProvider>
+            <BrowserRouter>
+                <AppRoot />
+            </BrowserRouter>
+        </CookiesProvider>
+    </HelmetProvider>
+);
 
 export default App;

src/common/AppRoot.tsx

@@ -1,84 +1,66 @@
-import React, { Component } from 'react';
-import { ReactCookieProps, withCookies } from 'react-cookie';
-import ReactGA from 'react-ga';
-import { Helmet } from 'react-helmet';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-import Config, { MultiLang } from '../config';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { useEffect, useRef } from 'react';
+import { useCookies } from 'react-cookie';
+import ReactGA from 'react-ga4';
+import { useLocation } from 'react-router';
+import Config, { type MultiLang } from '../config';
 import Functions from '../functions';
 import CenterColumn from './CenterColumn';
 import Footer from './Footer';
 import Header from './Header';
 import LeftColumn from './LeftColumn';
 
-interface Props extends RouteComponentProps, ReactCookieProps { }
-interface State {
-    lang: MultiLang;
+const isAnalyticsEnabled = import.meta.env.PROD && Config.GOOGLE_ANALYTICS_TRACKING_ID !== '';
+
+if (isAnalyticsEnabled) {
+    // Page views are sent from the location effect below, the first one included;
+    // gtag's own page_view on config would count the landing page twice.
+    ReactGA.initialize(Config.GOOGLE_ANALYTICS_TRACKING_ID, { gtagOptions: { send_page_view: false } });
 }
 
-class AppRoot extends Component<Props, State> {
+const toMultiLang = (value: unknown): MultiLang | null => (value === 'en' || value === 'ja' ? value : null);
 
-    constructor(props: Props) {
-        super(props);
-        this.state = { lang: 'en' };
-        if (Config.GOOGLE_ANALYTICS_TRACKING_ID !== '') {
-            ReactGA.initialize(Config.GOOGLE_ANALYTICS_TRACKING_ID);
-        }
-    }
+const AppRoot = () => {
+    const location = useLocation();
+    const [cookies, setCookie] = useCookies(['ml_lang']);
+    const previousLocation = useRef<string | null>(null);
 
-    static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-        const params = new URLSearchParams(nextProps.location.search);
-        const param_lang = params.get('ml_lang');
-        const cookie_lang = typeof nextProps.cookies !== 'undefined' ? nextProps.cookies.get('ml_lang') : null;
-        let lang = param_lang || (typeof cookie_lang === 'string' ? cookie_lang : null) || prevState.lang;
-        if (lang !== 'en' && lang !== 'ja') {
-            lang = 'en';
-        }
-        if (cookie_lang !== lang) {
-            if (typeof nextProps.cookies !== 'undefined') {
-                nextProps.cookies.set('ml_lang', lang, { path: '/' });
-            }
-        }
-        if (prevState.lang !== lang) {
-            return { lang };
-        }
-        return null;
-    }
+    const paramLang = toMultiLang(new URLSearchParams(location.search).get('ml_lang'));
+    const cookieLang = toMultiLang(cookies.ml_lang);
+    const lang: MultiLang = paramLang ?? cookieLang ?? 'en';
 
-    componentDidMount() {
-        const { pathname } = this.props.location;
-        if (Config.GOOGLE_ANALYTICS_TRACKING_ID !== '') {
-            ReactGA.set({ page: pathname });
-            ReactGA.pageview(pathname);
+    useEffect(() => {
+        if (cookies.ml_lang !== lang) {
+            setCookie('ml_lang', lang, { path: '/' });
         }
-    }
+    }, [cookies.ml_lang, lang, setCookie]);
 
-    componentDidUpdate(prevProps: Props) {
-        const { pathname, search } = this.props.location;
-        if (Config.GOOGLE_ANALYTICS_TRACKING_ID !== '') {
-            ReactGA.set({ page: pathname });
-            ReactGA.pageview(pathname);
+    useEffect(() => {
+        if (isAnalyticsEnabled) {
+            ReactGA.send({ hitType: 'pageview', page: location.pathname + location.search });
         }
-        if (pathname !== prevProps.location.pathname || search !== prevProps.location.search) {
+        const current = location.pathname + location.search;
+        if (previousLocation.current !== null && previousLocation.current !== current) {
             window.scrollTo(0, 0);
         }
-    }
+        previousLocation.current = current;
+    }, [location.pathname, location.search]);
 
-    render() {
-        const { lang } = this.state;
-        return (
-            <>
-                <Helmet>
-                    <title>{Functions.mlang(Config.SITE_TITLE, lang)} - {Functions.mlang(Config.SITE_SLOGAN, lang)}</title>
-                </Helmet>
-                <Header lang={lang} />
-                <div className="main clearfix">
-                    <LeftColumn lang={lang} />
-                    <CenterColumn lang={lang} />
-                </div>
-                <Footer lang={lang} />
-            </>
-        );
-    }
-}
+    return (
+        <>
+            <Helmet>
+                <title>
+                    {Functions.siteTitle(lang)} - {Functions.siteSlogan(lang)}
+                </title>
+            </Helmet>
+            <Header lang={lang} />
+            <div className="main clearfix">
+                <LeftColumn lang={lang} />
+                <CenterColumn lang={lang} />
+            </div>
+            <Footer lang={lang} />
+        </>
+    );
+};
 
-export default withCookies(withRouter(AppRoot));
+export default AppRoot;

src/common/CenterColumn.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import { MultiLang } from '../config';
+import { Route, Routes } from 'react-router';
+import type { MultiLang } from '../config';
+import Announce from '../custom/blocks/Announce';
 import Rankings from '../database/blocks/Rankings';
 import RecentContents from '../database/blocks/RecentContents';
 import DatabaseTop from '../database/DatabaseTop';
 import Functions from '../functions';
-import Announce from '../custom/blocks/Announce';
 import MainContent from './MainContent';
 
 interface Props {
@@ -14,23 +13,19 @@ interface Props {
 
 const CenterBlocks = (props: Props) => {
     const { lang } = props;
-    const titles = {
-        announce: '[en]Announce[/en][ja]ご案内[/ja]',
-        databaseTop: '[en]Item Types[/en][ja]アイテムタイプ一覧[/ja]',
-        ranking: '[en]Ranking[/en][ja]ランキング[/ja]',
-        recentContents: '[en]Recent Contents[/en][ja]新着コンテンツ[/ja]',
-    };
     return (
         <div className="block">
             <div className="centerCcolumn">
                 <div className="block">
-                    <h2 className="blockTitle">{Functions.mlang(titles.announce, lang)}</h2>
+                    <h2 className="blockTitle">{Functions.mlang('[en]Announce[/en][ja]ご案内[/ja]', lang)}</h2>
                     <div className="blockContent">
                         <Announce lang={lang} />
                     </div>
                 </div>
                 <div className="block">
-                    <h2 className="blockTitle">{Functions.mlang(titles.databaseTop, lang)}</h2>
+                    <h2 className="blockTitle">
+                        {Functions.mlang('[en]Item Types[/en][ja]アイテムタイプ一覧[/ja]', lang)}
+                    </h2>
                     <div className="blockContent">
                         <DatabaseTop lang={lang} />
                     </div>
@@ -39,7 +34,7 @@ const CenterBlocks = (props: Props) => {
             <div className="clearfix">
                 <div className="centerLcolumn">
                     <div className="block">
-                        <h2 className="blockTitle">{Functions.mlang(titles.ranking, lang)}</h2>
+                        <h2 className="blockTitle">{Functions.mlang('[en]Ranking[/en][ja]ランキング[/ja]', lang)}</h2>
                         <div className="blockContent">
                             <Rankings lang={lang} />
                         </div>
@@ -47,7 +42,9 @@ const CenterBlocks = (props: Props) => {
                 </div>
                 <div className="centerRcolumn">
                     <div className="block">
-                        <h2 className="blockTitle">{Functions.mlang(titles.recentContents, lang)}</h2>
+                        <h2 className="blockTitle">
+                            {Functions.mlang('[en]Recent Contents[/en][ja]新着コンテンツ[/ja]', lang)}
+                        </h2>
                         <div className="blockContent">
                             <RecentContents lang={lang} />
                         </div>
@@ -56,20 +53,21 @@ const CenterBlocks = (props: Props) => {
             </div>
         </div>
     );
-}
+};
 
 const CenterColumn = (props: Props) => {
     const { lang } = props;
     return (
         <div className="centercolumn">
-            <Switch>
-                <Route exact path="/" render={() => <CenterBlocks lang={lang} />} />
-            </Switch>
+            <Routes>
+                <Route path="/" element={<CenterBlocks lang={lang} />} />
+                <Route path="*" element={null} />
+            </Routes>
             <div className="block">
                 <MainContent lang={lang} />
             </div>
         </div>
     );
-}
+};
 
-export default CenterColumn;
+export default CenterColumn;

src/common/Footer.tsx

@@ -1,58 +1,63 @@
-import React from 'react';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import bannerCBSN from './assets/theme/images/banner_cbsn.gif';
 import bannerIBR from './assets/theme/images/banner_ibr.gif';
 import bannerJapanNode from './assets/theme/images/banner_incf-japan-node.gif';
-import bannerCBS from './assets/theme/images/banner_riken-cbs.gif';
 import bannerRIKEN from './assets/theme/images/banner_riken.gif';
+import bannerCBS from './assets/theme/images/banner_riken-cbs.gif';
 import bannerXooNIps from './assets/theme/images/banner_xoonips.gif';
 
 interface Props {
     lang: MultiLang;
 }
 
+const links = [
+    {
+        title: '[en]INCF Japan Node[/en][ja]INCF 日本ノード[/ja]',
+        image: bannerJapanNode,
+        url: 'https://www.neuroinf.jp/',
+    },
+    {
+        title: '[en]RIKEN[/en][ja]理化学研究所[/ja]',
+        image: bannerRIKEN,
+        url: 'http://www.riken.jp/',
+    },
+    {
+        title: '[en]RIKEN Center for Brain Science[/en][ja]理化学研究所 脳神経科学研究センター[/ja]',
+        image: bannerCBS,
+        url: 'https://cbs.riken.jp/',
+    },
+    {
+        title: '[en]The XooNIps Project[/en][ja]XooNIps 公式サイト[/ja]',
+        image: bannerXooNIps,
+        url: 'https://xoonips.osdn.jp/',
+    },
+    {
+        title: '[en]Integrative Brain Research[/en][ja]統合脳プロジェクト[/ja]',
+        image: bannerIBR,
+        url: 'http://www.togo-nou.nips.ac.jp/',
+    },
+    {
+        title: '[en]Comprehensive Brain Science Network[/en][ja]包括脳プロジェクト[/ja]',
+        image: bannerCBSN,
+        url: 'https://www.hokatsu-nou.neuroinf.jp/',
+    },
+];
+
 const Footer = (props: Props) => {
-    const links = [
-        {
-            title: '[en]INCF Japan Node[/en][ja]INCF 日本ノード[/ja]',
-            image: bannerJapanNode,
-            url: 'https://www.neuroinf.jp/',
-        },
-        {
-            title: '[en]RIKEN[/en][ja]理化学研究所[/ja]',
-            image: bannerRIKEN,
-            url: 'http://www.riken.jp/',
-        },
-        {
-            title: '[en]RIKEN Center for Brain Science[/en][ja]理化学研究所 脳神経科学研究センター[/ja]',
-            image: bannerCBS,
-            url: 'https://cbs.riken.jp/',
-        },
-        {
-            title: '[en]The XooNIps Project[/en][ja]XooNIps 公式サイト[/ja]',
-            image: bannerXooNIps,
-            url: 'https://xoonips.osdn.jp/',
-        },
-        {
-            title: '[en]Integrative Brain Research[/en][ja]統合脳プロジェクト[/ja]',
-            image: bannerIBR,
-            url: 'http://www.togo-nou.nips.ac.jp/',
-        },
-        {
-            title: '[en]Comprehensive Brain Science Network[/en][ja]包括脳プロジェクト[/ja]',
-            image: bannerCBSN,
-            url: 'https://www.hokatsu-nou.neuroinf.jp/',
-        },
-    ];
+    const { lang } = props;
     return (
         <footer className="footer">
-            {links.map((link, idx) => {
-                const title = Functions.mlang(link.title, props.lang);
-                return <a key={idx} href={link.url} target="_blank" rel="noopener noreferrer"><img src={link.image} alt={title} title={title} /></a>
+            {links.map((link) => {
+                const title = Functions.mlang(link.title, lang);
+                return (
+                    <a key={link.url} href={link.url} target="_blank" rel="noopener noreferrer">
+                        <img src={link.image} alt={title} title={title} />
+                    </a>
+                );
             })}
         </footer>
     );
-}
+};
 
 export default Footer;

src/common/Header.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import Config, { MultiLang } from '../config';
+import { Link } from 'react-router';
+import Config, { type MultiLang } from '../config';
 import Functions from '../functions';
 import mainMenus from './assets/main-menu.json';
 import iconHome from './assets/theme/images/icon_home.gif';
@@ -16,20 +15,23 @@ interface Props {
 }
 
 const Header = (props: Props) => {
-    const title = Functions.mlang(Config.SITE_TITLE, props.lang);
-    const titleStyle = props.lang === 'en' ? "titleEnglish" : "titleJapanese";
+    const { lang } = props;
+    const title = Functions.mlang(Config.SITE_TITLE, lang);
+    const titleStyle = lang === 'en' ? 'titleEnglish' : 'titleJapanese';
     return (
         <header className="header">
             <div className="clearfix">
                 <div className="headerLeft">
-                    <Link className="titleLink" to="/"><span className={titleStyle}>{title}</span></Link>
+                    <Link className="titleLink" to="/">
+                        <span className={titleStyle}>{title}</span>
+                    </Link>
                 </div>
                 <div className="headerRight">
                     <div>
                         <img src={logo} alt="Comprehensive Brain Science Network" />
                     </div>
                     <div className="shortcut">
-                        <LangFlag lang={props.lang} />
+                        <LangFlag lang={lang} />
                         &nbsp;
                         <LinkImage url="/" image={iconHome} imageHover={iconHomeHover} title="Home" />
                         &nbsp;
@@ -39,13 +41,15 @@ const Header = (props: Props) => {
             </div>
             <div className="menuBar">
                 <div className="menuLink">
-                    {mainMenus.map((item, idx) => {
-                        return <Link key={idx} to={item.link}>{Functions.mlang(item.title, props.lang)}</Link>;
-                    })}
+                    {mainMenus.map((item) => (
+                        <Link key={item.link} to={item.link}>
+                            {Functions.mlang(item.title, lang)}
+                        </Link>
+                    ))}
                 </div>
             </div>
         </header>
     );
-}
+};
 
 export default Header;

src/common/LeftColumn.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import IndexTree from '../database/blocks/IndexTree';
 import Search from '../database/blocks/Search';
 import Functions from '../functions';
@@ -11,33 +10,30 @@ interface Props {
 
 const LeftColumn = (props: Props) => {
     const { lang } = props;
-    const titles = {
-        mainMenu: '[en]Main Menu[/en][ja]メインメニュー[/ja]',
-        indexTree: '[en]Index Tree[/en][ja]インデックスツリー[/ja]',
-        search: '[en]Search[/en][ja]検索[/ja]',
-    };
     return (
         <div className="leftcolumn">
             <div className="block">
-                <h2 className="blockTitle">{Functions.mlang(titles.mainMenu, lang)}</h2>
+                <h2 className="blockTitle">{Functions.mlang('[en]Main Menu[/en][ja]メインメニュー[/ja]', lang)}</h2>
                 <div className="blockContent">
-                    <MainMenu lang={props.lang} />
+                    <MainMenu lang={lang} />
                 </div>
             </div>
             <div className="block">
-                <h2 className="blockTitle">{Functions.mlang(titles.indexTree, lang)}</h2>
+                <h2 className="blockTitle">
+                    {Functions.mlang('[en]Index Tree[/en][ja]インデックスツリー[/ja]', lang)}
+                </h2>
                 <div className="blockContent">
-                    <IndexTree lang={props.lang} />
+                    <IndexTree lang={lang} />
                 </div>
             </div>
             <div className="block">
-                <h2 className="blockTitle">{Functions.mlang(titles.search, lang)}</h2>
+                <h2 className="blockTitle">{Functions.mlang('[en]Search[/en][ja]検索[/ja]', lang)}</h2>
                 <div className="blockContent">
-                    <Search lang={props.lang} />
+                    <Search lang={lang} />
                 </div>
             </div>
         </div>
     );
-}
+};
 
 export default LeftColumn;

src/common/MainContent.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import Config, { MultiLang } from '../config';
+import { Route, Routes } from 'react-router';
+import Config, { type MultiLang } from '../config';
+import About from '../custom/About';
 import D3Forum from '../d3forum/D3Forum';
 import D3ForumXoopsPathRedirect from '../d3forum/D3ForumXoopsPathRedirect';
 import Database from '../database/Database';
 import DatabaseXoopsPathRedirect from '../database/DatabaseXoopsPathRedirect';
-import About from '../custom/About';
 import XoopsPathRedirect from './XoopsPathRedirect';
 
 interface Props {
@@ -16,20 +15,24 @@ const MainContent = (props: Props) => {
     const { lang } = props;
     return (
         <div className="mainContent">
-            <Switch>
-                <Route path="/database" render={() => <Database lang={lang} />} />
-                {Config.D3FORUM_MODULES.map((name) =>
-                    <Route key={name} path={'/' + name} render={() => <D3Forum lang={lang} name={name} />} />
-                )}
-                <Route exact path="/about" render={() => <About lang={lang} />} />
-                <Route path="/modules/xoonips" render={() => <DatabaseXoopsPathRedirect lang={lang} />} />
-                {Config.D3FORUM_MODULES.map((name) =>
-                    <Route key={name} path={'/modules/' + name} render={() => <D3ForumXoopsPathRedirect lang={lang} name={name} />} />
-                )}
-                <Route component={XoopsPathRedirect} />
-            </Switch>
+            <Routes>
+                <Route path="/database/*" element={<Database lang={lang} />} />
+                {Config.D3FORUM_MODULES.map((name) => (
+                    <Route key={name} path={`/${name}/*`} element={<D3Forum lang={lang} name={name} />} />
+                ))}
+                <Route path="/about" element={<About lang={lang} />} />
+                <Route path="/modules/xoonips/*" element={<DatabaseXoopsPathRedirect lang={lang} />} />
+                {Config.D3FORUM_MODULES.map((name) => (
+                    <Route
+                        key={name}
+                        path={`/modules/${name}/*`}
+                        element={<D3ForumXoopsPathRedirect lang={lang} name={name} />}
+                    />
+                ))}
+                <Route path="*" element={<XoopsPathRedirect lang={lang} />} />
+            </Routes>
         </div>
     );
-}
+};
 
-export default MainContent;
+export default MainContent;

src/common/XoopsPathRedirect.tsx

@@ -1,43 +1,32 @@
-import React, { Component } from 'react';
-import { Redirect, RouteComponentProps } from 'react-router';
-import { MultiLang } from '../config';
+import { Navigate, useLocation } from 'react-router';
+import type { MultiLang } from '../config';
 import PageNotFound from './lib/PageNotFound';
 
-interface Params {
-    module: string;
-    pathname: string;
-}
-
-interface Props extends RouteComponentProps<Params> {
+interface Props {
     lang: MultiLang;
 }
 
-class XoopsPathRedirect extends Component<Props> {
-
-    getRedirectUrl() {
-        const { pathname } = this.props.location;
-        switch (pathname || '') {
-            case '/index.php': {
-                return '/';
-            }
-            case '/modules/contact': {
-                return '/about';
-            }
-        }
-        return '';
+const getRedirectUrl = (pathname: string): string => {
+    switch (pathname || '') {
+        case '/index.php':
+            return '/';
+        case '/modules/contact':
+            return '/about';
     }
+    return '';
+};
 
-    render() {
-        const { lang } = this.props;
-        if (this.props.location.pathname === '/') {
-            return null;
-        }
-        const url = this.getRedirectUrl();
-        if (url === '') {
-            return <PageNotFound lang={lang} />;
-        }
-        return <Redirect to={url} />;
+const XoopsPathRedirect = (props: Props) => {
+    const { lang } = props;
+    const location = useLocation();
+    if (location.pathname === '/') {
+        return null;
     }
-}
+    const url = getRedirectUrl(location.pathname);
+    if (url === '') {
+        return <PageNotFound lang={lang} />;
+    }
+    return <Navigate to={url} replace />;
+};
 
 export default XoopsPathRedirect;

src/common/assets/theme/style.css

@@ -6,8 +6,9 @@ body {
     margin: 0px;
     padding: 0px 15px 15px;
     font-size: 80%;
-    min-width: 880px;
-    max-width: 1280px;
+    /* border-box totals: 880 / 1280 plus the 15px of padding per side */
+    min-width: 910px;
+    max-width: 1310px;
 }
 a {
     color: #6075aa;
@@ -155,7 +156,8 @@ textarea {
 /* Left Column */
 .leftcolumn {
     float: left;
-    width: calc(25% - 1px);
+    /* border-box: the 1px right border is inside the quarter */
+    width: 25%;
     border-right-width: 1px;
     border-right-style: dotted;
     border-right-color: #999999;
@@ -200,7 +202,8 @@ textarea {
 .centerCcolumn .block .blockTitle {
     margin: 0;
     padding: 0;
-    height: 28px;
+    /* border-box: 28 plus the 1px border top and bottom */
+    height: 30px;
     font-weight: bold;
     color: #6075aa;
     text-indent: 15px;
@@ -504,3 +507,12 @@ div.xoopsQuote {
 table.report {
     background-color: #ff8;
 }
+
+/* sanitize.css forms.css leaves form controls transparent; keep the search
+   block on white. */
+.leftcolumn .blockContent input[type="text"],
+.leftcolumn .blockContent select,
+.leftcolumn .blockContent .formButton {
+    background-color: #ffffff;
+    color: #000000;
+}

src/common/assets/xoops.css

@@ -1,17 +1,62 @@
-img {border: 0;}
-
-#xoopsHiddenText {visibility: hidden; color: #000000; font-weight: normal; font-style: normal; text-decoration: none;}
-
-.pagneutral {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/pagneutral.gif);}
-.pagact {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/pagact.gif);}
-.paginact {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/paginact.gif);}
-
-
-#mainmenu a {text-align:left; display: block; margin: 0; padding: 4px;}
-#mainmenu a.menuTop {padding-left: 3px;}
-#mainmenu a.menuMain {padding-left: 3px;}
-#mainmenu a.menuSub {padding-left: 9px;}
-
-#usermenu a {text-align:left; display: block; margin: 0; padding: 4px;}
-#usermenu a.menuTop {}
-#usermenu a.highlight {color: #0000ff; background-color: #fcc;}
+img {
+    border: 0;
+}
+
+#xoopsHiddenText {
+    visibility: hidden;
+    color: #000000;
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}
+
+.pagneutral {
+    font-size: 10px;
+    width: 16px;
+    height: 19px;
+    text-align: center;
+    background-image: url(./images/pagneutral.gif);
+}
+.pagact {
+    font-size: 10px;
+    width: 16px;
+    height: 19px;
+    text-align: center;
+    background-image: url(./images/pagact.gif);
+}
+.paginact {
+    font-size: 10px;
+    width: 16px;
+    height: 19px;
+    text-align: center;
+    background-image: url(./images/paginact.gif);
+}
+
+#mainmenu a {
+    text-align: left;
+    display: block;
+    margin: 0;
+    padding: 4px;
+}
+#mainmenu a.menuTop {
+    padding-left: 3px;
+}
+#mainmenu a.menuMain {
+    padding-left: 3px;
+}
+#mainmenu a.menuSub {
+    padding-left: 9px;
+}
+
+#usermenu a {
+    text-align: left;
+    display: block;
+    margin: 0;
+    padding: 4px;
+}
+#usermenu a.menuTop {
+}
+#usermenu a.highlight {
+    color: #0000ff;
+    background-color: #fcc;
+}

src/common/blocks/MainMenu.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import mainMenus from '../assets/main-menu.json';
-import { MultiLang } from '../../config.js';
+import { Link } from 'react-router';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
+import mainMenus from '../assets/main-menu.json';
 
 interface Props {
     lang: MultiLang;
@@ -12,14 +11,16 @@ const MainMenu = (props: Props) => {
     const { lang } = props;
     const links = mainMenus.map((item, idx) => {
         const title = Functions.mlang(item.title, lang);
-        const style = idx === 0 ? "menuTop" : "menuMain";
-        return <li key={idx}><Link className={style} to={item.link}>{title}</Link></li>
+        const style = idx === 0 ? 'menuTop' : 'menuMain';
+        return (
+            <li key={item.link}>
+                <Link className={style} to={item.link}>
+                    {title}
+                </Link>
+            </li>
+        );
     });
-    return (
-        <ul className="mainmenu">
-            {links}
-        </ul>
-    );
-}
+    return <ul className="mainmenu">{links}</ul>;
+};
 
 export default MainMenu;

src/common/lib/HashLink.tsx

@@ -0,0 +1,53 @@
+import type { ComponentProps, MouseEvent } from 'react';
+import { Link, type To } from 'react-router';
+
+type LinkProps = ComponentProps<typeof Link>;
+
+const RETRY_INTERVAL_MS = 16;
+const RETRY_COUNT = 20;
+
+const hashOf = (to: To): string => {
+    if (typeof to === 'string') {
+        const idx = to.indexOf('#');
+        return idx === -1 ? '' : to.slice(idx + 1);
+    }
+    return (to.hash ?? '').replace(/^#/, '');
+};
+
+const scrollToHash = (hash: string, remaining = RETRY_COUNT) => {
+    if (hash === '') {
+        return;
+    }
+    const id = decodeURIComponent(hash);
+    const target = document.getElementById(id) ?? document.querySelector(`[name="${CSS.escape(id)}"]`);
+    if (target !== null) {
+        target.scrollIntoView();
+        return;
+    }
+    // The target may not be in the DOM yet (pico pages fetch their content).
+    if (remaining > 0) {
+        setTimeout(() => {
+            scrollToHash(hash, remaining - 1);
+        }, RETRY_INTERVAL_MS);
+    }
+};
+
+/**
+ * A `<Link>` that also scrolls to the element named by the URL fragment.
+ * Replaces `react-router-hash-link`, which is unmaintained and still targets react-router v5.
+ */
+const HashLink = ({ onClick, to, ...rest }: LinkProps) => {
+    const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+        onClick?.(e);
+        if (e.defaultPrevented) {
+            return;
+        }
+        // Let react-router commit the navigation before looking for the target.
+        setTimeout(() => {
+            scrollToHash(hashOf(to));
+        }, 0);
+    };
+    return <Link {...rest} to={to} onClick={handleClick} />;
+};
+
+export default HashLink;

src/common/lib/LangFlag.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router';
-import { Link } from 'react-router-dom';
-import { MultiLang } from '../../config';
+import { Link, useLocation } from 'react-router';
+import type { MultiLang } from '../../config';
 import mlangEnglish from '../assets/images/mlang_english.gif';
 import mlangJapanese from '../assets/images/mlang_japanese.gif';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
 }
 
@@ -23,16 +21,21 @@ const langResources = {
 
 const LangFlag = (props: Props) => {
     const { lang } = props;
-    const params = new URLSearchParams(props.location.search);
+    const location = useLocation();
+    const params = new URLSearchParams(location.search);
     const flagLang = lang === 'en' ? 'ja' : 'en';
     params.set('ml_lang', flagLang);
-    const url = props.location.pathname + '?' + params.toString();
+    const url = `${location.pathname}?${params.toString()}`;
     return (
         <Link style={styleLink} to={url}>
-            <img style={styleImage} src={langResources[flagLang].image} alt={langResources[flagLang].title} title={langResources[flagLang].title}/>
+            <img
+                style={styleImage}
+                src={langResources[flagLang].image}
+                alt={langResources[flagLang].title}
+                title={langResources[flagLang].title}
+            />
         </Link>
     );
-}
+};
 
-
-export default withRouter(LangFlag);
+export default LangFlag;

src/common/lib/LinkImage.tsx

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
+import { Component } from 'react';
+import { Link } from 'react-router';
 
 interface Props {
     url: string;
@@ -13,7 +13,6 @@ interface State {
 }
 
 class LinkImage extends Component<Props, State> {
-
     constructor(props: Props) {
         super(props);
         this.state = {
@@ -26,14 +25,14 @@ class LinkImage extends Component<Props, State> {
     handleMouseOver() {
         const { imageHover } = this.props;
         if (typeof imageHover !== 'undefined') {
-            this.setState({ image: imageHover })
+            this.setState({ image: imageHover });
         }
     }
 
     handleMouseOut() {
         const { image: imageNormal, imageHover } = this.props;
         if (typeof imageHover !== 'undefined') {
-            this.setState({ image: imageNormal })
+            this.setState({ image: imageNormal });
         }
     }
 
@@ -42,13 +41,27 @@ class LinkImage extends Component<Props, State> {
         const image = <img style={{ verticalAlign: 'middle' }} src={this.state.image} alt={title} title={title} />;
         if (url.match(/^(\/|\.)/) === null) {
             return (
-                <a href={url} target="_blank" rel="noopener noreferrer" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+                <a
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onMouseOver={this.handleMouseOver}
+                    onMouseOut={this.handleMouseOut}
+                    onFocus={this.handleMouseOver}
+                    onBlur={this.handleMouseOut}
+                >
                     {image}
                 </a>
             );
         }
         return (
-            <Link to={url} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+            <Link
+                to={url}
+                onMouseOver={this.handleMouseOver}
+                onMouseOut={this.handleMouseOut}
+                onFocus={this.handleMouseOver}
+                onBlur={this.handleMouseOut}
+            >
                 {image}
             </Link>
         );

src/common/lib/Loading.module.css

@@ -0,0 +1,27 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    margin: 100px 0;
+}
+
+.spinner {
+    width: 120px;
+    height: 120px;
+    border: 8px solid #eeeeee;
+    border-top-color: #cccccc;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .spinner {
+        animation-duration: 4s;
+    }
+}

src/common/lib/Loading.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
-import Spinner from 'react-spinner-material';
+import styles from './Loading.module.css';
 
-const Loading = () => {
-    return (
-        <div style={{ display: 'flex', justifyContent: 'center', alignContent: 'center', margin: '100px 0' }}>
-            <Spinner radius={60} color={'#cccccc'} stroke={8} visible={true} />
-        </div>
-    );
-}
+const Loading = () => (
+    <div className={styles.container}>
+        <div className={styles.spinner} role="status" aria-label="Loading" />
+    </div>
+);
 
-export default Loading;
+export default Loading;

src/common/lib/NoticeSiteHasBeenArchived.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MultiLang } from '../../config';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
 
 interface Props {
@@ -8,8 +7,9 @@ interface Props {
 
 const NoticeSiteHasBeenArchived = (props: Props) => {
     const { lang } = props;
-    const notice = '[en]This site has been archived since FY2019 and is no longer updated.[/en][ja]このサイトは、2019年度よりアーカイブサイトとして運用されています。[/ja]';
+    const notice =
+        '[en]This site has been archived since FY2019 and is no longer updated.[/en][ja]このサイトは、2019年度よりアーカイブサイトとして運用されています。[/ja]';
     return <p style={{ color: 'red' }}>{Functions.mlang(notice, lang)}</p>;
-}
+};
 
-export default NoticeSiteHasBeenArchived;
+export default NoticeSiteHasBeenArchived;

src/common/lib/PageNotFound.tsx

@@ -1,48 +1,44 @@
-import React, { Component } from 'react';
-import { Helmet } from 'react-helmet';
-import { RouteComponentProps, withRouter } from 'react-router';
-import { MultiLang } from '../../config';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
 }
 
-class PageNotFound extends Component<Props> {
+const TOP_URL = '/';
 
-    private url = '/';
-    private timer: NodeJS.Timer | null = null;
+const PageNotFound = (props: Props) => {
+    const { lang } = props;
+    const location = useLocation();
+    const navigate = useNavigate();
 
-    goToTopPage() {
-        if (this.props.location.pathname !== '/') {
-            this.timer = setTimeout(() => {
-                this.props.history.push(this.url);
-            }, 5000);
+    useEffect(() => {
+        if (location.pathname === TOP_URL) {
+            return;
         }
-    }
+        const timer = setTimeout(() => {
+            void navigate(TOP_URL);
+        }, 5000);
+        return () => clearTimeout(timer);
+    }, [location.pathname, navigate]);
 
-    componentWillUnmount() {
-        if (this.timer) {
-            clearTimeout(this.timer);
-        }
-    }
+    return (
+        <div>
+            <Helmet>
+                <title>Page Not Found - {Functions.siteTitle(lang)}</title>
+            </Helmet>
+            <h1>Page Not Found</h1>
+            <section>
+                <p>The page you were trying to access doesn't exist.</p>
+                <p>
+                    If the page does not automatically reload, please go to the <a href={TOP_URL}>top page</a>
+                </p>
+            </section>
+        </div>
+    );
+};
 
-    render() {
-        const { lang } = this.props;
-        this.goToTopPage();
-        return (
-            <div>
-                <Helmet>
-                    <title>Page Not Found - {Functions.siteTitle(lang)}</title>
-                </Helmet>
-                <h1>Page Not Found</h1>
-                <section>
-                    <p>The page you were trying to access doesn't exist.</p>
-                    <p>If the page does not automatically reload, please click <a href={this.url}>here</a></p>
-                </section>
-            </div>
-        );
-    }
-}
-
-export default withRouter(PageNotFound);
+export default PageNotFound;

src/common/lib/UserRankStarImage.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { MultiLang } from '../../config';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
-import imageRank2 from '../assets/images/rank3dbf8e94a6f72.gif';
 import imageRank3 from '../assets/images/rank3dbf8e9e7d88d.gif';
+import imageRank2 from '../assets/images/rank3dbf8e94a6f72.gif';
 import imageRank4 from '../assets/images/rank3dbf8ea81e642.gif';
 import imageRank5 from '../assets/images/rank3dbf8eb1a72e7.gif';
 import imageRank6 from '../assets/images/rank3dbf8edf15093.gif';
@@ -19,7 +18,7 @@ const userRanks = [
     { title: '[en]Just popping in[/en][ja]新米[/ja]', min: 0, max: 20, special: false, image: imageRank1 },
     { title: '[en]Not too shy to talk[/en][ja]半人前[/ja]', min: 21, max: 40, special: false, image: imageRank2 },
     { title: '[en]Quite a regular[/en][ja]常連[/ja]', min: 41, max: 70, special: false, image: imageRank3 },
-    { title: '[en]Just can\'t stay away[/en][ja]一人前[/ja]', min: 71, max: 150, special: false, image: imageRank4 },
+    { title: "[en]Just can't stay away[/en][ja]一人前[/ja]", min: 71, max: 150, special: false, image: imageRank4 },
     { title: '[en]Home away from home[/en][ja]長老[/ja]', min: 151, max: 10000, special: false, image: imageRank5 },
     { title: '[en]Moderator[/en][ja]モデレータ[/ja]', min: 0, max: 0, special: true, image: imageRank6 },
     { title: '[en]Webmaster[/en][ja]管理人[/ja]', min: 0, max: 0, special: true, image: imageRank7 },
@@ -35,11 +34,10 @@ const UserRankStarImage = (props: Props) => {
             return false;
         });
         return typeof rank !== 'undefined' ? rank : userRanks[0];
-
-    }
+    };
     const userRank = rank > 0 && rank <= 7 ? userRanks[rank - 1] : findRank(posts);
     const title = Functions.mlang(userRank.title, lang);
     return <img src={userRank.image} alt={title} title={title} />;
-}
+};
 
-export default UserRankStarImage;
+export default UserRankStarImage;

src/common/lib/XoopsCode.tsx

@@ -1,8 +1,14 @@
-import React, { ReactElement } from 'react';
-import ReactHtmlParser, { convertNodeToElement } from 'react-html-parser';
-import { HashLink } from 'react-router-hash-link';
-import { MultiLang } from '../../config';
+import ReactHtmlParser, {
+    convertNodeToElement,
+    type DomElement,
+    type DomNode,
+    type Transform,
+} from '@orrisroot/react-html-parser';
+import type { CSSProperties } from 'react';
+import { useLocation } from 'react-router';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
+import HashLink from './HashLink';
 
 interface Props {
     lang: MultiLang;
@@ -16,90 +22,116 @@ interface Props {
 
 const preConvertXCode = (text: string, doxcode: boolean): string => {
     if (doxcode) {
-        return text.replace(/\[code\](.*)\[\/code\]/sg, (m0, m1) => {
-            return '[code]' + Functions.base64Encode(m1) + '[/code]';
+        return text.replace(/\[code\](.*)\[\/code\]/gs, (_m0, m1) => {
+            return `[code]${Functions.base64Encode(m1)}[/code]`;
         });
     }
     return text;
-}
+};
 
 const postConvertXCode = (text: string, doxcode: boolean, doimage: boolean): string => {
     if (doxcode) {
-        return text.replace(/\[code\](.*)\[\/code\]/sg, (m0, m1) => {
+        return text.replace(/\[code\](.*)\[\/code\]/gs, (_m0, m1) => {
             const text = convertXCode(Functions.htmlspecialchars(Functions.base64Decode(m1)), doimage);
-            return '<div class="xoopsCode"><pre><code>' + text + '</code></pre></div>';
+            return `<div class="xoopsCode"><pre><code>${text}</code></pre></div>`;
         });
     }
     return text;
-}
+};
 
 const convertClickable = (text: string) => {
-    text = text.replace(/(^|[^\]_a-zA-Z0-9-="'/]+)((?:https?|ftp)(?::\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+[a-zA-Z0-9=]))/g, (...matches) => {
-        return matches[1] + '<a href="' + matches[2] + '" rel="external">' + matches[2] + '</a>';
-    });
-    text = text.replace(/(^|[^\]_a-zA-Z0-9-="'/:.]+)([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+)/g, (...matches) => {
-        return matches[1] + '<a href="mailto:' + matches[2] + '">' + matches[2] + '</a>';
-    });
+    text = text.replace(
+        /(^|[^\]_a-zA-Z0-9-="'/]+)((?:https?|ftp)(?::\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+[a-zA-Z0-9=]))/g,
+        (...matches) => {
+            return (
+                matches[1] +
+                '<a href="' +
+                matches[2] +
+                '" target="_blank" rel="external noopener noreferrer">' +
+                matches[2] +
+                '</a>'
+            );
+        }
+    );
+    text = text.replace(
+        /(^|[^\]_a-zA-Z0-9-="'/:.]+)([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+)/g,
+        (...matches) => {
+            return `${matches[1]}<a href="mailto:${matches[2]}">${matches[2]}</a>`;
+        }
+    );
     return text;
-}
+};
 
-const convertXCode = (text: string, doimage: boolean): string => {
+const convertXCode = (text: string, _doimage: boolean): string => {
     // TODO: implement
     return text;
-}
+};
 
 const convertSmiley = (text: string) => {
     // TODO: implement
     return text;
-}
+};
 
 const convertBr = (text: string): string => {
     return text.replace(/(\r?\n|\r)/g, '<br />');
-}
+};
 
-interface TransformParsedNode {
-    type: string;
-    next: object | null;
-    prev: object | null;
-    parent: object | null;
-    name: string;
-    attribs: any;
-    children: object[];
-    data: string;
-}
-
-const cssConvert = (text: string): object => {
-    const ret: any = {};
+const cssConvert = (text: string): CSSProperties => {
+    const ret: Record<string, string> = {};
     text.split(';').forEach((line) => {
         const line_ = line.trim();
-        if (line.length === 0) {
+        if (line_.length === 0) {
             return;
         }
         const kv = line_.split(':');
-        const key = Functions.camelCase(kv[0].trim());
-        const value = kv[1].trim();
-        ret[key] = value;
-    })
-    return ret;
-}
-
-const transform = (node: object, idx: number): ReactElement | null | void => {
-    const node_ = node as TransformParsedNode;
-    if (node_.type === 'tag' && node_.name === 'a') {
-        const url = node_.attribs && node_.attribs['href'];
-        const isExternal = !url || /^(mailto|https?:?\/\/)/.test(url);
-        if (!isExternal) {
-            const style = (node_.attribs && node_.attribs['style']) || '';
-            const title = (node_.attribs && node_.attribs['title']) || '';
-            return <HashLink key={idx} to={url} style={cssConvert(style)} title={title}>{node_.children.map((value: object, index: number) => {
-                return convertNodeToElement(value, index, transform);
-            })}</HashLink>;
+        if (kv.length < 2) {
+            return;
         }
-    }
-}
+        ret[Functions.camelCase(kv[0].trim())] = kv.slice(1).join(':').trim();
+    });
+    return ret as CSSProperties;
+};
+
+/**
+ * Stored content links are written relative to the page that contains them
+ * (`node4.html`, `manual.html#SECTION1`, ...), so they have to be resolved the
+ * way a browser resolves an `href`. react-router would instead resolve them
+ * against the whole current pathname, turning `/manual_ja/node3.html` +
+ * `node4.html` into `/manual_ja/node3.html/node4.html`.
+ */
+const resolveUrl = (href: string, basePath: string): string => {
+    const url = new URL(href, window.location.origin + basePath);
+    return url.pathname + url.search + url.hash;
+};
+
+const makeTransform = (basePath: string): Transform => {
+    const transform: Transform = (node: DomNode, idx: number | string) => {
+        if (node.type !== 'tag') {
+            return undefined;
+        }
+        const element = node as DomElement;
+        if (element.name !== 'a') {
+            return undefined;
+        }
+        const url = element.attribs?.href;
+        const isExternal = !url || /^(mailto|https?:?\/\/)/.test(url);
+        if (isExternal) {
+            return undefined;
+        }
+        const style = element.attribs?.style || '';
+        const title = element.attribs?.title || '';
+        return (
+            <HashLink key={idx} to={resolveUrl(url, basePath)} style={cssConvert(style)} title={title}>
+                {element.children.map((child, index) => convertNodeToElement(child, index, transform))}
+            </HashLink>
+        );
+    };
+    return transform;
+};
 
 const XoopsCode = (props: Props) => {
     const { lang } = props;
+    const { pathname } = useLocation();
     let text = props.text;
     const dohtml = !!props.dohtml;
     const dosmiley = !!props.dosmiley;
@@ -122,7 +154,7 @@ const XoopsCode = (props: Props) => {
     }
     text = postConvertXCode(text, doxcode, doimage);
     text = Functions.mlang(text, lang);
-    return <div>{ReactHtmlParser(text, { transform })}</div>;
-}
+    return <div>{ReactHtmlParser(text, { transform: makeTransform(pathname) })}</div>;
+};
 
-export default XoopsCode;
+export default XoopsCode;

src/config.ts

@@ -1,9 +1,15 @@
 const SITE_TITLE = '[en]CBSN platform[/en][ja]包括脳プラットフォーム[/ja]';
 const SITE_SLOGAN = 'XooNIps for CBSN';
-const GOOGLE_ANALYTICS_TRACKING_ID = 'UA-2780809-1';
+// Replaces the Universal Analytics property (UA-2780809-1), shut down in 2023.
+const GOOGLE_ANALYTICS_TRACKING_ID = 'G-CJHKDRF9PX';
 const XOONIPS_ITEMTYPES = ['tool', 'paper', 'presentation', 'book', 'data', 'url', 'files'];
 const D3FORUM_MODULES = ['forum'];
 
+// Vite's BASE_URL always carries a trailing slash ('/' when the app is served
+// from the document root). Strip it so it can be concatenated the same way
+// CRA's Config.BASE_URL was.
+const BASE_URL = import.meta.env.BASE_URL.replace(/\/$/, '');
+
 export type MultiLang = 'en' | 'ja';
 
 const Config = {
@@ -12,6 +18,7 @@ const Config = {
     GOOGLE_ANALYTICS_TRACKING_ID,
     XOONIPS_ITEMTYPES,
     D3FORUM_MODULES,
-}
+    BASE_URL,
+};
 
 export default Config;

src/custom/About.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import Config, { MultiLang } from '../config';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import Announce from './blocks/Announce';
 
@@ -14,12 +13,14 @@ const About = (props: Props) => {
     return (
         <div>
             <Helmet>
-                <title>{title} - {Functions.mlang(Config.SITE_TITLE, lang)}</title>
+                <title>
+                    {title} - {Functions.siteTitle(lang)}
+                </title>
             </Helmet>
             <h1>{title}</h1>
-            <Announce lang={props.lang} />
+            <Announce lang={lang} />
         </div>
     );
-}
+};
 
-export default About;
+export default About;

src/custom/blocks/Announce.tsx

@@ -1,27 +1,37 @@
-import React from 'react';
-import { MultiLang } from '../../config';
 import NoticeSiteHasBeenArchived from '../../common/lib/NoticeSiteHasBeenArchived';
+import type { MultiLang } from '../../config';
 
 interface Props {
     lang: MultiLang;
 }
 
-const Annuonce = (props: Props) => {
+const announce = {
+    en: (
+        <p>
+            This site is supported by a Grant-in-Aid for Scientific Research on Innovative Areas (Comprehensive Brain
+            Science Network) from the Ministry of Education, Science, Sports and Culture of Japan.
+        </p>
+    ),
+    ja: (
+        <p>
+            当サイトは、新学術領域研究{' '}
+            <a href="https://www.hokatsu-nou.neuroinf.jp/" target="_blank" rel="noopener noreferrer">
+                包括脳ネットワーク
+            </a>{' '}
+            がサポートしています。包括脳ネットワークのメンバーはユーザー登録後、このサイトに各種ファイルをアップロードし、公開・共有することができます。
+            当サイトは統合脳プラットフォームを引き継ぎ、包括脳ネットワークデータベース委員会により運営されています。
+        </p>
+    ),
+};
+
+const Announce = (props: Props) => {
     const { lang } = props;
-    const announce = {
-        'en':
-            <p>This site is supported by a Grant-in-Aid for Scientific Research on Innovative Areas (Comprehensive Brain Science Network) from the Ministry of Education, Science, Sports and Culture of Japan.</p>,
-        'ja':
-            <p>
-                当サイトは、新学術領域研究 <a href="https://www.hokatsu-nou.neuroinf.jp/" target="_blank" rel="noopener noreferrer">包括脳ネットワーク</a> がサポートしています。包括脳ネットワークのメンバーはユーザー登録後、このサイトに各種ファイルをアップロードし、公開・共有することができます。 当サイトは統合脳プラットフォームを引き継ぎ、包括脳ネットワークデータベース委員会により運営されています。
-            </p>,
-    };
     return (
         <>
             <NoticeSiteHasBeenArchived lang={lang} />
             {announce[lang]}
         </>
     );
-}
+};
 
-export default Annuonce;
+export default Announce;

src/d3forum/D3Forum.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { Route, Routes } from 'react-router';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import './assets/d3forum_common.css';
 import './assets/d3forum_main.css';
@@ -23,18 +22,20 @@ const D3Forum = (props: Props) => {
     return (
         <>
             <Helmet>
-                <title>{D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}</title>
+                <title>
+                    {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}
+                </title>
             </Helmet>
-            <Switch>
-                <Route exact path={'/' + name} render={() => <D3ForumTop {...props} />} />
-                <Route exact path={'/' + name + '/category/:id'} render={(props: RouteComponentProps<{ id?: string }>) => <D3ForumCategory lang={lang} name={name} {...props} />} />
-                <Route exact path={'/' + name + '/forum/:id'} render={(props: RouteComponentProps<{ id?: string }>) => <D3ForumForum lang={lang} name={name} {...props} />} />
-                <Route exact path={'/' + name + '/topic/:id'} render={(props: RouteComponentProps<{ id?: string }>) => <D3ForumTopic lang={lang} name={name} {...props} />} />
-                <Route exact path={'/' + name + '/post/:id'} render={(props: RouteComponentProps<{ id?: string }>) => <D3ForumPost lang={lang} name={name} {...props} />} />
-                <Route component={PageNotFound} />
-            </Switch>
+            <Routes>
+                <Route path="/" element={<D3ForumTop lang={lang} name={name} />} />
+                <Route path="category/:id" element={<D3ForumCategory lang={lang} name={name} />} />
+                <Route path="forum/:id" element={<D3ForumForum lang={lang} name={name} />} />
+                <Route path="topic/:id" element={<D3ForumTopic lang={lang} name={name} />} />
+                <Route path="post/:id" element={<D3ForumPost lang={lang} name={name} />} />
+                <Route path="*" element={<PageNotFound lang={lang} />} />
+            </Routes>
         </>
     );
-}
+};
 
-export default D3Forum;
+export default D3Forum;

src/d3forum/D3ForumCategory.tsx

@@ -1,23 +1,18 @@
-import moment from 'moment';
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { RouteComponentProps } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { format } from 'date-fns';
+import { Link, useParams } from 'react-router';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import imageCategory0 from './assets/images/category_0.gif';
 import imageCategory1 from './assets/images/category_1.gif';
 import imageForum0 from './assets/images/forum_0.gif';
 import imageForum1 from './assets/images/forum_1.gif';
 import CategoryJump from './lib/CategoryJump';
-import D3ForumUtils, { D3ForumCategoryData, D3ForumForumData } from './lib/D3ForumUtils';
+import D3ForumUtils, { type D3ForumCategoryData, type D3ForumForumData } from './lib/D3ForumUtils';
 import PostIcon from './lib/PostIcon';
 
-interface Params {
-    id?: string;
-}
-interface Props extends RouteComponentProps<Params> {
+interface Props {
     lang: MultiLang;
     name: string;
 }
@@ -38,12 +33,21 @@ const D3ForumCategorySubCategory = (props: D3ForumCategoryProps) => {
         const title = Functions.mlang(category.cat_title, lang);
         const url = D3ForumUtils.getCategoryUrl(name, category.cat_id);
         const image = category.cat_posts_count === 0 ? imageCategory0 : imageCategory1;
-        const latest = category.cat_last_post_time === 0 ? '' : ', ' + LABEL_LATEST_POST + ': ' + moment(new Date(category.cat_last_post_time * 1000)).format('Y/M/D H:m');
+        const latest =
+            category.cat_last_post_time === 0
+                ? ''
+                : ', ' +
+                  LABEL_LATEST_POST +
+                  ': ' +
+                  format(new Date(category.cat_last_post_time * 1000), 'yyyy/M/d H:m');
         return (
             <li key={category.cat_id}>
-                <Link to={url} title={title}><img src={image} alt={title} width="16" height="16" /> {title}</Link>
-                &nbsp;
-                ({LABEL_TOTAL_TOPICS}: {category.cat_topics_count}, {LABEL_TOTAL_POSTS}: {category.cat_posts_count}{latest})
+                <Link to={url} title={title}>
+                    <img src={image} alt={title} width="16" height="16" /> {title}
+                </Link>
+                &nbsp; ({LABEL_TOTAL_TOPICS}: {category.cat_topics_count}, {LABEL_TOTAL_POSTS}:{' '}
+                {category.cat_posts_count}
+                {latest})
             </li>
         );
     });
@@ -53,12 +57,10 @@ const D3ForumCategorySubCategory = (props: D3ForumCategoryProps) => {
     return (
         <>
             <h2 className="head">{LABEL_HEADER_TITLE}</h2>
-            <ul className="d3f_subcategories">
-                {subCategories}
-            </ul>
+            <ul className="d3f_subcategories">{subCategories}</ul>
         </>
     );
-}
+};
 
 const D3ForumCategoryForum = (props: D3ForumCategoryProps) => {
     const { lang, name, catId } = props;
@@ -83,7 +85,8 @@ const D3ForumCategoryForum = (props: D3ForumCategoryProps) => {
             const subject = Functions.mlang(post.subject, lang);
             return (
                 <>
-                    {moment(new Date(post.post_time * 1000)).format('Y/M/D H:m')}<br />
+                    {format(new Date(post.post_time * 1000), 'yyyy/M/d H:m')}
+                    <br />
                     {post.uid_uname}
                     &nbsp;
                     <Link to={D3ForumUtils.getPostUrl(name, post.post_id)}>
@@ -94,18 +97,20 @@ const D3ForumCategoryForum = (props: D3ForumCategoryProps) => {
         };
         return (
             <tr key={forum.forum_id} className={evenodd}>
-                <td className="d3f_mainicon"><img src={image} alt={title} /></td>
+                <td className="d3f_mainicon">
+                    <img src={image} alt={title} />
+                </td>
                 <td>
                     <dl>
-                        <dt><Link to={url}>{title}</Link></dt>
+                        <dt>
+                            <Link to={url}>{title}</Link>
+                        </dt>
                         <dd>{desc}</dd>
                     </dl>
                 </td>
                 <td>{forum.forum_topics_count}</td>
                 <td>{forum.forum_posts_count}</td>
-                <td className="d3f_posters">
-                    {getPoster(forum.forum_last_post_id)}
-                </td>
+                <td className="d3f_posters">{getPoster(forum.forum_last_post_id)}</td>
             </tr>
         );
     });
@@ -124,25 +129,27 @@ const D3ForumCategoryForum = (props: D3ForumCategoryProps) => {
                         <th>{LABEL_LATEST_POST}</th>
                     </tr>
                 </thead>
-                <tbody>
-                    {forums}
-                </tbody>
+                <tbody>{forums}</tbody>
             </table>
             <div className="d3f_iconexps">
                 <ul className="d3f_iconexp">
-                    <li><img src={imageForum1} alt="" width="18" height="18" /> = {LABEL_NEW_POSTS}</li>
+                    <li>
+                        <img src={imageForum1} alt="" width="18" height="18" /> = {LABEL_NEW_POSTS}
+                    </li>
                 </ul>
                 <ul className="d3f_iconexp">
-                    <li><img src={imageForum0} alt="" width="18" height="18" /> = {LABEL_NO_NEW_POSTS}</li>
+                    <li>
+                        <img src={imageForum0} alt="" width="18" height="18" /> = {LABEL_NO_NEW_POSTS}
+                    </li>
                 </ul>
             </div>
         </>
     );
-}
+};
 
 const D3ForumCategory = (props: Props) => {
     const { lang, name } = props;
-    const params = props.match.params;
+    const params = useParams<{ id?: string }>();
     if (typeof params.id === 'undefined') {
         return <PageNotFound lang={lang} />;
     }
@@ -155,7 +162,9 @@ const D3ForumCategory = (props: Props) => {
     return (
         <>
             <Helmet>
-                <title>{title} - {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}</title>
+                <title>
+                    {title} - {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}
+                </title>
             </Helmet>
             <div className="d3f_breadcrumbs">
                 <Link to={D3ForumUtils.getIndexUrl(name)}>{Functions.mlang('[en]Top[/en][ja]トップ[/ja]', lang)}</Link>
@@ -166,6 +175,6 @@ const D3ForumCategory = (props: Props) => {
             <CategoryJump lang={lang} name={name} catId={catId} />
         </>
     );
-}
+};
 
-export default D3ForumCategory;
+export default D3ForumCategory;

src/d3forum/D3ForumForum.tsx

@@ -1,10 +1,9 @@
-import moment from 'moment';
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { RouteComponentProps } from 'react-router';
-import { HashLink } from 'react-router-hash-link';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { format } from 'date-fns';
+import { useParams } from 'react-router';
+import HashLink from '../common/lib/HashLink';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import imageTopic01 from './assets/images/topic_01.gif';
 import imageTopic10 from './assets/images/topic_10.gif';
@@ -14,114 +13,161 @@ import imageTopicStatusLocked1 from './assets/images/topic_status_locked1.gif';
 import imageTopicStatusMarked1 from './assets/images/topic_status_marked1.gif';
 import imageTopicStatusSolved0 from './assets/images/topic_status_solved0.gif';
 import imageTopicSticky0 from './assets/images/topic_sticky0.gif';
+import D3ForumUtils, { type D3ForumPostData, D3ForumPostSortOrder, type D3ForumTopicData } from './lib/D3ForumUtils';
 import ForumJump from './lib/ForumJump';
-import D3ForumUtils, { D3ForumPostData, D3ForumPostSortOrder, D3ForumTopicData } from './lib/D3ForumUtils';
 import PostIcon from './lib/PostIcon';
 
-interface Params {
-	id?: string;
-}
-interface Props extends RouteComponentProps<Params> {
-	lang: MultiLang;
-	name: string;
+interface Props {
+    lang: MultiLang;
+    name: string;
 }
 
 const D3ForumForum = (props: Props) => {
-	const { lang, name } = props;
-	const params = props.match.params;
-	if (typeof params.id === 'undefined') {
-		return <PageNotFound lang={lang} />;
-	}
-	const forumId = parseInt(params.id, 10);
-	const forum = D3ForumUtils.getForum(name, forumId);
-	if (forum === null) {
-		return <PageNotFound lang={lang} />;
-	}
-	const category = D3ForumUtils.getCategory(name, forum.cat_id);
-	if (category === null) {
-		return <PageNotFound lang={lang} />;
-	}
-	const topics = D3ForumUtils.getTopics(name, forum.forum_id);
-	const title = Functions.mlang(forum.forum_title, lang);
-	return (
-		<>
-			<Helmet>
-				<title>{title} - {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}</title>
-			</Helmet>
-			<div className="d3f_breadcrumbs">
-				<HashLink to={D3ForumUtils.getIndexUrl(name)}>{Functions.mlang('[en]Top[/en][ja]トップ[/ja]', lang)}</HashLink>
-				&nbsp;&gt;&nbsp;
-				<HashLink to={D3ForumUtils.getCategoryUrl(name, category.cat_id)}>{Functions.mlang(category.cat_title, lang)}</HashLink>
-			</div>
-			<h1 className="d3f_title">{title}</h1>
-			<p className="d3f_welcome">{Functions.mlang(forum.forum_desc, lang)}</p>
-			<table className="outer d3f_table">
-				<thead>
-					<tr className="head">
-						<th colSpan={2}>{Functions.mlang(`[en]hits ${topics.length} items[/en][ja]${topics.length}件ヒットしました[/ja]`, lang)}</th>
-						<th>{Functions.mlang('[en]Reply[/en][ja]返信[/ja]', lang)}</th>
-						<th>{Functions.mlang('[en]First post[/en][ja]トピック開始[/ja]', lang)}</th>
-						<th>{Functions.mlang('[en]Latest post[/en][ja]最新投稿[/ja]', lang)}</th>
-					</tr>
-				</thead>
-				<tbody>
-					{topics.map((topic: D3ForumTopicData, idx: number) => {
-						const postStart = D3ForumUtils.getPost(name, topic.topic_first_post_id);
-						const postLast = D3ForumUtils.getPost(name, topic.topic_last_post_id);
-						if (postStart === null || postLast === null) {
-							return null;
-						}
-						const postTitleStart = Functions.mlang(postStart.subject, lang);
-						const imageTopic = topic.topic_invisible !== 0 ? imageTopicInvisible : topic.topic_sticky !== 0 ? imageTopicSticky0 : imageTopic10;
-						const evenodd = idx % 2 === 0 ? 'even' : 'odd';
-						const poster = (post: D3ForumPostData) => {
-							const title = Functions.mlang(post.subject, lang);
-							return (
-								<>
-									{moment(new Date(post.post_time * 1000)).format('YYYY/M/D')}<br />
-									{post.uid_uname} <HashLink to={D3ForumUtils.getPostUrl(name, post.post_id)}><PostIcon lang={lang} post={post} title={title} /></HashLink>
-								</>
-							);
-						}
-						return (
-							<tr key={topic.topic_id} className={evenodd}>
-								<td className="d3f_mainicon">
-									<img src={imageTopic} alt="" />
-								</td>
-								<td className="d3f_topictitle">
-									{topic.topic_solved === 0 && <img src={imageTopicStatusSolved0} alt="" />}
-									{topic.topic_locked !== 0 && <img src={imageTopicStatusLocked1} alt="" />}
-									<HashLink to={D3ForumUtils.getTopicUrl(name, topic.topic_id, D3ForumPostSortOrder.TREE, postLast.post_id)}>{postTitleStart}</HashLink>
-								</td>
-								<td>{topic.topic_posts_count - 1}</td>
-								<td className="d3f_posters">
-									{poster(postStart)}
-								</td>
-								<td className="d3f_posters">
-									{postStart.post_id !== postLast.post_id && poster(postLast)}
-								</td>
-							</tr>
-
-						);
-					})}
-				</tbody>
-			</table>
-			<div className="d3f_iconexps clearfix">
-				<ul className="d3f_iconexp">
-					<li><img src={imageTopic11} alt="" width="18" height="18" /> = {Functions.mlang('[en]Topic with new posts[/en][ja]新しい投稿があります[/ja]', lang)}</li>
-					<li><img src={imageTopic01} alt="" width="18" height="18" /> = {Functions.mlang('[en]Topic without new posts[/en][ja]新しい投稿はありません[/ja]', lang)}</li>
-					<li><img src={imageTopicInvisible} alt="" width="18" height="18" /> = {Functions.mlang('[en]Invisible topic (Only admins and moderators can read this)[/en][ja]不可視トピック（管理者とモデレータ以外には見えません）[/ja]', lang)}</li>
-					<li><img src={imageTopicSticky0} alt="" width="18" height="18" /> = {Functions.mlang('[en]Sticky topic[/en][ja]特別扱いされたトピック[/ja]', lang)}</li>
-				</ul>
-				<ul className="d3f_iconexp">
-					<li><img src={imageTopicStatusLocked1} alt="" width="18" height="18" /> = {Functions.mlang('[en]Locked topic[/en][ja]ロックされたトピック[/ja]', lang)}</li>
-					<li><img src={imageTopicStatusSolved0} alt="" width="18" height="18" /> = {Functions.mlang('[en]Unsolved topic[/en][ja]未解決トピック[/ja]', lang)}</li>
-					<li><img src={imageTopicStatusMarked1} alt="" width="18" height="18" /> = {Functions.mlang('[en]Marked[/en][ja]未解決トピック[/ja]', lang)}</li>
-				</ul>
-			</div>
-			<ForumJump lang={lang} name={name} forumId={forum.forum_id} />
-		</>
-	);
-}
+    const { lang, name } = props;
+    const params = useParams<{ id?: string }>();
+    if (typeof params.id === 'undefined') {
+        return <PageNotFound lang={lang} />;
+    }
+    const forumId = parseInt(params.id, 10);
+    const forum = D3ForumUtils.getForum(name, forumId);
+    if (forum === null) {
+        return <PageNotFound lang={lang} />;
+    }
+    const category = D3ForumUtils.getCategory(name, forum.cat_id);
+    if (category === null) {
+        return <PageNotFound lang={lang} />;
+    }
+    const topics = D3ForumUtils.getTopics(name, forum.forum_id);
+    const title = Functions.mlang(forum.forum_title, lang);
+    return (
+        <>
+            <Helmet>
+                <title>
+                    {title} - {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}
+                </title>
+            </Helmet>
+            <div className="d3f_breadcrumbs">
+                <HashLink to={D3ForumUtils.getIndexUrl(name)}>
+                    {Functions.mlang('[en]Top[/en][ja]トップ[/ja]', lang)}
+                </HashLink>
+                &nbsp;&gt;&nbsp;
+                <HashLink to={D3ForumUtils.getCategoryUrl(name, category.cat_id)}>
+                    {Functions.mlang(category.cat_title, lang)}
+                </HashLink>
+            </div>
+            <h1 className="d3f_title">{title}</h1>
+            <p className="d3f_welcome">{Functions.mlang(forum.forum_desc, lang)}</p>
+            <table className="outer d3f_table">
+                <thead>
+                    <tr className="head">
+                        <th colSpan={2}>
+                            {Functions.mlang(
+                                `[en]hits ${topics.length} items[/en][ja]${topics.length}件ヒットしました[/ja]`,
+                                lang
+                            )}
+                        </th>
+                        <th>{Functions.mlang('[en]Reply[/en][ja]返信[/ja]', lang)}</th>
+                        <th>{Functions.mlang('[en]First post[/en][ja]トピック開始[/ja]', lang)}</th>
+                        <th>{Functions.mlang('[en]Latest post[/en][ja]最新投稿[/ja]', lang)}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {topics.map((topic: D3ForumTopicData, idx: number) => {
+                        const postStart = D3ForumUtils.getPost(name, topic.topic_first_post_id);
+                        const postLast = D3ForumUtils.getPost(name, topic.topic_last_post_id);
+                        if (postStart === null || postLast === null) {
+                            return null;
+                        }
+                        const postTitleStart = Functions.mlang(postStart.subject, lang);
+                        const imageTopic =
+                            topic.topic_invisible !== 0
+                                ? imageTopicInvisible
+                                : topic.topic_sticky !== 0
+                                  ? imageTopicSticky0
+                                  : imageTopic10;
+                        const evenodd = idx % 2 === 0 ? 'even' : 'odd';
+                        const poster = (post: D3ForumPostData) => {
+                            const title = Functions.mlang(post.subject, lang);
+                            return (
+                                <>
+                                    {format(new Date(post.post_time * 1000), 'yyyy/M/d')}
+                                    <br />
+                                    {post.uid_uname}{' '}
+                                    <HashLink to={D3ForumUtils.getPostUrl(name, post.post_id)}>
+                                        <PostIcon lang={lang} post={post} title={title} />
+                                    </HashLink>
+                                </>
+                            );
+                        };
+                        return (
+                            <tr key={topic.topic_id} className={evenodd}>
+                                <td className="d3f_mainicon">
+                                    <img src={imageTopic} alt="" />
+                                </td>
+                                <td className="d3f_topictitle">
+                                    {topic.topic_solved === 0 && <img src={imageTopicStatusSolved0} alt="" />}
+                                    {topic.topic_locked !== 0 && <img src={imageTopicStatusLocked1} alt="" />}
+                                    <HashLink
+                                        to={D3ForumUtils.getTopicUrl(
+                                            name,
+                                            topic.topic_id,
+                                            D3ForumPostSortOrder.TREE,
+                                            postLast.post_id
+                                        )}
+                                    >
+                                        {postTitleStart}
+                                    </HashLink>
+                                </td>
+                                <td>{topic.topic_posts_count - 1}</td>
+                                <td className="d3f_posters">{poster(postStart)}</td>
+                                <td className="d3f_posters">
+                                    {postStart.post_id !== postLast.post_id && poster(postLast)}
+                                </td>
+                            </tr>
+                        );
+                    })}
+                </tbody>
+            </table>
+            <div className="d3f_iconexps clearfix">
+                <ul className="d3f_iconexp">
+                    <li>
+                        <img src={imageTopic11} alt="" width="18" height="18" /> ={' '}
+                        {Functions.mlang('[en]Topic with new posts[/en][ja]新しい投稿があります[/ja]', lang)}
+                    </li>
+                    <li>
+                        <img src={imageTopic01} alt="" width="18" height="18" /> ={' '}
+                        {Functions.mlang('[en]Topic without new posts[/en][ja]新しい投稿はありません[/ja]', lang)}
+                    </li>
+                    <li>
+                        <img src={imageTopicInvisible} alt="" width="18" height="18" /> ={' '}
+                        {Functions.mlang(
+                            '[en]Invisible topic (Only admins and moderators can read this)[/en][ja]不可視トピック（管理者とモデレータ以外には見えません）[/ja]',
+                            lang
+                        )}
+                    </li>
+                    <li>
+                        <img src={imageTopicSticky0} alt="" width="18" height="18" /> ={' '}
+                        {Functions.mlang('[en]Sticky topic[/en][ja]特別扱いされたトピック[/ja]', lang)}
+                    </li>
+                </ul>
+                <ul className="d3f_iconexp">
+                    <li>
+                        <img src={imageTopicStatusLocked1} alt="" width="18" height="18" /> ={' '}
+                        {Functions.mlang('[en]Locked topic[/en][ja]ロックされたトピック[/ja]', lang)}
+                    </li>
+                    <li>
+                        <img src={imageTopicStatusSolved0} alt="" width="18" height="18" /> ={' '}
+                        {Functions.mlang('[en]Unsolved topic[/en][ja]未解決トピック[/ja]', lang)}
+                    </li>
+                    <li>
+                        <img src={imageTopicStatusMarked1} alt="" width="18" height="18" /> ={' '}
+                        {Functions.mlang('[en]Marked[/en][ja]未解決トピック[/ja]', lang)}
+                    </li>
+                </ul>
+            </div>
+            <ForumJump lang={lang} name={name} forumId={forum.forum_id} />
+        </>
+    );
+};
 
 export default D3ForumForum;

src/d3forum/D3ForumPost.tsx

@@ -1,80 +1,91 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { RouteComponentProps } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { Link, useParams } from 'react-router';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
+import D3ForumUtils, { type D3ForumPostData, D3ForumPostSortOrder } from './lib/D3ForumUtils';
 import ForumJump from './lib/ForumJump';
-import D3ForumUtils, { D3ForumPostSortOrder, D3ForumPostData } from './lib/D3ForumUtils';
 import Post from './lib/Post';
 import PostsTree from './lib/PostsTree';
 
-interface Params {
-	id?: string;
-}
-
-interface Props extends RouteComponentProps<Params> {
-	lang: MultiLang;
-	name: string;
+interface Props {
+    lang: MultiLang;
+    name: string;
 }
 
 const D3ForumPost = (props: Props) => {
-	const { lang, name } = props;
-	const params = props.match.params;
-	if (typeof params.id === 'undefined') {
-		return <PageNotFound lang={lang} />;
-	}
-	const postId = parseInt(params.id, 10);
-	const post = D3ForumUtils.getPost(name, postId);
-	if (post === null) {
-		return <PageNotFound lang={lang} />;
-	}
-	const topic = D3ForumUtils.getTopic(name, post.topic_id);
-	if (topic === null) {
-		return <PageNotFound lang={lang} />;
-	}
-	const forum = D3ForumUtils.getForum(name, topic.forum_id);
-	if (forum === null) {
-		return <PageNotFound lang={lang} />;
-	}
-	const category = D3ForumUtils.getCategory(name, forum.cat_id);
-	if (category === null) {
-		return <PageNotFound lang={lang} />;
-	}
-	const posts = D3ForumUtils.getPosts(name, topic.topic_id, D3ForumPostSortOrder.TREE);
-	const idx = posts.findIndex((post: D3ForumPostData) => {
-		return post.post_id === postId;
-	});
-	const prevPostId = idx <= 0 ? 0 : posts[idx - 1].post_id;
-	const nextPostId = (idx + 1) === posts.length ? 0 : posts[idx + 1].post_id;
-	const title = Functions.mlang(post.subject, lang);
-	return (
-		<>
-			<Helmet>
-				<title>{title} - {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}</title>
-			</Helmet>
-			<div className="d3f_breadcrumbs">
-				<Link to={D3ForumUtils.getIndexUrl(name)}>{Functions.mlang('[en]Top[/en][ja]トップ[/ja]', lang)}</Link>
-				&nbsp;&gt;&nbsp;
-                <Link to={D3ForumUtils.getCategoryUrl(name, category.cat_id)}>{Functions.mlang(category.cat_title, lang)}</Link>
-				&nbsp;&gt;&nbsp;
-                <Link to={D3ForumUtils.getForumUrl(name, forum.forum_id)}>{Functions.mlang(forum.forum_title, lang)}</Link>
-				&nbsp;&gt;&nbsp;
-                <Link to={D3ForumUtils.getTopicUrl(name, topic.topic_id, D3ForumPostSortOrder.TREE, null)}>{Functions.mlang(topic.topic_title, lang)}</Link>
-			</div>
-			<h1 className="d3f_title">{title}</h1>
-			<PostsTree lang={lang} name={name} posts={posts} postId={postId} />
-			<br />
-			<p className="d3f_topicinfo">
-				<Link to={D3ForumUtils.getTopicUrl(name, topic.topic_id, D3ForumPostSortOrder.TREE, null)}>{Functions.mlang('[en]List posts in the topic[/en][ja]このトピックの投稿一覧へ[/ja]', lang)}</Link>
-			</p>
-			<div className="d3f_wrap">
-				<Post lang={lang} name={name} post={post} prevPostId={prevPostId} nextPostId={nextPostId} inTopic={false} />
-			</div>
-			<ForumJump lang={lang} name={name} forumId={forum.forum_id} />
-		</>
-	);
-}
+    const { lang, name } = props;
+    const params = useParams<{ id?: string }>();
+    if (typeof params.id === 'undefined') {
+        return <PageNotFound lang={lang} />;
+    }
+    const postId = parseInt(params.id, 10);
+    const post = D3ForumUtils.getPost(name, postId);
+    if (post === null) {
+        return <PageNotFound lang={lang} />;
+    }
+    const topic = D3ForumUtils.getTopic(name, post.topic_id);
+    if (topic === null) {
+        return <PageNotFound lang={lang} />;
+    }
+    const forum = D3ForumUtils.getForum(name, topic.forum_id);
+    if (forum === null) {
+        return <PageNotFound lang={lang} />;
+    }
+    const category = D3ForumUtils.getCategory(name, forum.cat_id);
+    if (category === null) {
+        return <PageNotFound lang={lang} />;
+    }
+    const posts = D3ForumUtils.getPosts(name, topic.topic_id, D3ForumPostSortOrder.TREE);
+    const idx = posts.findIndex((post: D3ForumPostData) => {
+        return post.post_id === postId;
+    });
+    const prevPostId = idx <= 0 ? 0 : posts[idx - 1].post_id;
+    const nextPostId = idx + 1 === posts.length ? 0 : posts[idx + 1].post_id;
+    const title = Functions.mlang(post.subject, lang);
+    return (
+        <>
+            <Helmet>
+                <title>
+                    {title} - {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}
+                </title>
+            </Helmet>
+            <div className="d3f_breadcrumbs">
+                <Link to={D3ForumUtils.getIndexUrl(name)}>{Functions.mlang('[en]Top[/en][ja]トップ[/ja]', lang)}</Link>
+                &nbsp;&gt;&nbsp;
+                <Link to={D3ForumUtils.getCategoryUrl(name, category.cat_id)}>
+                    {Functions.mlang(category.cat_title, lang)}
+                </Link>
+                &nbsp;&gt;&nbsp;
+                <Link to={D3ForumUtils.getForumUrl(name, forum.forum_id)}>
+                    {Functions.mlang(forum.forum_title, lang)}
+                </Link>
+                &nbsp;&gt;&nbsp;
+                <Link to={D3ForumUtils.getTopicUrl(name, topic.topic_id, D3ForumPostSortOrder.TREE, null)}>
+                    {Functions.mlang(topic.topic_title, lang)}
+                </Link>
+            </div>
+            <h1 className="d3f_title">{title}</h1>
+            <PostsTree lang={lang} name={name} posts={posts} postId={postId} />
+            <br />
+            <p className="d3f_topicinfo">
+                <Link to={D3ForumUtils.getTopicUrl(name, topic.topic_id, D3ForumPostSortOrder.TREE, null)}>
+                    {Functions.mlang('[en]List posts in the topic[/en][ja]このトピックの投稿一覧へ[/ja]', lang)}
+                </Link>
+            </p>
+            <div className="d3f_wrap">
+                <Post
+                    lang={lang}
+                    name={name}
+                    post={post}
+                    prevPostId={prevPostId}
+                    nextPostId={nextPostId}
+                    inTopic={false}
+                />
+            </div>
+            <ForumJump lang={lang} name={name} forumId={forum.forum_id} />
+        </>
+    );
+};
 
 export default D3ForumPost;

src/d3forum/D3ForumTop.tsx

@@ -1,16 +1,16 @@
-import moment from 'moment';
-import React, { Fragment } from 'react';
-import { Link } from 'react-router-dom';
-import { MultiLang } from '../config';
+import { format } from 'date-fns';
+import { Fragment } from 'react';
+import { Link } from 'react-router';
+import PageNotFound from '../common/lib/PageNotFound';
+import XoopsCode from '../common/lib/XoopsCode';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import imageCategory0 from './assets/images/category_0.gif';
 import imageCategory1 from './assets/images/category_1.gif';
 import imageForum0 from './assets/images/forum_0.gif';
 import imageForum1 from './assets/images/forum_1.gif';
+import D3ForumUtils, { type D3ForumCategoryData, type D3ForumForumData } from './lib/D3ForumUtils';
 import ForumJump from './lib/ForumJump';
-import D3ForumUtils, { D3ForumCategoryData, D3ForumForumData } from './lib/D3ForumUtils';
-import XoopsCode from '../common/lib/XoopsCode';
-import PageNotFound from '../common/lib/PageNotFound';
 
 export interface Props {
     lang: MultiLang;
@@ -35,12 +35,18 @@ const D3ForumTopForum = (props: D3ForumTopForumProps) => {
         const title = Functions.mlang(forum.forum_title, lang);
         const url = D3ForumUtils.getForumUrl(name, forum.forum_id);
         const image = forum.forum_posts_count === 0 ? imageForum0 : imageForum1;
-        const latest = forum.forum_last_post_time === 0 ? '' : ', ' + LABEL_LATEST_POST + ': ' + moment(new Date(forum.forum_last_post_time * 1000)).format('Y/M/D H:m');
+        const latest =
+            forum.forum_last_post_time === 0
+                ? ''
+                : `, ${LABEL_LATEST_POST}: ${format(new Date(forum.forum_last_post_time * 1000), 'yyyy/M/d H:m')}`;
         return (
             <li key={forum.forum_id}>
-                <Link to={url} title={title}><img src={image} alt={title} width="16" height="16" /> {title}</Link>
+                <Link to={url} title={title}>
+                    <img src={image} alt={title} width="16" height="16" /> {title}
+                </Link>
                 &nbsp;
-                {LABEL_TOPICS}: {forum.forum_topics_count}, {LABEL_POSTS}: {forum.forum_posts_count}{latest}
+                {LABEL_TOPICS}: {forum.forum_topics_count}, {LABEL_POSTS}: {forum.forum_posts_count}
+                {latest}
             </li>
         );
     });
@@ -50,12 +56,10 @@ const D3ForumTopForum = (props: D3ForumTopForumProps) => {
     return (
         <>
             <h3 className="d3f_head_h3">{LABEL_HEADER_TITLE}</h3>
-            <ul className="d3f_listforums">
-                {forums}
-            </ul>
+            <ul className="d3f_listforums">{forums}</ul>
         </>
     );
-}
+};
 
 const D3ForumTopSubCategory = (props: D3ForumTopSubCategoryProps) => {
     const { lang, name, catId } = props;
@@ -67,12 +71,21 @@ const D3ForumTopSubCategory = (props: D3ForumTopSubCategoryProps) => {
         const title = Functions.mlang(category.cat_title, lang);
         const url = D3ForumUtils.getCategoryUrl(name, category.cat_id);
         const image = category.cat_posts_count === 0 ? imageCategory0 : imageCategory1;
-        const latest = category.cat_last_post_time === 0 ? '' : ', ' + LABEL_LATEST_POST + ': ' + moment(new Date(category.cat_last_post_time * 1000)).format('Y/M/D H:m');
+        const latest =
+            category.cat_last_post_time === 0
+                ? ''
+                : ', ' +
+                  LABEL_LATEST_POST +
+                  ': ' +
+                  format(new Date(category.cat_last_post_time * 1000), 'yyyy/M/d H:m');
         return (
             <li key={category.cat_id}>
-                <Link to={url} title={title}><img src={image} alt={title} width="16" height="16" /> {title}</Link>
-                &nbsp;
-                ({LABEL_TOTAL_TOPICS}: {category.cat_topics_count}, {LABEL_TOTAL_POSTS}: {category.cat_posts_count}{latest})
+                <Link to={url} title={title}>
+                    <img src={image} alt={title} width="16" height="16" /> {title}
+                </Link>
+                &nbsp; ({LABEL_TOTAL_TOPICS}: {category.cat_topics_count}, {LABEL_TOTAL_POSTS}:{' '}
+                {category.cat_posts_count}
+                {latest})
             </li>
         );
     });
@@ -82,12 +95,10 @@ const D3ForumTopSubCategory = (props: D3ForumTopSubCategoryProps) => {
     return (
         <>
             <h3 className="d3f_head_h3">{LABEL_HEADER_TITLE}</h3>
-            <ul className="d3f_subcategories">
-                {subCategories}
-            </ul>
+            <ul className="d3f_subcategories">{subCategories}</ul>
         </>
     );
-}
+};
 
 const D3ForumTopCategory = (props: Props) => {
     const { lang, name } = props;
@@ -98,31 +109,38 @@ const D3ForumTopCategory = (props: Props) => {
         const title = Functions.mlang(category.cat_title, lang);
         const image = category.cat_posts_count === 0 ? imageCategory0 : imageCategory1;
         const url = D3ForumUtils.getCategoryUrl(name, category.cat_id);
-        const latest = category.cat_last_post_time === 0 ? '' : ', ' + LABEL_LATEST_POST + ': ' + moment(new Date(category.cat_last_post_time * 1000)).format('Y/M/D H:m');
+        const latest =
+            category.cat_last_post_time === 0
+                ? ''
+                : ', ' +
+                  LABEL_LATEST_POST +
+                  ': ' +
+                  format(new Date(category.cat_last_post_time * 1000), 'yyyy/M/d H:m');
         return (
             <Fragment key={category.cat_id}>
                 <div className="itemHead">
                     <h2 className="itemTitle">
-                        <Link to={url}><img src={image} alt="" width="16" height="16" /> {title}</Link>
+                        <Link to={url}>
+                            <img src={image} alt="" width="16" height="16" /> {title}
+                        </Link>
                     </h2>
-                    <p>{LABEL_TOTAL_TOPICS}: {category.cat_topics_count},  {LABEL_TOTAL_POSTS}: {category.cat_posts_count}{latest}</p>
+                    <p>
+                        {LABEL_TOTAL_TOPICS}: {category.cat_topics_count}, {LABEL_TOTAL_POSTS}:{' '}
+                        {category.cat_posts_count}
+                        {latest}
+                    </p>
                 </div>
                 <D3ForumTopSubCategory lang={lang} name={name} catId={category.cat_id} />
                 <D3ForumTopForum lang={lang} name={name} catId={category.cat_id} />
-                <div className="d3f_info_ctrl">&nbsp;
-                </div>
+                <div className="d3f_info_ctrl">&nbsp;</div>
             </Fragment>
         );
     });
     if (categories.length === 0) {
         return null;
     }
-    return (
-        <div className="d3f_wrap">
-            {categories}
-        </div>
-    );
-}
+    return <div className="d3f_wrap">{categories}</div>;
+};
 
 const D3ForumTop = (props: Props) => {
     const { lang, name } = props;
@@ -146,16 +164,20 @@ const D3ForumTop = (props: Props) => {
             <D3ForumTopCategory lang={lang} name={name} />
             <div className="d3f_iconexps clearfix">
                 <ul className="d3f_iconexp">
-                    <li><img src={imageForum1} alt="" width="18" height="18" /> = {LABEL_NEW_POSTS}</li>
+                    <li>
+                        <img src={imageForum1} alt="" width="18" height="18" /> = {LABEL_NEW_POSTS}
+                    </li>
                 </ul>
                 <ul className="d3f_iconexp">
-                    <li><img src={imageForum0} alt="" width="18" height="18" /> = {LABEL_NO_NEW_POSTS}</li>
+                    <li>
+                        <img src={imageForum0} alt="" width="18" height="18" /> = {LABEL_NO_NEW_POSTS}
+                    </li>
                 </ul>
             </div>
 
             <ForumJump lang={lang} name={name} forumId={0} />
         </div>
     );
-}
+};
 
 export default D3ForumTop;

src/d3forum/D3ForumTopic.tsx

@@ -1,125 +1,104 @@
-import React, { Component } from 'react';
-import { Helmet } from 'react-helmet';
-import { RouteComponentProps } from 'react-router';
-import { HashLink } from 'react-router-hash-link';
-import Loading from '../common/lib/Loading';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { useLocation, useParams } from 'react-router';
+import HashLink from '../common/lib/HashLink';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
-import D3ForumUtils, { D3ForumCategoryData, D3ForumForumData, D3ForumPostData, D3ForumPostSortOrder, D3ForumTopicData } from './lib/D3ForumUtils';
+import D3ForumUtils, { D3ForumPostSortOrder } from './lib/D3ForumUtils';
 import ForumJump from './lib/ForumJump';
 import Post from './lib/Post';
 import PostsTree from './lib/PostsTree';
 
-interface Params {
-    id?: string;
-}
-
-interface Props extends RouteComponentProps<Params> {
+interface Props {
     lang: MultiLang;
     name: string;
 }
 
-interface State {
-    loading: boolean;
-    name: string;
-    topicId: number;
-    order: D3ForumPostSortOrder;
-}
+const D3ForumTopic = (props: Props) => {
+    const { lang, name } = props;
+    const { search } = useLocation();
+    const { id } = useParams<{ id?: string }>();
+    const topicId = typeof id === 'undefined' ? 0 : Number.parseInt(id, 10);
+    const orderParam = new URLSearchParams(search).get('order');
+    const order =
+        orderParam !== null && orderParam.match(/(0|1|2)/) !== null
+            ? (Number.parseInt(orderParam, 10) as D3ForumPostSortOrder)
+            : D3ForumPostSortOrder.TREE;
 
-class D3ForumTopic extends Component<Props, State> {
-
-    private topic: D3ForumTopicData | null = null;
-    private forum: D3ForumForumData | null = null;
-    private category: D3ForumCategoryData | null = null;
-    private posts: D3ForumPostData[] = [];
-
-    constructor(props: Props) {
-        super(props);
-        const { name } = props;
-        this.state = {
-            loading: true,
-            name: name,
-            topicId: 0,
-            order: D3ForumPostSortOrder.TREE,
-        };
+    const topic = D3ForumUtils.getTopic(name, topicId);
+    const forum = D3ForumUtils.getForum(name, topic === null ? 0 : topic.forum_id);
+    const category = D3ForumUtils.getCategory(name, forum === null ? 0 : forum.cat_id);
+    if (topic === null || forum === null || category === null) {
+        return <PageNotFound lang={lang} />;
     }
+    const posts = D3ForumUtils.getPosts(name, topicId, order);
 
-    static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-        const params = new URLSearchParams(nextProps.location.search);
-        const topicId = typeof nextProps.match.params.id === 'undefined' ? 0 : parseInt(nextProps.match.params.id, 10);
-        const order_ = params.get('order');
-        const order = (order_ !== null && order_.match(/(0|1|2)/)) ? parseInt(order_, 10) as D3ForumPostSortOrder : D3ForumPostSortOrder.TREE;
-        if (nextProps.name !== prevState.name || prevState.topicId !== topicId || prevState.order !== order) {
-            return { loading: true, name: nextProps.name, topicId, order };
-        }
-        return null;
-    }
-
-    componentDidMount() {
-        this.load();
-    }
-
-    componentDidUpdate() {
-        this.load();
-    }
-
-    load() {
-        const { name } = this.props;
-        if (this.state.loading) {
-            this.topic = D3ForumUtils.getTopic(name, this.state.topicId);
-            this.forum = D3ForumUtils.getForum(name, this.topic === null ? 0 : this.topic.forum_id);
-            this.category = D3ForumUtils.getCategory(name, this.forum === null ? 0 : this.forum.cat_id);
-            this.posts = D3ForumUtils.getPosts(name, this.state.topicId, this.state.order);
-            this.setState({ loading: false });
-        }
-    }
-
-    render() {
-        const { lang, name } = this.props;
-        if (this.state.loading) {
-            return <Loading />;
-        }
-        if (this.topic === null || this.forum === null || this.category === null) {
-            return <PageNotFound lang={lang} />;
-        }
-        const orderCtrl = (
-            <div className="clearfix">
-                <div className="d3f_order_ctrl">
-                    {this.state.order !== D3ForumPostSortOrder.TREE && <HashLink to={D3ForumUtils.getTopicUrl(name, this.topic.topic_id, D3ForumPostSortOrder.TREE, null)}>{Functions.mlang('[en]Tree order[/en][ja]ツリー構造順で表示[/ja]', lang)}</HashLink>}
-                    {this.state.order !== D3ForumPostSortOrder.OLD && <HashLink to={D3ForumUtils.getTopicUrl(name, this.topic.topic_id, D3ForumPostSortOrder.OLD, null)}>{Functions.mlang('[en]Older is upper[/en][ja]投稿の古いものから[/ja]', lang)}</HashLink>}
-                    {this.state.order !== D3ForumPostSortOrder.NEW && <HashLink to={D3ForumUtils.getTopicUrl(name, this.topic.topic_id, D3ForumPostSortOrder.NEW, null)}>{Functions.mlang('[en]Newer is upper[/en][ja]投稿の新しいものから[/ja]', lang)}</HashLink>}
-                </div>
+    const orderCtrl = (
+        <div className="clearfix">
+            <div className="d3f_order_ctrl">
+                {order !== D3ForumPostSortOrder.TREE && (
+                    <HashLink to={D3ForumUtils.getTopicUrl(name, topic.topic_id, D3ForumPostSortOrder.TREE, null)}>
+                        {Functions.mlang('[en]Tree order[/en][ja]ツリー構造順で表示[/ja]', lang)}
+                    </HashLink>
+                )}
+                {order !== D3ForumPostSortOrder.OLD && (
+                    <HashLink to={D3ForumUtils.getTopicUrl(name, topic.topic_id, D3ForumPostSortOrder.OLD, null)}>
+                        {Functions.mlang('[en]Older is upper[/en][ja]投稿の古いものから[/ja]', lang)}
+                    </HashLink>
+                )}
+                {order !== D3ForumPostSortOrder.NEW && (
+                    <HashLink to={D3ForumUtils.getTopicUrl(name, topic.topic_id, D3ForumPostSortOrder.NEW, null)}>
+                        {Functions.mlang('[en]Newer is upper[/en][ja]投稿の新しいものから[/ja]', lang)}
+                    </HashLink>
+                )}
             </div>
-        );
-        const title = Functions.mlang(this.topic.topic_title, lang);
-        return (
-            <>
-                <Helmet>
-                    <title>{title} - {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}</title>
-                </Helmet>
-                <div className="d3f_breadcrumbs">
-                    <HashLink to={D3ForumUtils.getIndexUrl(name)}>{Functions.mlang('[en]Top[/en][ja]トップ[/ja]', lang)}</HashLink>
-                    &nbsp;&gt;&nbsp;
-                    <HashLink to={D3ForumUtils.getCategoryUrl(name, this.category.cat_id)}>{Functions.mlang(this.category.cat_title, lang)}</HashLink>
-                    &nbsp;&gt;&nbsp;
-                    <HashLink to={D3ForumUtils.getForumUrl(name, this.forum.forum_id)}>{Functions.mlang(this.forum.forum_title, lang)}</HashLink>
-                </div>
-                <h1 className="d3f_title">{title}</h1>
-                <PostsTree lang={lang} name={name} posts={this.posts} postId={0} />
-                {orderCtrl}
-                <div className="d3f_wrap">
-                    {this.posts.map((post, idx) => {
-                        const prevPostId = idx === 0 ? 0 : this.posts[idx - 1].post_id;
-                        const nextPostId = (idx + 1) === this.posts.length ? 0 : this.posts[idx + 1].post_id;
-                        return <Post key={post.post_id} lang={lang} name={name} post={post} prevPostId={prevPostId} nextPostId={nextPostId} inTopic={true} />;
-                    })}
-                </div>
-                {orderCtrl}
-                <ForumJump lang={lang} name={name} forumId={this.forum.forum_id} />
-            </>
-        );
-    }
-}
+        </div>
+    );
+    const title = Functions.mlang(topic.topic_title, lang);
+    return (
+        <>
+            <Helmet>
+                <title>
+                    {title} - {D3ForumUtils.getTitle(name, lang)} - {Functions.siteTitle(lang)}
+                </title>
+            </Helmet>
+            <div className="d3f_breadcrumbs">
+                <HashLink to={D3ForumUtils.getIndexUrl(name)}>
+                    {Functions.mlang('[en]Top[/en][ja]トップ[/ja]', lang)}
+                </HashLink>
+                &nbsp;&gt;&nbsp;
+                <HashLink to={D3ForumUtils.getCategoryUrl(name, category.cat_id)}>
+                    {Functions.mlang(category.cat_title, lang)}
+                </HashLink>
+                &nbsp;&gt;&nbsp;
+                <HashLink to={D3ForumUtils.getForumUrl(name, forum.forum_id)}>
+                    {Functions.mlang(forum.forum_title, lang)}
+                </HashLink>
+            </div>
+            <h1 className="d3f_title">{title}</h1>
+            <PostsTree lang={lang} name={name} posts={posts} postId={0} />
+            {orderCtrl}
+            <div className="d3f_wrap">
+                {posts.map((post, idx) => {
+                    const prevPostId = idx === 0 ? 0 : posts[idx - 1].post_id;
+                    const nextPostId = idx + 1 === posts.length ? 0 : posts[idx + 1].post_id;
+                    return (
+                        <Post
+                            key={post.post_id}
+                            lang={lang}
+                            name={name}
+                            post={post}
+                            prevPostId={prevPostId}
+                            nextPostId={nextPostId}
+                            inTopic={true}
+                        />
+                    );
+                })}
+            </div>
+            {orderCtrl}
+            <ForumJump lang={lang} name={name} forumId={forum.forum_id} />
+        </>
+    );
+};
 
 export default D3ForumTopic;

src/d3forum/D3ForumXoopsPathRedirect.tsx

@@ -1,65 +1,61 @@
-import React, { Component } from 'react';
-import { Redirect, RouteComponentProps, withRouter } from 'react-router';
+import { Navigate, useLocation } from 'react-router';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
     name: string;
 }
 
-class D3ForumXoopsPathRedirect extends Component<Props> {
-
-    getRedirectUrl(): string {
-        const { name, location } = this.props;
-        const pathname = location.pathname || '';
-        const hash = location.hash || '';
-        const query = new URLSearchParams(location.search);
-        const search = new RegExp(`^/modules/${name}(?:/+(.*))?$`);
-        const matches = pathname.match(search);
-        if (matches === null) {
-            return '';
-        }
-        const path = matches[1] || '';
-        switch (path) {
-            case '':
-            case 'index.php': {
-                const catId = query.get('cat_id');
-                if (catId !== null && catId.match(/^\d+$/) !== null) {
-                    return '/' + name + '/category/' + Functions.escape(catId);
-                }
-                const forumId = query.get('forum_id');
-                if (forumId !== null && forumId.match(/^\d+$/) !== null) {
-                    return '/' + name + '/forum/' + Functions.escape(forumId);
-                }
-                const topicId = query.get('topic_id');
-                if (topicId !== null && topicId.match(/^\d+$/) !== null) {
-                    const matches = hash.match(/^#post_id(\d+)$/);
-                    return '/' + name + '/topic/' + Functions.escape(topicId) + (matches === null ? '' : '#postId' + matches[1]);
-                }
-                const postId = query.get('post_id');
-                if (postId !== null && postId.match(/^\d+$/) !== null) {
-                    return '/' + name + '/post/' + Functions.escape(postId);
-                }
-                const catIds = query.get('cat_ids');
-                if (catIds !== null && catIds.match(/^\d+$/) !== null) {
-                    return '/' + name + '/category/' + Functions.escape(catIds);
-                }
-                return '/' + name + '/';
+const getRedirectUrl = (name: string, location: { pathname: string; search: string; hash: string }): string => {
+    const pathname = location.pathname || '';
+    const hash = location.hash || '';
+    const query = new URLSearchParams(location.search);
+    const search = new RegExp(`^/modules/${name}(?:/+(.*))?$`);
+    const matches = pathname.match(search);
+    if (matches === null) {
+        return '';
+    }
+    const path = matches[1] || '';
+    switch (path) {
+        case '':
+        case 'index.php': {
+            const catId = query.get('cat_id');
+            if (catId !== null && catId.match(/^\d+$/) !== null) {
+                return `/${name}/category/${Functions.escape(catId)}`;
             }
+            const forumId = query.get('forum_id');
+            if (forumId !== null && forumId.match(/^\d+$/) !== null) {
+                return `/${name}/forum/${Functions.escape(forumId)}`;
+            }
+            const topicId = query.get('topic_id');
+            if (topicId !== null && topicId.match(/^\d+$/) !== null) {
+                const postMatches = hash.match(/^#post_id(\d+)$/);
+                return `/${name}/topic/${Functions.escape(topicId)}${postMatches === null ? '' : `#postId${postMatches[1]}`}`;
+            }
+            const postId = query.get('post_id');
+            if (postId !== null && postId.match(/^\d+$/) !== null) {
+                return `/${name}/post/${Functions.escape(postId)}`;
+            }
+            const catIds = query.get('cat_ids');
+            if (catIds !== null && catIds.match(/^\d+$/) !== null) {
+                return `/${name}/category/${Functions.escape(catIds)}`;
+            }
+            return `/${name}/`;
         }
-        return '/' + name + '/' + path;
     }
+    return `/${name}/${path}`;
+};
 
-    render() {
-        const { lang } = this.props;
-        const url = this.getRedirectUrl();
-        if (url === '') {
-            return <PageNotFound lang={lang} />;
-        }
-        return <Redirect to={url} />;
+const D3ForumXoopsPathRedirect = (props: Props) => {
+    const { lang, name } = props;
+    const location = useLocation();
+    const url = getRedirectUrl(name, location);
+    if (url === '') {
+        return <PageNotFound lang={lang} />;
     }
-}
+    return <Navigate to={url} replace />;
+};
 
-export default withRouter(D3ForumXoopsPathRedirect);
+export default D3ForumXoopsPathRedirect;

src/d3forum/assets/d3forum_common.css

@@ -1,31 +1,31 @@
-/*  Page Navigation */
-
-div.boxNavi .itemBody {
-    margin: 1px 2px 5px 2px;
-    text-align: center;
-    list-style-type: none;
-    background-color: transparent;
-}
-div.boxNavi .itemBody li {
-    display: inline;
-    margin: 1px 2px 1px 2px;
-    padding: 5px 0px 5px 0px;
-    font-weight: bold;
-    text-align: center;
-    border-top: 1px solid lightgrey;
-    border-bottom: 1px solid lightgrey;
-    border-left: 1px solid lightgrey;
-    border-right: 1px solid lightgrey;
-    background-image: none;
-}
-
-div.boxNavi .itemBody li.txt span,
-div.boxNavi .itemBody li.this span,
-div.boxNavi .itemBody li a {
-    margin: 0;
-    padding: 5px 7px 5px 10px;
-    text-decoration: none;
-}
-div.boxNavi .itemBody li.this span {
-    background-color: #cccccc;
-}
+/*  Page Navigation */
+
+div.boxNavi .itemBody {
+    margin: 1px 2px 5px 2px;
+    text-align: center;
+    list-style-type: none;
+    background-color: transparent;
+}
+div.boxNavi .itemBody li {
+    display: inline;
+    margin: 1px 2px 1px 2px;
+    padding: 5px 0px 5px 0px;
+    font-weight: bold;
+    text-align: center;
+    border-top: 1px solid lightgrey;
+    border-bottom: 1px solid lightgrey;
+    border-left: 1px solid lightgrey;
+    border-right: 1px solid lightgrey;
+    background-image: none;
+}
+
+div.boxNavi .itemBody li.txt span,
+div.boxNavi .itemBody li.this span,
+div.boxNavi .itemBody li a {
+    margin: 0;
+    padding: 5px 7px 5px 10px;
+    text-decoration: none;
+}
+div.boxNavi .itemBody li.this span {
+    background-color: #cccccc;
+}

src/d3forum/assets/d3forum_main.css

@@ -195,6 +195,13 @@ form.d3f_form p input {
     vertical-align: middle;
 }
 
+/* sanitize.css forms.css leaves form controls transparent; keep them on white. */
+form.d3f_form select,
+form.d3f_form input[type="submit"] {
+    background-color: #ffffff;
+    color: #000000;
+}
+
 /* d3f_ctrl */
 .d3f_ctrl {
     width: 100%;
@@ -356,13 +363,13 @@ table.d3f_table {
 }
 table.d3f_table thead th,
 table.d3f_table td {
-    text-align: center !important;
+    text-align: center;
     padding: 3px;
     vertical-align: middle;
 }
 table.d3f_table td.d3f_topictitle,
 table.d3f_table td.d3f_posters {
-    text-align: left !important;
+    text-align: left;
 }
 table.d3f_table td.d3f_mainicon {
     padding: 0;
@@ -374,7 +381,7 @@ table.d3f_table td img {
 }
 
 table.d3f_table td dl {
-    text-align: left !important;
+    text-align: left;
     margin: 0 -3px;
     padding: 0;
 }
@@ -422,7 +429,7 @@ ul.d3f_iconexp li img {
 /* table.d3f_form_table */
 table.d3f_form_table td,
 table.d3f_form_table th {
-    vertical-align: top !important;
+    vertical-align: top;
     text-align: left;
 }
 

src/d3forum/lib/CategoryJump.tsx

@@ -1,45 +1,59 @@
-import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { MultiLang } from '../../config';
+import { createRef, type ReactElement } from 'react';
+import { useNavigate } from 'react-router';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
-import D3ForumUtils, { D3ForumCategoryData } from './D3ForumUtils';
+import D3ForumUtils, { type D3ForumCategoryData } from './D3ForumUtils';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
     name: string;
     catId: number;
 }
 
-export const CategoryJump = (props: Props) => {
+const CategoryJump = (props: Props) => {
     const { lang, name, catId } = props;
+    const navigate = useNavigate();
     const LABEL_TOP = Functions.mlang('[en]Top[/en][ja]トップ[/ja]', lang);
     const LABE_SUBMIT = Functions.mlang('[en]Jump to a category[/en][ja]カテゴリージャンプ[/ja]', lang);
-    const catSelect = React.createRef<HTMLSelectElement>();
-    const catSelectOptions: JSX.Element[] = [
-        <option key="0" value="0">({LABEL_TOP})</option>
+    const catSelect = createRef<HTMLSelectElement>();
+    const catSelectOptions: ReactElement[] = [
+        <option key="0" value="0">
+            ({LABEL_TOP})
+        </option>,
     ];
     const catSelectLoop = (categories: D3ForumCategoryData[]) => {
         categories.forEach((category) => {
             const title = Functions.mlang(category.cat_title, lang);
-            const depth = category.cat_depth_in_tree !== 0 ? '--'.repeat(category.cat_depth_in_tree) + ' ' : '';
-            catSelectOptions.push(<option key={category.cat_id} value={category.cat_id}>{depth}{title}</option>);
+            const depth = category.cat_depth_in_tree !== 0 ? `${'--'.repeat(category.cat_depth_in_tree)} ` : '';
+            catSelectOptions.push(
+                <option key={category.cat_id} value={category.cat_id}>
+                    {depth}
+                    {title}
+                </option>
+            );
             catSelectLoop(D3ForumUtils.getSubCategories(name, category.cat_id));
         });
     };
     catSelectLoop(D3ForumUtils.getCategories(name));
-    return (<form className="d3f_form" onSubmit={(e) => {
-        e.preventDefault();
-        if (catSelect.current !== null) {
-            const catId = parseInt(catSelect.current.value, 10)
-            const url = catId === 0 ? D3ForumUtils.getIndexUrl(name) : D3ForumUtils.getCategoryUrl(name, catId);
-            props.history.push(url);
-        }
-    }}>
-        <select ref={catSelect} defaultValue={String(catId)}>
-            {catSelectOptions}
-        </select>
-        <input type="submit" value={LABE_SUBMIT} />
-    </form>);
+    return (
+        <form
+            className="d3f_form"
+            onSubmit={(e) => {
+                e.preventDefault();
+                if (catSelect.current !== null) {
+                    const selected = Number.parseInt(catSelect.current.value, 10);
+                    const url =
+                        selected === 0 ? D3ForumUtils.getIndexUrl(name) : D3ForumUtils.getCategoryUrl(name, selected);
+                    navigate(url);
+                }
+            }}
+        >
+            <select ref={catSelect} defaultValue={String(catId)}>
+                {catSelectOptions}
+            </select>
+            <input type="submit" value={LABE_SUBMIT} />
+        </form>
+    );
 };
 
-export default withRouter(CategoryJump);
+export default CategoryJump;

src/d3forum/lib/D3ForumUtils.ts

@@ -1,7 +1,6 @@
 import loki from 'lokijs';
-import { MultiLang } from '../../config';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
-import d3forumJson from '../assets/d3forum.json';
 
 export interface D3ForumModuleData {
     name: string;
@@ -24,10 +23,10 @@ export interface D3ForumCategoryData {
     cat_last_post_time_in_tree: number;
     cat_depth_in_tree: number;
     cat_order_in_tree: number;
-    cat_path_in_tree: any;
+    cat_path_in_tree: Record<string, string>;
     cat_unique_path: string;
     cat_weight: number;
-    cat_options: any;
+    cat_options: unknown[];
 }
 
 export interface D3ForumForumData {
@@ -41,7 +40,7 @@ export interface D3ForumForumData {
     forum_last_post_id: number;
     forum_last_post_time: number;
     forum_weight: number;
-    forum_options: any;
+    forum_options: unknown[];
 }
 
 export interface D3ForumTopicData {
@@ -106,7 +105,7 @@ export interface D3ForumPostData {
     uid_posts: number;
 }
 
-interface D3ForumData {
+export interface D3ForumData {
     module: D3ForumModuleData;
     categories: D3ForumCategoryData[];
     forums: D3ForumForumData[];
@@ -134,7 +133,7 @@ const categorySort = (a: D3ForumCategoryData, b: D3ForumCategoryData) => {
         return -1;
     }
     return 0;
-}
+};
 
 const forumSort = (a: D3ForumForumData, b: D3ForumForumData) => {
     if (a.forum_weight > b.forum_weight) {
@@ -148,11 +147,14 @@ const forumSort = (a: D3ForumForumData, b: D3ForumForumData) => {
         return -1;
     }
     return 0;
+};
+
+export enum D3ForumPostSortOrder {
+    TREE,
+    OLD,
+    NEW,
 }
-
-export enum D3ForumPostSortOrder { TREE, OLD, NEW }
 class D3ForumPostSorter {
-
     private order: D3ForumPostSortOrder;
 
     constructor(order: D3ForumPostSortOrder) {
@@ -192,22 +194,24 @@ class D3ForumPostSorter {
 }
 
 class D3ForumUtils {
-
     private database: loki;
     private modules: Map<string, D3ForumLokiData>;
 
-    constructor(json: D3ForumData[]) {
+    constructor() {
         this.database = new loki('d3forum');
         this.modules = new Map<string, D3ForumLokiData>();
+    }
+
+    init(json: D3ForumData[]): void {
         json.forEach((data) => {
             const name = data.module.dirname;
             const d3forum = {
                 module: data.module,
-                categories: this.database.addCollection<D3ForumCategoryData>(name + '_categories'),
-                forums: this.database.addCollection<D3ForumForumData>(name + '_forums'),
-                topics: this.database.addCollection<D3ForumTopicData>(name + '_topics'),
-                posts: this.database.addCollection<D3ForumPostData>(name + '_posts'),
-            }
+                categories: this.database.addCollection<D3ForumCategoryData>(`${name}_categories`),
+                forums: this.database.addCollection<D3ForumForumData>(`${name}_forums`),
+                topics: this.database.addCollection<D3ForumTopicData>(`${name}_topics`),
+                posts: this.database.addCollection<D3ForumPostData>(`${name}_posts`),
+            };
             data.categories.forEach((category) => {
                 d3forum.categories.insert(category);
             });
@@ -233,15 +237,15 @@ class D3ForumUtils {
     }
 
     getIndexUrl(name: string): string {
-        return '/' + name;
+        return `/${name}`;
     }
 
     getCategoryUrl(name: string, catId: number): string {
-        return this.getIndexUrl(name) + '/category/' + catId;
+        return `${this.getIndexUrl(name)}/category/${catId}`;
     }
 
     getForumUrl(name: string, forumId: number): string {
-        return this.getIndexUrl(name) + '/forum/' + forumId;
+        return `${this.getIndexUrl(name)}/forum/${forumId}`;
     }
 
     getTopicUrl(name: string, topicId: number, order: D3ForumPostSortOrder, postId: number | null): string {
@@ -250,11 +254,17 @@ class D3ForumUtils {
             params.set('order', String(order));
         }
         const paramString = params.toString();
-        return this.getIndexUrl(name) + '/topic/' + topicId + (paramString !== '' ? '?' + paramString : '') + (postId !== null ? '#postId' + postId : '');
+        return (
+            this.getIndexUrl(name) +
+            '/topic/' +
+            topicId +
+            (paramString !== '' ? `?${paramString}` : '') +
+            (postId !== null ? `#postId${postId}` : '')
+        );
     }
 
     getPostUrl(name: string, postId: number): string {
-        return this.getIndexUrl(name) + '/post/' + postId;
+        return `${this.getIndexUrl(name)}/post/${postId}`;
     }
 
     getTotalTopics(name: string): number {
@@ -273,7 +283,7 @@ class D3ForumUtils {
         return d3forum.posts.count();
     }
 
-    getModule(name: string): D3ForumModuleData | null{
+    getModule(name: string): D3ForumModuleData | null {
         const d3forum = this.modules.get(name);
         if (typeof d3forum === 'undefined') {
             return null;
@@ -291,7 +301,7 @@ class D3ForumUtils {
             return [];
         }
         const filter = {
-            'pid': parentCatId
+            pid: parentCatId,
         };
         const result = d3forum.categories.chain().find(filter).sort(categorySort).data();
         return result;
@@ -303,7 +313,7 @@ class D3ForumUtils {
             return null;
         }
         const filter = {
-            'cat_id': catId
+            cat_id: catId,
         };
         const result = d3forum.categories.findOne(filter);
         return result;
@@ -315,7 +325,7 @@ class D3ForumUtils {
             return [];
         }
         const filter = {
-            'cat_id': catId
+            cat_id: catId,
         };
         const result = d3forum.forums.chain().find(filter).sort(forumSort).data();
         return result;
@@ -327,7 +337,7 @@ class D3ForumUtils {
             return null;
         }
         const filter = {
-            'forum_id': forumId
+            forum_id: forumId,
         };
         const result = d3forum.forums.findOne(filter);
         return result;
@@ -339,7 +349,7 @@ class D3ForumUtils {
             return [];
         }
         const filter = {
-            'forum_id': forumId
+            forum_id: forumId,
         };
         const result = d3forum.topics.find(filter);
         return result;
@@ -351,7 +361,7 @@ class D3ForumUtils {
             return null;
         }
         const filter = {
-            'topic_id': topicId
+            topic_id: topicId,
         };
         const result = d3forum.topics.findOne(filter);
         return result;
@@ -363,7 +373,7 @@ class D3ForumUtils {
             return [];
         }
         const filter = {
-            'topic_id': topicId
+            topic_id: topicId,
         };
         const sorter = new D3ForumPostSorter(order);
         const result = d3forum.posts.chain().find(filter).sort(sorter.sort).data();
@@ -376,7 +386,7 @@ class D3ForumUtils {
             return [];
         }
         const filter = {
-            'pid': parentPostId
+            pid: parentPostId,
         };
         const sorter = new D3ForumPostSorter(D3ForumPostSortOrder.TREE);
         const result = d3forum.posts.chain().find(filter).sort(sorter.sort).data();
@@ -389,11 +399,11 @@ class D3ForumUtils {
             return null;
         }
         const filter = {
-            'post_id': postId
+            post_id: postId,
         };
         const result = d3forum.posts.findOne(filter);
         return result;
     }
 }
 
-export default new D3ForumUtils(d3forumJson);
+export default new D3ForumUtils();

src/d3forum/lib/ForumJump.tsx

@@ -1,39 +1,47 @@
-import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { MultiLang } from '../../config';
+import { createRef, type ReactElement } from 'react';
+import { useNavigate } from 'react-router';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
-import D3ForumUtils, { D3ForumCategoryData, D3ForumForumData } from './D3ForumUtils';
+import D3ForumUtils, { type D3ForumCategoryData, type D3ForumForumData } from './D3ForumUtils';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
     name: string;
     forumId: number;
 }
 
-export const ForumJump = (props: Props) => {
+const ForumJump = (props: Props) => {
     const { lang, name, forumId } = props;
+    const navigate = useNavigate();
     const LABE_SUBMIT = Functions.mlang('[en]Jump to a forum[/en][ja]フォーラムジャンプ[/ja]', lang);
-    const forumSelect = React.createRef<HTMLSelectElement>();
-    const forumSelectOptions: JSX.Element[] = [];
+    const forumSelect = createRef<HTMLSelectElement>();
+    const forumSelectOptions: ReactElement[] = [];
     const forumSelectLoop = (categories: D3ForumCategoryData[]) => {
         categories.forEach((category) => {
             D3ForumUtils.getForums(name, category.cat_id).forEach((forum: D3ForumForumData) => {
-                const title = Functions.mlang(category.cat_title + ' - ' + forum.forum_title, lang);
-                const depth = category.cat_depth_in_tree !== 0 ? '--'.repeat(category.cat_depth_in_tree) + ' ' : '';
-                forumSelectOptions.push(<option key={forum.forum_id} value={forum.forum_id}>{depth}{title}</option>);
+                const title = Functions.mlang(`${category.cat_title} - ${forum.forum_title}`, lang);
+                const depth = category.cat_depth_in_tree !== 0 ? `${'--'.repeat(category.cat_depth_in_tree)} ` : '';
+                forumSelectOptions.push(
+                    <option key={forum.forum_id} value={forum.forum_id}>
+                        {depth}
+                        {title}
+                    </option>
+                );
             });
             forumSelectLoop(D3ForumUtils.getSubCategories(name, category.cat_id));
         });
     };
     forumSelectLoop(D3ForumUtils.getCategories(name));
     return (
-        <form className="d3f_form" onSubmit={(e) => {
-            e.preventDefault();
-            if (forumSelect.current !== null) {
-                const url = D3ForumUtils.getForumUrl(name, parseInt(forumSelect.current.value, 10));
-                props.history.push(url);
-            }
-        }}>
+        <form
+            className="d3f_form"
+            onSubmit={(e) => {
+                e.preventDefault();
+                if (forumSelect.current !== null) {
+                    navigate(D3ForumUtils.getForumUrl(name, Number.parseInt(forumSelect.current.value, 10)));
+                }
+            }}
+        >
             <select ref={forumSelect} defaultValue={String(forumId)}>
                 {forumSelectOptions}
             </select>
@@ -42,4 +50,4 @@ export const ForumJump = (props: Props) => {
     );
 };
 
-export default withRouter(ForumJump);
+export default ForumJump;

src/d3forum/lib/Post.tsx

@@ -1,12 +1,12 @@
-import moment from 'moment';
-import React, { Fragment } from 'react';
-import { HashLink } from 'react-router-hash-link';
+import { format } from 'date-fns';
+import { Fragment } from 'react';
 import noAvatarImage from '../../common/assets/images/no_avatar.gif';
+import HashLink from '../../common/lib/HashLink';
 import UserRankStarImage from '../../common/lib/UserRankStarImage';
 import XoopsCode from '../../common/lib/XoopsCode';
-import { MultiLang } from '../../config';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
-import D3ForumUtils, { D3ForumPostData } from './D3ForumUtils';
+import D3ForumUtils, { type D3ForumPostData } from './D3ForumUtils';
 import PostIcon from './PostIcon';
 
 interface Props {
@@ -19,14 +19,18 @@ interface Props {
 }
 
 const postUrl = (name: string, postId: number, inTopic: boolean) => {
-    return inTopic ? '#postId' + postId : D3ForumUtils.getPostUrl(name, postId);
-}
+    return inTopic ? `#postId${postId}` : D3ForumUtils.getPostUrl(name, postId);
+};
 
 const Post = (props: Props) => {
     const { lang, name, post, nextPostId, prevPostId, inTopic } = props;
-    const depth = String(post.depth_in_tree * 5) + '%';
-    const url = D3ForumUtils.getPostUrl(name, post.post_id)
-    const subject = <><PostIcon lang={lang} post={post} /> {Functions.mlang(post.subject, lang)}</>;
+    const depth = `${String(post.depth_in_tree * 5)}%`;
+    const url = D3ForumUtils.getPostUrl(name, post.post_id);
+    const subject = (
+        <>
+            <PostIcon lang={lang} post={post} /> {Functions.mlang(post.subject, lang)}
+        </>
+    );
     const children = D3ForumUtils.getChildPosts(name, post.post_id);
     const LABEL_PARENT = Functions.mlang('[en]Parent[/en][ja]親投稿[/ja]', lang);
     const LABEL_PREV = Functions.mlang('[en]Previous post[/en][ja]前の投稿[/ja]', lang);
@@ -38,7 +42,13 @@ const Post = (props: Props) => {
             <div className="itemHead">
                 <img className="d3f_avatar" src={noAvatarImage} alt={post.uid_uname} />
                 <h2 className=" itemTitle">
-                    {inTopic ? <HashLink id={'postId' + post.post_id} to={url}>{subject}</HashLink> : subject}
+                    {inTopic ? (
+                        <HashLink id={`postId${post.post_id}`} to={url}>
+                            {subject}
+                        </HashLink>
+                    ) : (
+                        subject
+                    )}
                 </h2>
                 <span className="d3f_msgnum">msg# {post.unique_path.substring(1)}</span>
             </div>
@@ -48,27 +58,45 @@ const Post = (props: Props) => {
                     <dd>{post.depth_in_tree}</dd>
                 </dl>
                 <div className="d3f_info_val">
-                    {prevPostId === 0 ? LABEL_PREV : <HashLink to={postUrl(name, prevPostId, inTopic)}>{LABEL_PREV}</HashLink>}
+                    {prevPostId === 0 ? (
+                        LABEL_PREV
+                    ) : (
+                        <HashLink to={postUrl(name, prevPostId, inTopic)}>{LABEL_PREV}</HashLink>
+                    )}
                     &nbsp;-&nbsp;
-                    {nextPostId === 0 ? LABEL_NEXT : <HashLink to={postUrl(name, nextPostId, inTopic)}>{LABEL_NEXT}</HashLink>}
+                    {nextPostId === 0 ? (
+                        LABEL_NEXT
+                    ) : (
+                        <HashLink to={postUrl(name, nextPostId, inTopic)}>{LABEL_NEXT}</HashLink>
+                    )}
                     &nbsp;|&nbsp;
-                    {post.pid === 0 ? LABEL_PARENT : <HashLink to={postUrl(name, post.pid, inTopic)}>{LABEL_PARENT}</HashLink>}
+                    {post.pid === 0 ? (
+                        LABEL_PARENT
+                    ) : (
+                        <HashLink to={postUrl(name, post.pid, inTopic)}>{LABEL_PARENT}</HashLink>
+                    )}
                     &nbsp;-&nbsp;
-                    {children.length === 0 ? LABEL_NO_CHILD : children.map((child: D3ForumPostData, idx: number) => {
-                        const label = (idx === 0 ? LABEL_CHILD : '') + child.unique_path.substr(post.unique_path.length);
-                        return (
-                            <Fragment key={child.post_id}>
-                                {idx > 0 && ' '}
-                                <HashLink to={postUrl(name, child.post_id, inTopic)}>{label}</HashLink>
-                            </Fragment>
-                        );
-                    })}
+                    {children.length === 0
+                        ? LABEL_NO_CHILD
+                        : children.map((child: D3ForumPostData, idx: number) => {
+                              const label =
+                                  (idx === 0 ? LABEL_CHILD : '') + child.unique_path.substr(post.unique_path.length);
+                              return (
+                                  <Fragment key={child.post_id}>
+                                      {idx > 0 && ' '}
+                                      <HashLink to={postUrl(name, child.post_id, inTopic)}>{label}</HashLink>
+                                  </Fragment>
+                              );
+                          })}
                     &nbsp;|&nbsp;
-                    {Functions.mlang('[en]Posted on[/en][ja]投稿日時[/ja]', lang)} {moment(new Date(post.post_time * 1000)).format('YYYY/M/D H:m')}
+                    {Functions.mlang('[en]Posted on[/en][ja]投稿日時[/ja]', lang)}{' '}
+                    {format(new Date(post.post_time * 1000), 'yyyy/M/d H:m')}
                 </div>
             </div>
             <div className="itemInfo" style={{ textAlign: 'left' }}>
-                {post.uid === 0 ? Functions.mlang(post.guest_name, lang) :
+                {post.uid === 0 ? (
+                    Functions.mlang(post.guest_name, lang)
+                ) : (
                     <>
                         {post.uid_uname}
                         &nbsp;
@@ -76,20 +104,28 @@ const Post = (props: Props) => {
                         &nbsp;
                         {Functions.mlang('[en]Posts[/en][ja]投稿数[/ja]', lang)}: {post.uid_posts}
                     </>
-                }
+                )}
             </div>
             <div className="d3f_body">
-                <XoopsCode lang={lang} text={post.post_text} dohtml={post.html === 1} dosmiley={post.smiley === 1} doxcode={post.xcode === 1} dobr={post.br === 1} />
+                <XoopsCode
+                    lang={lang}
+                    text={post.post_text}
+                    dohtml={post.html === 1}
+                    dosmiley={post.smiley === 1}
+                    doxcode={post.xcode === 1}
+                    dobr={post.br === 1}
+                />
             </div>
             <div className="itemFoot">
                 <span className="d3f_vote">
                     {Functions.mlang('[en]Votes[/en][ja]投票数[/ja]', lang)}:{post.votes_count}
                     &nbsp;&nbsp;
-                    {Functions.mlang('[en]Average[/en][ja]平均点[/ja]', lang)}:{(post.votes_count === 0 ? 0 : post.votes_sum / post.votes_count).toFixed(2)}
+                    {Functions.mlang('[en]Average[/en][ja]平均点[/ja]', lang)}:
+                    {(post.votes_count === 0 ? 0 : post.votes_sum / post.votes_count).toFixed(2)}
                 </span>
             </div>
         </>
     );
-}
+};
 
-export default Post;
+export default Post;

src/d3forum/lib/PostIcon.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MultiLang } from '../../config';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
 import imagePost0 from '../assets/images/posticon0.gif';
 import imagePost1 from '../assets/images/posticon1.gif';
@@ -9,7 +8,7 @@ import imagePost4 from '../assets/images/posticon4.gif';
 import imagePost5 from '../assets/images/posticon5.gif';
 import imagePost6 from '../assets/images/posticon6.gif';
 import imagePost7 from '../assets/images/posticon7.gif';
-import { D3ForumPostData } from './D3ForumUtils';
+import type { D3ForumPostData } from './D3ForumUtils';
 
 interface Props {
     lang: MultiLang;
@@ -18,7 +17,16 @@ interface Props {
 }
 
 const postIcons = [imagePost0, imagePost1, imagePost2, imagePost3, imagePost4, imagePost5, imagePost6, imagePost7];
-const postIconMeanings = ['[en]none[/en][ja]なし[/ja]', '[en]normal[/en][ja]通常[/ja]', '[en]unhappy[/en][ja]不満[/ja]', '[en]happy[/en][ja]満足[/ja]', '[en]lower it[/en][ja]下げ[/ja]', '[en]raise it[/en][ja]上げ[/ja]', '[en]report[/en][ja]報告[/ja]', '[en]question[/en][ja]質問[/ja]'];
+const postIconMeanings = [
+    '[en]none[/en][ja]なし[/ja]',
+    '[en]normal[/en][ja]通常[/ja]',
+    '[en]unhappy[/en][ja]不満[/ja]',
+    '[en]happy[/en][ja]満足[/ja]',
+    '[en]lower it[/en][ja]下げ[/ja]',
+    '[en]raise it[/en][ja]上げ[/ja]',
+    '[en]report[/en][ja]報告[/ja]',
+    '[en]question[/en][ja]質問[/ja]',
+];
 
 const PostIcon = (props: Props) => {
     const { lang, post, title } = props;
@@ -27,6 +35,6 @@ const PostIcon = (props: Props) => {
     const meaning = Functions.mlang(postIconMeanings[num], lang);
     const title_ = typeof title === 'undefined' ? meaning : title;
     return <img src={icon} alt={meaning} title={title_} />;
-}
+};
 
 export default PostIcon;

src/d3forum/lib/PostsTree.tsx

@@ -1,9 +1,8 @@
-import moment from 'moment';
-import React from 'react';
-import { HashLink } from 'react-router-hash-link';
-import { MultiLang } from '../../config';
+import { format } from 'date-fns';
+import HashLink from '../../common/lib/HashLink';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
-import D3ForumUtils, { D3ForumPostData } from './D3ForumUtils';
+import D3ForumUtils, { type D3ForumPostData } from './D3ForumUtils';
 import PostIcon from './PostIcon';
 
 interface Props {
@@ -14,8 +13,8 @@ interface Props {
 }
 
 const postUrl = (name: string, postId: number, inTopic: boolean) => {
-    return inTopic ? '#postId' + postId : D3ForumUtils.getPostUrl(name, postId);
-}
+    return inTopic ? `#postId${postId}` : D3ForumUtils.getPostUrl(name, postId);
+};
 
 const PostsTree = (props: Props) => {
     const { lang, name, posts, postId } = props;
@@ -26,17 +25,25 @@ const PostsTree = (props: Props) => {
             <ul className="d3f_eachbranch">
                 {posts.map((post) => {
                     const style = {
-                        paddingLeft: String(post.depth_in_tree * 10) + 'px',
-                    }
-                    const className = post.post_id === postId ? 'd3f_eachbranchitem d3f_currenttopic' : 'd3f_eachbranchitem';
-                    const subject = <><PostIcon lang={lang} post={post} /> {Functions.mlang(post.subject, lang)}</>;
+                        paddingLeft: `${String(post.depth_in_tree * 10)}px`,
+                    };
+                    const className =
+                        post.post_id === postId ? 'd3f_eachbranchitem d3f_currenttopic' : 'd3f_eachbranchitem';
+                    const subject = (
+                        <>
+                            <PostIcon lang={lang} post={post} /> {Functions.mlang(post.subject, lang)}
+                        </>
+                    );
                     return (
                         <li key={post.post_id} className={className}>
                             <span style={style}>
-                                {post.post_id === postId ? subject : <HashLink to={postUrl(name, post.post_id, inTopic)}>{subject}</HashLink>}
-                                &nbsp;
-                                ({post.uid !== 0 ? post.uid_uname : post.guest_name}, {moment(new Date(post.post_time * 1000)).format('YYYY/M/D H:mm')})
-                                &nbsp;
+                                {post.post_id === postId ? (
+                                    subject
+                                ) : (
+                                    <HashLink to={postUrl(name, post.post_id, inTopic)}>{subject}</HashLink>
+                                )}
+                                &nbsp; ({post.uid !== 0 ? post.uid_uname : post.guest_name},{' '}
+                                {format(new Date(post.post_time * 1000), 'yyyy/M/d H:mm')}) &nbsp;
                             </span>
                         </li>
                     );
@@ -44,6 +51,6 @@ const PostsTree = (props: Props) => {
             </ul>
         </div>
     );
-}
+};
 
-export default PostsTree;
+export default PostsTree;

src/database/Database.module.css

@@ -68,3 +68,14 @@
 .database :global(.advancedSearch .fieldDate input) {
     margin: 0 5px 0 0;
 }
+
+/* sanitize.css forms.css leaves form controls transparent; keep them on white. */
+.database :global(.formButton),
+.database :global(.fieldInputText),
+.database :global(.fieldSelect),
+.database :global(.fieldDate select),
+.database :global(.fieldDate input),
+.database :global(.listTable select) {
+    background-color: #ffffff;
+    color: #000000;
+}

src/database/Database.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { Route, Routes } from 'react-router';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import styles from './Database.module.css';
 import DatabaseAdvancedSearch from './DatabaseAdvancedSearch';
@@ -22,23 +21,28 @@ const Database = (props: Props) => {
     return (
         <div className={styles.database}>
             <Helmet>
-                <title>{Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}</title>
+                <title>
+                    {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}
+                </title>
             </Helmet>
-            <Switch>
-                <Route exact path="/database" render={(props: RouteComponentProps) => <DatabaseTop 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) => <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 }>) => <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>
+            <Routes>
+                <Route index element={<DatabaseTop lang={lang} />} />
+                <Route path="item/:id" element={<DatabaseDetailItem lang={lang} />} />
+                <Route path="item/id/:doi" element={<DatabaseDetailItem lang={lang} />} />
+                <Route path="advanced" element={<DatabaseAdvancedSearch lang={lang} />} />
+                <Route path="list" element={<DatabaseSearchByIndexId lang={lang} />} />
+                <Route path="list/:id" element={<DatabaseSearchByIndexId lang={lang} />} />
+                <Route path="search" element={<DatabaseSearchByKeyword lang={lang} />} />
+                <Route path="search/advanced" element={<DatabaseSearchByAdvancedKeyword lang={lang} />} />
+                <Route path="search/itemtype/:itemType" element={<DatabaseSearchByItemType lang={lang} />} />
+                <Route
+                    path="search/itemtype/:itemType/:subItemType"
+                    element={<DatabaseSearchByItemType lang={lang} />}
+                />
+                <Route path="*" element={<PageNotFound lang={lang} />} />
+            </Routes>
         </div>
     );
-}
+};
 
-export default Database;
+export default Database;

src/database/DatabaseAdvancedSearch.tsx

@@ -1,48 +1,45 @@
-import React, { Component } from 'react';
-import { RouteComponentProps } from 'react-router';
-import Config, { MultiLang } from '../config';
+import { useState } from 'react';
+import { useNavigate } from 'react-router';
+import Config, { type MultiLang } from '../config';
 import Functions from '../functions';
 import ItemType from './item-type';
 import AdvancedSearchQuery from './lib/AdvancedSearchQuery';
 import ItemUtil from './lib/ItemUtil';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
 }
 
-class DatabaseAdvancedSearch extends Component<Props> {
+const DatabaseAdvancedSearch = (props: Props) => {
+    const { lang } = props;
+    const navigate = useNavigate();
+    // The child fields mutate this instance directly, so it must survive re-renders.
+    const [query] = useState(() => new AdvancedSearchQuery());
 
-    private query: AdvancedSearchQuery = new AdvancedSearchQuery();
-
-    constructor(props: Props) {
-        super(props);
-        this.handleClickSearchButton = this.handleClickSearchButton.bind(this);
-    }
-
-    handleClickSearchButton() {
-        if (!this.query.empty()) {
-            const url = ItemUtil.getSearchByAdvancedKeywordsUrl(this.query);
-            this.props.history.push(url);
+    const handleClickSearchButton = () => {
+        if (!query.empty()) {
+            void navigate(ItemUtil.getSearchByAdvancedKeywordsUrl(query));
         }
-    }
+    };
 
-    render() {
-        const { lang } = this.props;
-        return (
-            <div className="advancedSearch">
-                <h3>{Functions.mlang('[en]Search Items[/en][ja]アイテム検索[/ja]', lang)}</h3>
-                <div className="search">
-                    <button className="formButton" onClick={this.handleClickSearchButton}>Search</button>
-                </div>
-                {Config.XOONIPS_ITEMTYPES.map((type) => {
-                    return <ItemType.AdvancedSearch key={type} type={'xnp' + type} lang={lang} query={this.query} />;
-                })}
-                <div className="search">
-                    <button className="formButton" onClick={this.handleClickSearchButton}>Search</button>
-                </div>
+    return (
+        <div className="advancedSearch">
+            <h3>{Functions.mlang('[en]Search Items[/en][ja]アイテム検索[/ja]', lang)}</h3>
+            <div className="search">
+                <button type="button" className="formButton" onClick={handleClickSearchButton}>
+                    Search
+                </button>
             </div>
-        );
-    }
-}
+            {Config.XOONIPS_ITEMTYPES.map((type) => {
+                return <ItemType.AdvancedSearch key={type} type={`xnp${type}`} lang={lang} query={query} />;
+            })}
+            <div className="search">
+                <button type="button" className="formButton" onClick={handleClickSearchButton}>
+                    Search
+                </button>
+            </div>
+        </div>
+    );
+};
 
-export default DatabaseAdvancedSearch;
+export default DatabaseAdvancedSearch;

src/database/DatabaseDetailItem.tsx

@@ -1,89 +1,64 @@
-import React, { Component } from 'react';
-import { Helmet } from 'react-helmet';
-import { RouteComponentProps } from 'react-router';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router';
 import Loading from '../common/lib/Loading';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import ItemType from './item-type';
-import ItemUtil, { Item } from './lib/ItemUtil';
+import ItemUtil, { type Item } from './lib/ItemUtil';
 
-interface Params {
-    id?: string;
-    doi?: string;
-}
-
-interface Props extends RouteComponentProps<Params> {
+interface Props {
     lang: MultiLang;
 }
 
-interface State {
-    loading: boolean;
-    item: Item | null;
-}
+const DatabaseDetailItem = (props: Props) => {
+    const { lang } = props;
+    const params = useParams<{ id?: string; doi?: string }>();
+    const id = typeof params.id !== 'undefined' ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : 0;
+    const doi = params.doi ?? '';
+    const [loading, setLoading] = useState(true);
+    const [item, setItem] = useState<Item | null>(null);
 
-class DatabaseDetailItem extends Component<Props, State> {
-
-    private id: number;
-    private doi: string;
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            loading: true,
-            item: null,
+    useEffect(() => {
+        let active = true;
+        const receive = (found: Item | null) => {
+            if (active) {
+                setItem(found);
+                setLoading(false);
+            }
         };
-        const { params } = this.props.match;
-        this.id = typeof params.id !== 'undefined' ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : 0;
-        this.doi = typeof params.doi !== 'undefined' ? params.doi : '';
-    }
-
-    componentDidMount() {
-        this.updateItem();
-    }
-
-    componentDidUpdate() {
-        const { params } = this.props.match;
-        const id = typeof params.id !== 'undefined' ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : 0;
-        const doi = typeof params.doi !== 'undefined' ? params.doi : '';
-        if (this.id !== id || this.doi !== doi) {
-            this.id = id;
-            this.doi = doi;
-            this.updateItem();
+        if (doi !== '') {
+            ItemUtil.getByDoi(doi, receive);
+        } else if (id !== 0) {
+            ItemUtil.get(id, receive);
+        } else {
+            receive(null);
         }
-    }
+        return () => {
+            active = false;
+        };
+    }, [id, doi]);
 
-    updateItem() {
-        if (this.doi !== '') {
-            ItemUtil.getByDoi(this.doi, (item) => {
-                this.setState({ loading: false, item });
-            });
-        } else if (this.id !== 0) {
-            ItemUtil.get(this.id, (item) => {
-                this.setState({ loading: false, item });
-            });
-        }
+    if (loading) {
+        return <Loading />;
     }
-
-    render() {
-        const { lang } = this.props;
-        if (this.state.loading) {
-            return <Loading />;
-        }
-        if (this.state.item === null) {
-            return <PageNotFound lang={lang} />;
-        }
-        return (
-            <>
-                <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]Item Detail[/en][ja]アイテム詳細[/ja]', lang)}</h3>
-                <br />
-                <ItemType.Detail lang={lang} item={this.state.item} />
-            </>
-        );
+    if (item === null) {
+        return <PageNotFound lang={lang} />;
     }
-}
+    return (
+        <>
+            <Helmet>
+                <title>
+                    {Functions.mlang(item.title, lang)} -{' '}
+                    {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}
+                </title>
+            </Helmet>
+            <h3>{Functions.mlang('[en]Item Detail[/en][ja]アイテム詳細[/ja]', lang)}</h3>
+            <br />
+            <ItemType.Detail lang={lang} item={item} />
+        </>
+    );
+};
 
-export default DatabaseDetailItem;
+export default DatabaseDetailItem;

src/database/DatabaseSearchByAdvancedKeyword.tsx

@@ -1,56 +1,31 @@
-import React, { Component } from 'react';
-import { RouteComponentProps } from 'react-router';
-import { MultiLang } from '../config';
-import AdvancedSearchQuery from './lib/AdvancedSearchQuery';
+import { useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router';
+import type { MultiLang } from '../config';
 import DatabaseListItem from './lib/DatabaseListItem';
-import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
+import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';
 
-interface Props extends RouteComponentProps {
-    lang: MultiLang
+interface Props {
+    lang: MultiLang;
 }
 
-interface State {
-    search: string;
-    query: AdvancedSearchQuery;
-}
+const DatabaseSearchByAdvancedKeyword = (props: Props) => {
+    const { lang } = props;
+    const location = useLocation();
+    const query = useMemo(() => ItemUtil.getAdvancedSearchQueryByQuery(location.search), [location.search]);
 
-class DatabaseSearchByAdvancedKeyword extends Component<Props, State> {
+    const searchFunc = useCallback(
+        (condition: SortCondition, func: SearchCallbackFunc) => {
+            ItemUtil.getListByAdvancedSearchQuery(query, condition, func);
+        },
+        [query]
+    );
 
-    constructor(props: Props) {
-        super(props);
-        const search = props.location.search;
-        const query = ItemUtil.getAdvancedSearchQueryByQuery(search);
-        this.state = { search, query };
-        this.searchFunc = this.searchFunc.bind(this);
-    }
-
-    static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-        const search = nextProps.location.search;
-        if (prevState.search !== search) {
-            const query = ItemUtil.getAdvancedSearchQueryByQuery(search);
-            return { search, query };
-        }
-        return null;
-    }
-
-    getUrl() {
-        return ItemUtil.getSearchByAdvancedKeywordsUrl(this.state.query);
-    }
-
-    searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
-        ItemUtil.getListByAdvancedSearchQuery(this.state.query, condition, func);
-    }
-
-    render() {
-        const { lang } = this.props;
-        const baseUrl = this.getUrl();
-        return (
-            <div className="list">
-                <h3>Listing item</h3>
-                <DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
-            </div>
-        );
-    }
-}
+    return (
+        <div className="list">
+            <h3>Listing item</h3>
+            <DatabaseListItem lang={lang} url={ItemUtil.getSearchByAdvancedKeywordsUrl(query)} search={searchFunc} />
+        </div>
+    );
+};
 
 export default DatabaseSearchByAdvancedKeyword;

src/database/DatabaseSearchByIndexId.tsx

@@ -1,89 +1,60 @@
-import React, { Component, Fragment } from 'react';
-import { Helmet } from 'react-helmet';
-import { RouteComponentProps } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Helmet } from '@dr.pogodin/react-helmet';
+import { Fragment, useCallback } from 'react';
+import { Link, useParams } from 'react-router';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import DatabaseListIndex from './lib/DatabaseListIndex';
 import DatabaseListItem from './lib/DatabaseListItem';
-import IndexUtil, { Index, INDEX_ID_PUBLIC } from './lib/IndexUtil';
-import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
+import IndexUtil, { INDEX_ID_PUBLIC, type Index } from './lib/IndexUtil';
+import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';
 
-interface Params {
-    id?: string;
-}
-
-export interface Props extends RouteComponentProps<Params> {
+export interface Props {
     lang: MultiLang;
 }
 
-interface State {
-    indexId: number;
-}
+const DatabaseSearchByIndexId = (props: Props) => {
+    const { lang } = props;
+    const { id } = useParams<{ id?: string }>();
+    const indexId = id ? (id.match(/^\d+$/) !== null ? parseInt(id, 10) : 0) : INDEX_ID_PUBLIC;
 
-class DatabaseSearchByIndexId extends Component<Props, State> {
+    const searchFunc = useCallback(
+        (condition: SortCondition, func: SearchCallbackFunc) => {
+            if (indexId === 0) {
+                func({ total: 0, data: [] });
+            } else {
+                ItemUtil.getListByIndexId(indexId, condition, func);
+            }
+        },
+        [indexId]
+    );
 
-    constructor(props: Props) {
-        super(props);
-        const { params } = props.match;
-        this.state = {
-            indexId: params.id ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : INDEX_ID_PUBLIC,
-        }
-        this.searchFunc = this.searchFunc.bind(this);
+    const index = IndexUtil.get(indexId);
+    if (index === null) {
+        return <PageNotFound lang={lang} />;
     }
-
-    static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-        const { params } = nextProps.match;
-        const indexId = params.id ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : INDEX_ID_PUBLIC;
-        if (prevState.indexId !== indexId) {
-            return { indexId };
-        }
-        return null;
-    }
-
-    getUrl() {
-        if (this.state.indexId === 0) {
-            return '/';
-        }
-        return IndexUtil.getUrl(this.state.indexId);
-    }
-
-    searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
-        if (this.state.indexId === 0) {
-            const res = { total: 0, data: [] };
-            func(res);
-        } else {
-            ItemUtil.getListByIndexId(this.state.indexId, condition, func);
-        }
-    }
-
-    render() {
-        const { lang } = this.props;
-        const index = IndexUtil.get(this.state.indexId);
-        if (index === null) {
-            return <PageNotFound lang={lang} />;
-        }
-        const baseUrl = this.getUrl();
-        const pIndexes = IndexUtil.getParents(this.state.indexId);
-        const parents = pIndexes.map((value: Index) => {
-            const url: string = IndexUtil.getUrl(value.id);
-            const title = Functions.mlang(value.title, lang);
-            return <Fragment key={value.id}>/ <Link to={url}>{title}</Link> </Fragment>;
-        });
-        const title = pIndexes.map((value) => { return '/' + Functions.mlang(value.title, lang); }).join('');
-        return (
-            <div className="list">
-                <Helmet>
-                    <title>{Functions.mlang(title, lang)} - {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}</title>
-                </Helmet>
-                <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
-                <div>{parents}</div>
-                <DatabaseListIndex lang={lang} index={index} />
-                <DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
-            </div>
-        );
-    }
-}
+    const baseUrl = indexId === 0 ? '/' : IndexUtil.getUrl(indexId);
+    const pIndexes = IndexUtil.getParents(indexId);
+    const parents = pIndexes.map((value: Index) => (
+        <Fragment key={value.id}>
+            / <Link to={IndexUtil.getUrl(value.id)}>{Functions.mlang(value.title, lang)}</Link>{' '}
+        </Fragment>
+    ));
+    const title = pIndexes.map((value) => `/${Functions.mlang(value.title, lang)}`).join('');
+    return (
+        <div className="list">
+            <Helmet>
+                <title>
+                    {Functions.mlang(title, lang)} - {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} -{' '}
+                    {Functions.siteTitle(lang)}
+                </title>
+            </Helmet>
+            <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
+            <div>{parents}</div>
+            <DatabaseListIndex lang={lang} index={index} />
+            <DatabaseListItem lang={lang} url={baseUrl} search={searchFunc} />
+        </div>
+    );
+};
 
 export default DatabaseSearchByIndexId;

src/database/DatabaseSearchByItemType.tsx

@@ -1,73 +1,41 @@
-import React, { Component } from 'react';
-import { RouteComponentProps } from 'react-router';
-import { MultiLang } from '../config';
+import { useCallback } from 'react';
+import { useParams } from 'react-router';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import DatabaseListItem from './lib/DatabaseListItem';
-import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
+import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';
 
-interface Params {
-    itemType: string;
-    subItemType?: string;
-}
-
-interface Props extends RouteComponentProps<Params> {
+interface Props {
     lang: MultiLang;
 }
 
-interface State {
-    itemType: string;
-    subItemType: string;
-}
+const DatabaseSearchByItemType = (props: Props) => {
+    const { lang } = props;
+    const params = useParams<{ itemType?: string; subItemType?: string }>();
+    const itemType = params.itemType ?? '';
+    const subItemType = params.subItemType ?? '';
 
-class DatabaseSearchByItemType extends Component<Props, State> {
+    const searchFunc = useCallback(
+        (condition: SortCondition, func: SearchCallbackFunc) => {
+            if (itemType === '') {
+                func({ total: 0, data: [] });
+            } else {
+                ItemUtil.getListByItemType(itemType, subItemType, condition, func);
+            }
+        },
+        [itemType, subItemType]
+    );
 
-    constructor(props: Props) {
-        super(props);
-        const { params } = this.props.match;
-        this.state = {
-            itemType: params.itemType ? params.itemType : '',
-            subItemType: params.subItemType ? params.subItemType : '',
-        };
-        this.searchFunc = this.searchFunc.bind(this);
+    let baseUrl = ItemUtil.getItemTypeSearchUrl(itemType);
+    if (subItemType !== '') {
+        baseUrl += `/${subItemType}`;
     }
-
-    static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-        const { params } = nextProps.match;
-        const item_type = params.itemType ? params.itemType : '';
-        const sub_item_type = params.subItemType ? params.subItemType : '';
-        if (prevState.itemType !== item_type || prevState.subItemType !== sub_item_type) {
-            return { item_type, sub_item_type };
-        }
-        return null;
-    }
-
-    searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
-        if (this.state.itemType === '') {
-            const res = { total: 0, data: [] };
-            func(res);
-        } else {
-            ItemUtil.getListByItemType(this.state.itemType, this.state.subItemType, condition, func);
-        }
-    }
-
-    getUrl() {
-        let url = ItemUtil.getItemTypeSearchUrl(this.state.itemType);
-        if (this.state.subItemType !== '') {
-            url += '/' + this.state.subItemType;
-        }
-        return url;
-    }
-
-    render() {
-        const { lang } = this.props;
-        const baseUrl = this.getUrl();
-        return (
-            <div className="list">
-                <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
-                <DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
-            </div>
-        );
-    }
-}
+    return (
+        <div className="list">
+            <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
+            <DatabaseListItem lang={lang} url={baseUrl} search={searchFunc} />
+        </div>
+    );
+};
 
 export default DatabaseSearchByItemType;

src/database/DatabaseSearchByKeyword.tsx

@@ -1,60 +1,39 @@
-import React, { Component } from 'react';
-import { RouteComponentProps } from 'react-router';
-import { MultiLang } from '../config';
+import { useCallback } from 'react';
+import { useLocation } from 'react-router';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 import DatabaseListItem from './lib/DatabaseListItem';
-import ItemUtil, { KeywordSearchType, SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
+import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
 }
 
-interface State {
-    type: KeywordSearchType;
-    keyword: string;
-}
+const DatabaseSearchByKeyword = (props: Props) => {
+    const { lang } = props;
+    const location = useLocation();
+    const { type, keyword } = ItemUtil.getSearchKeywordByQuery(location.search);
 
-class DatabaseSearchByKeyword extends Component<Props, State> {
+    const searchFunc = useCallback(
+        (condition: SortCondition, func: SearchCallbackFunc) => {
+            if (keyword === '') {
+                func({ total: 0, data: [] });
+            } else {
+                ItemUtil.getListByKeyword(type, keyword, condition, func);
+            }
+        },
+        [type, keyword]
+    );
 
-    constructor(props: Props) {
-        super(props);
-        const { type, keyword } = ItemUtil.getSearchKeywordByQuery(this.props.location.search);
-        this.state = { type, keyword };
-        this.searchFunc = this.searchFunc.bind(this);
-    }
-
-    static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-        const { type, keyword } = ItemUtil.getSearchKeywordByQuery(nextProps.location.search);
-        if (prevState.type !== type || prevState.keyword !== keyword) {
-            return { type, keyword };
-        }
-        return null;
-    }
-
-    getUrl() {
-        return ItemUtil.getSearchByKeywordUrl(this.state.type, this.state.keyword);
-    }
-
-    searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
-        if (this.state.keyword === '') {
-            const res = { total: 0, data: [] };
-            func(res);
-        } else {
-            ItemUtil.getListByKeyword(this.state.type, this.state.keyword, condition, func);
-        }
-    }
-
-    render() {
-        const { lang } = this.props;
-        const baseUrl = this.getUrl();
-        return (
-            <div className="list">
-                <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
-                <p>{Functions.mlang('[en]Search Keyword[/en][ja]検索キーワード[/ja]', lang)} : {this.state.keyword}</p>
-                <DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
-            </div>
-        );
-    }
-}
+    return (
+        <div className="list">
+            <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
+            <p>
+                {Functions.mlang('[en]Search Keyword[/en][ja]検索キーワード[/ja]', lang)} : {keyword}
+            </p>
+            <DatabaseListItem lang={lang} url={ItemUtil.getSearchByKeywordUrl(type, keyword)} search={searchFunc} />
+        </div>
+    );
+};
 
 export default DatabaseSearchByKeyword;

src/database/DatabaseTop.module.css

@@ -10,4 +10,4 @@
 .itemTypes .itemType :global(table .itemTypeName) {
     vertical-align: middle;
     font-size: large;
-}
+}

src/database/DatabaseTop.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import Config, { MultiLang } from '../config';
+import Config, { type MultiLang } from '../config';
 import styles from './DatabaseTop.module.css';
 import ItemType from './item-type';
 
@@ -19,13 +18,13 @@ const DatabaseTop = (props: Props) => {
     return (
         <table className={styles.itemTypes}>
             <tbody>
-                {types.map((value, idx) => {
+                {types.map((value) => {
                     return (
-                        <tr key={idx}>
-                            {value.map((type, idx) => {
+                        <tr key={value.join('-')}>
+                            {value.map((type) => {
                                 return (
-                                    <td key={idx} className={styles.itemType}>
-                                        {type !== '' && <ItemType.Top lang={lang} type={'xnp' + type} />}
+                                    <td key={type} className={styles.itemType}>
+                                        {type !== '' && <ItemType.Top lang={lang} type={`xnp${type}`} />}
                                     </td>
                                 );
                             })}
@@ -35,6 +34,6 @@ const DatabaseTop = (props: Props) => {
             </tbody>
         </table>
     );
-}
+};
 
 export default DatabaseTop;

src/database/DatabaseXoopsPathRedirect.tsx

@@ -1,20 +1,17 @@
-import React, { Component } from 'react';
-import { Redirect, RouteComponentProps, withRouter } from 'react-router';
+import { Navigate, useLocation } from 'react-router';
 import PageNotFound from '../common/lib/PageNotFound';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import Functions from '../functions';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
 }
 
-class DatabaseXoopsPathRedirect extends Component<Props> {
-
-    getRedirectUrl(): string {
-        const { location } = this.props;
+const getRedirectUrl = (location: { pathname: string; search: string }): string => {
+    {
         const pathname = location.pathname || '';
         const query = new URLSearchParams(location.search);
-        const search = new RegExp('^/modules/xoonips(?:/+(.*))?$');
+        const search = /^\/modules\/xoonips(?:\/+(.*))?$/;
         const matches = pathname.match(search);
         if (matches === null) {
             return '';
@@ -28,11 +25,11 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
             case 'detail.php': {
                 const id = query.get('id');
                 if (id !== null) {
-                    return '/database/item/id/' + Functions.escape(id);
+                    return `/database/item/id/${Functions.escape(id)}`;
                 }
                 const itemId = query.get('item_id');
                 if (itemId !== null && itemId.match(/^\d+$/) !== null) {
-                    return '/database/item/' + Functions.escape(itemId);
+                    return `/database/item/${Functions.escape(itemId)}`;
                 }
                 return '';
             }
@@ -40,13 +37,13 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
                 const indexId = query.get('index_id');
                 if (indexId !== null && indexId.match(/^\d+$/) !== null) {
                     const params = new URLSearchParams();
-                    const map: any = {
+                    const map: Record<string, { key: string; isNumber: boolean }> = {
                         orderby: { key: 'orderby', isNumber: false },
                         order_dir: { key: 'order_dir', isNumber: true },
                         itemcount: { key: 'itemcount', isNumber: true },
-                        page: { key: 'page', isNumber: true }
+                        page: { key: 'page', isNumber: true },
                     };
-                    for (let k in map) {
+                    for (const k in map) {
                         const v = query.get(k);
                         if (v === null || v.length === 0) {
                             continue;
@@ -57,7 +54,7 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
                         params.set(map[k].key, v);
                     }
                     const paramStr = params.toString();
-                    return '/database/list/' + Functions.escape(indexId) + (paramStr.length > 0 ? '?' + paramStr : '');
+                    return `/database/list/${Functions.escape(indexId)}${paramStr.length > 0 ? `?${paramStr}` : ''}`;
                 }
                 break;
             }
@@ -78,13 +75,13 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
                             return '';
                         }
                         const params = new URLSearchParams({ type, keyword });
-                        const map: any = {
+                        const map: Record<string, { key: string; isNumber: boolean }> = {
                             orderby: { key: 'orderby', isNumber: false },
                             orderdir: { key: 'order_dir', isNumber: true },
                             item_per_page: { key: 'itemcount', isNumber: true },
-                            page: { key: 'page', isNumber: true }
+                            page: { key: 'page', isNumber: true },
                         };
-                        for (let k in map) {
+                        for (const k in map) {
                             const v = query.get(k);
                             if (v === null || v.length === 0) {
                                 continue;
@@ -94,7 +91,7 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
                             }
                             params.set(map[k].key, v);
                         }
-                        return '/database/search?' + params.toString();
+                        return `/database/search?${params.toString()}`;
                     }
                     case 'itemtypesearch': {
                         const itemType = query.get('search_itemtype');
@@ -102,22 +99,22 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
                             return '';
                         }
                         const type = itemType.replace('xnp', '');
-                        return '/database/search/itemtype/' + Functions.escape(type);
+                        return `/database/search/itemtype/${Functions.escape(type)}`;
                     }
                     case 'itemsubtypesearch': {
                         let type = '';
                         let subtype = '';
                         query.forEach((v, k) => {
-                            if (k.match(/^xnp[a-z]+$/) !== null && !!v) {
+                            if (k.match(/^xnp[a-z]+$/) !== null && v) {
                                 type = k.replace('xnp', '');
                                 return;
                             }
-                        })
+                        });
                         if (type === '') {
                             return '';
                         }
                         query.forEach((v, k) => {
-                            if (k.match(`^xnp${type}_.+$`) !== null && !!v) {
+                            if (k.match(`^xnp${type}_.+$`) !== null && v) {
                                 subtype = v;
                                 return;
                             }
@@ -125,7 +122,7 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
                         if (subtype === '') {
                             return '';
                         }
-                        return '/database/search/itemtype/' + Functions.escape(type) + '/' + Functions.escape(subtype);
+                        return `/database/search/itemtype/${Functions.escape(type)}/${Functions.escape(subtype)}`;
                     }
                 }
                 return '';
@@ -136,15 +133,16 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
         }
         return '';
     }
+};
 
-    render() {
-        const { lang } = this.props;
-        const url = this.getRedirectUrl();
-        if (url === '') {
-            return <PageNotFound lang={lang} />;
-        }
-        return <Redirect to={url} />;
+const DatabaseXoopsPathRedirect = (props: Props) => {
+    const { lang } = props;
+    const location = useLocation();
+    const url = getRedirectUrl(location);
+    if (url === '') {
+        return <PageNotFound lang={lang} />;
     }
-}
+    return <Navigate to={url} replace />;
+};
 
-export default withRouter(DatabaseXoopsPathRedirect);
+export default DatabaseXoopsPathRedirect;

src/database/blocks/IndexTree.module.css

@@ -4,8 +4,10 @@
     border-bottom: 1px solid #404040;
     border-right: 1px solid #404040;
     background-color: white;
-    height: 400px;
-    width: calc(100% - 6px);
+    /* border-box totals: 400 + 3px padding + 1px border per side, and a width
+       that keeps the 2px the original content-box rule overflowed by. */
+    height: 408px;
+    width: calc(100% + 2px);
     overflow: auto;
     margin: 0 auto;
     padding: 3px;
@@ -14,6 +16,9 @@
 
 .formButton {
     margin: 3px 3px 10px;
+    /* sanitize.css forms.css leaves buttons transparent */
+    background-color: #ffffff;
+    color: #000000;
 }
 
 .indexTree div span {
@@ -39,24 +44,37 @@
     display: inline-block;
     height: 20px;
     width: 9px;
-    background: url(../assets/images/tree_line.png);
+    background: url(../assets/images/tree_line.png) no-repeat -18px 0;
 }
-.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child)) {
+/* treeData has a single root, so the first indent unit never carries a line. */
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:first-child) {
+    display: none;
+}
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(.rc-tree-indent-unit-end)) {
     background-position: -9px 0;
 }
-.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child).rc-tree-indent-unit-end) {
-    background-position: -18px 0;
+/* The node's own branch (├ or └) is drawn after the indent units. */
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent)::after {
+    content: "";
+    display: inline-block;
+    vertical-align: bottom;
+    height: 20px;
+    width: 9px;
+    background: url(../assets/images/tree_line.png) no-repeat 0 0;
 }
-.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:last-child.rc-tree-indent-unit-end) {
+.indexTree:global(.rc-tree .rc-tree-treenode.rc-tree-treenode-leaf-last .rc-tree-indent)::after {
     background-position: -27px 0;
 }
+.indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-indent)::after {
+    display: none;
+}
 
 .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-switcher) {
     display: inline-block;
     height: 20px;
     width: 16px;
     margin-right: 2px;
-    background: url(../assets/images/tree_node.png);
+    background: url(../assets/images/tree_node.png) no-repeat;
     cursor: pointer;
 }
 .indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-switcher.rc-tree-switcher-noop) {
@@ -88,4 +106,4 @@
 .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper .rc-tree-title) {
     vertical-align: middle;
     line-height: 20px;
-}
+}

src/database/blocks/IndexTree.tsx

@@ -1,124 +1,95 @@
 import Tree from 'rc-tree';
-import { DataNode, EventDataNode } from 'rc-tree/lib/interface';
-import React, { Component, ReactText } from 'react';
-import { RouteComponentProps, withRouter } from 'react-router';
-import { MultiLang } from '../../config';
+import type { DataNode, EventDataNode } from 'rc-tree/lib/interface';
+import { type Key, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
-import IndexUtil, { Index, INDEX_ID_PUBLIC } from '../lib/IndexUtil';
+import IndexUtil, { INDEX_ID_PUBLIC, type Index } from '../lib/IndexUtil';
 import styles from './IndexTree.module.css';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
 }
 
-interface State {
-    tree: DataNode[];
+interface TreeData {
+    elements: DataNode[];
     expandableKeys: string[];
-    expandedKeys: string[];
-    selectedKeys: number[];
+    defaultExpandedKeys: string[];
 }
 
-class IndexTree extends Component<Props, State> {
-
-    constructor(props: Props) {
-        super(props);
-        this.handleClickOpenAll = this.handleClickOpenAll.bind(this);
-        this.handleClickCloseAll = this.handleClickCloseAll.bind(this);
-        this.handleExpand = this.handleExpand.bind(this);
-        this.handleSelect = this.handleSelect.bind(this);
-        const res = this.load();
-        this.state = {
-            tree: res.elements,
-            expandableKeys: res.keys,
-            expandedKeys: res.expandedKeys,
-            selectedKeys: [],
-        };
-    }
-
-    load() {
-        const { lang } = this.props;
-        let keys: string[] = [];
-        let eKeys: string[] = [];
-        const makeTreeNode = (index: Index, depth: number): DataNode => {
-            const title = Functions.mlang(index.title, lang) + (index.numOfItems > 0 ? ' (' + index.numOfItems + ')' : '');
-            const children = IndexUtil.getChildren(index.id);
-            if (children.length === 0) {
-                return { key: String(index.id), title: title };
-            }
-            const childTreeNodes = children.map((value: Index) => {
-                return makeTreeNode(value, depth + 1);
-            });
-            if (depth < 1) {
-                eKeys.push(String(index.id));
-            }
-            keys.push(String(index.id));
-            return { key: String(index.id), title: title, children: childTreeNodes };
-        };
-        let elements: DataNode[] = [];
-        const index = IndexUtil.get(INDEX_ID_PUBLIC);
-        if (index !== null) {
-            elements.push(makeTreeNode(index, 0));
+const load = (lang: MultiLang): TreeData => {
+    const expandableKeys: string[] = [];
+    const defaultExpandedKeys: string[] = [];
+    const makeTreeNode = (index: Index, depth: number): DataNode => {
+        const title = Functions.mlang(index.title, lang) + (index.numOfItems > 0 ? ` (${index.numOfItems})` : '');
+        const children = IndexUtil.getChildren(index.id);
+        if (children.length === 0) {
+            return { key: String(index.id), title: title };
         }
-        return {
-            elements: elements,
-            keys: keys,
-            expandedKeys: eKeys,
+        const childTreeNodes = children.map((value: Index) => makeTreeNode(value, depth + 1));
+        if (depth < 1) {
+            defaultExpandedKeys.push(String(index.id));
         }
+        expandableKeys.push(String(index.id));
+        return { key: String(index.id), title: title, children: childTreeNodes };
+    };
+    const elements: DataNode[] = [];
+    const index = IndexUtil.get(INDEX_ID_PUBLIC);
+    if (index !== null) {
+        elements.push(makeTreeNode(index, 0));
     }
+    return { elements, expandableKeys, defaultExpandedKeys };
+};
 
-    componentDidUpdate(prevProps: Props, prevState: State) {
-        const { lang } = this.props;
-        if (prevProps.lang !== lang) {
-            const res = this.load();
-            this.setState({
-                tree: res.elements,
-                selectedKeys: [],
-            });
+const toStringKeys = (keys: Key[]): string[] => keys.map((key) => (typeof key === 'string' ? key : String(key)));
+
+const IndexTree = (props: Props) => {
+    const { lang } = props;
+    const data = useMemo(() => load(lang), [lang]);
+    const [expandedKeys, setExpandedKeys] = useState<string[]>(data.defaultExpandedKeys);
+    const navigate = useNavigate();
+
+    const handleExpand = (
+        keys: Key[],
+        _info: { node: EventDataNode<DataNode>; expanded: boolean; nativeEvent: MouseEvent }
+    ) => {
+        setExpandedKeys(toStringKeys(keys));
+    };
+
+    const handleSelect = (
+        selectedKeys: Key[],
+        _info: {
+            event: 'select';
+            selected: boolean;
+            node: EventDataNode<DataNode>;
+            selectedNodes: DataNode[];
+            nativeEvent: MouseEvent;
         }
-    }
+    ) => {
+        const selectedKey = selectedKeys[0] ?? 0;
+        const key = typeof selectedKey === 'string' ? parseInt(selectedKey, 10) : Number(selectedKey);
+        void navigate(IndexUtil.getUrl(key));
+    };
 
-    handleClickOpenAll() {
-        this.setState({ expandedKeys: this.state.expandableKeys })
-    }
+    return (
+        <div className={styles.container}>
+            <button type="button" className={styles.formButton} onClick={() => setExpandedKeys(data.expandableKeys)}>
+                open all
+            </button>
+            <button type="button" className={styles.formButton} onClick={() => setExpandedKeys([])}>
+                close all
+            </button>
+            <Tree
+                className={styles.indexTree}
+                expandedKeys={expandedKeys}
+                selectedKeys={[]}
+                onExpand={handleExpand}
+                onSelect={handleSelect}
+                showIcon={false}
+                treeData={data.elements}
+            />
+        </div>
+    );
+};
 
-    handleClickCloseAll() {
-        this.setState({ expandedKeys: [] })
-    }
-
-    handleExpand(expandedKeys: ReactText[], info: {
-        node: EventDataNode;
-        expanded: boolean;
-        nativeEvent: MouseEvent;
-    }): void {
-        const keys: string[] = expandedKeys.map((key) => {
-            return typeof key === 'string' ? key : String(key);
-        });
-        this.setState({ expandedKeys: keys });
-    }
-
-    handleSelect(selectedKeys: ReactText[], info: {
-        event: 'select';
-        selected: boolean;
-        node: EventDataNode;
-        selectedNodes: DataNode[];
-        nativeEvent: MouseEvent;
-    }): void {
-        const selectedKey = selectedKeys.shift() || 0;
-        const key = typeof selectedKey === 'string' ? parseInt(selectedKey, 10) : selectedKey;
-        const url = IndexUtil.getUrl(key);
-        this.props.history.push(url);
-        this.setState({ selectedKeys: [] });
-    }
-
-    render() {
-        return (
-            <div className={styles.container}>
-                <button className={styles.formButton} onClick={this.handleClickOpenAll}>open all</button>
-                <button className={styles.formButton} onClick={this.handleClickCloseAll}>close all</button>
-                <Tree className={styles.indexTree} expandedKeys={this.state.expandedKeys} selectedKeys={this.state.selectedKeys} onExpand={this.handleExpand} onSelect={this.handleSelect} showIcon={false} treeData={this.state.tree} />
-            </div>
-        );
-    }
-}
-
-export default withRouter(IndexTree);
+export default IndexTree;

src/database/blocks/Rankings.module.css

@@ -25,4 +25,4 @@
 
 .star {
     margin-left: 5px;
-}
+}

src/database/blocks/Rankings.tsx

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react';
-import { Link } from 'react-router-dom';
-import { MultiLang } from '../../config';
+import { Fragment } from 'react';
+import { Link } from 'react-router';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
+import { siteData } from '../../siteData';
 import imageStar from '../assets/images/star.gif';
-import rankings from '../assets/rankings.json';
-import ItemUtil, { ItemCore } from '../lib/ItemUtil';
+import ItemUtil, { type ItemCore } from '../lib/ItemUtil';
 import styles from './Rankings.module.css';
 
 interface Props {
@@ -12,68 +12,105 @@ interface Props {
 }
 
 const orderLabel = (order: number, lang: string) => {
-    return String(order) + (lang === 'en' ? Functions.ordinal(order) : '位')
-}
+    return String(order) + (lang === 'en' ? Functions.ordinal(order) : '位');
+};
 
 const Rankings = (props: Props) => {
     const items = [
         {
             title: Functions.mlang('[en]Frequently accessed items[/en][ja]頻繁に閲覧されるアイテム[/ja]', props.lang),
-            list: rankings.accessed.map((item, idx) => {
+            list: siteData().rankings.accessed.map((item, idx) => {
                 const url = ItemUtil.getUrl(item as ItemCore);
                 const title = Functions.mlang(item.title, props.lang);
                 const order = orderLabel(idx + 1, props.lang);
                 return (
-                    <div key={idx} className={styles.item}>
+                    <div key={url} className={styles.item}>
                         <div className={styles.order}>{order}</div>
-                        <div className={styles.title}><Link to={url} title={title}>{title}</Link></div>
-                        {idx === 0 && <div className={styles.star}><img src={imageStar} alt={order} /></div>}
+                        <div className={styles.title}>
+                            <Link to={url} title={title}>
+                                {title}
+                            </Link>
+                        </div>
+                        {idx === 0 && (
+                            <div className={styles.star}>
+                                <img src={imageStar} alt={order} />
+                            </div>
+                        )}
                     </div>
                 );
             }),
         },
         {
-            title: Functions.mlang('[en]Frequently downloaded items[/en][ja]頻繁にダウンロードされるアイテム[/ja]', props.lang),
-            list: rankings.downloaded.map((item, idx) => {
+            title: Functions.mlang(
+                '[en]Frequently downloaded items[/en][ja]頻繁にダウンロードされるアイテム[/ja]',
+                props.lang
+            ),
+            list: siteData().rankings.downloaded.map((item, idx) => {
                 const url = ItemUtil.getUrl(item as ItemCore);
                 const title = Functions.mlang(item.title, props.lang);
                 const order = orderLabel(idx + 1, props.lang);
                 return (
-                    <div key={idx} className={styles.item}>
+                    <div key={url} className={styles.item}>
                         <div className={styles.order}>{order}</div>
-                        <div className={styles.title}><Link to={url} title={title}>{title}</Link></div>
-                        {idx === 0 && <div className={styles.star}><img src={imageStar} alt={order} /></div>}
+                        <div className={styles.title}>
+                            <Link to={url} title={title}>
+                                {title}
+                            </Link>
+                        </div>
+                        {idx === 0 && (
+                            <div className={styles.star}>
+                                <img src={imageStar} alt={order} />
+                            </div>
+                        )}
                     </div>
                 );
             }),
         },
         {
-            title: Functions.mlang('[en]Most active contributers[/en][ja]最も多くアイテムを公開したユーザ[/ja]', props.lang),
-            list: rankings.contributed.map((item, idx) => {
-                const name = item.name !== '' ? item.name + ' (' + item.uname + ')' : item.uname;
+            title: Functions.mlang(
+                '[en]Most active contributers[/en][ja]最も多くアイテムを公開したユーザ[/ja]',
+                props.lang
+            ),
+            list: siteData().rankings.contributed.map((item, idx) => {
+                const name = item.name !== '' ? `${item.name} (${item.uname})` : item.uname;
                 const title = Functions.mlang(name, props.lang);
                 const order = orderLabel(idx + 1, props.lang);
                 return (
-                    <div key={idx} className={styles.item}>
+                    <div key={item.uname} className={styles.item}>
                         <div className={styles.order}>{order}</div>
                         <div className={styles.uname}>{title}</div>
                         <div className={styles.count}>({item.count})</div>
-                        {idx === 0 && <div className={styles.star}><img src={imageStar} alt={order} /></div>}
+                        {idx === 0 && (
+                            <div className={styles.star}>
+                                <img src={imageStar} alt={order} />
+                            </div>
+                        )}
                     </div>
                 );
             }),
         },
         {
-            title: Functions.mlang('[en]Frequently searched keywords[/en][ja]頻繁に検索されるキーワード[/ja]', props.lang),
-            list: rankings.searched.map((item, idx) => {
+            title: Functions.mlang(
+                '[en]Frequently searched keywords[/en][ja]頻繁に検索されるキーワード[/ja]',
+                props.lang
+            ),
+            list: siteData().rankings.searched.map((item, idx) => {
                 const url = ItemUtil.getSearchByKeywordUrl('all', item.keyword);
-                const title = 'Search by: ' + item.keyword;
+                const title = `Search by: ${item.keyword}`;
                 const order = orderLabel(idx + 1, props.lang);
                 return (
-                    <div key={idx} className={styles.item}>
+                    <div key={url} className={styles.item}>
                         <div className={styles.order}>{order}</div>
-                        <div className={styles.title}><Link to={url} title={title}>{item.keyword}</Link></div>
-                        {idx === 0 && <div className={styles.star}><img src={imageStar} alt={order} /></div>}
+                        <div className={styles.title}>
+                            <Link to={url} title={title}>
+                                {item.keyword}
+                            </Link>
+                        </div>
+                        {idx === 0 && (
+                            <div className={styles.star}>
+                                <img src={imageStar} alt={order} />
+                            </div>
+                        )}
                     </div>
                 );
             }),
@@ -83,7 +120,7 @@ const Rankings = (props: Props) => {
         <div>
             {items.map((item, idx) => {
                 return (
-                    <Fragment key={idx}>
+                    <Fragment key={item.title}>
                         {idx !== 0 && <hr />}
                         <h3 className={styles.heading}>{item.title}</h3>
                         <div>{item.list}</div>
@@ -92,6 +129,6 @@ const Rankings = (props: Props) => {
             })}
         </div>
     );
-}
+};
 
-export default Rankings;
+export default Rankings;

src/database/blocks/RecentContents.module.css

@@ -25,4 +25,4 @@
 
 .star {
     margin-left: 5px;
-}
+}

src/database/blocks/RecentContents.tsx

@@ -1,11 +1,10 @@
-import moment from 'moment';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { MultiLang } from '../../config';
+import { format } from 'date-fns';
+import { Link } from 'react-router';
+import type { MultiLang } from '../../config';
 import Functions from '../../functions';
+import { siteData } from '../../siteData';
 import imageStar from '../assets/images/star.gif';
-import contents from '../assets/recent-contents.json';
-import ItemUtil, { ItemCore } from '../lib/ItemUtil';
+import ItemUtil, { type ItemCore } from '../lib/ItemUtil';
 import styles from './RecentContents.module.css';
 
 interface Props {
@@ -14,26 +13,36 @@ interface Props {
 
 const RecentContents = (props: Props) => {
     const { lang } = props;
-    const list = contents.map((item, idx) => {
+    const list = siteData().recentContents.map((item, idx) => {
         const url = ItemUtil.getUrl(item as ItemCore);
         const title = Functions.mlang(item.title, lang);
-        const date = moment(new Date(item.last_update_date * 1000)).format('Y/M/D');
+        const date = format(new Date(item.last_update_date * 1000), 'y/M/d');
         const order = String(idx + 1) + (lang === 'en' ? Functions.ordinal(idx + 1) : '位');
         return (
-            <div key={idx} className={styles.item}>
+            <div key={url} className={styles.item}>
                 <div className={styles.order}>{order}</div>
-                <div className={styles.title}><Link className={styles.title} to={url} title={title}>{title}</Link></div>
+                <div className={styles.title}>
+                    <Link className={styles.title} to={url} title={title}>
+                        {title}
+                    </Link>
+                </div>
                 <div className={styles.date}> ({date})</div>
-                {idx === 0 && <div className={styles.star}><img src={imageStar} alt={order} /></div>}
+                {idx === 0 && (
+                    <div className={styles.star}>
+                        <img src={imageStar} alt={order} />
+                    </div>
+                )}
             </div>
         );
     });
     return (
         <div>
-            <h3 className={styles.heading}>{Functions.mlang('[en]Newly Arrived Items[/en][ja]新着アイテム[/ja]', lang)}</h3>
+            <h3 className={styles.heading}>
+                {Functions.mlang('[en]Newly Arrived Items[/en][ja]新着アイテム[/ja]', lang)}
+            </h3>
             <div>{list}</div>
         </div>
     );
-}
+};
 
-export default RecentContents;
+export default RecentContents;

src/database/blocks/Search.tsx

@@ -1,90 +1,69 @@
-import React, { ChangeEvent, Component, FormEvent } from 'react';
-import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
-import Config, { MultiLang } from '../../config';
+import { type ChangeEvent, type FormEvent, useEffect, useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router';
+import Config, { type MultiLang } from '../../config';
 import Functions from '../../functions';
-import ItemUtil, { KeywordSearchType } from '../lib/ItemUtil';
+import ItemUtil, { type KeywordSearchType } from '../lib/ItemUtil';
 
-interface Props extends RouteComponentProps {
+interface Props {
     lang: MultiLang;
 }
 
-interface State {
-    type: KeywordSearchType;
-    keyword: string;
-    pathname: string;
-}
+const SEARCH_PATH = '/database/search';
 
-class Search extends Component<Props, State> {
+const Search = (props: Props) => {
+    const { lang } = props;
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [type, setType] = useState<KeywordSearchType>('all');
+    const [keyword, setKeyword] = useState('');
 
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            type: 'all',
-            keyword: '',
-            pathname: '',
-        };
-        this.handleChangeType = this.handleChangeType.bind(this);
-        this.handleChangeKeyword = this.handleChangeKeyword.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
-
-    static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-        const pathname = nextProps.location.pathname;
-        if (pathname !== prevState.pathname) {
-            if (pathname === '/database/search') {
-                const { type, keyword } = ItemUtil.getSearchKeywordByQuery(nextProps.location.search);
-                return { type, keyword, pathname };
-            }
-            return {
-                type: prevState.type,
-                keyword: prevState.keyword,
-                pathname
-            };
+    // Landing on the results page adopts the query it was called with; moving
+    // anywhere else leaves whatever the visitor has typed alone.
+    useEffect(() => {
+        if (location.pathname === SEARCH_PATH) {
+            const parsed = ItemUtil.getSearchKeywordByQuery(location.search);
+            setType(parsed.type);
+            setKeyword(parsed.keyword);
         }
-        return null;
-    }
+    }, [location.pathname, location.search]);
 
-    handleChangeKeyword(event: ChangeEvent<HTMLInputElement>) {
-        const keyword = event.target.value.trim();
-        this.setState({ keyword });
-    }
-
-    handleChangeType(event: ChangeEvent<HTMLSelectElement>) {
-        const type = event.target.value as KeywordSearchType;
-        this.setState({ type });
-    }
-
-    handleSubmit(event: FormEvent<HTMLFormElement>) {
+    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault();
-        const url = ItemUtil.getSearchByKeywordUrl(this.state.type, this.state.keyword);
-        this.props.history.push(url);
-    }
+        void navigate(ItemUtil.getSearchByKeywordUrl(type, keyword));
+    };
 
-    render() {
-        const { lang } = this.props;
-        const options = [
-            { value: 'all', label: '[en]All[/en][ja]全て[/ja]' },
-            { value: 'basic', label: '[en]Title & Keyword[/en][ja]タイトル＆キーワード[/ja]' },
-        ];
-        Config.XOONIPS_ITEMTYPES.forEach((type) => {
-            options.push({value: type, label: Functions.pascalCase(type)})
-        });
-        return (
-            <form onSubmit={this.handleSubmit}>
-                <input style={{width: '170px'}} type="text" value={this.state.keyword} onChange={this.handleChangeKeyword} />
-                &nbsp;&nbsp;
-                <select value={this.state.type} onChange={this.handleChangeType}>
-                    {options.map((option) => {
-                        return <option key={option.value} value={option.value}>{Functions.mlang(option.label, lang)}</option>;
-                    })}
-                </select>
-                <br />
-                <input className="formButton" type="submit" value="Search" />
-                &nbsp;&nbsp;&nbsp;&nbsp;
-                <Link to="/database/advanced">{Functions.mlang('[en]Advanced[/en][ja]詳細検索[/ja]', lang)}</Link>
-            </form>
-        );
-    }
-}
+    const options = [
+        { value: 'all', label: '[en]All[/en][ja]全て[/ja]' },
+        { value: 'basic', label: '[en]Title & Keyword[/en][ja]タイトル＆キーワード[/ja]' },
+    ];
+    Config.XOONIPS_ITEMTYPES.forEach((itemType) => {
+        options.push({ value: itemType, label: Functions.pascalCase(itemType) });
+    });
+    return (
+        <form onSubmit={handleSubmit}>
+            <input
+                style={{ width: '170px' }}
+                type="text"
+                value={keyword}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => setKeyword(event.target.value.trim())}
+            />
+            &nbsp;&nbsp;
+            <select
+                value={type}
+                onChange={(event: ChangeEvent<HTMLSelectElement>) => setType(event.target.value as KeywordSearchType)}
+            >
+                {options.map((option) => (
+                    <option key={option.value} value={option.value}>
+                        {Functions.mlang(option.label, lang)}
+                    </option>
+                ))}
+            </select>
+            <br />
+            <input className="formButton" type="submit" value="Search" />
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <Link to="/database/advanced">{Functions.mlang('[en]Advanced[/en][ja]詳細検索[/ja]', lang)}</Link>
+        </form>
+    );
+};
 
-export default withRouter(Search);
+export default Search;

src/database/item-type/binder/BinderAdvancedSearch.tsx

@@ -1,21 +1,23 @@
-import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
 
 class BinderAdvancedSearch extends AdvancedSearchBase {
-
     constructor(props: AdvancedSearchBaseProps) {
         super(props);
         this.type = 'binder';
         this.title = 'Binder';
-        this.state.values['title'] = '';
-        this.state.values['keyword'] = '';
-        this.state.values['description'] = '';
-        this.state.values['doi'] = '';
+        this.state.values.title = '';
+        this.state.values.keyword = '';
+        this.state.values.description = '';
+        this.state.values.doi = '';
     }
 
     getRows() {
         const rows = [
             { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
-            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
+            {
+                label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+                value: this.renderFieldInputText('keyword', 50),
+            },
             { label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
             { label: 'ID', value: this.renderFieldInputText('doi', 50) },
         ];

src/database/item-type/binder/BinderDetail.tsx

@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
-import ItemType from '..';
-import { MultiLang } from '../../../config';
+import { Component } from 'react';
+import type { MultiLang } from '../../../config';
 import Functions from '../../../functions';
-import ItemUtil, { Item, ItemBinder } from '../../lib/ItemUtil';
+import ItemUtil, { type Item, type ItemBinder } from '../../lib/ItemUtil';
+import ItemType from '..';
 import DetailBase from '../lib/DetailBase';
 import ItemTypeField from '../lib/field';
 
@@ -27,7 +27,7 @@ class BinderLinkItems extends Component<Props, State> {
         this.updateItems();
     }
 
-    componentDidUpdate(prevProps: Props, prevState: State) {
+    componentDidUpdate(prevProps: Props) {
         const prevItemIds = prevProps.item.item_link;
         const nextItemIds = this.props.item.item_link;
         if (prevItemIds.toString() !== nextItemIds.toString()) {
@@ -51,7 +51,13 @@ class BinderLinkItems extends Component<Props, State> {
                 <tbody>
                     {this.state.items.map((item, idx) => {
                         const evenodd = idx % 2 ? 'even' : 'odd';
-                        return <tr key={item.item_id}><td className={evenodd}><ItemType.List lang={lang} item={item} /></td></tr>;
+                        return (
+                            <tr key={item.item_id}>
+                                <td className={evenodd}>
+                                    <ItemType.List lang={lang} item={item} />
+                                </td>
+                            </tr>
+                        );
                     })}
                 </tbody>
             </table>
@@ -60,20 +66,37 @@ class BinderLinkItems extends Component<Props, State> {
 }
 
 class BinderDetail extends DetailBase {
-
     getFields() {
         const { lang } = this.props;
         const item = this.props.item as ItemBinder;
         return [
             { label: 'ID', value: item.doi },
             { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
-            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
-            { label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
-            { label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
-            { label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
-            { label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+            {
+                label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+                value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+            },
+            {
+                label: '[en]Description[/en][ja]概要[/ja]',
+                value: <ItemTypeField.Description lang={lang} description={item.description} />,
+            },
+            {
+                label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+            },
+            {
+                label: '[en]Created Date[/en][ja]作成日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+            },
+            {
+                label: '[en]Contributor[/en][ja]登録者[/ja]',
+                value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
+            },
             { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
-            { label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+            {
+                label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+                value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+            },
             { label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
         ];
     }
@@ -92,4 +115,4 @@ class BinderDetail extends DetailBase {
     }
 }
 
-export default BinderDetail;
+export default BinderDetail;

src/database/item-type/binder/BinderList.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Functions from '../../../functions';
 import iconFile from '../../assets/images/icon_binder.gif';
-import { ItemBinder } from '../../lib/ItemUtil';
-import ListBase, { ListBaseProps } from '../lib/ListBase';
+import type { ItemBinder } from '../../lib/ItemUtil';
+import ListBase, { type ListBaseProps } from '../lib/ListBase';
 
 class BinderList extends ListBase {
-
     constructor(props: ListBaseProps) {
         super(props);
         this.label = 'Binder';
@@ -18,7 +16,8 @@ class BinderList extends ListBase {
         const item = this.props.item as ItemBinder;
         return (
             <>
-                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
+                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+                <br />
                 {Functions.mlang(item.description, lang)}
             </>
         );

src/database/item-type/binder/BinderTop.tsx

@@ -1,8 +1,7 @@
-import TopBase, { TopBaseProps } from '../lib/TopBase';
 import iconFile from '../../assets/images/icon_binder.gif';
+import TopBase, { type TopBaseProps } from '../lib/TopBase';
 
 class BinderTop extends TopBase {
-
     constructor(props: TopBaseProps) {
         super(props);
         this.type = 'binder';
@@ -12,4 +11,4 @@ class BinderTop extends TopBase {
     }
 }
 
-export default BinderTop;
+export default BinderTop;

src/database/item-type/book/BookAdvancedSearch.tsx

@@ -1,35 +1,43 @@
-import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
 
 class BookAdvancedSearch extends AdvancedSearchBase {
-
     constructor(props: AdvancedSearchBaseProps) {
         super(props);
         this.type = 'book';
         this.title = 'Book';
-        this.state.values['title'] = '';
-        this.state.values['keyword'] = '';
-        this.state.values['description'] = '';
-        this.state.values['doi'] = '';
-        this.state.values['author'] = '';
-        this.state.values['editor'] = '';
-        this.state.values['publisher'] = '';
-        this.state.values['publication_year'] = '';
-        this.state.values['isbn'] = '';
+        this.state.values.title = '';
+        this.state.values.keyword = '';
+        this.state.values.description = '';
+        this.state.values.doi = '';
+        this.state.values.author = '';
+        this.state.values.editor = '';
+        this.state.values.publisher = '';
+        this.state.values.publication_year = '';
+        this.state.values.isbn = '';
         this.state.values['file.book_pdf.original_file_name'] = '';
     }
 
     getRows() {
         const rows = [
             { label: '[en]Book Title[/en][ja]著書名[/ja]', value: this.renderFieldInputText('title', 50) },
-            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
+            {
+                label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+                value: this.renderFieldInputText('keyword', 50),
+            },
             { label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
             { label: 'ID', value: this.renderFieldInputText('doi', 50) },
             { label: '[en]Author[/en][ja]著者[/ja]', value: this.renderFieldInputText('author', 50) },
             { label: '[en]Editor[/en][ja]編集者[/ja]', value: this.renderFieldInputText('editor', 50) },
             { label: '[en]Publisher[/en][ja]出版社[/ja]', value: this.renderFieldInputText('publisher', 50) },
-            { label: '[en]Publication Year[/en][ja]出版年[/ja]', value: this.renderFieldInputText('publication_year', 10) },
+            {
+                label: '[en]Publication Year[/en][ja]出版年[/ja]',
+                value: this.renderFieldInputText('publication_year', 10),
+            },
             { label: 'ISBN', value: this.renderFieldInputText('isbn', 50) },
-            { label: '[en]PDF File[/en][ja]PDF ファイル[/ja]', value: this.renderFieldInputText('file.book_pdf.original_file_name', 50) },
+            {
+                label: '[en]PDF File[/en][ja]PDF ファイル[/ja]',
+                value: this.renderFieldInputText('file.book_pdf.original_file_name', 50),
+            },
         ];
         return rows;
     }

src/database/item-type/book/BookDetail.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { MultiLang } from '../../../config';
+import type { MultiLang } from '../../../config';
 import Functions from '../../../functions';
-import { ItemBook } from '../../lib/ItemUtil';
+import type { ItemBook } from '../../lib/ItemUtil';
 import DetailBase from '../lib/DetailBase';
 import ItemTypeField from '../lib/field';
 
+// CBSN extension: the book type is stored as its Japanese label.
 const bookType = (lang: MultiLang, type: string): string => {
     switch (type) {
         case '著書':
@@ -13,37 +13,77 @@ const bookType = (lang: MultiLang, type: string): string => {
             return Functions.mlang('[en]Review[/en][ja]総説[/ja]', lang);
     }
     return '';
-}
+};
 
 class BookDetail extends DetailBase {
-
     getFields() {
         const { lang } = this.props;
         const item = this.props.item as ItemBook;
         return [
             { label: 'ID', value: item.doi },
-            { label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
-            { label: '[en]Book Type[/en][ja]著書タイプ[/ja]', value: bookType(lang, item.book_type) }, // CBSN extended
+            {
+                label: '[en]Language[/en][ja]言語[/ja]',
+                value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+            },
+            { label: '[en]Book Type[/en][ja]著書タイプ[/ja]', value: bookType(lang, item.book_type) },
             { label: '[en]Book Title[/en][ja]著書名[/ja]', value: Functions.mlang(item.title, lang) },
-            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
-            { label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
-            { label: '[en]Postscript[/en][ja]追記[/ja]', value: Functions.mlang(item.postscript, lang) }, // CBSN extended
-            { label: '[en]Chapter[/en][ja]チャプター[/ja]', value: Functions.mlang(item.chapter, lang) }, // CBSN extended
-            { label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
-            { label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
-            { label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+            {
+                label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+                value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+            },
+            {
+                label: '[en]Description[/en][ja]概要[/ja]',
+                value: <ItemTypeField.Description lang={lang} description={item.description} />,
+            },
+            { label: '[en]Postscript[/en][ja]追記[/ja]', value: Functions.mlang(item.postscript, lang) },
+            { label: '[en]Chapter[/en][ja]チャプター[/ja]', value: Functions.mlang(item.chapter, lang) },
+            {
+                label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+            },
+            {
+                label: '[en]Created Date[/en][ja]作成日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+            },
+            {
+                label: '[en]Contributor[/en][ja]登録者[/ja]',
+                value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
+            },
             { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
-            { label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+            {
+                label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+                value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+            },
             { label: '[en]Author[/en][ja]著者[/ja]', value: <ItemTypeField.Author lang={lang} author={item.author} /> },
             { label: '[en]Editor[/en][ja]編集者[/ja]', value: Functions.mlang(item.editor, lang) },
             { label: '[en]Publisher[/en][ja]出版社[/ja]', value: Functions.mlang(item.publisher, lang) },
             { label: '[en]Publication Year[/en][ja]出版年[/ja]', value: item.publication_year },
-            { label: '[en]Volume[/en][ja]巻[/ja]', value: item.volume }, // CBSN extended
-            { label: '[en]Number[/en][ja]号[/ja]', value: item.number }, // CBSN extended
-            { label: 'URL', value: <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a> },
-            { label: '[en]PDF File[/en][ja]PDF ファイル[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="book_pdf" downloadLimit={item.attachment_dl_limit} /> },
+            { label: '[en]Volume[/en][ja]巻[/ja]', value: item.volume },
+            { label: '[en]Number[/en][ja]号[/ja]', value: item.number },
+            {
+                label: 'URL',
+                value: (
+                    <a href={item.url} target="_blank" rel="noopener noreferrer">
+                        {item.url}
+                    </a>
+                ),
+            },
+            {
+                label: '[en]PDF File[/en][ja]PDF ファイル[/ja]',
+                value: (
+                    <ItemTypeField.ItemFile
+                        lang={lang}
+                        file={item.file}
+                        type="book_pdf"
+                        downloadLimit={item.attachment_dl_limit}
+                    />
+                ),
+            },
             { label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
-            { label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} /> },
+            {
+                label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+                value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} />,
+            },
         ];
     }
 }

src/database/item-type/book/BookList.tsx

@@ -1,12 +1,10 @@
-import React, { Fragment } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Functions from '../../../functions';
 import iconFile from '../../assets/images/icon_book.gif';
-import { ItemBook } from '../../lib/ItemUtil';
-import ListBase, { ListBaseProps } from '../lib/ListBase';
+import type { ItemBook } from '../../lib/ItemUtil';
+import ListBase, { type ListBaseProps } from '../lib/ListBase';
 
 class BookList extends ListBase {
-
     constructor(props: ListBaseProps) {
         super(props);
         this.label = 'Book';
@@ -16,12 +14,11 @@ class BookList extends ListBase {
     renderBody() {
         const { lang } = this.props;
         const item = this.props.item as ItemBook;
-        const authors = item.author.map((author, i) => {
-            return <Fragment key={i}>{i > 0 && ', '}{Functions.mlang(author, lang)}</Fragment>
-        });
+        const authors = item.author.map((author) => Functions.mlang(author, lang)).join(', ');
         return (
             <>
-                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
+                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+                <br />
                 {authors}
             </>
         );

src/database/item-type/book/BookTop.tsx

@@ -1,8 +1,7 @@
-import TopBase, { TopBaseProps } from '../lib/TopBase';
 import iconFile from '../../assets/images/icon_book.gif';
+import TopBase, { type TopBaseProps } from '../lib/TopBase';
 
 class BookTop extends TopBase {
-
     constructor(props: TopBaseProps) {
         super(props);
         this.type = 'book';
@@ -12,4 +11,4 @@ class BookTop extends TopBase {
     }
 }
 
-export default BookTop;
+export default BookTop;

src/database/item-type/book/index.tsx

@@ -1,7 +1,7 @@
-import BookTop from './BookTop';
-import BookList from './BookList';
-import BookDetail from './BookDetail';
 import BookAdvancedSearch from './BookAdvancedSearch';
+import BookDetail from './BookDetail';
+import BookList from './BookList';
+import BookTop from './BookTop';
 
 const ItemTypeBook = {
     Top: BookTop,

src/database/item-type/conference/ConferenceAdvancedSearch.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
 import { ItemConferenceSubTypes } from '../../lib/ItemUtil';
-import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
 
 class ConferenceAdvancedSearch extends AdvancedSearchBase {
-
     constructor(props: AdvancedSearchBaseProps) {
         super(props);
         this.type = 'conference';
@@ -12,15 +10,15 @@ class ConferenceAdvancedSearch extends AdvancedSearchBase {
         const year = String(now.getFullYear());
         const month = String(now.getMonth() + 1);
         const mday = String(now.getDate());
-        this.state.values['title'] = '';
-        this.state.values['presentation_type'] = '';
-        this.state.values['author'] = '';
-        this.state.values['conference_from_year'] = year;
-        this.state.values['conference_from_month'] = month;
-        this.state.values['conference_from_mday'] = mday;
-        this.state.values['conference_to_year'] = year;
-        this.state.values['conference_to_month'] = month;
-        this.state.values['conference_to_mday'] = mday;
+        this.state.values.title = '';
+        this.state.values.presentation_type = '';
+        this.state.values.author = '';
+        this.state.values.conference_from_year = year;
+        this.state.values.conference_from_month = month;
+        this.state.values.conference_from_mday = mday;
+        this.state.values.conference_to_year = year;
+        this.state.values.conference_to_month = month;
+        this.state.values.conference_to_mday = mday;
         this.setIgnoreKey('conference_from_year');
         this.setIgnoreKey('conference_from_month');
         this.setIgnoreKey('conference_from_mday');
@@ -33,8 +31,12 @@ class ConferenceAdvancedSearch extends AdvancedSearchBase {
         return (
             <>
                 <div>
-                    {this.renderFieldDate('From', 'conference_from_year', 'conference_from_month', 'conference_from_mday')}
-
+                    {this.renderFieldDate(
+                        'From',
+                        'conference_from_year',
+                        'conference_from_month',
+                        'conference_from_mday'
+                    )}
                 </div>
                 <div>
                     {this.renderFieldDate('To', 'conference_to_year', 'conference_to_month', 'conference_to_mday')}
@@ -46,12 +48,15 @@ class ConferenceAdvancedSearch extends AdvancedSearchBase {
     getRows() {
         const rows = [
             { label: '[en]Presentation Title[/en][ja]発表議題[/ja]', value: this.renderFieldInputText('title', 50) },
-            { label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]', value: this.renderFieldSelect('presentation_type', ItemConferenceSubTypes) },
+            {
+                label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]',
+                value: this.renderFieldSelect('presentation_type', ItemConferenceSubTypes),
+            },
             { label: '[en]Author[/en][ja]発表者[/ja]', value: this.renderFieldInputText('author', 50) },
-            { label: '[en]Date[/en][ja]日付[/ja]', value: this.renderDate() }
+            { label: '[en]Date[/en][ja]日付[/ja]', value: this.renderDate() },
         ];
         return rows;
     }
 }
 
-export default ConferenceAdvancedSearch;
+export default ConferenceAdvancedSearch;

src/database/item-type/conference/ConferenceDetail.tsx

@@ -1,36 +1,67 @@
-import React from 'react';
 import Functions from '../../../functions';
-import { ItemConference } from '../../lib/ItemUtil';
+import type { ItemConference } from '../../lib/ItemUtil';
 import DetailBase from '../lib/DetailBase';
 import ItemTypeField from '../lib/field';
 import ConferenceUtil from './ConferenceUtil';
 
 class ConferenceDetail extends DetailBase {
-
     getFields() {
         const { lang } = this.props;
         const item = this.props.item as ItemConference;
         return [
             { label: 'ID', value: item.doi },
-            { label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+            {
+                label: '[en]Language[/en][ja]言語[/ja]',
+                value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+            },
             { label: '[en]Conference Title[/en][ja]学会名[/ja]', value: Functions.mlang(item.conference_title, lang) },
             { label: '[en]Place[/en][ja]開催地[/ja]', value: item.place },
             { label: '[en]Date[/en][ja]日付[/ja]', value: <ConferenceUtil.ConferenceDate lang={lang} item={item} /> },
-            { label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
-            { label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
-            { label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+            {
+                label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+            },
+            {
+                label: '[en]Created Date[/en][ja]作成日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+            },
+            {
+                label: '[en]Contributor[/en][ja]登録者[/ja]',
+                value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
+            },
             { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
-            { label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+            {
+                label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+                value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+            },
             { label: '[en]Presentation Title[/en][ja]発表議題[/ja]', value: Functions.mlang(item.title, lang) },
-            { label: '[en]Author[/en][ja]発表者[/ja]', value: <ItemTypeField.Author lang={lang} author={item.author} /> },
-            { label: '[en]Abstract[/en][ja]要約[/ja]', value: <ItemTypeField.Description lang={lang} description={item.abstract} /> },
-            { label: '[en]Presentation File[/en][ja]発表資料[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="conference_file" /> },
-            { label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]', value: <ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} /> },
-            { label: '[en]Conference Paper[/en][ja]学会資料[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="conference_paper" /> },
+            {
+                label: '[en]Author[/en][ja]発表者[/ja]',
+                value: <ItemTypeField.Author lang={lang} author={item.author} />,
+            },
+            {
+                label: '[en]Abstract[/en][ja]要約[/ja]',
+                value: <ItemTypeField.Description lang={lang} description={item.abstract} />,
+            },
+            {
+                label: '[en]Presentation File[/en][ja]発表資料[/ja]',
+                value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="conference_file" />,
+            },
+            {
+                label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]',
+                value: <ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />,
+            },
+            {
+                label: '[en]Conference Paper[/en][ja]学会資料[/ja]',
+                value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="conference_paper" />,
+            },
             { label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
-            { label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} /> },
+            {
+                label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+                value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} />,
+            },
         ];
     }
 }
 
-export default ConferenceDetail;
+export default ConferenceDetail;

src/database/item-type/conference/ConferenceList.tsx

@@ -1,13 +1,11 @@
-import React, { Fragment } from 'react';
-import { Link } from 'react-router-dom';
-import { ItemConference } from '../../lib/ItemUtil';
-import ListBase, { ListBaseProps } from '../lib/ListBase';
-import ConferenceUtil from './ConferenceUtil';
-import iconFile from '../../assets/images/icon_conference.gif';
+import { Link } from 'react-router';
 import Functions from '../../../functions';
+import iconFile from '../../assets/images/icon_conference.gif';
+import type { ItemConference } from '../../lib/ItemUtil';
+import ListBase, { type ListBaseProps } from '../lib/ListBase';
+import ConferenceUtil from './ConferenceUtil';
 
 class ConferenceList extends ListBase {
-
     constructor(props: ListBaseProps) {
         super(props);
         this.label = 'Conference';
@@ -17,17 +15,17 @@ class ConferenceList extends ListBase {
     renderBody() {
         const { lang } = this.props;
         const item = this.props.item as ItemConference;
-        const authors = item.author.map((author, i) => {
-            return <Fragment key={i}>{i > 0 && ', '}{Functions.mlang(author, lang)}</Fragment>
-        });
+        const authors = item.author.map((author) => Functions.mlang(author, lang)).join(', ');
         return (
             <>
-                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
-                {Functions.mlang(item.conference_title, lang)} (<ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />)<br />
+                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+                <br />
+                {Functions.mlang(item.conference_title, lang)} (
+                <ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />)<br />
                 {authors}
             </>
         );
     }
 }
 
-export default ConferenceList;
+export default ConferenceList;

src/database/item-type/conference/ConferenceTop.tsx

@@ -1,9 +1,8 @@
-import { ItemConferenceSubTypes } from '../../lib/ItemUtil';
-import TopBase, { TopBaseProps } from '../lib/TopBase';
 import iconFile from '../../assets/images/icon_conference.gif';
+import { ItemConferenceSubTypes } from '../../lib/ItemUtil';
+import TopBase, { type TopBaseProps } from '../lib/TopBase';
 
 class ConferenceTop extends TopBase {
-
     constructor(props: TopBaseProps) {
         super(props);
         this.type = 'conference';
@@ -14,4 +13,4 @@ class ConferenceTop extends TopBase {
     }
 }
 
-export default ConferenceTop;
+export default ConferenceTop;

src/database/item-type/conference/ConferenceUtil.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { MultiLang } from '../../../config';
-import { ItemConference, ItemConferenceSubType, ItemConferenceSubTypes } from '../../lib/ItemUtil';
+import type { MultiLang } from '../../../config';
+import { type ItemConference, type ItemConferenceSubType, ItemConferenceSubTypes } from '../../lib/ItemUtil';
 
 interface PresentationTypeProps {
     lang: MultiLang;
@@ -9,12 +8,14 @@ interface PresentationTypeProps {
 
 const PresentationType = (props: PresentationTypeProps) => {
     const { type } = props;
-    const subtype = ItemConferenceSubTypes.find((value) => { return value.type === type; });
+    const subtype = ItemConferenceSubTypes.find((value) => {
+        return value.type === type;
+    });
     if (typeof subtype === 'undefined') {
         return null;
     }
-    return (<span>{subtype.label}</span>);
-}
+    return <span>{subtype.label}</span>;
+};
 
 interface ConferenceDateProps {
     lang: MultiLang;
@@ -24,14 +25,30 @@ interface ConferenceDateProps {
 const ConferenceDate = (props: ConferenceDateProps) => {
     const { item } = props;
     const monthStr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    const from = 'From: ' + monthStr[item.conference_from_month - 1] + ' ' + item.conference_from_mday + ', ' + item.conference_from_year;
-    const to = 'To: ' + monthStr[item.conference_to_month - 1] + ' ' + item.conference_to_mday + ', ' + item.conference_to_year;
-    return (<span>{from} {to}</span>);
-}
+    const from =
+        'From: ' +
+        monthStr[item.conference_from_month - 1] +
+        ' ' +
+        item.conference_from_mday +
+        ', ' +
+        item.conference_from_year;
+    const to =
+        'To: ' +
+        monthStr[item.conference_to_month - 1] +
+        ' ' +
+        item.conference_to_mday +
+        ', ' +
+        item.conference_to_year;
+    return (
+        <span>
+            {from} {to}
+        </span>
+    );
+};
 
 const ConferenceUtil = {
     PresentationType,
     ConferenceDate,
-}
+};
 
-export default ConferenceUtil;
+export default ConferenceUtil;

src/database/item-type/conference/index.tsx

@@ -1,7 +1,7 @@
-import ConferenceTop from './ConferenceTop';
-import ConferenceList from './ConferenceList';
-import ConferenceDetail from './ConferenceDetail';
 import ConferenceAdvancedSearch from './ConferenceAdvancedSearch';
+import ConferenceDetail from './ConferenceDetail';
+import ConferenceList from './ConferenceList';
+import ConferenceTop from './ConferenceTop';
 
 const ItemTypeConference = {
     Top: ConferenceTop,
@@ -10,4 +10,4 @@ const ItemTypeConference = {
     AdvancedSearch: ConferenceAdvancedSearch,
 };
 
-export default ItemTypeConference;
+export default ItemTypeConference;

src/database/item-type/data/DataAdvancedSearch.tsx

@@ -1,8 +1,7 @@
 import { ItemDataSubTypes } from '../../lib/ItemUtil';
-import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
 
 class DataAdvancedSearch extends AdvancedSearchBase {
-
     constructor(props: AdvancedSearchBaseProps) {
         super(props);
         this.type = 'data';
@@ -11,15 +10,15 @@ class DataAdvancedSearch extends AdvancedSearchBase {
         const year = String(now.getFullYear());
         const month = String(now.getMonth() + 1);
         const mday = String(now.getDate());
-        this.state.values['title'] = '';
-        this.state.values['keyword'] = '';
-        this.state.values['description'] = '';
-        this.state.values['doi'] = '';
-        this.state.values['data_type'] = '';
-        this.state.values['experimenter'] = '';
-        this.state.values['publication_year'] = year;
-        this.state.values['publication_month'] = month;
-        this.state.values['publication_mday'] = mday;
+        this.state.values.title = '';
+        this.state.values.keyword = '';
+        this.state.values.description = '';
+        this.state.values.doi = '';
+        this.state.values.data_type = '';
+        this.state.values.experimenter = '';
+        this.state.values.publication_year = year;
+        this.state.values.publication_month = month;
+        this.state.values.publication_mday = mday;
         this.state.values['file.preview.caption'] = '';
         this.state.values['file.data_file.original_file_name'] = '';
         this.setIgnoreKey('publication_year');
@@ -30,17 +29,32 @@ class DataAdvancedSearch extends AdvancedSearchBase {
     getRows() {
         const rows = [
             { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
-            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
+            {
+                label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+                value: this.renderFieldInputText('keyword', 50),
+            },
             { label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
             { label: 'ID', value: this.renderFieldInputText('doi', 50) },
-            { label: '[en]Data Type[/en][ja]データタイプ[/ja]', value: this.renderFieldSelect('data_type', ItemDataSubTypes) },
+            {
+                label: '[en]Data Type[/en][ja]データタイプ[/ja]',
+                value: this.renderFieldSelect('data_type', ItemDataSubTypes),
+            },
             { label: '[en]Experimenter[/en][ja]実験者[/ja]', value: this.renderFieldInputText('experimenter', 50) },
-            { label: '[en]Date[/en][ja]日付[/ja]', value: this.renderFieldDate('', 'publication_year', 'publication_month', 'publication_mday') },
-            { label: '[en]Caption[/en][ja]キャプション[/ja]', value: this.renderFieldInputText('file.preview.caption', 50) },
-            { label: '[en]Data File[/en][ja]データファイル[/ja]', value: this.renderFieldInputText('file.data_file.original_file_name', 50) },
+            {
+                label: '[en]Date[/en][ja]日付[/ja]',
+                value: this.renderFieldDate('', 'publication_year', 'publication_month', 'publication_mday'),
+            },
+            {
+                label: '[en]Caption[/en][ja]キャプション[/ja]',
+                value: this.renderFieldInputText('file.preview.caption', 50),
+            },
+            {
+                label: '[en]Data File[/en][ja]データファイル[/ja]',
+                value: this.renderFieldInputText('file.data_file.original_file_name', 50),
+            },
         ];
         return rows;
     }
 }
 
-export default DataAdvancedSearch;
+export default DataAdvancedSearch;

src/database/item-type/data/DataDetail.tsx

@@ -1,44 +1,113 @@
-import React from 'react';
 import Functions from '../../../functions';
-import ItemUtil, { ItemData } from '../../lib/ItemUtil';
+import ItemUtil, { type ItemData } from '../../lib/ItemUtil';
 import DetailBase from '../lib/DetailBase';
 import ItemTypeField from '../lib/field';
 import SimPFLinkIcon from '../lib/field/SimPFLinkIcon';
 import DataUtil from './DataUtil';
 
 class DataDetail extends DetailBase {
-
     getFields() {
         const { lang } = this.props;
         const item = this.props.item as ItemData;
         const fields = [
             { label: 'ID', value: item.doi },
-            { label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+            {
+                label: '[en]Language[/en][ja]言語[/ja]',
+                value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+            },
             { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
-            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
-            { label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
-            { label: '[en]Date[/en][ja]日付[/ja]', value: <ItemTypeField.PublicationDate lang={lang} year={item.publication_year} month={item.publication_month} mday={item.publication_mday} /> },
-            { label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
-            { label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
-            { label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+            {
+                label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+                value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+            },
+            {
+                label: '[en]Description[/en][ja]概要[/ja]',
+                value: <ItemTypeField.Description lang={lang} description={item.description} />,
+            },
+            {
+                label: '[en]Date[/en][ja]日付[/ja]',
+                value: (
+                    <ItemTypeField.PublicationDate
+                        lang={lang}
+                        year={item.publication_year}
+                        month={item.publication_month}
+                        mday={item.publication_mday}
+                    />
+                ),
+            },
+            {
+                label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+            },
+            {
+                label: '[en]Created Date[/en][ja]作成日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+            },
+            {
+                label: '[en]Contributor[/en][ja]登録者[/ja]',
+                value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
+            },
             { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
-            { label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
-            { label: '[en]Data Type[/en][ja]データタイプ[/ja]', value: <DataUtil.DataType lang={lang} type={item.data_type} /> },
-            { label: '[en]Experimenter[/en][ja]実験者[/ja]', value: <ItemTypeField.Author lang={lang} author={item.experimenter} /> },
-            { label: '[en]Preview[/en][ja]プレビュー[/ja]', value: <ItemTypeField.Preview lang={lang} file={item.file} /> },
-            { label: '[en]Data File[/en][ja]データファイル[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="data_file" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} downloadLimit={item.attachment_dl_limit} /> },
+            {
+                label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+                value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+            },
+            {
+                label: '[en]Data Type[/en][ja]データタイプ[/ja]',
+                value: <DataUtil.DataType lang={lang} type={item.data_type} />,
+            },
+            {
+                label: '[en]Experimenter[/en][ja]実験者[/ja]',
+                value: <ItemTypeField.Author lang={lang} author={item.experimenter} />,
+            },
+            {
+                label: '[en]Preview[/en][ja]プレビュー[/ja]',
+                value: <ItemTypeField.Preview lang={lang} file={item.file} />,
+            },
+            {
+                label: '[en]Data File[/en][ja]データファイル[/ja]',
+                value: (
+                    <ItemTypeField.ItemFile
+                        lang={lang}
+                        file={item.file}
+                        type="data_file"
+                        rights={item.rights}
+                        useCc={item.use_cc}
+                        ccCommercialUse={item.cc_commercial_use}
+                        ccModification={item.cc_modification}
+                        downloadLimit={item.attachment_dl_limit}
+                    />
+                ),
+            },
             { label: 'Readme', value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
-            { label: 'Rights', value: <ItemTypeField.Rights lang={lang} rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+            {
+                label: 'Rights',
+                value: (
+                    <ItemTypeField.Rights
+                        lang={lang}
+                        rights={item.rights}
+                        useCc={item.use_cc}
+                        ccCommercialUse={item.cc_commercial_use}
+                        ccModification={item.cc_modification}
+                    />
+                ),
+            },
             { label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
-            { label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} /> },
+            {
+                label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+                value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} />,
+            },
         ];
         const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
         if (simpfLinkUrl !== '') {
-            const field = { label: 'Online Simulation', value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} /> };
+            const field = {
+                label: 'Online Simulation',
+                value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} />,
+            };
             fields.splice(14, 0, field);
         }
         return fields;
     }
 }
 
-export default DataDetail;
+export default DataDetail;

src/database/item-type/data/DataList.tsx

@@ -1,12 +1,10 @@
-import React, { Fragment } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Functions from '../../../functions';
 import iconFile from '../../assets/images/icon_data.gif';
-import { ItemData } from '../../lib/ItemUtil';
-import ListBase, { ListBaseProps } from '../lib/ListBase';
+import type { ItemData } from '../../lib/ItemUtil';
+import ListBase, { type ListBaseProps } from '../lib/ListBase';
 
 class DataList extends ListBase {
-
     constructor(props: ListBaseProps) {
         super(props);
         this.label = 'Data';
@@ -16,16 +14,15 @@ class DataList extends ListBase {
     renderBody() {
         const { lang } = this.props;
         const item = this.props.item as ItemData;
-        const authors = item.experimenter.map((author, i) => {
-            return <Fragment key={i}>{i > 0 && ', '}{Functions.mlang(author, lang)}</Fragment>
-        });
+        const authors = item.experimenter.map((author) => Functions.mlang(author, lang)).join(', ');
         return (
             <>
-                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
+                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+                <br />
                 {authors}
             </>
         );
     }
 }
 
-export default DataList;
+export default DataList;

src/database/item-type/data/DataTop.tsx

@@ -1,17 +1,17 @@
-import { ItemDataSubTypes } from '../../lib/ItemUtil';
-import TopBase, { TopBaseProps } from '../lib/TopBase';
 import iconFile from '../../assets/images/icon_data.gif';
+import { ItemDataSubTypes } from '../../lib/ItemUtil';
+import TopBase, { type TopBaseProps } from '../lib/TopBase';
 
 class DataTop extends TopBase {
-
     constructor(props: TopBaseProps) {
         super(props);
         this.type = 'data';
         this.label = 'Data';
         this.icon = iconFile;
-        this.description = '[en]Result data in numerical text/image/movie formats.[/en][ja]実験結果の数値データ/画像/動画など[/ja]';
+        this.description =
+            '[en]Result data in numerical text/image/movie formats.[/en][ja]実験結果の数値データ/画像/動画など[/ja]';
         this.subTypes = ItemDataSubTypes;
     }
 }
 
-export default DataTop;
+export default DataTop;

src/database/item-type/data/DataUtil.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { MultiLang } from '../../../config';
-import { ItemDataSubType, ItemDataSubTypes } from '../../lib/ItemUtil';
+import type { MultiLang } from '../../../config';
+import { type ItemDataSubType, ItemDataSubTypes } from '../../lib/ItemUtil';
 
 interface DataTypeProps {
     lang: MultiLang;
@@ -9,15 +8,17 @@ interface DataTypeProps {
 
 const DataType = (props: DataTypeProps) => {
     const { type } = props;
-    const subtype = ItemDataSubTypes.find((value) => { return value.type === type; });
+    const subtype = ItemDataSubTypes.find((value) => {
+        return value.type === type;
+    });
     if (typeof subtype === 'undefined') {
         return null;
     }
-    return (<span>{subtype.label}</span>);
-}
+    return <span>{subtype.label}</span>;
+};
 
 const DataUtil = {
     DataType,
-}
+};
 
-export default DataUtil;
+export default DataUtil;

src/database/item-type/data/index.tsx

@@ -1,7 +1,7 @@
-import DataTop from './DataTop';
-import DataList from './DataList';
-import DataDetail from './DataDetail';
 import DataAdvancedSearch from './DataAdvancedSearch';
+import DataDetail from './DataDetail';
+import DataList from './DataList';
+import DataTop from './DataTop';
 
 const ItemTypeData = {
     Top: DataTop,
@@ -10,4 +10,4 @@ const ItemTypeData = {
     AdvancedSearch: DataAdvancedSearch,
 };
 
-export default ItemTypeData;
+export default ItemTypeData;

src/database/item-type/files/FilesAdvancedSearch.tsx

@@ -1,30 +1,41 @@
-import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
 
 class FilesAdvancedSearch extends AdvancedSearchBase {
-
     constructor(props: AdvancedSearchBaseProps) {
         super(props);
         this.type = 'files';
         this.title = 'Files';
-        this.state.values['title'] = '';
-        this.state.values['data_file_name'] = '';
-        this.state.values['data_file_mimetype'] = '';
-        this.state.values['data_file_filetype'] = '';
-        this.state.values['keyword'] = '';
-        this.state.values['description'] = '';
+        this.state.values.title = '';
+        this.state.values.data_file_name = '';
+        this.state.values.data_file_mimetype = '';
+        this.state.values.data_file_filetype = '';
+        this.state.values.keyword = '';
+        this.state.values.description = '';
     }
 
     getRows() {
         const rows = [
             { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
-            { label: '- [en]File Name[/en][ja]ファイル名[/ja]', value: this.renderFieldInputText('data_file_name', 50) },
-            { label: '- [en]MIME Type[/en][ja]MIMEタイプ[/ja]', value: this.renderFieldInputText('data_file_mimetype', 50) },
-            { label: '- [en]File Type[/en][ja]ファイルタイプ[/ja]', value: this.renderFieldInputText('data_file_filetype', 20) },
-            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
+            {
+                label: '- [en]File Name[/en][ja]ファイル名[/ja]',
+                value: this.renderFieldInputText('data_file_name', 50),
+            },
+            {
+                label: '- [en]MIME Type[/en][ja]MIMEタイプ[/ja]',
+                value: this.renderFieldInputText('data_file_mimetype', 50),
+            },
+            {
+                label: '- [en]File Type[/en][ja]ファイルタイプ[/ja]',
+                value: this.renderFieldInputText('data_file_filetype', 20),
+            },
+            {
+                label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+                value: this.renderFieldInputText('keyword', 50),
+            },
             { label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
         ];
         return rows;
     }
 }
 
-export default FilesAdvancedSearch;
+export default FilesAdvancedSearch;

src/database/item-type/files/FilesDetail.tsx

@@ -1,31 +1,56 @@
-import React from 'react';
 import Functions from '../../../functions';
-import { ItemFiles } from '../../lib/ItemUtil';
+import type { ItemFiles } from '../../lib/ItemUtil';
 import DetailBase from '../lib/DetailBase';
 import ItemTypeField from '../lib/field';
 
 class FilesDetail extends DetailBase {
-
     getFields() {
         const { lang } = this.props;
         const item = this.props.item as ItemFiles;
         return [
             { label: 'ID', value: item.doi },
-            { label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+            {
+                label: '[en]Language[/en][ja]言語[/ja]',
+                value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+            },
             { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
-            { label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
-            { label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
-            { label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+            {
+                label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+            },
+            {
+                label: '[en]Created Date[/en][ja]作成日[/ja]',
+                value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+            },
+            {
+                label: '[en]Contributor[/en][ja]登録者[/ja]',
+                value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
+            },
             { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
-            { label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
-            { label: '[en]Data File[/en][ja]データファイル[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="files_file" /> },
+            {
+                label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+                value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+            },
+            {
+                label: '[en]Data File[/en][ja]データファイル[/ja]',
+                value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="files_file" />,
+            },
             { label: '- [en]File Name[/en][ja]ファイル名[/ja]', value: item.data_file_name },
             { label: '- [en]MIME Type[/en][ja]MIMEタイプ[/ja]', value: item.data_file_mimetype },
             { label: '- [en]File Type[/en][ja]ファイルタイプ[/ja]', value: item.data_file_filetype },
-            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
-            { label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+            {
+                label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+                value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+            },
+            {
+                label: '[en]Description[/en][ja]概要[/ja]',
+                value: <ItemTypeField.Description lang={lang} description={item.description} />,
+            },
             { label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
-            { label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} /> },
+            {
+                label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+                value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} />,
+            },
         ];
     }
 }

src/database/item-type/files/FilesList.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Functions from '../../../functions';
 import iconFile from '../../assets/images/icon_files.gif';
-import { ItemFiles } from '../../lib/ItemUtil';
+import type { ItemFiles } from '../../lib/ItemUtil';
 import Contributer from '../lib/field/Contributer';
-import ListBase, { ListBaseProps } from '../lib/ListBase';
+import ListBase, { type ListBaseProps } from '../lib/ListBase';
 
 class FilesList extends ListBase {
-
     constructor(props: ListBaseProps) {
         super(props);
         this.label = 'Files';
@@ -19,12 +17,14 @@ class FilesList extends ListBase {
         const item = this.props.item as ItemFiles;
         return (
             <>
-                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
-                <Contributer lang={lang} uname={item.uname} name={item.name} /><br />
+                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+                <br />
+                <Contributer lang={lang} uname={item.uname} name={item.name} />
+                <br />
                 {item.data_file_mimetype}
             </>
         );
     }
 }
 
-export default FilesList;
+export default FilesList;

src/database/item-type/files/FilesTop.tsx

@@ -1,9 +1,8 @@
-import TopBase, { TopBaseProps } from '../lib/TopBase';
 import iconFile from '../../assets/images/icon_files.gif';
 import { ItemFilesSubTypes } from '../../lib/ItemUtil';
+import TopBase, { type TopBaseProps } from '../lib/TopBase';
 
 class FilesTop extends TopBase {
-
     constructor(props: TopBaseProps) {
         super(props);
         this.type = 'files';
@@ -14,4 +13,4 @@ class FilesTop extends TopBase {
     }
 }
 
-export default FilesTop;
+export default FilesTop;

src/database/item-type/files/FilesUtil.tsx

@@ -1,5 +1,3 @@
+const FilesUtil = {};
 
-const FilesUtil = {
-}
-
-export default FilesUtil;
+export default FilesUtil;

src/database/item-type/files/index.tsx

@@ -1,7 +1,7 @@
-import FilesTop from './FilesTop';
-import FilesList from './FilesList';
-import FilesDetail from './FilesDetail';
 import FilesAdvancedSearch from './FilesAdvancedSearch';
+import FilesDetail from './FilesDetail';
+import FilesList from './FilesList';
+import FilesTop from './FilesTop';
 
 const ItemTypeFiles = {
     Top: FilesTop,
@@ -10,4 +10,4 @@ const ItemTypeFiles = {
     AdvancedSearch: FilesAdvancedSearch,
 };
 
-export default ItemTypeFiles;
+export default ItemTypeFiles;

src/database/item-type/index.tsx

@@ -1,7 +1,21 @@
-import React from 'react';
-import { MultiLang } from '../../config';
-import AdvancedSearchQuery from '../lib/AdvancedSearchQuery';
-import { Item, ItemBinder, ItemBook, ItemConference, ItemData, ItemFiles, ItemMemo, ItemModel, ItemPaper, ItemPresentation, ItemSimulator, ItemStimulus, ItemTool, ItemUrl } from '../lib/ItemUtil';
+import type { MultiLang } from '../../config';
+import type AdvancedSearchQuery from '../lib/AdvancedSearchQuery';
+import type {
+    Item,
+    ItemBinder,
+    ItemBook,
+    ItemConference,
+    ItemData,
+    ItemFiles,
+    ItemMemo,
+    ItemModel,
+    ItemPaper,
+    ItemPresentation,
+    ItemSimulator,
+    ItemStimulus,
+    ItemTool,
+    ItemUrl,
+} from '../lib/ItemUtil';
 import ItemTypeBinder from './binder';
 import ItemTypeBook from './book';
 import ItemTypeConference from './conference';
@@ -52,7 +66,7 @@ const Top = (props: TopProps) => {
         default:
             return null;
     }
-}
+};
 
 interface ListProps {
     lang: MultiLang;
@@ -90,7 +104,7 @@ const List = (props: ListProps) => {
         default:
             return null;
     }
-}
+};
 
 interface DetailProps {
     lang: MultiLang;
@@ -128,7 +142,7 @@ const Detail = (props: DetailProps) => {
         default:
             return null;
     }
-}
+};
 
 interface AdvancedSearchProps {
     lang: MultiLang;
@@ -167,13 +181,13 @@ const AdvancedSearch = (props: AdvancedSearchProps) => {
         default:
             return null;
     }
-}
+};
 
 const ItemType = {
     Top,
     List,
     Detail,
-    AdvancedSearch
-}
+    AdvancedSearch,
+};
 
-export default ItemType;
+export default ItemType;

src/database/item-type/lib/AdvancedSearchBase.tsx

@@ -1,8 +1,9 @@
-import React, { ChangeEvent, Component } from 'react';
-import { MultiLang } from '../../../config';
+import type { ReactElement } from 'react';
+import { type ChangeEvent, Component } from 'react';
+import type { MultiLang } from '../../../config';
 import Functions from '../../../functions';
-import AdvancedSearchQuery from '../../lib/AdvancedSearchQuery';
-import { ItemSubTypes } from '../../lib/ItemUtil';
+import type AdvancedSearchQuery from '../../lib/AdvancedSearchQuery';
+import type { ItemSubTypes } from '../../lib/ItemUtil';
 
 export interface AdvancedSearchBaseProps {
     lang: MultiLang;
@@ -11,12 +12,11 @@ export interface AdvancedSearchBaseProps {
 
 interface State {
     show: boolean;
-    values: any;
+    values: Record<string, string>;
 }
 
 class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
-
-    protected type: string = 'base'
+    protected type: string = 'base';
     protected title: string = 'Base';
     protected query: AdvancedSearchQuery;
     protected ignoreKeys: string[] = [];
@@ -26,7 +26,7 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
         this.state = {
             show: false,
             values: {},
-        }
+        };
         this.query = props.query;
         this.handleChangeTitleCheck = this.handleChangeTitleCheck.bind(this);
     }
@@ -49,14 +49,14 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
     deleteIgnoreKey(key: string) {
         if (this.ignoreKeys.includes(key)) {
             this.ignoreKeys = this.ignoreKeys.filter((v) => {
-                return (v !== key);
+                return v !== key;
             });
         }
         this.query.set(this.type, key, this.state.values[key]);
     }
 
     updateField(key: string, value: string) {
-        let values = Object.assign({}, this.state.values);
+        const values = Object.assign({}, this.state.values);
         values[key] = value;
         this.updateQuery(key, value);
         this.setState({ values });
@@ -75,7 +75,7 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
         this.setState({ show });
     }
 
-    getRows(): { label: string, value: JSX.Element }[] {
+    getRows(): { label: string; value: ReactElement }[] {
         return [];
     }
 
@@ -84,20 +84,30 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
             this.updateField(key, e.target.value);
         };
         return (
-            <input className="fieldInputText" type="text" value={this.state.values[key]} size={size} onChange={onChange} />
+            <input
+                className="fieldInputText"
+                type="text"
+                value={this.state.values[key]}
+                size={size}
+                onChange={onChange}
+            />
         );
     }
 
-    renderFieldSelect(key: string, values: ItemSubTypes<any>) {
+    renderFieldSelect(key: string, values: ItemSubTypes<string>) {
         const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
             this.updateField(key, e.target.value);
         };
-        const options = values.map(({ type, label }, i) => {
-            return <option key={i} value={type}>{label}</option>;
+        const options = values.map(({ type, label }) => {
+            return (
+                <option key={type} value={type}>
+                    {label}
+                </option>
+            );
         });
         return (
             <select className="fieldSelect" value={this.state.values[key]} onChange={onChange}>
-                <option value=''>Any</option>
+                <option value="">Any</option>
                 {options}
             </select>
         );
@@ -107,37 +117,68 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
         const onChange = (e: ChangeEvent<HTMLInputElement>) => {
             if (e.target.checked) {
                 this.deleteIgnoreKey(keyYear);
-                keyMonth !== '' && this.deleteIgnoreKey(keyMonth);
-                keyMday !== '' && this.deleteIgnoreKey(keyMday);
+                if (keyMonth !== '') {
+                    this.deleteIgnoreKey(keyMonth);
+                }
+                if (keyMday !== '') {
+                    this.deleteIgnoreKey(keyMday);
+                }
             } else {
                 this.setIgnoreKey(keyYear);
-                keyMonth !== '' && this.setIgnoreKey(keyMonth);
-                keyMday !== '' && this.setIgnoreKey(keyMday);
+                if (keyMonth !== '') {
+                    this.setIgnoreKey(keyMonth);
+                }
+                if (keyMday !== '') {
+                    this.setIgnoreKey(keyMday);
+                }
             }
         };
         const month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
         const monthOptions = month.map((value, i) => {
-            return <option key={i} value={i + 1}>{value}</option>;
-        })
-        let mdayOptions: JSX.Element[] = [];
+            return (
+                <option key={value} value={i + 1}>
+                    {value}
+                </option>
+            );
+        });
+        const mdayOptions: ReactElement[] = [];
         for (let i = 1; i <= 31; i++) {
-            mdayOptions.push(<option key={i} value={i}>{i}</option>)
+            mdayOptions.push(
+                <option key={i} value={i}>
+                    {i}
+                </option>
+            );
         }
         return (
             <div className="fieldDate">
-                <input type="checkbox" onChange={onChange} />
-                {label.length !== 0 && <label className="fieldDateLabel">{label}</label>}
-                {keyMonth !== '' &&
-                    <select value={this.state.values[keyMonth]} onChange={(e) => this.updateField(keyMonth, e.target.value)}>
+                <input type="checkbox" id={keyYear} onChange={onChange} />
+                {label.length !== 0 && (
+                    <label className="fieldDateLabel" htmlFor={keyYear}>
+                        {label}
+                    </label>
+                )}
+                {keyMonth !== '' && (
+                    <select
+                        value={this.state.values[keyMonth]}
+                        onChange={(e) => this.updateField(keyMonth, e.target.value)}
+                    >
                         {monthOptions}
                     </select>
-                }
-                {keyMday !== '' &&
-                    <select value={this.state.values[keyMday]} onChange={(e) => this.updateField(keyMday, e.target.value)}>
+                )}
+                {keyMday !== '' && (
+                    <select
+                        value={this.state.values[keyMday]}
+                        onChange={(e) => this.updateField(keyMday, e.target.value)}
+                    >
                         {mdayOptions}
                     </select>
-                }
-                <input type="text" value={this.state.values[keyYear]} size={5} onChange={(e) => this.updateField(keyYear, e.target.value)} />
+                )}
+                <input
+                    type="text"
+                    value={this.state.values[keyYear]}
+                    size={5}
+                    onChange={(e) => this.updateField(keyYear, e.target.value)}
+                />
             </div>
         );
     }
@@ -151,7 +192,7 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
         const fields = rows.map((value, idx) => {
             const evenodd = idx % 2 === 0 ? 'even' : 'odd';
             return (
-                <tr key={idx}>
+                <tr key={value.label}>
                     <td className="head">{Functions.mlang(value.label, lang)}</td>
                     <td className={evenodd}>{value.value}</td>
                 </tr>
@@ -159,9 +200,7 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
         });
         return (
             <table className="itemtypeFields outer">
-                <tbody>
-                    {fields}
-                </tbody>
+                <tbody>{fields}</tbody>
             </table>
         );
     }
@@ -173,7 +212,11 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
                     <tbody>
                         <tr>
                             <th align="left">
-                                <input type="checkbox" checked={this.state.show} onChange={this.handleChangeTitleCheck} />
+                                <input
+                                    type="checkbox"
+                                    checked={this.state.show}
+                                    onChange={this.handleChangeTitleCheck}
+                                />
                                 {this.title}
                             </th>
                         </tr>
@@ -183,7 +226,6 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
             </div>
         );
     }
-
 }
 
-export default AdvancedSearchBase;
+export default AdvancedSearchBase;