Added classifications filter

gersomvg · Jul 19, 2018 · cef4cc5 · cef4cc5
1 parent 36035c1
commit cef4cc5
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 27 deletions.
diff --git a/src/api/products.js b/src/api/products.js
@@ -3,10 +3,10 @@ import { API_ENDPOINT } from 'config';
 
 const products = {};
 
-products.get = ({ limit, offset, nextLink, name, categoryId, shopCode } = {}) => {
+products.get = ({ limit, offset, nextLink, name, categoryId, shopCode, classifications } = {}) => {
     let url = nextLink;
     if (!url) {
-        const params = qs.stringify({ limit, offset, name, categoryId, shopCode });
+        const params = qs.stringify({ limit, offset, name, categoryId, shopCode, classifications });
         url = `${API_ENDPOINT}/product${params}`;
     }
     return fetcher(url);

diff --git a/src/config/index.js b/src/config/index.js
@@ -1,7 +1,7 @@
 export * from './styling';
 
 export const API_ENDPOINT = {
-    //development: 'http://localhost:3001/api/v1',
-    development: 'https://plenty-staging.herokuapp.com/api/v1',
+    development: 'http://localhost:3001/api/v1',
+    // development: 'https://plenty-staging.herokuapp.com/api/v1',
     production: 'https://plenty-production.herokuapp.com/api/v1',
 }[process.env.NODE_ENV];
diff --git a/src/modules/Home/Home.js b/src/modules/Home/Home.js
@@ -19,7 +19,7 @@ class Home extends React.Component {
     };
 
     handleOnPressCategory = categoryId => {
-        this.props.navigation.push('Search', { categoryId });
+        this.props.navigation.push('Search', { categoryId, classifications: 'YES' });
     };
 
     handleOnPressCreate = () => {

diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
@@ -26,6 +26,8 @@ class Search extends React.PureComponent {
                 filters: {
                     shopCode: null,
                     categoryId: _.get(props, 'navigation.state.params.categoryId') || null,
+                    classifications:
+                        _.get(props, 'navigation.state.params.classifications') || null,
                 },
             };
         }
@@ -50,6 +52,7 @@ class Search extends React.PureComponent {
                 name: this.state.searchValue,
                 categoryId: this.state.filters.categoryId,
                 shopCode: this.state.filters.shopCode,
+                classifications: this.state.filters.classifications,
             });
             const data = await this.fetch.promise;
             this.setState({ fetchStatus: 'loaded', products: data.items, nextLink: data.nextLink });
@@ -116,7 +119,11 @@ class Search extends React.PureComponent {
     };
 
     render() {
-        const isAnyFilterActive = !!(this.state.filters.categoryId || this.state.filters.shopCode);
+        const isAnyFilterActive = !!(
+            this.state.filters.categoryId ||
+            this.state.filters.shopCode ||
+            this.state.filters.classifications
+        );
         return (
             <RN.KeyboardAvoidingView behavior="padding" style={styles.screen}>
                 <ElevatedHeader style={styles.header}>

diff --git a/src/modules/Search/components/FilterModal.js b/src/modules/Search/components/FilterModal.js
@@ -21,20 +21,6 @@ class FilterModal extends React.PureComponent {
         onClose: PT.func.isRequired,
     };
 
-    handleShopChange = shopCode => {
-        this.props.onChange({
-            ...this.props.filters,
-            shopCode: this.props.filters.shopCode === shopCode ? null : shopCode,
-        });
-    };
-
-    handleCategoryChange = categoryId => {
-        this.props.onChange({
-            ...this.props.filters,
-            categoryId: this.props.filters.categoryId === categoryId ? null : categoryId,
-        });
-    };
-
     render() {
         const { filters, onPressFilter, onRemoveFilter } = this.props;
         return (
@@ -43,7 +29,11 @@ class FilterModal extends React.PureComponent {
                 onRequestClose={this.props.onClose}
                 animationType="fade"
             >
-                <RN.ScrollView style={styles.container}>
+                <RN.ScrollView contentContainerStyle={styles.container}>
+                    <Text align="left" font="brand">
+                        VEGANISTISCH
+                    </Text>
+                    {this.renderClassification()}
                     <Text align="left" font="brand">
                         VERKOOPPUNT
                     </Text>
@@ -54,12 +44,53 @@ class FilterModal extends React.PureComponent {
                     {this.renderCategories()}
                 </RN.ScrollView>
                 <IconButton onPress={this.props.onClose} icon="close" style={styles.close} />
-                <LinearGradient colors={['rgba(255,255,255,0)', 'white']} style={styles.gradient} />
+                <LinearGradient
+                    colors={['rgba(255,255,255,0)', 'white']}
+                    style={styles.gradient}
+                    pointerEvents="none"
+                />
                 {this.renderApplyButton()}
             </RN.Modal>
         );
     }
 
+    handleClassificationChange = option => {
+        const { classifications } = this.props.filters;
+        const commaDelimited = { YES: 'YES', MAYBE: 'YES,MAYBE' }[option];
+        this.props.onChange({
+            ...this.props.filters,
+            classification: commaDelimited === classification ? null : commaDelimited,
+        });
+    };
+    renderClassification = () => {
+        return (
+            <RN.View style={[styles.filterGroup, styles.classGroup]}>
+                <RN.TouchableOpacity
+                    activeOpacity={0.5}
+                    style={styles.class}
+                    onPress={() => this.handleClassificationChange('YES')}
+                >
+                    <RadioBox checked={this.props.filters.classifications === 'YES'} />
+                    <Text style={styles.classText}>100%</Text>
+                </RN.TouchableOpacity>
+                <RN.TouchableOpacity
+                    activeOpacity={0.5}
+                    style={styles.class}
+                    onPress={() => this.handleClassificationChange('MAYBE')}
+                >
+                    <RadioBox checked={this.props.filters.classifications === 'YES,MAYBE'} />
+                    <Text style={styles.classText}>Inclusief misschien</Text>
+                </RN.TouchableOpacity>
+            </RN.View>
+        );
+    };
+
+    handleShopChange = shopCode => {
+        this.props.onChange({
+            ...this.props.filters,
+            shopCode: this.props.filters.shopCode === shopCode ? null : shopCode,
+        });
+    };
     renderShops = () => {
         return (
             <RN.View style={[styles.filterGroup, styles.shopGroup]}>
@@ -80,6 +111,12 @@ class FilterModal extends React.PureComponent {
         );
     };
 
+    handleCategoryChange = categoryId => {
+        this.props.onChange({
+            ...this.props.filters,
+            categoryId: this.props.filters.categoryId === categoryId ? null : categoryId,
+        });
+    };
     renderCategories = () => {
         return (
             <RN.View style={styles.filterGroup}>
@@ -107,7 +144,7 @@ class FilterModal extends React.PureComponent {
 
     renderApplyButton = () => {
         return (
-            <RN.View style={styles.applyWrapper}>
+            <RN.View style={styles.applyWrapper} pointerEvents="box-none">
                 <Button onPress={this.props.onClose} label="Bekijk producten" />
             </RN.View>
         );
@@ -117,7 +154,7 @@ class FilterModal extends React.PureComponent {
 const styles = RN.StyleSheet.create({
     container: {
         paddingTop: getSafeTopHeight() + 28,
-        paddingBottom: getSafeBottomHeight() + 16,
+        paddingBottom: getSafeBottomHeight() + 48,
         paddingHorizontal: 16,
     },
     close: {
@@ -141,12 +178,24 @@ const styles = RN.StyleSheet.create({
     },
     filterGroup: {
         marginTop: 25,
-        marginBottom: 50,
+        marginBottom: 40,
     },
     shopGroup: {
         flexDirection: 'row',
         flexWrap: 'wrap',
-        marginBottom: 40,
+    },
+    classGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    class: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 48,
+        marginRight: 16,
+    },
+    classText: {
+        marginLeft: 8,
     },
     shop: {
         alignItems: 'center',

diff --git a/src/modules/Search/components/FilterTags.js b/src/modules/Search/components/FilterTags.js
@@ -38,7 +38,7 @@ class FilterTags extends React.PureComponent {
                     horizontal
                     showsHorizontalScrollIndicator={false}
                 >
-                    {['shopCode', 'categoryId']
+                    {['shopCode', 'categoryId', 'classifications']
                         .filter(key => filters[key] !== null)
                         .map(this.renderTag)}
                 </RN.ScrollView>
@@ -61,6 +61,11 @@ class FilterTags extends React.PureComponent {
         if (key === 'shopCode') {
             label = this.props.shops.find(shop => shop.code === this.props.filters[key]).name;
         }
+        if (key === 'classifications') {
+            label = { YES: '100% Vegan', 'YES,MAYBE': '(Misschien) vegan' }[
+                this.props.filters.classifications
+            ];
+        }
         return (
             <RN.View style={styles.tag} key={key}>
                 <RN.TouchableOpacity