feat: migrate from Create React App to Vite

Rebuild the site on the stack the other converted sites share: Vite 8,
React 19, TypeScript 7, react-router 8, Biome and sanitize.css, with the
site data moved out of the bundle into static-contents/.

- base the database code on cerebellum.neuroinf.jp and keep the pupil
  platform's table layout, about page and menu
- load the Flickr badge feed as JSONP without extra libraries
- serve the XooNIps data from modules/xoonips/, redirecting the old
  download and /database/file URLs
- restate the column widths as border-box totals and keep form controls
  on white
- track page views with GA4

.gitignore

@@ -1,24 +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*
+
+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,104 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# Pupil Platform
 
-## Available Scripts
+Static front-end for the archived [Pupil Platform](https://pupil.brain.riken.jp/),
+a XooNIps database for pupil research, 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
+installation by [xoops-static-exporter](https://git.ni.riken.jp/niu/xoops-static-exporter)
+(`sites/pupil.brain.riken.jp/`). All of it lives in `static-contents/`, which
+sits next to the repository rather than inside it:
 
-### `npm run build`
+```
+pupil.brain.riken.jp/
+├── pupil.brain.riken.jp/   this repository
+└── static-contents/
+    └── modules/
+        └── xoonips/        tree.json, items.json, simpf-links.json, file/<id>/
+```
 
-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 right column shows photos tagged `eye` and `pupil` from Flickr's public
+feed, loaded in the browser as JSONP.
 
-### `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. The site's own base rules are in
+`src/App.css` and the layout in the CSS Modules under `src/common/`. Where a
+sanitize.css default does not suit the design, the 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/pupil.brain.riken.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`, `/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"]
+    },
+    "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/config.inc.php

@@ -1,3 +0,0 @@
-<?php
-
-$mainfile='/data/www/html/mainfile.php';

etc/dumpPublicItems.php

@@ -1,948 +0,0 @@
-<?php
-
-require_once __DIR__.'/config.inc.php';
-
-if (!isset($mainfile)) {
-  echo 'ERROR : $mainfile variable does not defined in config.inc.php'.PHP_EOL;
-}
-
-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 ) && strtoupper( $method ) == 'POST' ) {
-  $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 && $method == 'POST' ) {
-  die( 'Error: not accept POST request'."\n" );
-}
-
-// ====================
-
-$prefix = $xoopsDB->prefix();
-
-// get public index with certified item count
-$sql =<<< SQL
-SELECT 
-    `idx`.*,
-    `it`.`title`,
-    (SELECT COUNT(*)
-      FROM `${prefix}_xoonips_index_item_link` AS `iil`
-      INNER JOIN `${prefix}_xoonips_item_basic` AS `ib` ON `iil`.`item_id`=`ib`.`item_id`
-      WHERE `iil`.`index_id`=`idx`.`index_id` AND `iil`.`certify_state`=2
-    ) AS `num_items`
-  FROM `${prefix}_xoonips_index` AS `idx`
-  INNER JOIN `${prefix}_xoonips_item_title` AS `it` ON `idx`.`index_id`=`it`.`item_id`
-  WHERE `it`.`title_id`=0
-     AND `idx`.`open_level`=1
-SQL;
-
-$limitItems = array();
-
-if (!($res = $xoopsDB->query($sql))) {
-  var_dump($xoopsDB);exit();
-}
-$tree = array();
-$root = array();
-while ($row = $xoopsDB->fetchArray($res)) {
-  myDecode($row);
-  $tree[$row['index_id']] = $row;
-  $root[$row['parent_index_id']][$row['sort_number']] = $row['index_id'];
-}
-$xoopsDB->freeRecordSet($res);
-foreach ($root as &$node) {
-  ksort($node);
-}
-unset($node);
-
-$data[] = getTreeNode($tree, $root, 3);
-$json = json_encode($data);//, JSON_PRETTY_PRINT);
-file_put_contents('tree.json', $json);
-unset($json, $data, $root);
-
-// get public items
-//if (!is_dir(__DIR__.'/items/')) {
-//  mkdir(__DIR__.'/items/');
-//}
-$sql =<<< SQL
-SELECT 
-    `ib`.*,
-    `it`.`title`,
-    `ity`.`display_name` AS `item_type_display_name`,
-    `ity`.`name` AS `item_type_name`,
-    `u`.`uname`, `u`.`name`, `u`.`email`
-  FROM `${prefix}_xoonips_item_basic` AS `ib`
-  INNER JOIN `${prefix}_xoonips_item_title` AS `it` ON `ib`.`item_id`=`it`.`item_id`
-  INNER JOIN `${prefix}_xoonips_item_type` AS `ity` ON `ib`.`item_type_id`=`ity`.`item_type_id`
-  INNER JOIN `${prefix}_users` AS `u` ON `ib`.`uid`=`u`.`uid`
-  WHERE `it`.`title_id`=0 AND
-    `ity`.`display_name` != 'Index'
-SQL;
-
-if (!($res = $xoopsDB->query($sql))) {
-  var_dump($xoopsDB);exit();
-}
-$items = array();
-while ($row = $xoopsDB->fetchArray($res)) {
-  myDecode($row);
-  convertToInt($row, array('item_id', 'item_type_id', 'uid', 'last_update_date', 'creation_date', 'publication_year', 'publication_month', 'publication_mday'));
-  $row['item_url'] = getItemUrl($row);
-  $row['index'] = getIndexes($tree, $row['item_id']);
-  if (0 === count($row['index'])) {
-      continue;
-  }
-  $row['changelog'] = getChangeLogs($row['item_id']);
-  $row['related_to'] = getRelatedTo($row['item_id']);
-  $row['keyword'] = getKeyword($row['item_id']);
-  $row['file'] = getFile($row['item_id']);
-  switch ($row['item_type_name']) {
-    case 'xnpbinder':
-       appendBinderInfo($row);
-       break;
-    case 'xnpfiles':
-       appendFilesInfo($row);
-       break;
-    case 'xnppaper':
-       appendPaperInfo($row);
-       break;
-    case 'xnpbook':
-       appendBookInfo($row);
-       break;
-    case 'xnpconference':
-       appendConferenceInfo($row);
-       break;
-    case 'xnpdata':
-       appendDataInfo($row);
-       break;
-    case 'xnptool':
-       appendToolInfo($row);
-       break;
-    case 'xnpmemo':
-       appendMemoInfo($row);
-       break;
-    case 'xnpmodel':
-       appendModelInfo($row);
-       break;
-    case 'xnppresentation':
-       appendPresentationInfo($row);
-       break;
-    case 'xnpstimulus':
-       appendStimulusInfo($row);
-       break;
-    case 'xnpsimulator':
-       appendSimulatorInfo($row);
-       break;
-    case 'xnpurl':
-       appendUrlInfo($row);
-       break;
-    case 'xnpnimgcenter':
-       appendNimgcenterInfo($row);
-       break;
-    default:
-       exit('Unsupported item type: '.$row['item_type_name']);
-  }
-  if (isset($row['attachment_dl_limit']) && $row['attachment_dl_limit']) {
-    $limitItems[] = array(
-       'uname' => $row['uname'],
-       'name' => $row['name'],
-       'email' => $row['email'],
-       'item_id' => $row['item_id'],
-       'doi' => $row['doi'],
-    );
-  }
-  unset($row['email']);
-  //$items[$row['item_id']] = $row;
-  $items[] = $row;
-  $json = json_encode($row);//, JSON_PRETTY_PRINT);
-  //file_put_contents(__DIR__.'/items/'.$row['item_id'].'.json', $json);
-}
-$xoopsDB->freeRecordSet($res);
-$json = json_encode($items);//, JSON_PRETTY_PRINT);
-file_put_contents(__DIR__.'/items.json', $json);
-
-$fp = fopen(__DIR__.'/dl-limit-items.csv', 'w');
-foreach ($limitItems as $row) {
-  $data = array(
-     $row['uname'],
-     $row['name'],
-     $row['email'],
-     getItemUrl($row),
-  );
-  fputcsv($fp, $data);
-}
-fclose($fp);
-
-// get files
-$fthandler = xoonips_getormhandler('xoonips', 'file_type');
-$criteria = new Criteria('name', 'preview');
-$ftobjs = $fthandler->getObjects($criteria);
-$ftId = $ftobjs[0]->get('file_type_id');
-$fhandler = xoonips_getormhandler('xoonips', 'file');
-$join = new XooNIpsJoinCriteria('xoonips_item_basic', 'item_id', 'item_id', 'INNER', 'ib');
-$join->cascade(new XooNIpsJoinCriteria('xoonips_index_item_link', 'item_id', 'item_id', 'INNER', 'iil'), 'ib', true);
-$join->cascade(new XooNIpsJoinCriteria('xoonips_index', 'index_id', 'index_id', 'INNER', 'idx'), 'iil', true);
-$criteria = new CriteriaCompo(new Criteria('is_deleted', 0));
-// $criteria->add(new Criteria('file_type_id', $ftId));
-$criteria->add(new Criteria('certify_state', 2));
-$criteria->add(new Criteria('open_level', 1));
-$res = $fhandler->open($criteria, '', false, $join);
-$filesDir = __DIR__.'/file';
-if (!is_dir($filesDir)) {
-  mkdir($filesDir);
-}
-$xconfig_handler = xoonips_getormhandler('xoonips', 'config');
-$basePath = $xconfig_handler->getValue('upload_dir');
-while ($obj = $fhandler->getNext($res)) {
-    $file_id = $obj->get('file_id');
-    $file_name = $obj->get('original_file_name');
-    $file_dir = $filesDir.'/'.$file_id;
-    if (!is_dir($file_dir)) {
-        @mkdir($file_dir);
-    }
-    if (!file_exists($file_dir.'/'.$file_name)) {
-        if (!copy($basePath.'/'.$file_id, $file_dir.'/'.$file_name)) {
-            echo 'failed to copy file: '.$basePath.'/'.$file_id. PHP_EOL;
-        }
-        $htaccess = $file_dir.'/.htaccess';
-        $data = "RewriteEngine On\nRewriteBase /database/file/$file_id\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteRule .* $file_name [R=301,L]\n";
-        file_put_contents($htaccess, $data);
-    }
-    if ($ftId == $obj->get('file_type_id')) {
-        // create preview thubmnails
-        createThumbnail($obj, $basePath, $filesDir);
-    }
-}
-$fhandler->close($res);
-
-// functions
-
-function getItemUrl($row) {
-  $url = XOONIPS_URL.'/detail.php?';
-  if ('' != $row['doi']) {
-    $url .= XNP_CONFIG_DOI_FIELD_PARAM_NAME.'='.$row['doi'];
-  } else {
-    $url .= 'item_id='.$row['item_id'];
-  }
-  return $url;
-}
-
-function getTreeNode($tree, $root, $index_id) {
-  $children = array();
-  if (isset($root[$index_id])) {
-     foreach ($root[$index_id] as $child_index_id) {
-         $children[] = getTreeNode($tree, $root, $child_index_id);
-     }
-  }
-  return array(
-    'id' => (int) $tree[$index_id]['index_id'],
-    'title' => $tree[$index_id]['title'],
-    'num_of_items' => (int) $tree[$index_id]['num_items'],
-    'children' => $children
-  );
-}
-
-function getIndexes($tree, $item_id) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $sql =<<< SQL
-SELECT
-    `iil`.*
-  FROM `${prefix}_xoonips_index_item_link` AS `iil`
-  WHERE `iil`.`item_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $indexes = array();
-  while ($row = $xoopsDB->fetchArray($res)) {
-    $index_id = $row['index_id'];
-    if (isset($tree[$index_id])) {
-       $idxes = array();
-       $idxes[] = $tree[$index_id]['title'];
-       $parent_id = $tree[$index_id]['parent_index_id'];
-       while ($parent_id != 1) {
-          $idxes[] = $tree[$parent_id]['title'];
-          $parent_id = $tree[$parent_id]['parent_index_id'];
-       }
-       $idxes[] = '';
-       $indexes[] = array(
-          'index_id' => (int) $index_id,
-          'title' => trim(implode(' / ', array_reverse($idxes))),
-       );
-    }
-  }
-  $xoopsDB->freeRecordSet($res);
-  return $indexes;
-}
-
-function getChangeLogs($item_id) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $sql =<<< SQL
-SELECT `log_date`, `log`
-  FROM `${prefix}_xoonips_changelog`
-  WHERE `item_id`=$item_id
-  ORDER BY `log_date` DESC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $ret = array();
-  while ($row = $xoopsDB->fetchArray($res)) {
-     myDecode($row);
-     convertToInt($row, array('log_date'));
-     $ret[] = $row;
-  }
-  $xoopsDB->freeRecordSet($res);
-  return $ret;
-}
-
-function getRelatedTo($item_id) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $sql =<<< SQL
-SELECT `item_id`
-  FROM `${prefix}_xoonips_related_to`
-  WHERE `parent_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $ret = array();
-  while ($row = $xoopsDB->fetchArray($res)) {
-     $ret[] = (int) $row['item_id'];
-  }
-  $xoopsDB->freeRecordSet($res);
-  return $ret;
-}
-
-function getKeyword($item_id) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xoonips_item_keyword`
-  WHERE `item_id`=$item_id
-  ORDER BY `keyword_id` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $ret = array();
-  while ($row = $xoopsDB->fetchArray($res)) {
-     myDecode($row);
-     $ret[] = $row['keyword'];
-  }
-  $xoopsDB->freeRecordSet($res);
-  return $ret;
-}
-
-function getFile($item_id) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $sql =<<< SQL
-SELECT `f`.`file_id`, `f`.`original_file_name`, `f`.`mime_type`, `f`.`file_size`, `f`.`caption`, `f`.`timestamp`,
-  `ft`.`name` AS `file_type_name`, `ft`.`display_name` AS `file_type_display_name`
-  FROM `${prefix}_xoonips_file` AS `f`
-  INNER JOIN `${prefix}_xoonips_file_type` AS `ft` ON `f`.`file_type_id`=`ft`.`file_type_id`
-  WHERE `item_id`=$item_id
-    AND `is_deleted`=0
-  ORDER BY `ft`.`name` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $ret = array();
-  while ($row = $xoopsDB->fetchArray($res)) {
-     myDecode($row);
-     convertToInt($row, array('file_id', 'file_size'));
-     $ret[] = $row;
-  }
-  $xoopsDB->freeRecordSet($res);
-  return $ret;
-}
-
-function appendBinderInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpbinder_item_detail`
-  WHERE `binder_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('binder_id'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpbinder_binder_item_link`
-  WHERE `binder_id`=$item_id
-  ORDER BY `binder_item_link_id` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($link = $xoopsDB->fetchArray($res)) {
-     $row['link_item_ids'][] = (int) $link['item_id'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendFilesInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpfiles_item_detail`
-  WHERE `files_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('files_id'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendPaperInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnppaper_item_detail`
-  WHERE `paper_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('paper_id','volume','number'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnppaper_author`
-  WHERE `paper_id`=$item_id
-  ORDER BY `author_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['author'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['author'][] = $author['author'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendBookInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpbook_item_detail`
-  WHERE `book_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('book_id', 'attachment_dl_limit', 'attachment_dl_notify'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpbook_author`
-  WHERE `book_id`=$item_id
-  ORDER BY `author_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['author'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['author'][] = $author['author'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-
-function appendConferenceInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpconference_item_detail`
-  WHERE `conference_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('conference_id', 'conference_from_year', 'conference_from_month', 'conference_from_mday', 'conference_to_year', 'conference_to_month', 'conference_to_mday', 'attachment_dl_limit', 'attachment_dl_notify'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpconference_author`
-  WHERE `conference_id`=$item_id
-  ORDER BY `author_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['author'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['author'][] = $author['author'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendDataInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpdata_item_detail`
-  WHERE `data_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('data_id', 'use_cc', 'cc_commercial_use', 'cc_modification', 'attachment_dl_limit', 'attachment_dl_notify'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpdata_experimenter`
-  WHERE `data_id`=$item_id
-  ORDER BY `experimenter_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['experimenter'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['experimenter'][] = $author['experimenter'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendToolInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnptool_item_detail`
-  WHERE `tool_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('tool_id', 'use_cc', 'cc_commercial_use', 'cc_modification', 'attachment_dl_limit', 'attachment_dl_notify'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnptool_developer`
-  WHERE `tool_id`=$item_id
-  ORDER BY `developer_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['developer'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['developer'][] = $author['developer'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendMemoInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpmemo_item_detail`
-  WHERE `memo_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('memo_id'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendModelInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpmodel_item_detail`
-  WHERE `model_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('model_id', 'use_cc', 'cc_commercial_use', 'cc_modification', 'attachment_dl_limit', 'attachment_dl_notify'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpmodel_creator`
-  WHERE `model_id`=$item_id
-  ORDER BY `creator_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['creator'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['creator'][] = $author['creator'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendPresentationInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnppresentation_item_detail`
-  WHERE `presentation_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('presentation_id', 'use_cc', 'cc_commercial_use', 'cc_modification', 'attachment_dl_limit', 'attachment_dl_notify'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnppresentation_creator`
-  WHERE `presentation_id`=$item_id
-  ORDER BY `creator_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['creator'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['creator'][] = $author['creator'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendStimulusInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpstimulus_item_detail`
-  WHERE `stimulus_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('stimulus_id', 'use_cc', 'cc_commercial_use', 'cc_modification', 'attachment_dl_limit', 'attachment_dl_notify'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpstimulus_developer`
-  WHERE `stimulus_id`=$item_id
-  ORDER BY `developer_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['developer'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['developer'][] = $author['developer'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendSimulatorInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpsimulator_item_detail`
-  WHERE `simulator_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('simulator_id', 'use_cc', 'cc_commercial_use', 'cc_modification', 'attachment_dl_limit', 'attachment_dl_notify'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpsimulator_developer`
-  WHERE `simulator_id`=$item_id
-  ORDER BY `developer_order` ASC
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['developer'] = array();
-  while ($author = $xoopsDB->fetchArray($res)) {
-     myDecode($author);
-     $row['developer'][] = $author['developer'];
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendUrlInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpurl_item_detail`
-  WHERE `url_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     convertToInt($detail, array('url_id', 'url_count'));
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function appendNimgcenterInfo(&$row) {
-  global $xoopsDB;
-  $prefix = $xoopsDB->prefix();
-  $item_id = $row['item_id'];
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpnimgcenter_item_detail`
-  WHERE `nimgcenter_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  while ($detail = $xoopsDB->fetchArray($res)) {
-     myDecode($detail);
-     $detail['coord_type_name'] = (0 === $detail['coord_type']) ? 'Talairach' : 'MNI';
-     $row += $detail;
-  }
-  $xoopsDB->freeRecordSet($res);
-  $sql =<<< SQL
-SELECT *
-  FROM `${prefix}_xnpnimgcenter_talairach_list`
-  WHERE `nimgcenter_id`=$item_id
-SQL;
-  if (!($res = $xoopsDB->query($sql))) {
-    var_dump($xoopsDB);exit();
-  }
-  $row['coordinate'] = array();
-  while ($t = $xoopsDB->fetchArray($res)) {
-     $row['coordinate'][] = $t;
-  }
-  $xoopsDB->freeRecordSet($res);
-}
-
-function myDecode(&$data){
-  $textutil = xoonips_getutility('text');
-  foreach ($data as $k => $v) {
-     $v = $textutil->html_numeric_entities($v);
-     $data[$k] = mb_decode_numericentity($v, array(0x0, 0x10000, 0, 0xfffff), 'UTF-8');
-  }
-}
-
-function convertToInt(&$data, $keys) {
-    foreach ($keys as $key) {
-        if (isset($data[$key])) {
-            $data[$key] = '' === $data[$key] ? null : (int) $data[$key];
-        }
-    }
-}
-
-function createThumbnail($obj, $basePath, $outputDir) {
-    $fileId = $obj->get('file_id');
-    $outputFile = $outputDir.'/'.$fileId.'.png';
-    $thumbnail_file = $obj->get('thumbnail_file');
-    $size = strlen($thumbnail_file);
-    if ($size > 0) {
-        file_put_contents($outputFile, $thumbnail_file);
-        return true;
-    }
-    $file_path = $basePath.'/'.$fileId;
-    $finfo = finfo_open(FILEINFO_NONE);
-    $label = finfo_file($finfo, $file_path);
-    finfo_close($finfo);
-    $mime_type = $obj->get('mime_type');
-    if (preg_match('/^([^\\/]*)\\/(.*)$/', $mime_type, $matches)) {
-        if ($matches[1] == 'audio') {
-            $img_type = 'audio';
-        } elseif ($matches[1] == 'image') {
-            $img_type = 'image';
-        } elseif ($matches[1] == 'video') {
-            $img_type = 'video';
-        } elseif ($matches[1] == 'text') {
-            $img_type = 'text';
-        } elseif ($matches[1] == 'application') {
-            $text_types = array('pdf', 'xml', 'msword', 'vnd.ms-excel');
-            $image_types = array('vnd.ms-powerpoint', 'postscript');
-            $audio_types = array('vnd.rn-realmedia');
-            if (in_array($matches[2], $text_types)) {
-                $img_type = 'text';
-            } elseif (in_array($matches[2], $audio_types)) {
-                $img_type = 'audio';
-            } elseif (in_array($matches[2], $image_types)) {
-                $img_type = 'image';
-            } else {
-                $img_type = 'application';
-            }
-        } else {
-            $img_type = 'unknown';
-        }
-    } else {
-        $img_type = 'unknown';
-    }
-    $img_file = XOOPS_ROOT_PATH.'/modules/xoonips/images/thumbnail_'.$img_type.'.png';
-    // create image resource
-    $w = 100;
-    $h = 100;
-    $im = imagecreatetruecolor($w, $h);
-    // label setting
-    $f = 2;
-    // font number
-    $lp = 5;
-    // label padding
-    $fw = imagefontwidth($f);
-    // font width
-    $fh = imagefontheight($f);
-    // font height
-    $fmaxlen = ($w - $lp * 2) / $fw;
-    // max label length
-    $labels = explode(',', $label);
-    $label = $labels[0];
-    $llen = strlen($label);
-    if ($llen > $fmaxlen) {
-        $label = substr($label, 0, $fmaxlen - 3);
-        $label .= '...';
-        $llen = strlen($label);
-    }
-    $lx = ($w - $llen * $fw) / 2;
-    $ly = $h - $fh - $lp;
-    // change alpha attributes and create transparent color
-    imageantialias($im, true);
-    imagealphablending($im, false);
-    imagesavealpha($im, true);
-    $transparent = imagecolorallocatealpha($im, 255, 255, 255, 0);
-    $col_white = imagecolorallocate($im, 255, 255, 255);
-    $col_gray = imagecolorallocate($im, 127, 127, 127);
-    $col_black = imagecolorallocate($im, 0, 0, 0);
-    // fill all area with transparent color
-    imagefill($im, 0, 0, $col_white);
-    imagealphablending($im, true);
-    $imicon = imagecreatefrompng($img_file);
-    imagecopy($im, $imicon, $w / 2 - 48 / 2, $h / 2 - 48 / 2, 0, 0, 48, 48);
-    imagepolygon($im, array(0, 0, $w - 1, 0, $w - 1, $h - 1, 0, $h - 1), 4, $col_gray);
-    if (strlen($label) != 0) {
-        imagestring($im, $f, $lx, $ly, $label, $black);
-    }
-    imagepng($im, $outputFile);
-    imagedestroy($imicon);
-    imagedestroy($im);
-    return true;
-}
-

index.html

@@ -1,22 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <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="keywords" content="neuroinformatics, xoonips, database, pupil platform" />
     <meta name="author" content="Laboratory for Neuroinformatics, RIKEN Brain Science Institute" />
     <meta name="copyright" content="Copyright &copy; 2007" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Pupil Platform</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,58 +1,43 @@
 {
-  "name": "pupil",
-  "version": "1.0.0",
-  "private": true,
-  "dependencies": {
-    "@types/async-lock": "^1.1.2",
-    "@types/jest": "26.0.23",
-    "@types/jsonp": "^0.2.0",
-    "@types/lokijs": "^1.5.4",
-    "@types/node": "15.6.1",
-    "@types/pako": "^1.0.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",
-    "@types/react-transition-group": "^4.4.1",
-    "async-lock": "^1.3.0",
-    "axios": "^0.21.1",
-    "jsonp": "^0.2.1",
-    "lokijs": "^1.5.12",
-    "moment": "^2.29.1",
-    "pako": "^2.0.3",
-    "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.0.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.3.1",
-    "react-transition-group": "^4.4.1",
-    "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": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 10",
-    "not op_mini all"
-  ]
+    "name": "pupil",
+    "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": "Pupil Platform",
-  "name": "Pupil Platform",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "32x32 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+    "short_name": "Pupil Platform",
+    "name": "Pupil Platform",
+    "icons": [
+        {
+            "src": "favicon.ico",
+            "sizes": "32x32 16x16",
+            "type": "image/x-icon"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
 }

src/App.css

@@ -1,135 +1,135 @@
 /* --------------- Default --------------- */
 
 * {
-	margin: 0;
-	padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 body {
-	background-color: #fff;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	color: #000;
+    background-color: #fff;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    color: #000;
 }
 
 p {
-	margin-bottom: 1em;
+    margin-bottom: 1em;
 }
 
 table {
-	width: 100%;
+    width: 100%;
 }
 
 th {
-	background-color: #a3ceff;
-	text-align: left;
-	padding: 5px;
-	color: #fff;
+    background-color: #a3ceff;
+    text-align: left;
+    padding: 5px;
+    color: #fff;
 }
 
 td {
-	font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
 }
 
 ul {
-	list-style-type: disc outside;
+    list-style-type: disc outside;
 }
 
 li {
-	margin-left: 1em;
-	line-height: 140%;
+    margin-left: 1em;
+    line-height: 140%;
 }
 
 dt {
-	line-height: 140%;
+    line-height: 140%;
 }
 
 dd {
-	line-height: 140%;
+    line-height: 140%;
 }
 
 section {
-	margin: 10px;
+    margin: 10px;
 }
 /* --------------- Table Data --------------- */
 
 .outer {
-	padding: 1px;
-	background-color: #f3f6ff;
+    padding: 1px;
+    background-color: #f3f6ff;
 }
 
 .outer td {
-	padding: 3px;
+    padding: 3px;
 }
 
 .odd {
-	padding: 3px;
-	background-color: #f7ffff
+    padding: 3px;
+    background-color: #f7ffff;
 }
 
 .even {
-	padding: 3px;
-	background-color: #ecf7ff;
+    padding: 3px;
+    background-color: #ecf7ff;
 }
 
 .head {
-	padding: 3px;
-	background-color: #cae5ff;
-	font-weight: bold;
+    padding: 3px;
+    background-color: #cae5ff;
+    font-weight: bold;
 }
 
 .foot {
-	background-color: #cae5ff;
-	padding: 3px;
-	font-weight: bold;
+    background-color: #cae5ff;
+    padding: 3px;
+    font-weight: bold;
 }
 
 /* --------------- System --------------- */
 
 div.errorMsg {
-	background-color: #FFCCCC;
-	text-align: center;
-	border-top: 1px solid #DDDDFF;
-	border-left: 1px solid #DDDDFF;
-	border-right: 1px solid #AAAAAA;
-	border-bottom: 1px solid #AAAAAA;
-	font-weight: bold;
-	padding: 10px;
+    background-color: #ffcccc;
+    text-align: center;
+    border-top: 1px solid #ddddff;
+    border-left: 1px solid #ddddff;
+    border-right: 1px solid #aaaaaa;
+    border-bottom: 1px solid #aaaaaa;
+    font-weight: bold;
+    padding: 10px;
 }
 
 div.confirmMsg {
-	background-color: #DDFFDF;
-	color: #136C99;
-	text-align: center;
-	border-top: 1px solid #DDDDFF;
-	border-left: 1px solid #DDDDFF;
-	border-right: 1px solid #AAAAAA;
-	border-bottom: 1px solid #AAAAAA;
-	font-weight: bold;
-	padding: 10px;
+    background-color: #ddffdf;
+    color: #136c99;
+    text-align: center;
+    border-top: 1px solid #ddddff;
+    border-left: 1px solid #ddddff;
+    border-right: 1px solid #aaaaaa;
+    border-bottom: 1px solid #aaaaaa;
+    font-weight: bold;
+    padding: 10px;
 }
 
 div.resultMsg {
-	background-color: #CCCCCC;
-	color: #333333;
-	text-align: center;
-	border-top: 1px solid silver;
-	border-left: 1px solid silver;
-	font-weight: bold;
-	border-right: 1px solid #666666;
-	border-bottom: 1px solid #666666;
-	padding: 10px;
+    background-color: #cccccc;
+    color: #333333;
+    text-align: center;
+    border-top: 1px solid silver;
+    border-left: 1px solid silver;
+    font-weight: bold;
+    border-right: 1px solid #666666;
+    border-bottom: 1px solid #666666;
+    padding: 10px;
 }
 
 div.xoopsCode {
-	background: #FFFFFF;
-	border: 1px inset #000080;
-	font-family: "Courier New", Courier, monospace;
-	padding: 0px 6px 6px 6px;
+    background: #ffffff;
+    border: 1px inset #000080;
+    font-family: "Courier New", Courier, monospace;
+    padding: 0px 6px 6px 6px;
 }
 
 div.xoopsQuote {
-	background: #FFFFFF;
-	border: 1px inset #000080;
-	font-family: "Courier New", Courier, monospace;
-	padding: 0px 6px 6px 6px;
+    background: #ffffff;
+    border: 1px inset #000080;
+    font-family: "Courier New", Courier, monospace;
+    padding: 0px 6px 6px 6px;
 }

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,16 +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 (
-      <BrowserRouter>
-        <AppRoot />
-      </BrowserRouter >
-    );
-  }
-}
+const App = () => (
+    <HelmetProvider>
+        <CookiesProvider>
+            <BrowserRouter>
+                <AppRoot />
+            </BrowserRouter>
+        </CookiesProvider>
+    </HelmetProvider>
+);
 
 export default App;

src/common/About.module.css

@@ -10,4 +10,4 @@
 
 .content {
     margin: 10px 0 10px 0;
-}
+}

src/common/About.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@dr.pogodin/react-helmet';
 import styles from './About.module.css';
 
 const About = () => {
@@ -15,20 +14,25 @@ const About = () => {
             <h2 className={styles.title}>Pupil Platform</h2>
             <div className={styles.content}>
                 <p>
-                    The Pupil Platform has been developed by Laboratory for Neuroinfomatics, RIKEN Brain Science Institute in 2007.
-                    Which is the one of the practical applications of <a href="https://xoonips.osdn.jp" target="_blank" rel="noopener noreferrer">XooNIps base platform system</a>.
-                    For more inforamtion, see related publication below.
+                    The Pupil Platform has been developed by Laboratory for Neuroinfomatics, RIKEN Brain Science
+                    Institute in 2007. Which is the one of the practical applications of{' '}
+                    <a href="https://xoonips.osdn.jp" target="_blank" rel="noopener noreferrer">
+                        XooNIps base platform system
+                    </a>
+                    . For more inforamtion, see related publication below.
                 </p>
             </div>
             <h2 className={styles.title}>Related Publication</h2>
             <div className={styles.content}>
-                Customizable neuroinformatics database system: XooNIps and its application to the pupil platform. Yamaji K, Sakai H, Okumura Y, Usui S
-Comput Biol Med. 37(7) 1036-1041 Jul 2007
+                Customizable neuroinformatics database system: XooNIps and its application to the pupil platform. Yamaji
+                K, Sakai H, Okumura Y, Usui S Comput Biol Med. 37(7) 1036-1041 Jul 2007
                 <br />
-                <a href="https://doi.org/10.1016/j.compbiomed.2006.09.003" target="_blank" rel="noopener noreferrer">https://doi.org/10.1016/j.compbiomed.2006.09.003</a>
+                <a href="https://doi.org/10.1016/j.compbiomed.2006.09.003" target="_blank" rel="noopener noreferrer">
+                    https://doi.org/10.1016/j.compbiomed.2006.09.003
+                </a>
             </div>
         </div>
     );
-}
+};
 
-export default About;
+export default About;

src/common/AppRoot.tsx

@@ -1,81 +1,62 @@
-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 Container from './Container';
 import Footer from './Footer';
 import Header from './Header';
 
+const isAnalyticsEnabled = import.meta.env.PROD && Config.GOOGLE_ANALYTICS_TRACKING_ID !== '';
 
-interface Props extends RouteComponentProps, ReactCookieProps { }
-interface State {
-    lang: MultiLang;
+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.siteTitle(lang)} - {Functions.siteSlogan(lang)}</title>
-                </Helmet>
-                <Header lang={lang} />
-                <Container lang={lang} />
-                <Footer lang={lang} />
-            </>
-        );
-    }
-}
+    return (
+        <>
+            <Helmet>
+                <title>
+                    {Functions.siteTitle(lang)} - {Functions.siteSlogan(lang)}
+                </title>
+            </Helmet>
+            <Header lang={lang} />
+            <Container lang={lang} />
+            <Footer lang={lang} />
+        </>
+    );
+};
 
-export default withCookies(withRouter(AppRoot));
+export default AppRoot;

src/common/CenterColumn.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Link, Route, Switch } from 'react-router-dom';
-import { MultiLang } from '../config';
+import { Link, Route, Routes } from 'react-router';
+import type { MultiLang } from '../config';
 import DatabaseTop from '../database/DatabaseTop';
 import styles from './CenterColumn.module.css';
 import MainContent from './MainContent';
@@ -9,24 +8,18 @@ interface Props {
     lang: MultiLang;
 }
 
-const Database = () => {
-    return (<>&nbsp;&raquo;&nbsp;Database</>);
-}
-const About = () => {
-    return (<>&nbsp;&raquo;&nbsp;About</>);
-}
-
-const BreadClumbs = () => {
+const BreadCrumbs = () => {
     return (
         <div className={styles.breadclumbs}>
             <Link to="/">Home</Link>
-            <Switch>
-                <Route path="/database" component={Database} />
-                <Route path="/about" component={About} />
-            </Switch>
-        </div >
+            <Routes>
+                <Route path="/database/*" element={<>&nbsp;&raquo;&nbsp;Database</>} />
+                <Route path="/about" element={<>&nbsp;&raquo;&nbsp;About</>} />
+                <Route path="*" element={null} />
+            </Routes>
+        </div>
     );
-}
+};
 
 const CenterBlocks = (props: Props) => {
     const { lang } = props;
@@ -42,28 +35,26 @@ const CenterBlocks = (props: Props) => {
                     </td>
                 </tr>
                 <tr>
-                    <td className={styles.centerLeftColumn}>
-                    </td>
-                    <td className={styles.centerRightColumn}>
-                    </td>
+                    <td className={styles.centerLeftColumn}></td>
+                    <td className={styles.centerRightColumn}></td>
                 </tr>
             </tbody>
         </table>
     );
-}
+};
 
 const CenterColumn = (props: Props) => {
     const { lang } = props;
-
     return (
         <td className={styles.centerColumn}>
-            <BreadClumbs />
-            <Switch>
-                <Route exact path="/" render={() => <CenterBlocks lang={lang} />} />
-            </Switch>
+            <BreadCrumbs />
+            <Routes>
+                <Route path="/" element={<CenterBlocks lang={lang} />} />
+                <Route path="*" element={null} />
+            </Routes>
             <MainContent lang={lang} />
         </td>
     );
-}
+};
 
-export default CenterColumn;
+export default CenterColumn;

src/common/Container.module.css

@@ -25,4 +25,4 @@
 .rightColumn {
     width: 200px;
     padding-left: 12px;
-}
+}

src/common/Container.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import CenterColumn from './CenterColumn';
 import styles from './Container.module.css';
 import LeftColumn from './LeftColumn';
@@ -24,6 +23,6 @@ const Container = (props: Props) => {
             </table>
         </div>
     );
-}
+};
 
-export default Container;
+export default Container;

src/common/Footer.tsx

@@ -1,19 +1,16 @@
-import React from 'react';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import styles from './Footer.module.css';
 
 interface Props {
     lang: MultiLang;
 }
 
-const Footer = (props: Props) => {
+const Footer = (_props: Props) => {
     return (
         <footer className={styles.footer}>
-            <div className={styles.copyright}>
-                &copy; 2007 Neuroinformatics Laboratory, RIKEN BSI.
-            </div>
+            <div className={styles.copyright}>&copy; 2007 Neuroinformatics Laboratory, RIKEN BSI.</div>
         </footer>
     );
-}
+};
 
 export default Footer;

src/common/Header.module.css

@@ -1,16 +1,16 @@
 .header {
-        padding-bottom: 15px;
-        background: url(./assets/images/theme/header_bar.jpg) bottom left repeat-x;
+    padding-bottom: 15px;
+    background: url(./assets/images/theme/header_bar.jpg) bottom left repeat-x;
 }
 
 .h1 {
-        min-width: 900px;
-        height: 116px;
-        background: url(./assets/images/theme/pupil_photo.jpg) top right no-repeat;
-        margin: 0;
+    min-width: 900px;
+    height: 116px;
+    background: url(./assets/images/theme/pupil_photo.jpg) top right no-repeat;
+    margin: 0;
 }
 
 .img {
-        width: 580px;
-        height: 116px;
-}
+    width: 580px;
+    height: 116px;
+}

src/common/Header.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { MultiLang } from '../config';
+import { Link } from 'react-router';
+import type { MultiLang } from '../config';
 import logo from './assets/images/theme/pupil_logo.jpg';
 import styles from './Header.module.css';
 
@@ -8,10 +7,21 @@ interface Props {
     lang: MultiLang;
 }
 
-const Header = (props: Props) => {
-    return <header className={styles.header}>
-        <h1 className={styles.h1}><Link to="/"><img className={styles.img} src={logo} alt="Pupil platform" title="Communication platform for pupil researchers" /></Link></h1>
-    </header>;
-}
+const Header = (_props: Props) => {
+    return (
+        <header className={styles.header}>
+            <h1 className={styles.h1}>
+                <Link to="/">
+                    <img
+                        className={styles.img}
+                        src={logo}
+                        alt="Pupil platform"
+                        title="Communication platform for pupil researchers"
+                    />
+                </Link>
+            </h1>
+        </header>
+    );
+};
 
 export default Header;

src/common/LeftColumn.module.css

@@ -1,5 +1,6 @@
 .leftColumn {
-    width: 200px;
+    /* border-box: 200 plus the 12px of right padding */
+    width: 212px;
     padding-right: 12px;
 }
 
@@ -16,7 +17,8 @@
 
 .leftBlockContent {
     padding: 10px 5px 20px;
-    width: 190px;
+    /* border-box: 190 plus the 5px of padding per side */
+    width: 200px;
     background: #cae5ff url(./assets/images/theme/left_back.jpg) top left repeat-x;
     font-size: 70%;
     line-height: 120%;
@@ -30,4 +32,14 @@
 
 .leftBlockContent a:hover {
     color: #ff6600;
-}
+}
+
+/* sanitize.css forms.css leaves form controls transparent and makes them
+   inherit the block's 70% text; keep them on white at the control size. */
+.leftBlockContent input[type="text"],
+.leftBlockContent select,
+.leftBlockContent button,
+.leftBlockContent :global(.formButton) {
+    background-color: #ffffff;
+    font-size: 13.3333px;
+}

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 MainMenu from './blocks/MainMenu';
@@ -16,7 +15,7 @@ const LeftColumn = (props: Props) => {
             <div className={styles.leftBlock}>
                 <h2 className={styles.leftBlockTitle}>Main Menu</h2>
                 <div className={styles.leftBlockContent}>
-                    <MainMenu lang={lang} />
+                    <MainMenu />
                 </div>
             </div>
             <div className={styles.leftBlock}>
@@ -33,6 +32,6 @@ const LeftColumn = (props: Props) => {
             </div>
         </td>
     );
-}
+};
 
 export default LeftColumn;

src/common/MainContent.module.css

@@ -16,4 +16,4 @@
 
 .mainContent a:hover {
     color: #ff9900;
-}
+}

src/common/MainContent.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
+import type { MultiLang } from '../config';
 import Database from '../database/Database';
 import DatabaseXoopsPathRedirect from '../database/DatabaseXoopsPathRedirect';
 import About from './About';
 import styles from './MainContent.module.css';
 import XoopsPathRedirect from './XoopsPathRedirect';
-import { MultiLang } from '../config';
 
 interface Props {
     lang: MultiLang;
@@ -15,14 +14,14 @@ const MainContent = (props: Props) => {
     const { lang } = props;
     return (
         <div className={styles.mainContent}>
-            <Switch>
-                <Route path="/database" render={() => <Database lang={lang} />} />
-                <Route exact path="/about" component={About} />
-                <Route path="/modules/xoonips" render={() => <DatabaseXoopsPathRedirect lang={lang} />} />
-                <Route component={XoopsPathRedirect} />
-            </Switch>
+            <Routes>
+                <Route path="/database/*" element={<Database lang={lang} />} />
+                <Route path="/about" element={<About />} />
+                <Route path="/modules/xoonips/*" element={<DatabaseXoopsPathRedirect lang={lang} />} />
+                <Route path="*" element={<XoopsPathRedirect lang={lang} />} />
+            </Routes>
         </div>
     );
-}
+};
 
-export default MainContent;
+export default MainContent;

src/common/RightColumn.module.css

@@ -1,5 +1,6 @@
 .rightColumn {
-    width: 200px;
+    /* border-box: 200 plus the 12px of left padding */
+    width: 212px;
     padding-left: 12px;
 }
 
@@ -29,4 +30,4 @@
 
 .rightBlockContent a:hover {
     color: #ff6600;
-}
+}

src/common/RightColumn.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MultiLang } from '../config';
+import type { MultiLang } from '../config';
 import FlickrBadge from '../custom/blocks/FlickrBadge';
 import styles from './RightColumn.module.css';
 
@@ -7,18 +6,17 @@ interface Props {
     lang: MultiLang;
 }
 
-const RightColumn = (props: Props) => {
-    const { lang } = props;
+const RightColumn = (_props: Props) => {
     return (
         <td className={styles.rightColumn}>
             <div className={styles.rightBlock}>
                 <h2 className={styles.rightBlockTitle}>Eye Photos</h2>
                 <div className={styles.rightBlockContent}>
-                    <FlickrBadge tags="eye,pupil" lang={lang} />
+                    <FlickrBadge tags="eye,pupil" />
                 </div>
             </div>
         </td>
     );
-}
+};
 
-export default RightColumn;
+export default RightColumn;

src/common/XoopsPathRedirect.tsx

@@ -1,44 +1,30 @@
-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/mailform':
-            case '/modules/mailform/index.php': {
-                return '/about';
-            }
-        }
-        return '';
+const getRedirectUrl = (pathname: string): string => {
+    switch (pathname || '') {
+        case '/index.php':
+            return '/';
     }
+    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/blocks/MainMenu.module.css

@@ -27,4 +27,4 @@
 
 .menuSub {
     padding-left: 1em;
-}
+}

src/common/blocks/MainMenu.tsx

@@ -1,20 +1,26 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { MultiLang } from '../../config';
+import { Link } from 'react-router';
 import styles from './MainMenu.module.css';
 
-interface Props {
-    lang: MultiLang;
-}
-
-const MainMenu = (props: Props) => {
+const MainMenu = () => {
     return (
         <ul className={styles.mainmenu}>
-            <li><Link className={styles.menuTop} to="/">Home</Link></li>
-            <li><Link className={styles.menuMain} to="/database">Database</Link></li>
-            <li><Link className={styles.menuMain} to="/about">About</Link></li>
+            <li>
+                <Link className={styles.menuTop} to="/">
+                    Home
+                </Link>
+            </li>
+            <li>
+                <Link className={styles.menuMain} to="/database">
+                    Database
+                </Link>
+            </li>
+            <li>
+                <Link className={styles.menuMain} to="/about">
+                    About
+                </Link>
+            </li>
         </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] + '" 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>';
-    });
+    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,8 +1,13 @@
 const SITE_TITLE = 'Pupil Platform';
 const SITE_SLOGAN = 'Home';
-const GOOGLE_ANALYTICS_TRACKING_ID = '';
+const GOOGLE_ANALYTICS_TRACKING_ID = 'G-2YHTCHBQWD';
 const XOONIPS_ITEMTYPES = ['conference', 'paper', 'book', 'data', 'model', 'url'];
 
+// 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 = {
@@ -10,6 +15,7 @@ const Config = {
     SITE_SLOGAN,
     GOOGLE_ANALYTICS_TRACKING_ID,
     XOONIPS_ITEMTYPES,
-}
+    BASE_URL,
+};
 
 export default Config;

src/custom/blocks/FlickrBadge.module.css

@@ -8,15 +8,19 @@
     background-color: #ffffff;
     color: #666666;
     text-align: center;
-    font-family: arial, helvetica;
+    font-family: arial, helvetica, sans-serif;
     font-size: 11px;
 }
 
+/* The badge keeps Flickr's own link colours over the site-wide link rules. */
 .badge a,
 .badge a:hover,
 .badge a:visited {
+    /* biome-ignore lint/complexity/noImportantStyles: must beat the global link styles */
     color: #3993ff !important;
+    /* biome-ignore lint/complexity/noImportantStyles: must beat the global link styles */
     background: inherit !important;
+    /* biome-ignore lint/complexity/noImportantStyles: must beat the global link styles */
     text-decoration: none !important;
 }
 
@@ -29,24 +33,14 @@
     height: 313px;
 }
 
-.frame :global(.items.enter) {
-    opacity: 0
-}
-.frame :global(.items.enter-active) {
-    opacity: 1;
+.itemsShown,
+.itemsHidden {
     transition: opacity 1000ms;
 }
-.frame :global(.items.enter-done) {
+.itemsShown {
     opacity: 1;
 }
-.frame :global(.items.exit) {
-    opacity: 1;
-}
-.frame :global(.items.exit-active) {
-    opacity: 0;
-    transition: opacity 1000ms;
-}
-.frame :global(.items.exit-done) {
+.itemsHidden {
     opacity: 0;
 }
 
@@ -66,4 +60,4 @@
 
 .footer {
     margin: 0 10px 5px 10px;
-}
+}

src/custom/blocks/FlickrBadge.tsx

@@ -1,154 +1,148 @@
-import jsonp from 'jsonp';
-import React, { Component } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { MultiLang } from '../../config';
+import { type MouseEvent, useEffect, useState } from 'react';
 import Functions from '../../functions';
 import styles from './FlickrBadge.module.css';
 
-interface FlickrServicesFeedsPhotosPublicItem {
+interface FlickrFeedItem {
     title: string;
     link: string;
     media: {
         m: string;
-    },
-    data_taken: string;
-    description: string;
-    published: string;
-    author: string;
-    author_id: string;
-    tages: string;
-}
-interface FlickrServicesFeedsPhotosPublic {
-    title: string;
-    link: string;
-    description: string;
-    modified: string;
-    generator: string;
-    items: FlickrServicesFeedsPhotosPublicItem[];
+    };
 }
 
+interface FlickrFeed {
+    items: FlickrFeedItem[];
+}
+
+const FLICKR_URL = 'https://www.flickr.com';
 const FLICKR_FEED_URL = 'https://api.flickr.com/services/feeds/photos_public.gne';
+const PHOTOS_SHOWN = 3;
+const ROTATE_INTERVAL_MS = 60000;
+const FADE_MS = 1000;
 
-const FlickrBadgeItem = (props: { item: FlickrServicesFeedsPhotosPublicItem }) => {
-    const { item } = props;
-    return (
-        <div className={styles.item}>
-            <a href={item.link} title={item.title} target="_blank" rel="noopener noreferrer">
-                <img className={styles.thumbnail} src={item.media.m} alt={item.title} />
-            </a>
-        </div>
-    );
-}
+/**
+ * The public photo feed only answers as JSONP, calling the global
+ * `jsonFlickrFeed` it names; there is no CORS-enabled JSON variant.
+ */
+const loadFeed = (tags: string): Promise<FlickrFeed> =>
+    new Promise((resolve, reject) => {
+        const params = new URLSearchParams({ tags, format: 'json' });
+        const script = document.createElement('script');
+        const global = window as unknown as { jsonFlickrFeed?: (data: FlickrFeed) => void };
+        const cleanup = () => {
+            delete global.jsonFlickrFeed;
+            script.remove();
+        };
+        global.jsonFlickrFeed = (data) => {
+            cleanup();
+            resolve(data);
+        };
+        script.onerror = () => {
+            cleanup();
+            reject(new Error('failed to load the Flickr feed'));
+        };
+        script.src = `${FLICKR_FEED_URL}?${params.toString()}`;
+        document.body.appendChild(script);
+    });
+
+const pickRandom = (items: FlickrFeedItem[]): FlickrFeedItem[] => {
+    const picked = new Set<number>();
+    const max = Math.min(PHOTOS_SHOWN, items.length);
+    while (picked.size < max) {
+        picked.add(Math.floor(Math.random() * items.length));
+    }
+    return [...picked].map((i) => items[i]);
+};
 
 interface Props {
-    lang: MultiLang;
     tags: string;
 }
-interface State {
-    items: JSX.Element[];
-    showWhat: boolean;
-    active: boolean;
-}
 
-class FlickrBadge extends Component<Props, State> {
+const FlickrBadge = (props: Props) => {
+    const { tags } = props;
+    const [items, setItems] = useState<FlickrFeedItem[]>([]);
+    const [visible, setVisible] = useState(false);
+    const [showWhat, setShowWhat] = useState(false);
 
-    private interval: NodeJS.Timeout | null = null;
-    private data: FlickrServicesFeedsPhotosPublic | null = null;
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            items: [],
-            showWhat: false,
-            active: false,
+    useEffect(() => {
+        let active = true;
+        let interval: number | undefined;
+        let fade: number | undefined;
+        loadFeed(tags)
+            .then((feed) => {
+                if (!active) {
+                    return;
+                }
+                setItems(pickRandom(feed.items));
+                setVisible(true);
+                // Fade the current photos out, swap them, then fade back in.
+                interval = window.setInterval(() => {
+                    setVisible(false);
+                    fade = window.setTimeout(() => {
+                        setItems(pickRandom(feed.items));
+                        setVisible(true);
+                    }, FADE_MS);
+                }, ROTATE_INTERVAL_MS);
+            })
+            .catch((error: unknown) => {
+                console.log(error);
+            });
+        return () => {
+            active = false;
+            window.clearInterval(interval);
+            window.clearTimeout(fade);
         };
-        this.handleClickWhat = this.handleClickWhat.bind(this);
-    }
+    }, [tags]);
 
-    componentDidMount() {
-        const params = new URLSearchParams({
-            tags: this.props.tags,
-            format: 'json',
-        });
-        const url = FLICKR_FEED_URL + '?' + params.toString();
-        jsonp(url, { name: 'jsonFlickrFeed' }, (err, data: FlickrServicesFeedsPhotosPublic) => {
-            if (err) {
-                console.log('failed to get flickr resource.');
-                return;
-            }
-            if (typeof data !== 'undefined') {
-                this.data = data;
-                this.updateImage(true);
-                this.interval = setInterval(() => { this.updateImage(false) }, 60000);
-            }
-        });
-    }
-
-    componentWillUnmount() {
-        if (this.interval === null) {
-            return;
-        }
-        clearInterval(this.interval);
-    }
-
-    updateImage(first: boolean) {
-        if (this.data === null) {
-            return;
-        }
-        let items: JSX.Element[] = [];
-        let nums: number[] = [];
-        const max = Math.min(3, this.data.items.length);
-        while (nums.length < max) {
-            const i = Math.floor(Math.random() * (this.data.items.length));
-            if (nums.includes(i)) {
-                continue;
-            }
-            nums.push(i);
-            const item = <FlickrBadgeItem key={i} item={this.data.items[i]} />;
-            items.push(item);
-        }
-        if (first) {
-            this.setState({ active: true, items });
-        } else {
-            this.setState({ active: false });
-            setTimeout(() => { this.setState({ active: true, items }) }, 1000);
-        }
-    }
-
-    handleClickWhat(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+    const handleClickWhat = (e: MouseEvent<HTMLAnchorElement>) => {
         e.stopPropagation();
         e.preventDefault();
-        this.setState({ showWhat: true });
-    }
+        setShowWhat(true);
+    };
 
-    render() {
-        const url = 'https://www.flickr.com';
-        const tags = this.props.tags.replace(',', ' ');
-        const tagsLabel = this.props.tags.replace(',', ' and ');
-        const tagsUrl = url + '/photos/tags/' + Functions.escape(tags);
-        return (
-            <div className={styles.flickr}>
-                <div className={styles.badge}>
-                    <div className={styles.header}>
-                        <a href={url} target="_blank" rel="noopener noreferrer">www.<span style={{ fontWeight: 'bold', color: '#3993ff' }}>flick<span style={{ color: '#ff1c92' }}>r</span></span>.com</a>
-                    </div>
-                    <div className={styles.frame}>
-                        <CSSTransition in={this.state.active} timeout={1000} className="items">
-                            <div>{this.state.items}</div>
-                        </CSSTransition>
-                    </div>
-                    <div className={styles.footer}>
-                        {this.state.showWhat ||
-                            <a href={url} onClick={this.handleClickWhat}>what is this?</a>
-                        }
-                        {this.state.showWhat &&
-                            <span>This is a Flickr badge showing public photos from Flickr tagged with <a href={tagsUrl} target="_blank" rel="noopener noreferrer">{tagsLabel}</a>.</span>
-                        }
+    const tagsUrl = `${FLICKR_URL}/photos/tags/${Functions.escape(tags.replace(',', ' '))}`;
+    const tagsLabel = tags.replace(',', ' and ');
+    return (
+        <div className={styles.flickr}>
+            <div className={styles.badge}>
+                <div className={styles.header}>
+                    <a href={FLICKR_URL} target="_blank" rel="noopener noreferrer">
+                        www.
+                        <span style={{ fontWeight: 'bold', color: '#3993ff' }}>
+                            flick<span style={{ color: '#ff1c92' }}>r</span>
+                        </span>
+                        .com
+                    </a>
+                </div>
+                <div className={styles.frame}>
+                    <div className={visible ? styles.itemsShown : styles.itemsHidden}>
+                        {items.map((item) => (
+                            <div key={item.link} className={styles.item}>
+                                <a href={item.link} title={item.title} target="_blank" rel="noopener noreferrer">
+                                    <img className={styles.thumbnail} src={item.media.m} alt={item.title} />
+                                </a>
+                            </div>
+                        ))}
                     </div>
                 </div>
+                <div className={styles.footer}>
+                    {showWhat ? (
+                        <span>
+                            This is a Flickr badge showing public photos from Flickr tagged with{' '}
+                            <a href={tagsUrl} target="_blank" rel="noopener noreferrer">
+                                {tagsLabel}
+                            </a>
+                            .
+                        </span>
+                    ) : (
+                        <a href={FLICKR_URL} onClick={handleClickWhat}>
+                            what is this?
+                        </a>
+                    )}
+                </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
-export default FlickrBadge;
+export default FlickrBadge;

src/database/Database.module.css

@@ -68,3 +68,13 @@
 .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;
+}

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/assets/simpf-links.json

@@ -1 +0,0 @@
-[]

src/database/assets/tree.json

@@ -1 +0,0 @@
-[{"id":3,"title":"Public","num_of_items":32,"children":[{"id":6,"title":"Pupil Colloquium","num_of_items":0,"children":[{"id":216,"title":"2007, Hamamatsu","num_of_items":48,"children":[]},{"id":7,"title":"2005, Bear Mountain","num_of_items":28,"children":[]},{"id":81,"title":"2003, Crete","num_of_items":41,"children":[]},{"id":8,"title":"2001, Asilomar","num_of_items":32,"children":[]},{"id":82,"title":"1999, Nottingham","num_of_items":32,"children":[]},{"id":217,"title":"1997, Point Clear","num_of_items":31,"children":[]}]}]}]

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,8 @@
 
 .formButton {
     margin: 3px 3px 10px;
+    /* sanitize.css forms.css leaves buttons transparent */
+    background-color: #ffffff;
 }
 
 .indexTree div span {
@@ -44,7 +48,9 @@
 .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child)) {
     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) {
+.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;
 }
 .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:last-child.rc-tree-indent-unit-end) {
@@ -88,4 +94,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 < 2) {
-                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 < 2) {
+            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/Search.module.css

@@ -1,7 +0,0 @@
-.searchForm {
-    margin-top: 0;
-}
-
-.inputKeyword {
-    size: 16;
-}

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,10 +1,10 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
+import type { MultiLang } from '../../../config';
 import Functions from '../../../functions';
-import ItemUtil, { ItemBinder, Item } 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';
-import { MultiLang } from '../../../config';
-import ItemType from '..';
 
 interface Props {
     lang: MultiLang;
@@ -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,33 +1,72 @@
-import React from 'react';
 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';
 
 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]Language[/en][ja]言語[/ja]',
+                value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+            },
             { 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]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: '[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: '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: '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, ItemModel, ItemPaper, ItemPresentation, ItemSimulator, ItemStimulus, ItemTool, ItemUrl, ItemMemo } 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;

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

@@ -1,7 +1,7 @@
-import React, { Component, ReactNode } from 'react';
-import { MultiLang } from '../../../config';
+import { Component, type ReactNode } from 'react';
+import type { MultiLang } from '../../../config';
 import Functions from '../../../functions';
-import { Item } from '../../lib/ItemUtil';
+import type { Item } from '../../lib/ItemUtil';
 
 export interface DetailBaseField {
     label: string;
@@ -10,11 +10,10 @@ export interface DetailBaseField {
 
 export interface DetailBaseProps {
     lang: MultiLang;
-    item: Item
+    item: Item;
 }
 
 class DetailBase extends Component<DetailBaseProps> {
-
     getFields(): DetailBaseField[] {
         return [];
     }
@@ -24,20 +23,18 @@ class DetailBase extends Component<DetailBaseProps> {
         const elements = this.getFields().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>
-            )
+            );
         });
         return (
             <table className="outer itemDetail">
-                <tbody>
-                    {elements}
-                </tbody>
+                <tbody>{elements}</tbody>
             </table>
         );
     }
 }
 
-export default DetailBase;
+export default DetailBase;

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

@@ -1,15 +1,14 @@
-import React, { Component } from 'react';
-import { MultiLang } from '../../../config';
-import ItemUtil, { Item } from '../../lib/ItemUtil';
+import { Component } from 'react';
+import type { MultiLang } from '../../../config';
+import ItemUtil, { type Item } from '../../lib/ItemUtil';
 import SimPFLinkIcon from './field/SimPFLinkIcon';
 
 export interface ListBaseProps {
     lang: MultiLang;
-    item: Item
-};
+    item: Item;
+}
 
 class ListBase extends Component<ListBaseProps> {
-
     protected label = '';
     protected icon = '';
     protected url: string;
@@ -21,8 +20,8 @@ class ListBase extends Component<ListBaseProps> {
         this.simpfLinkUrl = ItemUtil.getSimPFLinkUrl(props.item.item_id);
     }
 
-    renderBody() {
-        return <></>;
+    renderBody(): React.ReactNode {
+        return null;
     }
 
     render() {
@@ -34,9 +33,7 @@ class ListBase extends Component<ListBaseProps> {
                         <td className="listIcon">
                             <img src={this.icon} alt={this.label} />
                         </td>
-                        <td>
-                            {this.renderBody()}
-                        </td>
+                        <td>{this.renderBody()}</td>
                         <td className="listExtra">
                             <SimPFLinkIcon lang={lang} url={this.simpfLinkUrl} isDetail={false} />
                         </td>
@@ -47,4 +44,4 @@ class ListBase extends Component<ListBaseProps> {
     }
 }
 
-export default ListBase;
+export default ListBase;

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

@@ -1,26 +1,30 @@
-import React, { Component, Fragment } from 'react';
-import { Link } from 'react-router-dom';
-import { MultiLang } from '../../../config';
+import { Component, Fragment } from 'react';
+import { Link } from 'react-router';
+import type { MultiLang } from '../../../config';
 import Functions from '../../../functions';
-import ItemUtil, { ItemSubTypes } from '../../lib/ItemUtil';
+import ItemUtil, { type ItemSubTypes } from '../../lib/ItemUtil';
 
 export interface TopBaseProps {
     lang: MultiLang;
 }
 
 class TopBase extends Component<TopBaseProps> {
-
     protected type: string = '';
     protected label: string = '';
     protected icon: string = '';
     protected description: string = '';
-    protected subTypes: ItemSubTypes<any> = [];
+    protected subTypes: ItemSubTypes<string> = [];
 
     render() {
         const { lang } = this.props;
         const url = ItemUtil.getItemTypeSearchUrl(this.type);
         const links = this.subTypes.map(({ type, label }, i) => {
-            return <Fragment key={i}>{i > 0 && ' / '}<Link to={url + '/' + type}>{label}</Link></Fragment>;
+            return (
+                <Fragment key={type}>
+                    {i > 0 && ' / '}
+                    <Link to={`${url}/${type}`}>{label}</Link>
+                </Fragment>
+            );
         });
         return (
             <div>
@@ -44,4 +48,4 @@ class TopBase extends Component<TopBaseProps> {
     }
 }
 
-export default TopBase;
+export default TopBase;

src/database/item-type/lib/field/Author.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MultiLang } from '../../../../config';
+import type { MultiLang } from '../../../../config';
 
 interface Props {
     lang: MultiLang;
@@ -13,9 +12,17 @@ const Author = (props: Props) => {
     }
     const elements = author.map((value, idx) => {
         const evenodd = idx % 2 === 0 ? 'even' : 'odd';
-        return <tr key={idx}><td className={evenodd}>{value}</td></tr>;
+        return (
+            <tr key={value}>
+                <td className={evenodd}>{value}</td>
+            </tr>
+        );
     });
-    return <table><tbody>{elements}</tbody></table>;
-}
+    return (
+        <table>
+            <tbody>{elements}</tbody>
+        </table>
+    );
+};
 
-export default Author;
+export default Author;

src/database/item-type/lib/field/ChangeLog.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { MultiLang } from '../../../../config';
+import type { MultiLang } from '../../../../config';
 import Functions from '../../../../functions';
-import { ItemBasicChangeLog } from '../../../lib/ItemUtil';
+import type { ItemBasicChangeLog } from '../../../lib/ItemUtil';
 import DateTime from './DateTime';
 
 interface Props {
@@ -14,15 +13,21 @@ const ChangeLog = (props: Props) => {
     if (changelog.length === 0) {
         return null;
     }
-    const elements = changelog.map((value, i) => {
+    const elements = changelog.map((value) => {
         return (
-            <tr key={i}>
-                <td><DateTime lang={lang} date={value.log_date} onlyDate={true} /></td>
+            <tr key={`${value.log_date}:${value.log}`}>
+                <td>
+                    <DateTime lang={lang} date={value.log_date} onlyDate={true} />
+                </td>
                 <td>{Functions.mlang(value.log, lang)}</td>
             </tr>
         );
     });
-    return (<table><tbody>{elements}</tbody></table>);
-}
+    return (
+        <table>
+            <tbody>{elements}</tbody>
+        </table>
+    );
+};
 
-export default ChangeLog;
+export default ChangeLog;

src/database/item-type/lib/field/Contributer.tsx

@@ -1,18 +1,17 @@
-import React from 'react';
-import { MultiLang } from '../../../../config';
+import type { MultiLang } from '../../../../config';
 import Functions from '../../../../functions';
 
 interface Props {
     lang: MultiLang;
     uname: string;
-    name: string
+    name: string;
 }
 
 const Contributer = (props: Props) => {
     const { lang, name, uname } = props;
     const unsubscribed = '([en]Unsubscribed User[/en][ja]退会済みユーザ[/ja])';
-    const label = uname === '' ? unsubscribed : (name === '' ? uname : name + ' (' + uname + ')');
+    const label = uname === '' ? unsubscribed : name === '' ? uname : `${name} (${uname})`;
     return <span>{Functions.mlang(label, lang)}</span>;
-}
+};
 
-export default Contributer;
+export default Contributer;

src/database/item-type/lib/field/CreativeCommons.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { MultiLang } from '../../../../config';
+import type { MultiLang } from '../../../../config';
 
 export type CreativeCommonsType = 'by' | 'by-nc' | 'by-nc-nd' | 'by-nc-sa' | 'by-nd' | 'by-sa';
 
@@ -16,11 +15,10 @@ export const getCreativeCommonsType = (ccCommercialUse: number, ccModification:
             return 'by-nd';
         case 11:
             return 'by-sa';
-        case 12:
         default:
             return 'by';
     }
-}
+};
 
 interface Props {
     lang: MultiLang;
@@ -29,28 +27,41 @@ interface Props {
 
 const CreativeCommons = (props: Props) => {
     const { type } = props;
-    const url = 'http://creativecommons.org/licenses/' + type + '/4.0/';
-    const logoUrl = 'https://i.creativecommons.org/l/' + type + '/4.0/88x31.png';
+    const url = `http://creativecommons.org/licenses/${type}/4.0/`;
+    const logoUrl = `https://i.creativecommons.org/l/${type}/4.0/88x31.png`;
     const labels = {
         by: 'Attribution',
         nc: 'NonCommercial',
         nd: 'NoDerivatives',
         sa: 'ShareAlike',
-    }
-    const label = type.split('-').map((value) => {
-        const prop = value as 'by' | 'nc' | 'nd' | 'sa';
-        return labels[prop];
-    }).join('-');
+    };
+    const label = type
+        .split('-')
+        .map((value) => {
+            const prop = value as 'by' | 'nc' | 'nd' | 'sa';
+            return labels[prop];
+        })
+        .join('-');
     return (
-        <table style={{borderCollapse: 'separate', borderSpacing: '5px'}}>
+        <table style={{ borderCollapse: 'separate', borderSpacing: '5px' }}>
             <tbody>
                 <tr>
-                    <td><a href={url} target="_blank" rel="license noopener noreferrer"><img alt="Creative Commons License" src={logoUrl} /></a></td>
-                    <td>This work is licensed under a <a href={url} target="_blank" rel="license noopener noreferrer">Criative Commons {label} 4.0 International License</a>.</td>
+                    <td>
+                        <a href={url} target="_blank" rel="license noopener noreferrer">
+                            <img alt="Creative Commons License" src={logoUrl} />
+                        </a>
+                    </td>
+                    <td>
+                        This work is licensed under a{' '}
+                        <a href={url} target="_blank" rel="license noopener noreferrer">
+                            Criative Commons {label} 4.0 International License
+                        </a>
+                        .
+                    </td>
                 </tr>
             </tbody>
         </table>
     );
-}
+};
 
-export default CreativeCommons;
+export default CreativeCommons;

src/database/item-type/lib/field/DateTime.tsx

@@ -1,21 +1,16 @@
-import moment from 'moment';
-import React from 'react';
-import { MultiLang } from '../../../../config';
+import { format } from 'date-fns';
+import type { MultiLang } from '../../../../config';
 
 interface Props {
     lang: MultiLang;
     date: number;
-    onlyDate?: boolean
+    onlyDate?: boolean;
 }
 
 const DateTime = (props: Props) => {
     const { date, onlyDate } = props;
-    const d = moment(new Date(date * 1000));
-    let format = 'MMM D, Y';
-    if (typeof onlyDate === 'undefined' || !onlyDate) {
-        format += ' HH:mm:ss';
-    }
-    return <span>{d.format(format)}</span>;
-}
+    const pattern = onlyDate ? 'MMM d, y' : 'MMM d, y HH:mm:ss';
+    return <span>{format(new Date(date * 1000), pattern)}</span>;
+};
 
 export default DateTime;

src/database/item-type/lib/field/Description.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import XoopsCode from '../../../../common/lib/XoopsCode';
-import { MultiLang } from '../../../../config';
+import type { MultiLang } from '../../../../config';
 
 interface Props {
     lang: MultiLang;
@@ -12,7 +11,7 @@ const Description = (props: Props) => {
     const { lang, description, className } = props;
     const textarea = <XoopsCode lang={lang} text={description} dobr={true} />;
     const name = typeof className === 'undefined' ? 'description' : className;
-    return (<div className={name}>{textarea}</div>);
-}
+    return <div className={name}>{textarea}</div>;
+};
 
-export default Description;
+export default Description;