From 4ba1be2d3c66c551b29a38daed7d464704976f7e Mon Sep 17 00:00:00 2001
From: Jeremy Voros <jeremy@Jeremys-MacBook-Pro.local>
Date: Mon, 22 Oct 2018 12:55:56 -0600
Subject: [PATCH] filter cards list, analytics

---
 App.js                                     |  5 +-
 components/AboutScreen.js                  | 20 ------
 components/CardsAlphabeticalScreen.js      | 14 ----
 components/CardsByCatScreen.js             | 19 -----
 components/CardsSortModal.js               | 80 ++++++++++++++++++++++
 components/CardsTabHeader.js               | 29 --------
 components/HomeScreen.js                   | 19 -----
 components/TabBarFooter.js                 | 10 +--
 components/utils.js                        | 13 ++++
 package.json                               |  1 +
 screens/AboutScreen.js                     | 32 +++++++++
 {components => screens}/CardScreen.js      | 15 ++--
 screens/CardsSortScreen.js                 | 54 +++++++++++++++
 {components => screens}/FavoritesScreen.js |  9 ++-
 screens/HomeScreen.js                      | 26 +++++++
 {components => screens}/SearchScreen.js    | 13 ++--
 yarn.lock                                  |  4 ++
 17 files changed, 244 insertions(+), 119 deletions(-)
 delete mode 100644 components/AboutScreen.js
 delete mode 100644 components/CardsAlphabeticalScreen.js
 delete mode 100644 components/CardsByCatScreen.js
 create mode 100644 components/CardsSortModal.js
 delete mode 100644 components/CardsTabHeader.js
 delete mode 100644 components/HomeScreen.js
 create mode 100644 components/utils.js
 create mode 100644 screens/AboutScreen.js
 rename {components => screens}/CardScreen.js (90%)
 create mode 100644 screens/CardsSortScreen.js
 rename {components => screens}/FavoritesScreen.js (62%)
 create mode 100644 screens/HomeScreen.js
 rename {components => screens}/SearchScreen.js (86%)

diff --git a/App.js b/App.js
index f9a634a..3845e0e 100644
--- a/App.js
+++ b/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';
 
 
diff --git a/components/AboutScreen.js b/components/AboutScreen.js
deleted file mode 100644
index 4dbac77..0000000
--- a/components/AboutScreen.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import {AsyncStorage, Button, FlatList, Text, View} from 'react-native';
-
-import { getCategories } from './CardLibrary';
-
-const cats = getCategories();
-
-export default () => (
-  <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>
-);
diff --git a/components/CardsAlphabeticalScreen.js b/components/CardsAlphabeticalScreen.js
deleted file mode 100644
index 0f2fde3..0000000
--- a/components/CardsAlphabeticalScreen.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { SafeAreaView, Text,  } from 'react-native';
-
-import CardList from './CardList';
-import { getSummaries } from './CardLibrary';
-
-const AllCards = () => 
-  <SafeAreaView style={{ flex: 1 }}>
-    <CardList
-      cards={getSummaries()}
-    />
-  </SafeAreaView>
-
-export default AllCards;
diff --git a/components/CardsByCatScreen.js b/components/CardsByCatScreen.js
deleted file mode 100644
index 536fe30..0000000
--- a/components/CardsByCatScreen.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import CardListSection from './CardListSection';
-import { getCategories } from './CardLibrary';
-
-export default class CardsByCatScreen extends React.Component {
-
-  render() {
-    const cats = getCategories();
-    const sections = cats.map(cat => ({
-        title: cat.name,
-        data: cat.cards
-    }));
-  
-    return (
-      <CardListSection sections={sections} />
-    );
-  }
-}
diff --git a/components/CardsSortModal.js b/components/CardsSortModal.js
new file mode 100644
index 0000000..10f634f
--- /dev/null
+++ b/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;
diff --git a/components/CardsTabHeader.js b/components/CardsTabHeader.js
deleted file mode 100644
index f49c862..0000000
--- a/components/CardsTabHeader.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createMaterialTopTabNavigator } from "react-navigation";
-
-import CardsAlphabeticalScreen from './CardsAlphabeticalScreen';
-import CardsByCatScreen from './CardsByCatScreen';
-import Colors from './colors';
-
-const CardsTabHeader = createMaterialTopTabNavigator(
-    {
-        AllCards: {
-            screen: CardsAlphabeticalScreen,
-            navigationOptions: { tabBarLabel: 'Alphabetical' }
-    },
-        CardsByCat: {
-            screen: CardsByCatScreen,
-            navigationOptions: { tabBarLabel: 'By Category'}
-        }
-    }, {
-        tabBarOptions: {
-            activeTintColor: 'white',
-            inactiveTintColor: Colors.primaryLight,
-            style: { backgroundColor: Colors.primaryShade },
-            tabStyle: {  },
-            labelStyle: { fontWeight: 'bold' },
-            indicatorStyle: { backgroundColor: Colors.primaryLight }
-        }
-    }
-);
-
-export default CardsTabHeader;
diff --git a/components/HomeScreen.js b/components/HomeScreen.js
deleted file mode 100644
index 3785ba3..0000000
--- a/components/HomeScreen.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import CardListSection from './CardListSection';
-import { getRecent } from './CardLibrary';
-
-export default class HomeScreen extends React.Component {
-
-  render() {
-    const recent = getRecent();
-    const sections = [
-      {title: 'Newest Cards', data: recent.created},
-      {title: 'Updated Cards', data: recent.updates}
-    ];
-
-    return (
-      <CardListSection sections={sections} />
-    );
-  }
-}
diff --git a/components/TabBarFooter.js b/components/TabBarFooter.js
index 8fe9ff1..9f3d9a0 100644
--- a/components/TabBarFooter.js
+++ b/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);
 
diff --git a/components/utils.js b/components/utils.js
new file mode 100644
index 0000000..d8ba66d
--- /dev/null
+++ b/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));
+}
diff --git a/package.json b/package.json
index e3596fd..9ff21d0 100644
--- a/package.json
+++ b/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",
diff --git a/screens/AboutScreen.js b/screens/AboutScreen.js
new file mode 100644
index 0000000..cf12faa
--- /dev/null
+++ b/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;
diff --git a/components/CardScreen.js b/screens/CardScreen.js
similarity index 90%
rename from components/CardScreen.js
rename to screens/CardScreen.js
index b4fd59f..a5792e3 100644
--- a/components/CardScreen.js
+++ b/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() {
diff --git a/screens/CardsSortScreen.js b/screens/CardsSortScreen.js
new file mode 100644
index 0000000..08e98a0
--- /dev/null
+++ b/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);
diff --git a/components/FavoritesScreen.js b/screens/FavoritesScreen.js
similarity index 62%
rename from components/FavoritesScreen.js
rename to screens/FavoritesScreen.js
index e352141..46e5411 100644
--- a/components/FavoritesScreen.js
+++ b/screens/FavoritesScreen.js
@@ -1,14 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import CardList from './CardList';
-import { FavsContext } from './FavoritesProvider';
+import CardList from '../components/CardList';
+import { FavsContext } from '../components/FavoritesProvider';
+import { analyzeThis } from '../components/utils';
 
 class FavoritesScreen extends React.Component {
   constructor(props) {
     super(props);
   }
 
+  componentDidMount() {
+    analyzeThis('FavoritesScreen');
+  }
+
   render() {
     return(
       <View>
diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
new file mode 100644
index 0000000..2cc0e03
--- /dev/null
+++ b/screens/HomeScreen.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import CardListSection from '../components/CardListSection';
+import { getRecent } from '../components/CardLibrary';
+import { analyzeThis } from '../components/utils';
+
+class HomeScreen extends React.Component {
+
+  componentDidMount() {
+    analyzeThis('HomeScreen');
+  }
+
+  render() {
+    const recent = getRecent();
+    const sections = [
+      {title: 'Newest Cards', data: recent.created},
+      {title: 'Updated Cards', data: recent.updates}
+    ];
+
+    return (
+      <CardListSection sections={sections} />
+    );
+  }
+}
+
+export default HomeScreen;
diff --git a/components/SearchScreen.js b/screens/SearchScreen.js
similarity index 86%
rename from components/SearchScreen.js
rename to screens/SearchScreen.js
index 9726a07..7fb153a 100644
--- a/components/SearchScreen.js
+++ b/screens/SearchScreen.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import { Button, Keyboard, StyleSheet, TextInput, ScrollView, View } from 'react-native';
+import { Button, StyleSheet, TextInput, ScrollView, View } from 'react-native';
 import { withNavigation } from 'react-navigation';
 import Fuse from 'fuse.js';
 
-import CardList from './CardList';
-import { getCards } from './CardLibrary';
-import Colors from './colors';
+import { analyzeThis } from '../components/utils';
+import CardList from '../components/CardList';
+import { getCards } from '../components/CardLibrary';
+import Colors from '../components/colors';
 
 const fuse = new Fuse(getCards(), {
     caseSensitive: false,
@@ -33,6 +34,10 @@ class Search extends React.Component {
             results: []
         };
     }
+
+    componentDidMount() {
+        analyzeThis('SearchScreen');
+    }
     
     render() {
 
diff --git a/yarn.lock b/yarn.lock
index 331dbb8..d8c51c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1840,6 +1840,10 @@ expo-analytics-segment@~1.0.0:
   dependencies:
     expo-core "~1.1.0"
 
+expo-analytics@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/expo-analytics/-/expo-analytics-1.0.7.tgz#d78b4b9090ba359b2ec233fce35512b90ef392db"
+
 expo-asset@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-1.1.0.tgz#f5b182fe553076ae6a0ab504f195f13287d65081"