[fix] SSR Authorizing conflicts of Admin pages

components/Activity/ActivityManageFrame.tsx

@@ -126,11 +126,10 @@ export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps>
 
   render() {
     const { authorized, currentRoute } = this,
-      { children, name, title, ...props } = this.props;
+      { children, name, title } = this.props;
 
     return (
-      <ServerSessionBox
-        {...props}
+      <div
         className="d-flex justify-content-center align-items-center"
         style={{ height: 'calc(100vh - 3.5rem)' }}
       >
@@ -148,7 +147,7 @@ export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps>
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </ServerSessionBox>
+      </div>
     );
   }
 }

components/PlatformAdmin/PlatformAdminFrame.tsx

@@ -25,10 +25,7 @@ import platformAdminStore from '../../models/User/PlatformAdmin';
 import { findDeep } from '../../utils/data';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
 import { PageHead } from '../layout/PageHead';
-import {
-  ServerSessionBox,
-  ServerSessionBoxProps,
-} from '../User/ServerSessionBox';
+import { ServerSessionBoxProps } from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
@@ -116,12 +113,11 @@ export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
 
   render() {
     const { currentRoute, loading } = this,
-      { children, title, ...props } = this.props,
+      { children, title } = this.props,
       { isPlatformAdmin } = platformAdminStore;
 
     return (
-      <ServerSessionBox
-        {...props}
+      <div
         className="d-flex justify-content-center align-items-center"
         style={{ height: 'calc(100vh - 3.5rem)' }}
       >
@@ -141,7 +137,7 @@ export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </ServerSessionBox>
+      </div>
     );
   }
 }

components/Team/JoinTeamModal.tsx

@@ -1,4 +1,4 @@
-import { FormEventHandler } from 'react';
+import { FC, FormEventHandler } from 'react';
 import { Button, Col, Form, Modal, ModalProps } from 'react-bootstrap';
 
 import { i18n } from '../../models/Base/Translation';
@@ -10,11 +10,11 @@ export interface JoinTeamModalProps
   onSubmit: FormEventHandler<HTMLFormElement>;
 }
 
-export const JoinTeamModal = ({
+export const JoinTeamModal: FC<JoinTeamModalProps> = ({
   show,
   onHide,
   onSubmit,
-}: JoinTeamModalProps) => (
+}) => (
   <Modal show={show} onHide={onHide}>
     <Modal.Header closeButton>
       <Modal.Title>{t('join_team')}</Modal.Title>

components/Team/TeamCard.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Avatar } from 'idea-react';
-import { HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import { Team } from '../../models/Activity/Team';
 import { i18n } from '../../models/Base/Translation';
@@ -13,15 +13,15 @@ export type TeamCardProps = HTMLAttributes<HTMLDivElement> &
     'hackathonName' | 'displayName' | 'creatorId' | 'creator' | 'membersCount'
   >;
 
-export const TeamCard = ({
+export const TeamCard: FC<TeamCardProps> = ({
   className,
   id,
   hackathonName,
   displayName,
   membersCount,
   creatorId,
   creator,
-}: TeamCardProps) => (
+}) => (
   <div className={classNames('border p-2', className)}>
     <a
       className="fs-4 text-primary text-truncate"

components/Team/TeamManageFrame.tsx

@@ -23,7 +23,6 @@ import { findDeep } from '../../utils/data';
 import { ActivityManageFrameProps } from '../Activity/ActivityManageFrame';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
 import { PageHead } from '../layout/PageHead';
-import { ServerSessionBox } from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
@@ -130,11 +129,10 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
 
   render() {
     const { authorized, currentRoute, isLoading } = this,
-      { children, name, title, tid, ...props } = this.props;
+      { children, name, title, tid } = this.props;
 
     return (
-      <ServerSessionBox
-        {...props}
+      <div
         className={
           authorized
             ? 'row row-cols-xs-1 row-cols-md-2'
@@ -157,7 +155,7 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </ServerSessionBox>
+      </div>
     );
   }
 }

components/User/TopUserAddress.tsx

@@ -1,10 +1,11 @@
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC } from 'react';
 
 export type TopUserAddressProps = Partial<Record<'email' | 'github', string>>;
 
-export const TopUserAddress = ({ email, github }: TopUserAddressProps) => (
+export const TopUserAddress: FC<TopUserAddressProps> = ({ email, github }) => (
   <address className="mb-0">
     {email && (
       <a rel="noreferrer" target="_blank" href={'mailto:' + email}>

components/User/TopUserList.tsx

@@ -1,3 +1,4 @@
+import { FC } from 'react';
 import { Badge, Col, Image, Row, Table } from 'react-bootstrap';
 import { parseJSON } from 'web-utility';
 
@@ -12,7 +13,7 @@ export interface TopUserListProps {
   value: TopUser[];
 }
 
-export const TopUserList = ({ value = [] }: TopUserListProps) => (
+export const TopUserList: FC<TopUserListProps> = ({ value = [] }) => (
   <Row className={styles.topUserRow}>
     <Col sm={12} xs={12} lg={7}>
       <div className={`shadow rounded-3 ${styles.showTitle}`}>

package.json

@@ -22,13 +22,13 @@
     "leaflet": "^1.9.4",
     "leaflet.chinatmsproviders": "^3.0.6",
     "lodash": "^4.17.21",
-    "mobx": "^6.10.2",
+    "mobx": "~6.10.2",
     "mobx-i18n": "^0.4.2",
-    "mobx-react": "^9.0.1",
+    "mobx-react": "~9.0.1",
     "mobx-react-helper": "^0.2.7",
     "mobx-restful": "^0.6.12",
     "mobx-restful-table": "^1.2.2",
-    "next": "^14.0.1",
+    "next": "^14.0.2",
     "next-ssr-middleware": "^0.6.1",
     "open-react-map": "^0.7.0",
     "react": "^18.2.0",
@@ -39,22 +39,22 @@
     "web-utility": "^4.1.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.23.3",
     "@octokit/openapi-types": "^19.0.2",
-    "@types/leaflet": "^1.9.7",
-    "@types/lodash": "^4.14.200",
-    "@types/node": "^18.18.8",
-    "@types/react": "^18.2.36",
+    "@types/leaflet": "^1.9.8",
+    "@types/lodash": "^4.14.201",
+    "@types/node": "^18.18.9",
+    "@types/react": "^18.2.37",
     "eslint": "^8.53.0",
-    "eslint-config-next": "^14.0.1",
+    "eslint-config-next": "^14.0.2",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
-    "lint-staged": "^15.0.2",
+    "lint-staged": "^15.1.0",
     "next-pwa": "^5.6.0",
     "next-with-less": "^3.0.1",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "ts-node": "^10.9.1",
     "typescript": "~5.2.2",
     "webpack": "^5.89.0"

pages/_app.tsx

@@ -5,6 +5,7 @@ import { configure } from 'mobx';
 import { enableStaticRendering, observer } from 'mobx-react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import { FC } from 'react';
 import { Image } from 'react-bootstrap';
 
 import { MainNavigation } from '../components/layout/MainNavigation';
@@ -25,8 +26,8 @@ globalThis.addEventListener?.('unhandledrejection', ({ reason }) => {
   if (tips) alert(tips);
 });
 
-const MyApp = observer(
-  ({ router: { pathname }, Component, pageProps }: AppProps) => (
+const MyApp: FC<AppProps> = observer(
+  ({ router: { pathname }, Component, pageProps }) => (
     <>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />

pages/activity/[name]/manage/administrator.tsx

@@ -10,12 +10,13 @@ import {
   RouteProps,
   router,
 } from 'next-ssr-middleware';
-import { FormEvent, PureComponent } from 'react';
+import { FC, FormEvent, PureComponent } from 'react';
 import { Badge, Button, Col, Form, ListGroup, Row } from 'react-bootstrap';
 
 import { ActivityManageFrame } from '../../../../components/Activity/ActivityManageFrame';
 import { AdministratorModal } from '../../../../components/User/ActivityAdministratorModal';
 import { HackathonAdminList } from '../../../../components/User/HackathonAdminList';
+import { ServerSessionBox } from '../../../../components/User/ServerSessionBox';
 import activityStore from '../../../../models/Activity';
 import { i18n } from '../../../../models/Base/Translation';
 
@@ -28,8 +29,22 @@ export const getServerSideProps = compose<
 
 const { t } = i18n;
 
+const AdministratorPage: FC<AdministratorPageProps> = observer(props => (
+  <ServerSessionBox {...props}>
+    <ActivityManageFrame
+      name={props.route.params!.name}
+      path={props.route.resolvedUrl}
+      title={t('admin')}
+    >
+      <AdministratorEditor {...props} />
+    </ActivityManageFrame>
+  </ServerSessionBox>
+));
+
+export default AdministratorPage;
+
 @observer
-export default class AdministratorPage extends PureComponent<AdministratorPageProps> {
+class AdministratorEditor extends PureComponent<AdministratorPageProps> {
   constructor(props: AdministratorPageProps) {
     super(props);
     makeObservable(this);
@@ -85,61 +100,53 @@ export default class AdministratorPage extends PureComponent<AdministratorPagePr
   }
 
   render() {
-    const { resolvedUrl, params } = this.props.route,
-      { store, show } = this;
+    const { store, show } = this;
     const loading = store.uploading > 0;
 
     return (
-      <ActivityManageFrame
-        {...this.props}
-        name={params!.name}
-        path={resolvedUrl}
-        title={t('admin')}
-      >
-        <Form onSubmit={this.handleSubmit}>
-          <Row xs="1" sm="2">
-            <Col sm="auto" md="auto">
-              {this.renderList()}
-
-              <Col className="d-flex flex-column">
-                <Button
-                  variant="success"
-                  className="my-3"
-                  disabled={loading}
-                  onClick={() => (this.show = true)}
-                >
-                  <FontAwesomeIcon className="me-2" icon={faPlus} />
-                  {t('add')}
-                </Button>
-                <Button variant="danger" type="submit" disabled={loading}>
-                  <FontAwesomeIcon className="me-2" icon={faTrash} />
-                  {t('delete')}
-                </Button>
-              </Col>
-            </Col>
-            <Col className="flex-fill">
-              <ScrollList
-                translator={i18n}
-                store={store}
-                renderList={allItems => (
-                  <HackathonAdminList
-                    defaultData={allItems}
-                    selectedIds={this.selectedIds}
-                    onSelect={list => (this.selectedIds = list)}
-                  />
-                )}
-              />
+      <Form onSubmit={this.handleSubmit}>
+        <Row xs="1" sm="2">
+          <Col sm="auto" md="auto">
+            {this.renderList()}
+
+            <Col className="d-flex flex-column">
+              <Button
+                variant="success"
+                className="my-3"
+                disabled={loading}
+                onClick={() => (this.show = true)}
+              >
+                <FontAwesomeIcon className="me-2" icon={faPlus} />
+                {t('add')}
+              </Button>
+              <Button variant="danger" type="submit" disabled={loading}>
+                <FontAwesomeIcon className="me-2" icon={faTrash} />
+                {t('delete')}
+              </Button>
             </Col>
-          </Row>
-        </Form>
+          </Col>
+          <Col className="flex-fill">
+            <ScrollList
+              translator={i18n}
+              store={store}
+              renderList={allItems => (
+                <HackathonAdminList
+                  defaultData={allItems}
+                  selectedIds={this.selectedIds}
+                  onSelect={list => (this.selectedIds = list)}
+                />
+              )}
+            />
+          </Col>
+        </Row>
 
         <AdministratorModal
           store={store}
           show={show}
           onHide={() => (this.show = false)}
           onSave={() => (this.show = false) || this.store.refreshList()}
         />
-      </ActivityManageFrame>
+      </Form>
     );
   }
 }