[fix] Cleaning & Updating bugs of Category Form

[migrate] replace Scaffold Built-in middlewares with Next SSR middleware
[optimize] update Upstream packages

models/Base.ts

@@ -47,6 +47,7 @@ export abstract class TableModel<
     if (id) this.changeOne(body!, id);
     else
       this.restoreList({
+        pageIndex: this.pageIndex,
         allItems: [body!, ...this.allItems],
         totalCount: this.totalCount! + 1,
       });

models/Category.ts

@@ -14,20 +14,22 @@ export class CategoryModel extends TableModel<CategoryOutput> {
 
   @computed
   get tree() {
-    const { 0: root } = this.allItems.reduce(
-      (cache, current) => {
-        current = { ...current };
+    const { 0: root } = this.allItems
+      .sort(({ id: a }, { id: b }) => a - b)
+      .reduce(
+        (cache, current) => {
+          current = { ...current };
 
-        cache[current.id] = current;
+          cache[current.id] = current;
 
-        const parent = cache[current.parentId || 0];
+          const parent = cache[current.parentId || 0];
 
-        (parent.subs ||= []).push(current);
+          if (parent) (parent.subs ||= []).push(current);
 
-        return cache;
-      },
-      { 0: {} as CategoryNode } as Record<number, CategoryNode>,
-    );
+          return cache;
+        },
+        { 0: {} as CategoryNode } as Record<number, CategoryNode>,
+      );
 
     return root;
   }

package.json

@@ -4,41 +4,42 @@
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "dependencies": {
-    "@authing/guard": "^5.2.0",
+    "@authing/guard": "^5.2.4",
     "@ideamall/data-model": "1.0.0-rc.2",
-    "idea-react": "^1.0.0-rc.3",
+    "idea-react": "^1.0.0-rc.10",
     "koajax": "^0.8.4",
-    "less": "^4.1.3",
+    "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "lodash": "^4.17.21",
     "mobx": "^5.15.7",
     "mobx-i18n": "^0.3.15",
     "mobx-react": "^6.3.1",
     "mobx-restful": "^0.6.5",
-    "mobx-restful-table": "^1.0.3",
+    "mobx-restful-table": "^1.0.4",
     "next": "^12.3.4",
     "next-pwa": "~5.6.0",
+    "next-ssr-middleware": "^0.5.0",
     "next-with-less": "^2.0.5",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.7.4",
+    "react-bootstrap": "^2.8.0",
     "react-bootstrap-editor": "^1.0.1",
     "react-dom": "^17.0.2",
-    "web-utility": "^4.0.0"
+    "web-utility": "^4.1.0"
   },
   "devDependencies": {
     "@octokit/openapi-types": "^18.0.0",
-    "@types/lodash": "^4.14.195",
-    "@types/node": "^18.16.18",
-    "@types/react": "^17.0.62",
-    "eslint": "^8.43.0",
+    "@types/lodash": "^4.14.196",
+    "@types/node": "^18.17.3",
+    "@types/react": "^17.0.63",
+    "eslint": "^8.46.0",
     "eslint-config-next": "^12.3.4",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
+    "lint-staged": "^13.2.3",
+    "prettier": "^3.0.1",
     "ts-node": "^10.9.1",
-    "typescript": "~5.1.3"
+    "typescript": "~5.1.6"
   },
   "prettier": {
     "singleQuote": true,

pages/admin/category.tsx

@@ -1,20 +1,17 @@
 import { CategoryInput } from '@ideamall/data-model';
-import { Loading, SpinnerButton } from 'idea-react';
+import { ClickBoundary, Loading, SpinnerButton } from 'idea-react';
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FileUploader } from 'mobx-restful-table';
-import { createRef,FormEvent, MouseEvent, PureComponent } from 'react';
-import { Col, FloatingLabel, Form, Row } from 'react-bootstrap';
+import { createRef, FormEvent, MouseEvent, PureComponent } from 'react';
+import { Col, FloatingLabel, Form } from 'react-bootstrap';
 import { formToJSON } from 'web-utility';
 
 import { AdminFrame } from '../../components/AdminFrame';
 import { CategoryModel, CategoryNode } from '../../models/Category';
 import fileStore from '../../models/File';
 import { i18n } from '../../models/Translation';
 import userStore from '../../models/User';
-import { withTranslation } from '../api/core';
-
-export const getServerSideProps = withTranslation();
 
 export default function CategoryAdminPage() {
   return (
@@ -51,26 +48,31 @@ class CategoryAdmin extends PureComponent {
     this.store.getAll();
   }
 
+  clearForm = () => {
+    this.current = {} as CategoryMeta;
+    this.form.current?.reset();
+  };
+
   handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     const { id, ...data } = formToJSON<CategoryMeta>(event.currentTarget);
 
     await this.store.updateOne(data, id);
+
+    this.clearForm();
   };
 
   handleRemove = async (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
-    const form = this.form.current!;
-    const { id, name } = formToJSON<CategoryMeta>(form);
+    const { id, name } = formToJSON<CategoryMeta>(event.currentTarget.form!);
 
     if (!confirm(t('sure_to_delete_x', { keys: [name] }))) return;
 
     await this.store.deleteOne(id!);
 
-    this.current = {} as CategoryMeta;
-    form.reset();
+    this.clearForm();
   };
 
   renderForm() {
@@ -165,13 +167,16 @@ class CategoryAdmin extends PureComponent {
     const { downloading, tree } = this.store;
 
     return (
-      <Row xs={1} sm={2}>
+      <ClickBoundary
+        className="row row-cols-1 row-cols-sm-2"
+        onOuterClick={this.clearForm}
+      >
         {downloading > 0 && <Loading />}
 
         {this.renderForm()}
 
         <Col as="nav">{tree.subs?.map(node => this.renderTree(node))}</Col>
-      </Row>
+      </ClickBoundary>
     );
   }
 }

pages/admin/goods/[id].tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import { FormField } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
 import dynamic from 'next/dynamic';
+import { compose, RouteProps, router } from 'next-ssr-middleware';
 import { FormEvent, PureComponent } from 'react';
 import { FloatingLabel, Form } from 'react-bootstrap';
 import { formToJSON, makeArray } from 'web-utility';
@@ -17,14 +18,16 @@ import { CategoryModel } from '../../../models/Category';
 import fileStore from '../../../models/File';
 import { GoodsModel } from '../../../models/Goods';
 import { i18n } from '../../../models/Translation';
-import { withRoute } from '../../api/core';
 
 const HTMLEditor = dynamic(() => import('../../../components/HTMLEditor'), {
   ssr: false,
 });
 HTMLEditor.displayName = 'HTMLEditor';
 
-export const getServerSideProps = withRoute<{ id: string }>();
+export const getServerSideProps = compose<
+  { id: string },
+  RouteProps<{ id: string }>
+>(router);
 
 export default function GoodsEditorPage({
   route: { params },

pages/admin/user.tsx

@@ -10,9 +10,6 @@ import { AdminFrame } from '../../components/AdminFrame';
 import { GenderSymbol, RoleName } from '../../components/data';
 import { i18n } from '../../models/Translation';
 import userStore from '../../models/User';
-import { withTranslation } from '../api/core';
-
-export const getServerSideProps = withTranslation();
 
 export default function UserAdminPage() {
   return (

pages/api/core.ts

@@ -1,17 +1,5 @@
 import { HTTPError } from 'koajax';
-import { parseLanguageHeader } from 'mobx-i18n';
-import { DataObject } from 'mobx-restful';
-import {
-  GetServerSideProps,
-  GetServerSidePropsContext,
-  GetServerSidePropsResult,
-  InferGetServerSidePropsType,
-  NextApiRequest,
-  NextApiResponse,
-} from 'next';
-import { ParsedUrlQuery } from 'querystring';
-
-import { i18n } from '../../models/Translation';
+import { NextApiRequest, NextApiResponse } from 'next';
 
 export type NextAPI = (
   req: NextApiRequest,
@@ -47,78 +35,3 @@ export function safeAPI(handler: NextAPI): NextAPI {
     }
   };
 }
-
-export function withErrorLog<
-  I extends DataObject,
-  O extends DataObject = {},
-  F extends GetServerSideProps<O, I> = GetServerSideProps<O, I>,
->(origin: F) {
-  return (async context => {
-    try {
-      return await origin(context);
-    } catch (error) {
-      console.error(error);
-
-      const { status } = error as HTTPError;
-
-      if (status === 404) return { notFound: true, props: {} };
-
-      throw error;
-    }
-  }) as F;
-}
-
-interface RouteProps<T extends ParsedUrlQuery> {
-  route: Pick<
-    GetServerSidePropsContext<T>,
-    'resolvedUrl' | 'params' | 'query' | 'locales'
-  >;
-}
-
-export function withRoute<
-  I extends DataObject,
-  O extends DataObject = {},
-  F extends GetServerSideProps<O, I> = GetServerSideProps<O, I>,
->(
-  origin?: F,
-): GetServerSideProps<RouteProps<I> & InferGetServerSidePropsType<F>, I> {
-  return async context => {
-    const options =
-        (await origin?.(context)) || ({} as GetServerSidePropsResult<{}>),
-      { resolvedUrl, params, query, locales } = context;
-
-    return {
-      ...options,
-      props: {
-        ...('props' in options ? options.props : {}),
-        route: JSON.parse(
-          JSON.stringify({ resolvedUrl, params, query, locales }),
-        ),
-      },
-    } as GetServerSidePropsResult<
-      RouteProps<I> & InferGetServerSidePropsType<F>
-    >;
-  };
-}
-
-export function withTranslation<
-  I extends DataObject,
-  O extends DataObject = {},
-  F extends GetServerSideProps<O, I> = GetServerSideProps<O, I>,
->(
-  origin?: F,
-): GetServerSideProps<RouteProps<I> & InferGetServerSidePropsType<F>, I> {
-  return async context => {
-    const { language = '' } = context.req.cookies,
-      languages = parseLanguageHeader(
-        context.req.headers['accept-language'] || '',
-      );
-    await i18n.loadLanguages([language, ...languages].filter(Boolean));
-
-    return ((await origin?.(context)) || {
-      props: {},
-    }) as GetServerSidePropsResult<
-      RouteProps<I> & InferGetServerSidePropsType<F>
-    >;
-  };
-}