Convert codebase to TypeScript with comprehensive type annotations

wowsinfo/src/component/common/AdmobBanner.js → wowsinfo/src/component/common/AdmobBanner.tsx

@@ -3,9 +3,13 @@ import {List} from 'react-native-paper';
 import {lang} from '../../value/lang';
 import {SafeAction} from '../../core';
 
+interface AdmobBannerState {
+  success: boolean;
+}
+
 // mark as deprecated
-class AdmobBanner extends Component {
-  constructor(props) {
+class AdmobBanner extends Component<{}, AdmobBannerState> {
+  constructor(props: {}) {
     super(props);
     this.state = {
       success: true,
@@ -24,7 +28,7 @@ class AdmobBanner extends Component {
   }
 
   hideAds = () => this.setState({success: false});
-  logError = err => {
+  logError = (err: any) => {
     console.log('err', err);
     this.setState({success: false});
   };

wowsinfo/src/component/common/Donation.js → wowsinfo/src/component/common/Donation.tsx

@@ -6,6 +6,11 @@ import {lang} from '../../value/lang';
 import {APP} from '../../value/data';
 import {SimpleViewHandler} from '../../core/native/SimpleViewHandler';
 
+// Declare global AppGlobalData
+declare const AppGlobalData: {
+  githubVersion: boolean;
+};
+
 // Now, we have 4 tiers ($1, $3, $5 and $10) for donations
 const itemSkus = [
   'com.yihengquan.wowsinfo.support1',
@@ -14,8 +19,21 @@ const itemSkus = [
   'com.yihengquan.wowsinfo.support10',
 ];
 
-class Donation extends Component {
-  constructor(props) {
+interface SupportItem {
+  t: string;
+  d: string;
+  c: string;
+}
+
+interface DonationState {
+  products: RNIap.Product[] | null;
+  receipt?: string;
+}
+
+class Donation extends Component<{}, DonationState> {
+  support: SupportItem[] = [];
+
+  constructor(props: {}) {
     super(props);
     this.state = {
       products: null,
@@ -37,7 +55,6 @@ class Donation extends Component {
   }
 
   render() {
-    const {products} = this.state;
     console.log(this.state);
 
     this.support = [
@@ -79,7 +96,7 @@ class Donation extends Component {
     );
   }
 
-  async supportWoWsInfo(item) {
+  async supportWoWsInfo(item: RNIap.Product) {
     try {
       // Will return a purchase object with a receipt which can be used to validate on your server.
       const purchase = await RNIap.buyProduct(item.productId);
@@ -88,13 +105,13 @@ class Donation extends Component {
       this.setState({
         receipt: purchase.transactionReceipt, // save the receipt if you need it, whether locally, or to your server.
       });
-    } catch (err) {
+    } catch (err: any) {
       // standardized err.code and err.message available
       console.error(err.code, err.message);
       const subscription = RNIap.addAdditionalSuccessPurchaseListenerIOS(
-        async purchase => {
+        async (purchase: RNIap.Purchase) => {
           this.setState({receipt: purchase.transactionReceipt}, () =>
-            this.goToNext(),
+            (this as any).goToNext(),
           );
           subscription.remove();
         },

wowsinfo/src/component/common/FooterButton.tsx

@@ -1,4 +1,4 @@
-import React  from 'react';
+import React from 'react';
 import {SafeAreaView} from 'react-native';
 import {IconButton, Colors} from 'react-native-paper';
 import {Actions} from 'react-native-router-flux';

wowsinfo/src/component/common/InfoLabel.tsx

@@ -11,7 +11,7 @@ import {Touchable} from './Touchable';
 
 export interface InfoLabelProps {
   title: string;
-  info: string;
+  info: string | number | undefined;
   left?: boolean;
   right?: boolean;
   style?: any;

wowsinfo/src/component/common/PlayerCell.tsx

@@ -0,0 +1,82 @@
+/**
+ * PlayerCell.tsx
+ *
+ * Display player and clan with their ID at the right
+ */
+
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import {List, Caption, Text} from 'react-native-paper';
+import {SafeAction} from '../../core';
+
+interface PlayerItem {
+  nickname: string;
+  account_id: number;
+}
+
+interface ClanItem {
+  tag: string;
+  clan_id: number;
+}
+
+interface PlayerCellProps {
+  item: PlayerItem | ClanItem;
+  player?: boolean;
+  clan?: boolean;
+  width?: number;
+}
+
+class PlayerCell extends Component<PlayerCellProps> {
+  render() {
+    const {item, player, clan, width} = this.props;
+
+    if (player) {
+      const playerItem = item as PlayerItem;
+      return (
+        <List.Item
+          title={playerItem.nickname}
+          style={{width: width}}
+          right={() => this.renderPlayerRight(playerItem.account_id)}
+          onPress={() => this.pushPlayer(playerItem)}
+        />
+      );
+    } else if (clan) {
+      const clanItem = item as ClanItem;
+      return (
+        <List.Item
+          title={clanItem.tag}
+          style={{width: width}}
+          right={() => this.renderClanRight(clanItem.clan_id)}
+          onPress={() => this.pushClan(clanItem)}
+        />
+      );
+    } else {
+      return <Text>???</Text>;
+    }
+  }
+
+  renderPlayerRight(account_id: number) {
+    return <Caption style={styles.ID}>{account_id}</Caption>;
+  }
+
+  renderClanRight(clan_id: number) {
+    return <Caption style={styles.ID}>{clan_id}</Caption>;
+  }
+
+  pushPlayer(item: PlayerItem) {
+    SafeAction('Statistics', {info: item});
+  }
+
+  pushClan(item: ClanItem) {
+    SafeAction('ClanInfo', {info: item});
+  }
+}
+
+const styles = StyleSheet.create({
+  ID: {
+    alignSelf: 'center',
+    marginRight: 8,
+  },
+});
+
+export {PlayerCell};

wowsinfo/src/component/common/SafeView.js → wowsinfo/src/component/common/SafeView.tsx

@@ -1,14 +1,20 @@
 /**
- * SafeView.js
+ * SafeView.tsx
  *
  * Wrap view around SafeAreView and Surface
  */
 
-import React, {Component} from 'react';
-import {SafeAreaView, StyleSheet} from 'react-native';
+import React, {Component, ReactNode} from 'react';
+import {SafeAreaView, StyleSheet, ViewStyle} from 'react-native';
 import {Surface} from 'react-native-paper';
 
-class SafeView extends Component {
+interface SafeViewProps {
+  theme?: any;
+  style?: ViewStyle;
+  children?: ReactNode;
+}
+
+class SafeView extends Component<SafeViewProps> {
   render() {
     const {theme, style, children} = this.props;
     return (

wowsinfo/src/component/common/Space.js → wowsinfo/src/component/common/Space.tsx

@@ -1,24 +1,26 @@
 /**
- * Space.js
+ * Space.tsx
  *
  * Add space to component
  */
 
 import React, {Component} from 'react';
-import {View, StyleSheet} from 'react-native';
+import {View} from 'react-native';
 import {SafeValue} from '../../core';
 
-class Space extends Component {
+interface SpaceProps {
+  height?: number;
+}
+
+class Space extends Component<SpaceProps> {
   render() {
     const {height} = this.props;
 
     // Default value is 128
-    let h = SafeValue(height, 128);
+    const h = SafeValue(height, 128);
 
     return <View style={{height: h}} />;
   }
 }
 
-const styles = StyleSheet.create({});
-
 export {Space};