chore: change directory names to plural

src/screens/CardEditScreen.js

@@ -18,14 +18,18 @@ import {
 import update from 'react-addons-update';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import ImagePicker from 'react-native-image-crop-picker';
-import CardConv from '../module/CardConv';
+import CardConv from '../modules/CardConv';
 import i18n from 'i18n-js';
 
 class CardPreview extends React.Component {
   render() {
     let cardContent = (
       <View
-        style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 8}}>
+        style={{
+          flex: 1,
+          backgroundColor: 'rgba(0,0,0,0.3)',
+          borderRadius: 8,
+        }}>
         <View style={{ flex: 1 }}>
           <TouchableOpacity style={{ flex: 1 }}>
             <Text
@@ -335,7 +339,11 @@ class CardEditScreen extends React.Component {
     }
 
     this.setState(
-      {sid2: randomHex4Byte(), sid3: randomHex4Byte(), sid4: randomHex4Byte()},
+      {
+        sid2: randomHex4Byte(),
+        sid3: randomHex4Byte(),
+        sid4: randomHex4Byte(),
+      },
       () => this.updateSID(),
     );
   }
@@ -371,7 +379,11 @@ class CardEditScreen extends React.Component {
               backgroundColor: '#ffffff',
             }}>
             <View
-              style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+              style={{
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
               <Text
                 style={{
                   fontSize: 17,
@@ -397,7 +409,8 @@ class CardEditScreen extends React.Component {
               </TouchableOpacity>
             </View>
           </View>
-          <ScrollView style={{flex: 1, paddingHorizontal: 24, paddingTop: 16}}>
+          <ScrollView
+            style={{ flex: 1, paddingHorizontal: 24, paddingTop: 16 }}>
             <ETextInput
               title={i18n.t('edit_name')}
               value={this.state.name}
@@ -536,7 +549,8 @@ class CardEditScreen extends React.Component {
                 justifyContent: 'center',
               }}
               onPress={() => this.setRandomSid()}>
-              <Text style={{fontSize: 17, color: '#ffffff', fontWeight: '500'}}>
+              <Text
+                style={{ fontSize: 17, color: '#ffffff', fontWeight: '500' }}>
                 {i18n.t('edit_random')}
               </Text>
             </TouchableOpacity>

src/screens/MainScreen.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Text,
   StatusBar,
-  SafeAreaView,
   ScrollView,
   TouchableOpacity,
   Dimensions,
@@ -12,155 +11,22 @@ import {
   Alert,
   StyleSheet,
   Image,
+  FlatList,
 } from 'react-native';
 import update from 'react-addons-update';
-import Hcef from '../module/Hcef';
+import Hcef from '../modules/Hcef';
-import CardConv from '../module/CardConv';
+import CardConv from '../modules/CardConv';
 import AsyncStorage from '@react-native-community/async-storage';
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import i18n from 'i18n-js';
 
+import CardView from '../components/Card';
+import { Card } from '../types';
+
 const RNFS = require('react-native-fs');
 
-class Card extends React.Component {
+/*
-  async onPress() {
-    this.props.onPress(this.props.card, this.props.index);
-  }
-
-  async disable() {
-    if (typeof this.props.disableCallback === 'function') {
-      this.props.disableCallback(this.props.card, this.props.index);
-    }
-  }
-
-  render() {
-    let cardContent = (
-      <View
-        style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 8}}>
-        <View style={{flex: 1}}>
-          <TouchableOpacity style={{flex: 1}} onPress={this.onPress.bind(this)}>
-            <Text
-              style={{
-                position: 'absolute',
-                top: 20,
-                left: 20,
-                fontSize: 17,
-                fontWeight: 'bold',
-                color: '#ffffff',
-              }}>
-              {this.props.card.name}
-            </Text>
-
-            <View style={{flex: 1, justifyContent: 'center', paddingTop: 20}}>
-              <Text
-                style={{
-                  paddingTop: 0,
-                  textAlign: 'center',
-                  alignSelf: 'center',
-                  color: '#E0E0E0',
-                  fontSize: 14,
-                }}>
-                {this.props.card.uid.substr(0, 4) +
-                  '-' +
-                  this.props.card.uid.substr(4, 4) +
-                  '-' +
-                  this.props.card.uid.substr(8, 4) +
-                  '-' +
-                  this.props.card.uid.substr(12, 4)}
-              </Text>
-              <Text
-                style={{
-                  paddingTop: 8,
-                  textAlign: 'center',
-                  alignSelf: 'center',
-                  fontSize: 24,
-                  color: '#FAFAFA',
-                  fontWeight: '500',
-                  letterSpacing: -0.5,
-                }}>
-                {this.props.card.enabled
-                  ? i18n.t('card_touch_to_disable')
-                  : i18n.t('card_touch_to_enable')}
-              </Text>
-            </View>
-          </TouchableOpacity>
-        </View>
-        <View style={{height: 1, backgroundColor: '#FAFAFA'}} />
-        <View style={{height: 48, flexDirection: 'row'}}>
-          <TouchableOpacity
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-            onPress={() =>
-              this.props.navigation.navigate('CardEditScreen', {
-                name: this.props.card.name,
-                sid: this.props.card.sid,
-                image: this.props.card.image,
-                index: this.props.index,
-                update: this.props.update,
-              })
-            }>
-            <Text style={{fontSize: 14, color: '#FAFAFA'}}>
-              {i18n.t('card_edit')}
-            </Text>
-          </TouchableOpacity>
-          <View style={{width: 1, backgroundColor: '#FAFAFA'}} />
-          <TouchableOpacity
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-            onPress={() => this.props.delete(this.props.index)}>
-            <Text style={{fontSize: 14, color: '#ffffff'}}>
-              {i18n.t('card_delete')}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    );
-
-    return (
-      <View
-        style={[
-          {
-            borderRadius: 8,
-            height: this.props.cardHeight,
-            marginTop: 24,
-            marginHorizontal: 24,
-            justifyContent: 'center',
-          },
-        ]}>
-        {this.props.card.image ? (
-          <ImageBackground
-            source={{uri: this.props.card.image}}
-            style={{
-              flex: 1,
-              resizeMode: 'contain',
-            }}
-            blurRadius={2}
-            borderRadius={8}>
-            {cardContent}
-          </ImageBackground>
-        ) : (
-          <View
-            style={{
-              flex: 1,
-              resizeMode: 'contain',
-              backgroundColor: '#03A9F4',
-            }}
-            blurRadius={2}
-            borderRadius={8}>
-            {cardContent}
-          </View>
-        )}
-      </View>
-    );
-  }
-}
-
 class MainScreen extends React.Component {
   state = {
     cards: [],
@@ -231,7 +97,9 @@ class MainScreen extends React.Component {
       this.prevCard.enabled = true;
       this.prevIndex = index;
       this.setState({
-        cards: update(this.state.cards, {[index]: {enabled: {$set: true}}}),
+        cards: update(this.state.cards, {
+          [index]: { enabled: { $set: true } },
+        }),
       });
     }
   }
@@ -242,7 +110,9 @@ class MainScreen extends React.Component {
       if (ret) {
         card.enabled = false;
         this.setState({
-          cards: update(this.state.cards, {[index]: {enabled: {$set: false}}}),
+          cards: update(this.state.cards, {
+            [index]: { enabled: { $set: false } },
+          }),
         });
         return true;
       }
@@ -412,5 +282,51 @@ class MainScreen extends React.Component {
     );
   }
 }
+*/
+
+const ListSeparator = () => <View style={styles.separator} />;
+
+const MainScreen = () => {
+  const [cards, setCards] = useState<Card[]>([
+    {
+      sid: '02FE000000000000',
+      name: 'e-amusement pass',
+    },
+  ]);
+
+  return (
+    <View style={styles.container}>
+      <StatusBar backgroundColor={'white'} barStyle={'dark-content'} />
+
+      {cards.length > 0 ? (
+        <FlatList
+          style={styles.list}
+          data={cards}
+          renderItem={card => <CardView card={card.item} />}
+          ItemSeparatorComponent={ListSeparator}
+          ListHeaderComponent={View}
+          ListHeaderComponentStyle={styles.separator}
+          ListFooterComponent={View}
+          ListFooterComponentStyle={styles.separator}
+        />
+      ) : (
+        <View />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f0f0f0',
+  },
+  list: {
+    // paddingHorizontal: 16,
+  },
+  separator: {
+    height: 16,
+  },
+});
 
 export default MainScreen;