[optimize] simplify Scroll List components with Query Filter

components/Activity/ActivityList.tsx

@@ -1,35 +1,35 @@
-import { observer } from 'mobx-react';
+import { ScrollList } from 'mobx-restful-table';
+import { FC, PureComponent } from 'react';
 import { Col, Row } from 'react-bootstrap';
 
 import {
   Activity,
-  ActivityFilter,
   ActivityListType,
   ActivityModel,
 } from '../../models/Activity';
 import platformAdmin from '../../models/PlatformAdmin';
 import sessionStore from '../../models/Session';
 import { i18n } from '../../models/Translation';
-import { XScrollList, XScrollListProps } from '../layout/ScrollList';
+import { XScrollListProps } from '../layout/ScrollList';
 import { ActivityCard, ActivityCardProps } from './ActivityCard';
 
 const { t } = i18n;
 
-export interface ActivityListProps
+export interface ActivityListLayoutProps
   extends XScrollListProps<Activity>,
     Pick<ActivityCardProps, 'onPublish' | 'onDelete'> {
   type?: ActivityListType;
   size?: 'sm' | 'lg';
   userId?: string;
 }
 
-export const ActivityListLayout = ({
+export const ActivityListLayout: FC<ActivityListLayoutProps> = ({
   size,
   type = 'online',
   defaultData = [],
   userId,
   ...props
-}: ActivityListProps) => (
+}) => (
   <Row
     className="g-4"
     xs={1}
@@ -53,21 +53,13 @@ export const ActivityListLayout = ({
   </Row>
 );
 
-@observer
-export default class ActivityList extends XScrollList<ActivityListProps> {
-  store = new ActivityModel();
-
-  filter: ActivityFilter = {
-    userId: this.props.userId,
-    listType: this.props.type,
-  };
+export type ActivityListProps = ActivityListLayoutProps;
 
-  constructor(props: ActivityListProps) {
-    super(props);
-
-    this.boot();
+export default class ActivityList extends PureComponent<ActivityListProps> {
+  store = new ActivityModel();
 
-    if (props.type === 'admin' && !platformAdmin.isPlatformAdmin)
+  componentDidMount() {
+    if (this.props.type === 'admin' && !platformAdmin.isPlatformAdmin)
       platformAdmin.checkAuthorization();
   }
 
@@ -86,15 +78,22 @@ export default class ActivityList extends XScrollList<ActivityListProps> {
     this.props.onDelete?.(name);
   };
 
-  renderList() {
-    const { allItems } = this.store;
+  render() {
+    const { userId, type } = this.props;
 
     return (
-      <ActivityListLayout
-        {...this.props}
-        defaultData={allItems}
-        onPublish={this.onPublish}
-        onDelete={this.onDelete}
+      <ScrollList
+        translator={i18n}
+        store={this.store}
+        filter={{ userId, listType: type }}
+        renderList={allItems => (
+          <ActivityListLayout
+            {...this.props}
+            defaultData={allItems}
+            onPublish={this.onPublish}
+            onDelete={this.onDelete}
+          />
+        )}
       />
     );
   }

components/Activity/AwardList.tsx

@@ -1,9 +1,9 @@
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Image, Table } from 'react-bootstrap';
-
 import { ScrollList, ScrollListProps } from 'mobx-restful-table';
 import { FC, PureComponent } from 'react';
+import { Button, Image, Table } from 'react-bootstrap';
+
 import { Award } from '../../models/Award';
 import { i18n } from '../../models/Translation';
 import styles from '../../styles/Table.module.less';
@@ -80,7 +80,8 @@ export const AwardListLayout: FC<AwardListLayoutProps> = ({
   </Table>
 );
 
-export type AwardListProps = ScrollListProps<Award> & AwardListLayoutProps;
+export type AwardListProps = Pick<ScrollListProps<Award>, 'store'> &
+  AwardListLayoutProps;
 
 export class AwardList extends PureComponent<AwardListProps> {
   onEdit = (id: string) => {

components/Activity/EnrollmentList.tsx

@@ -87,9 +87,7 @@ export const EnrollmentListLayout: FC<EnrollmentListLayoutProps> = ({
   </Table>
 );
 
-export interface EnrollmentListProps
-  extends ScrollListProps<Enrollment>,
-    EnrollmentListLayoutProps {
+export interface EnrollmentListProps extends EnrollmentListLayoutProps {
   activity: string;
 }
 

components/Message/MessageList.tsx

@@ -106,7 +106,7 @@ export const MessageListLayout: FC<MessageListLayoutProps> = ({
   </Table>
 );
 
-export type MessageListProps = ScrollListProps<Message> &
+export type MessageListProps = Pick<ScrollListProps<Message>, 'store'> &
   MessageListLayoutProps;
 
 @observer

components/Team/TeamAdministratorTable.tsx

@@ -1,28 +1,23 @@
 import { observer } from 'mobx-react';
+import { FC } from 'react';
 import { Form, Table } from 'react-bootstrap';
 
 import sessionStore from '../../models/Session';
-import {
-  MembershipStatus,
-  TeamMember,
-  TeamMemberFilter,
-  TeamMemberModel,
-} from '../../models/Team';
+import { TeamMember } from '../../models/Team';
 import { i18n } from '../../models/Translation';
 import styles from '../../styles/Table.module.less';
 import { convertDatetime } from '../../utils/time';
-import { XScrollList, XScrollListProps } from '../layout/ScrollList';
+import { XScrollListProps } from '../layout/ScrollList';
 
 const { t } = i18n;
 
-export interface TeamAdministratorTableProps
+export interface TeamAdministratorTableLayoutProps
   extends XScrollListProps<TeamMember> {
-  store: TeamMemberModel;
   onUpdateRole?: (userId: string, role: 'admin' | 'member') => any;
   onPopUpUpdateRoleModal?: (userId: string) => any;
 }
 
-const TableHeads = [
+const TableHeads = () => [
   '#',
   t('nick_name'),
   t('mail'),
@@ -33,23 +28,20 @@ const TableHeads = [
   t('role_type'),
 ];
 
-const RoleName = {
+const RoleName = () => ({
   member: t('member'),
   admin: t('admin'),
-};
+});
 
-export const TeamAdministratorTableLayout = observer(
-  ({
-    defaultData = [],
-    onUpdateRole,
-  }: Omit<TeamAdministratorTableProps, 'store'>) => {
+export const TeamAdministratorTableLayout: FC<TeamAdministratorTableLayoutProps> =
+  observer(({ defaultData = [], onUpdateRole }) => {
     const { id: currentUserId } = sessionStore?.user || {};
 
     return (
       <Table hover responsive="lg" className={styles.table}>
         <thead>
           <tr>
-            {TableHeads.map((data, idx) => (
+            {TableHeads().map((data, idx) => (
               <th key={idx + data}>{data}</th>
             ))}
           </tr>
@@ -87,7 +79,7 @@ export const TeamAdministratorTableLayout = observer(
                         }
                         defaultValue={role}
                       >
-                        {Object.entries(RoleName).map(([key, value]) => (
+                        {Object.entries(RoleName()).map(([key, value]) => (
                           <option key={key} value={key}>
                             {value}
                           </option>
@@ -106,33 +98,4 @@ export const TeamAdministratorTableLayout = observer(
         </tbody>
       </Table>
     );
-  },
-);
-
-@observer
-export class TeamAdministratorTable extends XScrollList<TeamAdministratorTableProps> {
-  store = this.props.store;
-
-  filter: TeamMemberFilter = {
-    status: MembershipStatus.APPROVED,
-  };
-
-  constructor(props: TeamAdministratorTableProps) {
-    super(props);
-
-    this.boot();
-  }
-
-  onUpdateRole: TeamAdministratorTableProps['onUpdateRole'] = (userId, role) =>
-    this.store.updateRole(userId, role);
-
-  renderList() {
-    return (
-      <TeamAdministratorTableLayout
-        {...this.props}
-        defaultData={this.store.allItems}
-        onUpdateRole={this.onUpdateRole}
-      />
-    );
-  }
-}
+  });

components/Team/TeamAwardList.tsx

@@ -31,7 +31,7 @@ const TeamAwardListLayout: FC<TeamAwardListLayoutProps> = ({
   </Row>
 );
 
-export type TeamAwardListProps = ScrollListProps<Team> &
+export type TeamAwardListProps = Pick<ScrollListProps<Team>, 'store'> &
   TeamAwardListLayoutProps;
 
 export class TeamAwardList extends PureComponent<TeamAwardListProps> {

components/Team/TeamParticipantTable.tsx

@@ -1,12 +1,7 @@
-import { ScrollList, ScrollListProps } from 'mobx-restful-table';
-import { FC, PureComponent } from 'react';
+import { FC } from 'react';
 import { Form, Table } from 'react-bootstrap';
 
-import {
-  MembershipStatus,
-  TeamMember,
-  TeamMemberModel,
-} from '../../models/Team';
+import { MembershipStatus, TeamMember } from '../../models/Team';
 import { i18n } from '../../models/Translation';
 import styles from '../../styles/Table.module.less';
 import { convertDatetime } from '../../utils/time';
@@ -102,29 +97,3 @@ export const TeamParticipantTableLayout: FC<
     </tbody>
   </Table>
 );
-
-export interface TeamParticipantTableProps
-  extends ScrollListProps<TeamMember>,
-    TeamParticipantTableLayoutProps {
-  store: TeamMemberModel;
-}
-
-export class TeamParticipantTable extends PureComponent<TeamParticipantTableProps> {
-  onApprove: TeamParticipantTableProps['onApprove'] = (userId, status) =>
-    this.props.store.approveOne(userId, status);
-
-  render() {
-    return (
-      <ScrollList
-        translator={i18n}
-        store={this.props.store}
-        renderList={allItems => (
-          <TeamParticipantTableLayout
-            defaultData={allItems}
-            onApprove={this.onApprove}
-          />
-        )}
-      />
-    );
-  }
-}

components/Team/TeamWorkList.tsx

@@ -1,6 +1,6 @@
 import { faCalendarDay } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ScrollList, ScrollListProps } from 'mobx-restful-table';
+import { ScrollList } from 'mobx-restful-table';
 import { FC, PureComponent } from 'react';
 import {
   Button,
@@ -116,10 +116,7 @@ export const TeamWorkListLayout: FC<TeamWorkListLayoutProps> = ({
   </Container>
 );
 
-export type TeamWorkListProps = ScrollListProps<TeamWork> &
-  TeamWorkListLayoutProps;
-
-export class TeamWorkList extends PureComponent<TeamWorkListProps> {
+export class TeamWorkList extends PureComponent<TeamWorkListLayoutProps> {
   store = activityStore.teamOf(this.props.activity).workOf(this.props.team);
 
   onDelete = (id?: string) =>

components/User/UserList.tsx

@@ -88,7 +88,7 @@ export const UserListLayout: FC<UserListLayoutProps> = ({
   </>
 );
 
-export type UserListProps = ScrollListProps<User, UserFilter> &
+export type UserListProps = Pick<ScrollListProps<User, UserFilter>, 'store'> &
   UserListLayoutProps;
 
 export class UserList extends PureComponent<UserListProps> {

components/layout/ScrollList.tsx

@@ -1,36 +1,8 @@
-import { Loading } from 'idea-react';
-import { observable } from 'mobx';
 import { DataObject } from 'mobx-restful';
-import { ScrollList, ScrollListProps } from 'mobx-restful-table';
-
-import { i18n } from '../../models/Translation';
+import { ScrollListProps } from 'mobx-restful-table';
 
 export interface XScrollListProps<T extends DataObject = DataObject>
   extends Pick<ScrollListProps<T>, 'defaultData'> {
   selectedIds?: string[];
   onSelect?: (selectedIds: string[]) => any;
 }
-
-export abstract class XScrollList<
-  P extends XScrollListProps,
-> extends ScrollList<P> {
-  translator = i18n;
-
-  @observable
-  selectedIds: string[] = [];
-
-  onSelect = (list: string[]) =>
-    (this.selectedIds = list) && this.props.onSelect?.(list);
-
-  render() {
-    const { downloading, uploading } = this.store;
-
-    return (
-      <>
-        {(downloading > 0 || uploading > 0) && <Loading />}
-
-        {super.render()}
-      </>
-    );
-  }
-}