start refactor

src/pages/user/about/about.tsx

@@ -4,7 +4,7 @@ import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
 import './about.scss';
 
-export default class SettingsPage extends Component {
+export default class AboutPage extends Component {
   componentDidMount(): void {
     Taro.setNavigationBarTitle({
       title: pt.get().navBar.user.about,

src/pages/user/myTicket/TicketListItem.tsx

@@ -0,0 +1,57 @@
+import { AtListItem } from 'taro-ui';
+import repair from '@/assets/icons/MyTickets/repair.svg';
+import finished from '@/assets/icons/MyTickets/finished.svg';
+import tick from '@/assets/icons/MyTickets/tick.svg';
+import fail from '@/assets/icons/MyTickets/fail.svg';
+import pt from '@/plain-text';
+import Taro from '@tarojs/taro';
+
+type FixStatus = 1 | 2 | 3 | 4 | 5;
+
+export class TicketListItem {
+  id: number;
+  brand: string;
+  model: string;
+  status: FixStatus;
+  createAt: moment.Moment;
+  iconMap: Map<FixStatus, string>;
+
+  constructor(
+    id: number,
+    brand: string,
+    model: string,
+    status: FixStatus,
+    createAt: moment.Moment,
+  ) {
+    this.id = id;
+    this.brand = brand;
+    this.model = model;
+    this.status = status;
+    this.createAt = createAt;
+    this.iconMap = new Map<FixStatus, string>([
+      [1, repair],
+      [2, repair],
+      [3, finished],
+      [4, tick],
+      [5, fail],
+    ]);
+  }
+
+  render(): JSX.Element {
+    const tl = pt.get().ticketList;
+    return (
+      <AtListItem
+        title={this.brand + ' ' + this.model}
+        note={tl.createdAt(this.createAt.format('YYYY-MM-DD HH:mm'))}
+        extraText={tl.statusMap.get(this.status)}
+        arrow='right'
+        thumb={this.iconMap.get(this.status)}
+        onClick={() => {
+          Taro.navigateTo({
+            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
+          });
+        }}
+      />
+    );
+  }
+}

src/pages/user/myTicket/myTicket.tsx

@@ -1,121 +1,37 @@
 import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
-import { AtList, AtListItem } from 'taro-ui';
+import { AtList } from 'taro-ui';
 import Taro from '@tarojs/taro';
 import moment from 'moment';
-import repair from '@/assets/icons/MyTickets/repair.svg';
-import finished from '@/assets/icons/MyTickets/finished.svg';
-import tick from '@/assets/icons/MyTickets/tick.svg';
-import fail from '@/assets/icons/MyTickets/fail.svg';
 import pt from '@/plain-text';
-import { getUrl } from '@/service';
+import { RequestState } from '@/service';
+import { getMyTicketList } from '@/service/myTicket';
 import './myTicket.scss';
+import { TicketListItem } from './TicketListItem';
 
-type FixStatus = 1 | 2 | 3 | 4 | 5;
+interface MyTicketState {
-
+  fixList: Array<TicketListItem>;
-class TicketListItem {
+  rs: RequestState;
-  id: number;
-  brand: string;
-  model: string;
-  status: FixStatus;
-  createAt: moment.Moment;
-  iconMap: Map<FixStatus, string>;
-
-  constructor(
-    id: number,
-    brand: string,
-    model: string,
-    status: FixStatus,
-    createAt: moment.Moment,
-  ) {
-    this.id = id;
-    this.brand = brand;
-    this.model = model;
-    this.status = status;
-    this.createAt = createAt;
-    this.iconMap = new Map<FixStatus, string>([
-      [1, repair],
-      [2, repair],
-      [3, finished],
-      [4, tick],
-      [5, fail],
-    ]);
-  }
-
-  render(): JSX.Element {
-    const tl = pt.get().ticketList;
-    return (
-      <AtListItem
-        title={this.brand + ' ' + this.model}
-        note={tl.createdAt(this.createAt.format('YYYY-MM-DD HH:mm'))}
-        extraText={tl.statusMap.get(this.status)}
-        arrow='right'
-        thumb={this.iconMap.get(this.status)}
-        onClick={() => {
-          Taro.navigateTo({
-            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
-          });
-        }}
-      />
-    );
-  }
 }
 
-export default class SettingsPage extends Component {
+export default class MyTicketPage extends Component<{}, MyTicketState> {
   state = {
-    loading: true,
-    success: false,
     fixList: [new TicketListItem(0, '', '', 1, moment())],
+    rs: new RequestState(),
   };
 
   componentDidMount(): void {
     Taro.setNavigationBarTitle({
       title: pt.get().navBar.user.myTicket,
     });
-    Taro.request({
+    getMyTicketList(this);
-      url: getUrl('/user/mytickets'),
-      method: 'GET',
-      data: {
-        token: 'token_test',
-      },
-    })
-      .then(res => {
-        if (!res.data.success) {
-          this.setState({
-            loading: false,
-            success: false,
-          });
-          return;
-        }
-        this.setState({
-          loading: false,
-          success: true,
-          fixList: res.data.data.list.map(
-            item =>
-              new TicketListItem(
-                item.id,
-                item.device,
-                item.deviceModel,
-                item.status,
-                moment(),
-              ),
-          ),
-        });
-      })
-      .catch(reason => {
-        this.setState({
-          loading: false,
-          success: false,
-        });
-        console.log(reason);
-      });
   }
 
   render(): ReactNode {
-    if (this.state.loading) {
+    if (this.state.rs.loading) {
       return <View>loading</View>;
     }
-    if (!this.state.success) {
+    if (!this.state.rs.success) {
       return <View>Failed</View>;
     }
     const fixListRenderer = this.state.fixList.map(item => item.render());

src/pages/user/report/report.tsx

@@ -7,7 +7,7 @@ import './report.scss';
 
 const submitInterval = 5000;
 
-export default class SettingsPage extends Component {
+export default class ReportPage extends Component {
   state = {
     report: '',
     isLoading: false,

src/service/index.ts

@@ -1,5 +1,14 @@
 import process from 'process';
 
+export class RequestState {
+  loading: boolean;
+  success: boolean;
+  constructor() {
+    this.loading = true;
+    this.success = false;
+  }
+}
+
 /**
  * Get URL of backend
  * @param path Relative path to base url, begins with `/`

src/service/myTicket.ts

@@ -0,0 +1,51 @@
+import MyTicketPage from '@/pages/user/myTicket/myTicket';
+import { TicketListItem } from '@/pages/user/myTicket/TicketListItem';
+import Taro from '@tarojs/taro';
+import moment from 'moment';
+import { getUrl } from '.';
+
+export function getMyTicketList(that: MyTicketPage) {
+  Taro.request({
+    url: getUrl('/user/mytickets'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then(res => {
+      if (!res.data.success) {
+        that.setState({
+          rs: {
+            loading: false,
+            success: false,
+          },
+        });
+        return;
+      }
+      that.setState({
+        rs: {
+          loading: false,
+          success: true,
+        },
+        fixList: res.data.data.list.map(
+          item =>
+            new TicketListItem(
+              item.id,
+              item.device,
+              item.deviceModel,
+              item.status,
+              moment(),
+            ),
+        ),
+      });
+    })
+    .catch(reason => {
+      that.setState({
+        rs: {
+          loading: false,
+          success: false,
+        },
+      });
+      console.log(reason);
+    });
+}