Merged master into hamburgerDev

p4/.expo/packager-info.json

@@ -2,8 +2,8 @@
   "devToolsPort": 19002,
   "expoServerPort": 19000,
   "packagerPort": 19001,
-  "packagerPid": 17356,
-  "expoServerNgrokUrl": "https://3u-kzx.hhorge.p4.exp.direct",
-  "packagerNgrokUrl": "https://packager.3u-kzx.hhorge.p4.exp.direct",
-  "ngrokPid": 15624
+  "packagerPid": 11312,
+  "expoServerNgrokUrl": "https://eg-zjk.hhorge.p4.exp.direct",
+  "packagerNgrokUrl": "https://packager.eg-zjk.hhorge.p4.exp.direct",
+  "ngrokPid": 21088
 }

p4/.expo/settings.json

@@ -3,6 +3,6 @@
   "lanType": "ip",
   "dev": true,
   "minify": false,
-  "urlRandomness": "3u-kzx",
+  "urlRandomness": "eg-zjk",
   "https": false
 }

p4/package-lock.json

@@ -5582,6 +5582,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.pad": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/lodash.pad/-/lodash.pad-4.5.1.tgz",
@@ -8146,6 +8151,14 @@
         "tween-functions": "^1.0.1"
       }
     },
+    "react-native-dropdown-menu": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-menu/-/react-native-dropdown-menu-2.0.0.tgz",
+      "integrity": "sha1-HZ5mFNw3mbeeMVH4pU+y2Dx9iZ8=",
+      "requires": {
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-native-easy-grid": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/react-native-easy-grid/-/react-native-easy-grid-0.2.2.tgz",
@@ -8204,6 +8217,19 @@
         "react-native-iphone-x-helper": "^1.0.3"
       }
     },
+    "react-native-picker": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/react-native-picker/-/react-native-picker-4.3.7.tgz",
+      "integrity": "sha1-mELoxi/w2LZ26VFNn5FyQTwFGKg="
+    },
+    "react-native-picker-select": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/react-native-picker-select/-/react-native-picker-select-6.3.3.tgz",
+      "integrity": "sha512-9cSXWonugev+e0EHrV8FhzwkjAhpipLFXsGMv+Ns5xI47T9fyNrOXpSeSfgnmycbuAbWRVlJRhJZ9eDGUaNk7w==",
+      "requires": {
+        "lodash.isequal": "^4.5.0"
+      }
+    },
     "react-native-ratings": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.5.0.tgz",
@@ -8234,6 +8260,11 @@
         "debounce": "^1.2.0"
       }
     },
+    "react-native-shapes": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-shapes/-/react-native-shapes-0.1.0.tgz",
+      "integrity": "sha512-5EHcc/Burlvp2UdfzT+EkQqGn7WO6SQGxZ9w0/4BWYMB/bShA8/lnhuWgxQz+IxZwxnzPkYiR4zCS2NlQQJGig=="
+    },
     "react-native-simple-radio-button": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.4.tgz",

p4/package.json

@@ -18,10 +18,14 @@
     "react-dom": "16.8.3",
     "react-native": "0.59.10",
     "react-native-drawer": "^2.5.1",
+    "react-native-dropdown-menu": "^2.0.0",
     "react-native-elements": "^1.2.7",
     "react-native-gesture-handler": "~1.4.1",
+    "react-native-picker": "^4.3.7",
+    "react-native-picker-select": "^6.3.3",
     "react-native-reanimated": "~1.3.0",
     "react-native-screens": "1.0.0-alpha.23",
+    "react-native-shapes": "^0.1.0",
     "react-native-simple-radio-button": "^2.7.4",
     "react-native-unimodules": "0.6.0",
     "react-native-vector-icons": "^6.6.0",

p4/src/actions/index.js

@@ -58,12 +58,19 @@ export const defaultPage = () => {
 
 export const isOverlayVisible = () => {
     return{
-        type : 'VISIBLE',
-    }
+        type : 'VISIBLE'
+        }
 }
 
 export const toggleSideMenu = () => {
     return{
-        type : 'SIDEMENU',
+        type : 'SIDEMENU'
+    }
+}
+
+export const sortingCategory = (a) => {
+    return {
+        type : 'SORT',
+        payload : a
     }
 }
\ No newline at end of file

p4/src/components/Body.js

@@ -3,11 +3,15 @@ import React from 'react';
 import { Text, StyleSheet, ScrollView, Image } from 'react-native';
 import Search from './Search';
 import Content from './Content'
+import Sorting from './Sorting';
+//import Content from '../Content/Content.js';
+//import Wordcloud from '../Wordcloud/Wordcloud.js';
 
 const Body = () => {
     return(
         <ScrollView>
            <Search/>
+           <Sorting/>
            <Content/>
         </ScrollView>
     );

p4/src/components/Content.js

@@ -36,13 +36,9 @@ const GET_PRODUCTS = gql`
 const Content = () => {
   
   const dispatch = useDispatch();
-  const stateAlbums = useSelector(state => state.albums);
   const stateSearch = useSelector(state => state.search);
   const stateType = useSelector(state => state.filter);
-  
- 
-  
-  const example = {filterType: 'Vodka'}
+  const stateSort = useSelector(state => state.sortingCategory);
 
   function checkStateTypeEmpty (){
     let isStateTypeEmpty = stateType == '';
@@ -50,9 +46,9 @@ const Content = () => {
   }
 
   const { loading, error, data } = useQuery(GET_PRODUCTS, {
-    variables: { limit: 15, search: stateSearch, sort: "-price", filters: checkStateTypeEmpty() }});
-  if (loading) return <Text> Loading ... </Text>;
-  if (error) return <Text> {error} </Text>;
+    variables: { limit: 15, search: stateSearch, sort: stateSort, filters: checkStateTypeEmpty() }});
+    if(loading) return <Text>Loading ...</Text>
+    if(error) return <Text>{error}</Text>
 
   const productElements = data.products.products.map(product => (
     <View key={product.id} style={{ display: "flex" }}>

p4/src/components/Sorting.js

+import React from 'react';
+import {StyleSheet} from 'react-native';
+// import DropdownMenu from 'react-native-dropdown-menu';
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { sortingCategory } from "../actions";
+import { Chevron } from 'react-native-shapes';
+import RNPickerSelect, { defaultStyles } from 'react-native-picker-select';
+import { Ionicons } from '@expo/vector-icons'; 
+import { graphqlSync } from 'graphql';
+
+
+const Sorting = () => {
+    const dispatch = useDispatch();
+    const placeholder = {
+      label: 'Sorter...',
+      value: null,
+      color: '#9EA0A4',
+    };
+    
+    const sortingAlternatives = [
+      {
+        label: 'Navn',
+        value: 'name',
+      },
+      {
+        label: 'Pris - Stigende',
+        value: 'price',
+      },
+      {
+        label: 'Pris - Synkende',
+        value: '-price',
+      },
+      {
+        label: 'Alkoholprosent - Stigende',
+        value: 'alcohol',
+      },
+      {
+        label: 'Alkoholprosent - Synkende',
+        value: '-alcohol',
+      },
+      {
+        label: 'Volum - Stigende',
+        value: 'volume',
+      },
+      {
+        label: 'Volum - Synkende',
+        value: '-volume',
+      },
+    ];
+    const pickerSelectStyles = StyleSheet.create({
+      inputIOS: {
+        fontSize: 16,
+        paddingVertical: 12,
+        paddingHorizontal: 10,
+        backgroundColor:'gray',
+        color: 'black',
+        paddingRight: 30, // to ensure the text is never behind the icon
+      },
+      inputAndroid: {
+        fontSize: 16,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        backgroundColor:'gray',
+        borderBottomColor: 'gray',
+        color: 'black',
+        paddingRight: 30, // to ensure the text is never behind the icon
+      },
+    });
+
+    return(
+      // <RNPickerSelect
+      //     onValueChange={(value) => dispatch(sortingCategory(value))}
+      //     items={sortingAlternatives}
+      // />
+
+      <RNPickerSelect
+      placeholder={placeholder}
+      items={sortingAlternatives}
+      onValueChange={(value) => dispatch(sortingCategory(value))}
+      style={{
+        ...pickerSelectStyles,
+        iconContainer: {
+          top: 20,
+          right: 12,
+        },
+      }}
+      
+      // value={this.state.favSport3}
+      useNativeAndroidPickerStyle={false}
+      //textInputProps={{ underlineColorAndroid: 'cyan' }}
+      Icon={() => {return <Chevron size={1.5} color="black" />;
+    }}
+    />
+
+    )
+  
+// https://www.npmjs.com/package/react-native-picker-select
+
+
+}
+export default Sorting;

p4/src/reducers/index.js

@@ -7,6 +7,7 @@ import detailsReducer from './details';
 import toggleSideMenu from './toggleSideMenu';
 import pageReducer from './page';
 import isOverlayVisibleReducer from './isOverlayVisible'
+import sortingReducer from './sort'
 import {combineReducers} from 'redux';
 
 
@@ -18,7 +19,8 @@ const allReducers = combineReducers({
     details : detailsReducer,
     page : pageReducer,
     overlay : isOverlayVisibleReducer,
-    sideMenu : toggleSideMenu
+    sideMenu : toggleSideMenu,
+    sortingCategory : sortingReducer
 })
 
 export default allReducers;

p4/src/reducers/sort.js

+const sortingReducer = (state = 'name', action) => {
+    switch(action.type){
+        case 'SORT':
+            state = action.payload;
+            return state;
+        default:
+            return state;
+    }
+}
+
+export default sortingReducer;
\ No newline at end of file