[optimize] simplify Selectable Scroll List components

components/Git/CardList.tsx

@@ -1,4 +1,5 @@
 import { text2color } from 'idea-react';
+import { FC } from 'react';
 import { Badge, Button, Card, Col, Form, Row } from 'react-bootstrap';
 
 import { GitTemplate } from '../../models/TemplateRepo';
@@ -8,11 +9,11 @@ import { GitLogo } from './Logo';
 
 const { t } = i18n;
 
-export const CardList = ({
+export const CardList: FC<XScrollListProps<GitTemplate>> = ({
   defaultData = [],
   selectedIds = [],
   onSelect,
-}: XScrollListProps<GitTemplate>) => (
+}) => (
   <Row as="ul" className="list-unstyled g-4" xs={1} sm={2}>
     {defaultData.map(
       ({

components/Organization/OrganizationList.tsx

@@ -1,25 +1,20 @@
-import { observer } from 'mobx-react';
+import { FC } from 'react';
 import { Form, Image, Table } from 'react-bootstrap';
 
 import {
   Organization,
-  OrganizationModel,
-  OrganizationTypeName,
+  OrganizationTypeName
 } from '../../models/Organization';
 import { i18n } from '../../models/Translation';
 import styles from '../../styles/Table.module.less';
-import { XScrollList, XScrollListProps } from '../layout/ScrollList';
+import { XScrollListProps } from '../layout/ScrollList';
 import { OrganizationCard } from './OrganizationCard';
 
 const { t } = i18n;
 
-export interface OrganizationListProps extends XScrollListProps<Organization> {
-  store: OrganizationModel;
-}
-
-export const OrganizationListLayout = ({
+export const OrganizationListLayout: FC<XScrollListProps<Organization>> = ({
   defaultData = [],
-}: Pick<OrganizationListProps, 'defaultData'>) => (
+}) => (
   <ul className="list-unstyled">
     {defaultData.map(item => (
       <li className="mb-2" key={item.id}>
@@ -29,11 +24,11 @@ export const OrganizationListLayout = ({
   </ul>
 );
 
-export const OrganizationTableLayout = ({
+export const OrganizationTableLayout: FC<XScrollListProps<Organization>> = ({
   defaultData = [],
   selectedIds = [],
   onSelect,
-}: Omit<OrganizationListProps, 'store'>) => (
+}) => (
   <Table hover responsive="lg" className={styles.table}>
     <thead>
       <tr>
@@ -109,25 +104,3 @@ export const OrganizationTableLayout = ({
     </tbody>
   </Table>
 );
-
-@observer
-export class OrganizationTable extends XScrollList<OrganizationListProps> {
-  store = this.props.store;
-
-  constructor(props: OrganizationListProps) {
-    super(props);
-
-    this.boot();
-  }
-
-  renderList() {
-    return (
-      <OrganizationTableLayout
-        {...this.props}
-        defaultData={this.store.allItems}
-        selectedIds={this.selectedIds}
-        onSelect={this.onSelect}
-      />
-    );
-  }
-}

components/User/HackathonAdminList.tsx

@@ -1,5 +1,6 @@
 import 'array-unique-proposal';
 
+import { FC } from 'react';
 import { Form, Table } from 'react-bootstrap';
 
 import { HackathonAdmin } from '../../models/HackathonAdmin';
@@ -23,11 +24,11 @@ const TableHeads = [
   t('remark'),
 ];
 
-export const HackathonAdminList = ({
+export const HackathonAdminList: FC<XScrollListProps<HackathonAdmin>> = ({
   defaultData = [],
   selectedIds = [],
   onSelect,
-}: XScrollListProps<HackathonAdmin>) => (
+}) => (
   <Table hover responsive="lg" className={styles.table}>
     <thead>
       <tr>

components/layout/ScrollList.tsx

@@ -6,7 +6,7 @@ import { ScrollList, ScrollListProps } from 'mobx-restful-table';
 import { i18n } from '../../models/Translation';
 
 export interface XScrollListProps<T extends DataObject = DataObject>
-  extends ScrollListProps<T> {
+  extends Pick<ScrollListProps<T>, 'defaultData'> {
   selectedIds?: string[];
   onSelect?: (selectedIds: string[]) => any;
 }

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

@@ -2,13 +2,14 @@ import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
+import { ScrollList } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
 import { 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 { StaffList } from '../../../../components/User/StaffList';
+import { HackathonAdminList } from '../../../../components/User/HackathonAdminList';
 import activityStore from '../../../../models/Activity';
 import { i18n } from '../../../../models/Translation';
 import { withRoute } from '../../../api/core';
@@ -102,9 +103,16 @@ export default class AdministratorPage extends PureComponent<
               </Col>
             </Col>
             <Col className="flex-fill">
-              <StaffList
+              <ScrollList
+                translator={i18n}
                 store={store}
-                onSelect={list => (this.selectedIds = list)}
+                renderList={allItems => (
+                  <HackathonAdminList
+                    defaultData={allItems}
+                    selectedIds={this.selectedIds}
+                    onSelect={list => (this.selectedIds = list)}
+                  />
+                )}
               />
             </Col>
           </Row>

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

@@ -2,12 +2,13 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
+import { ScrollList } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
 import { FormEvent, PureComponent } from 'react';
 import { Button, Container, Form } from 'react-bootstrap';
 
 import { ActivityManageFrame } from '../../../../components/Activity/ActivityManageFrame';
-import { GitList } from '../../../../components/Git';
+import { CardList } from '../../../../components/Git/CardList';
 import { GitModal } from '../../../../components/Git/Modal';
 import activityStore from '../../../../models/Activity';
 import { i18n } from '../../../../models/Translation';
@@ -62,9 +63,16 @@ export default class ActivityManageGitPage extends PureComponent<
               </Button>
             </Form>
           </header>
-          <GitList
-            {...{ store, selectedIds }}
-            onSelect={list => (this.selectedIds = list)}
+          <ScrollList
+            translator={i18n}
+            store={store}
+            renderList={allItems => (
+              <CardList
+                defaultData={allItems}
+                selectedIds={selectedIds}
+                onSelect={list => (this.selectedIds = list)}
+              />
+            )}
           />
           <GitModal
             store={store}

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

@@ -2,13 +2,14 @@ import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
+import { ScrollList } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
 import { FormEvent, PureComponent } from 'react';
 import { Badge, Button, Col, Form, ListGroup, Row } from 'react-bootstrap';
 
 import { ActivityManageFrame } from '../../../../components/Activity/ActivityManageFrame';
 import { OrganizationModal } from '../../../../components/Organization/ActivityOrganizationModal';
-import { OrganizationTable } from '../../../../components/Organization/OrganizationList';
+import { OrganizationTableLayout } from '../../../../components/Organization/OrganizationList';
 import activityStore from '../../../../models/Activity';
 import { i18n } from '../../../../models/Translation';
 import { withRoute } from '../../../api/core';
@@ -101,9 +102,16 @@ export default class OrganizationPage extends PureComponent<
               </Col>
             </Col>
             <Col className="flex-fill">
-              <OrganizationTable
+              <ScrollList
+                translator={i18n}
                 store={store}
-                onSelect={list => (this.selectedIds = list)}
+                renderList={allItems => (
+                  <OrganizationTableLayout
+                    defaultData={allItems}
+                    selectedIds={this.selectedIds}
+                    onSelect={list => (this.selectedIds = list)}
+                  />
+                )}
               />
             </Col>
           </Row>

pages/admin/platform-admin.tsx

@@ -2,12 +2,13 @@ import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
+import { ScrollList } from 'mobx-restful-table';
 import { FormEvent, PureComponent } from 'react';
 import { Button, Form } from 'react-bootstrap';
 
 import { PlatformAdminFrame } from '../../components/PlatformAdmin/PlatformAdminFrame';
-import { PlatformAdminList } from '../../components/PlatformAdmin/PlatformAdminList';
 import { PlatformAdminModal } from '../../components/PlatformAdmin/PlatformAdminModal';
+import { HackathonAdminList } from '../../components/User/HackathonAdminList';
 import { PlatformAdminModel } from '../../models/PlatformAdmin';
 import { i18n } from '../../models/Translation';
 
@@ -63,9 +64,16 @@ class PlatformAdmin extends PureComponent {
             <FontAwesomeIcon className="me-2" icon={faTrash} />
             {t('delete')}
           </Button>
-          <PlatformAdminList
+          <ScrollList
+            translator={i18n}
             store={store}
-            onSelect={list => (this.selectedIds = list)}
+            renderList={allItems => (
+              <HackathonAdminList
+                defaultData={allItems}
+                selectedIds={this.selectedIds}
+                onSelect={list => (this.selectedIds = list)}
+              />
+            )}
           />
         </Form>