filter cards list, analytics

App.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import { View } from 'react-native';
 import { createStackNavigator } from 'react-navigation';
 import { Font } from 'expo';
 
-import CardScreen from './components/CardScreen';
+import CardScreen from './screens/CardScreen';
 import { FavsProvider } from './components/FavoritesProvider';
-import SearchScreen from './components/SearchScreen';
+import SearchScreen from './screens/SearchScreen';
 import TabBarFooter from './components/TabBarFooter';
 
 

components/CardsSortModal.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+    Button,
+    FlatList,
+    Modal,
+    Text,
+    SafeAreaView,
+    ScrollView,
+    TouchableOpacity,
+    View
+} from 'react-native';
+
+import { getCategories } from './CardLibrary';
+import { analyzeThis } from './utils';
+import Colors from './colors';
+
+const ListItem = (props) =>
+    <TouchableOpacity 
+        onPress={() => {props.onPress()}}
+    >
+        <View style={{borderBottomWidth: 1, borderColor: Colors.lightGray }}>
+            <Text 
+                style={{ fontFamily: 'open-sans-regular', fontSize: 16, padding: 10 }}
+            >
+                {props.cat.name}
+            </Text>
+        </View>
+
+    </TouchableOpacity>
+
+class CardsSortModal extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            cats: getCategories()
+        }
+    }
+//   componentDidMount() {
+//     analyzeThis('HomeScreen');
+//   }
+
+  render() {
+    return (
+
+        <Modal
+          animationType="fade"
+          transparent={true}
+          visible={this.props.visible}
+          onRequestClose={() => {
+            this.props.closeModal
+        }}>
+            <SafeAreaView
+                style={{
+                    flex: 1,
+                    padding: 20,
+                    backgroundColor: 'rgba(0,176,146,.8)',
+                }}>
+                <View style={{ flex: 1, margin: 30, padding: 20, backgroundColor: 'white', overflow: 'hidden'}}>
+                    <Button  title="Cancel" onPress={() => { this.props.closeModal()} }  />
+                    <ScrollView>
+                        <ListItem key={99999999999} cat={{ name: 'All Categories' }} onPress={() => this.props.onPress(null)} />
+                        { this.state.cats.map((cat,index) => 
+                            <ListItem 
+                                key={index}
+                                cat={cat}
+                                onPress={() => this.props.onPress(cat)}
+                            />
+                        )}
+                    </ScrollView>
+                </View>
+            </SafeAreaView>
+
+        </Modal>
+
+    );
+  }
+}
+
+export default CardsSortModal;

components/TabBarFooter.js

@@ -3,10 +3,10 @@ import { createStackNavigator, createBottomTabNavigator } from "react-navigation
 import { TouchableOpacity } from "react-native"
 import { SimpleLineIcons as Icon } from '@expo/vector-icons';
 
-import HomeScreen from './HomeScreen';
-import CardsTabHeader from './CardsTabHeader';
-import FavoritesScreen from './FavoritesScreen';
-import AboutScreen from './AboutScreen';
+import HomeScreen from '../screens/HomeScreen';
+import CardsSortScreen from '../screens/CardsSortScreen';
+import FavoritesScreen from '../screens/FavoritesScreen';
+import AboutScreen from '../screens/AboutScreen';
 import TabIcon from "./TabIcon";
 import Colors from "./colors";
 
@@ -51,7 +51,7 @@ const TabConfig = {
 const TabBarFooter = createBottomTabNavigator({
     Latest: tabSetup(HomeScreen, 'ALiEMCards', 'home'),
     Favorites: tabSetup(FavoritesScreen, 'Favorites', 'star'),
-    Cards: tabSetup(CardsTabHeader, 'Cards', 'list'),
+    Cards: tabSetup(CardsSortScreen, 'Cards', 'list'),
     About: tabSetup(AboutScreen, 'About', 'question')
 }, TabConfig);
 

components/utils.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Analytics, PageHit } from 'expo-analytics';
+
+export const constants = {
+    GA: 'UA-124875540-2'
+}
+
+export function analyzeThis(log) {
+    const analytics = new Analytics(constants.GA, null, { debug: true });
+    analytics.hit(new PageHit(log))
+        .then(() => `logged ${log}`)
+        .catch(e => console.log(e.message));
+}

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "expo": "^30.0.1",
+    "expo-analytics": "^1.0.7",
     "fuse.js": "^3.2.1",
     "marked": "^0.5.1",
     "react": "16.3.1",

screens/AboutScreen.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {AsyncStorage, Button, FlatList, Text, View} from 'react-native';
+
+import { analyzeThis } from '../components/utils';
+import { getCategories } from '../components/CardLibrary';
+
+const cats = getCategories();
+
+class About extends React.Component {
+
+  componentDidMount() {
+    analyzeThis('AboutScreen');
+  }
+
+  render() {
+    return (
+      <View>
+        <FlatList 
+          horizontal
+          data={cats}
+          keyExtractor={(item) => item.slug} //each list item needs unique key
+          renderItem={({item, index}) => <Text>{item.name}</Text>}   
+        />
+        <Text>About Screen</Text>
+        {/* <Button title="clear storage" onPress={() => AsyncStorage.removeItem('FAVORITES', console.log('removed favorites'))} />\
+        <Button title="show storage" onPress={() => AsyncStorage.getItem('FAVORITES').then(fav => { console.log(fav)})} /> */}
+      </View>
+    );
+  }
+}
+
+export default About;

components/CardScreen.js → screens/CardScreen.js

@@ -13,10 +13,11 @@ import { withNavigation } from 'react-navigation';
 import { Feather as Icon } from '@expo/vector-icons';
 import marked from 'marked';
 
-import FavoriteButton from './FavoriteButton';
-import Colors from './colors';
+import FavoriteButton from '../components/FavoriteButton';
+import Colors from '../components/colors';
+import { withAnalytics, analyzeThis } from '../components/utils';  
 
-import { getCard } from './CardLibrary'
+import { getCard } from '../components/CardLibrary'
 
 const css = `
 body {
@@ -124,6 +125,7 @@ tfoot p {
 `
 
 const share = (card) => {
+  analyzeThis(`ShareButton:${card.slug}`);
   if (Platform.OS === 'ios') {
     ActionSheetIOS.showShareActionSheetWithOptions(
       {
@@ -145,6 +147,8 @@ const ShareButton = (props) =>
   </TouchableOpacity>
 
 
+let cardName;
+
 class CardScreen extends React.Component {
     static navigationOptions = ({ navigation }) => ({
       headerStyle: {
@@ -170,13 +174,16 @@ class CardScreen extends React.Component {
 
     constructor(props) {
       super(props);
+      cardName = this.props.navigation.getParam('card').slug;
       this.state = {
         card: {}
       }
     }
 
     componentDidMount() {
-      this.setState({ card: getCard(this.props.navigation.getParam('card').slug)})
+      const slug = this.props.navigation.getParam('card').slug;
+      this.setState({ card: getCard(slug)});
+      analyzeThis(`CardScreen:${slug}`);
     }
 
     render() {

screens/CardsSortScreen.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { SafeAreaView, Text, TouchableOpacity, View  } from 'react-native';
+import { withNavigation } from 'react-navigation';
+import { FontAwesome as Icon } from '@expo/vector-icons';
+
+import CardList from '../components/CardList';
+import CardListSection from '../components/CardListSection';
+import CardsSortModal from '../components/CardsSortModal';
+import { getSummaries } from '../components/CardLibrary';
+import Colors from '../components/colors';
+
+const FilterButton = (props) =>
+  <TouchableOpacity onPress={props.onPress} style={{ backgroundColor: Colors.lightGray }}>
+    <View style={{ flex: 0, flexDirection: 'row', padding: 10 }}>
+      <Icon name='sort' size={18} color={Colors.primary} style={{ marginRight: 8}}></Icon>
+      <Text style={{ fontSize: 18, color: Colors.primary }}>Filter by Category</Text>
+    </View>
+  </TouchableOpacity>
+
+class CardsSortScreen extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalVisible: false
+    }
+  }
+
+  toggleModal() {
+    this.setState({ modalVisible: !this.state.modalVisible })
+  }
+
+  selectCategory(cat) {
+    this.setState({ selectedCategory: cat, modalVisible: !this.state.modalVisible });
+  }
+
+  render() {
+    return(
+      <SafeAreaView style={{ flex: 1 }}>
+        <FilterButton onPress={() => this.toggleModal()} />
+        <CardsSortModal 
+          visible={this.state.modalVisible}
+          closeModal={() => this.toggleModal()}
+          onPress={(cat) => this.selectCategory(cat) }
+        />
+        { this.state.selectedCategory == null && (<CardList cards={getSummaries()} />) }
+        { this.state.selectedCategory && (
+            <CardListSection sections={[{ title: this.state.selectedCategory.name, data: this.state.selectedCategory.cards }]}/>
+        )}
+      </SafeAreaView>
+    );
+  }
+}
+
+export default withNavigation(CardsSortScreen);