diff --git a/p4/.expo/packager-info.json b/p4/.expo/packager-info.json
index 525b16244b9276776599082e650199587fe2ea5c..87d632a6b0070b79c1fb94e512e631b0f734d36b 100644
--- a/p4/.expo/packager-info.json
+++ b/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
}
diff --git a/p4/.expo/settings.json b/p4/.expo/settings.json
index 1eb194686e3e0483ec260143b61229f55c4d6ead..be791f50b906aad5f877500cd07648f8629a25db 100644
--- a/p4/.expo/settings.json
+++ b/p4/.expo/settings.json
@@ -3,6 +3,6 @@
"lanType": "ip",
"dev": true,
"minify": false,
- "urlRandomness": "3u-kzx",
+ "urlRandomness": "eg-zjk",
"https": false
}
diff --git a/p4/package-lock.json b/p4/package-lock.json
index e347582152eae833338192763734c1fd8aa245bb..c8accdcc0bf95a5a4594b7dd1220a8c73ac29492 100644
--- a/p4/package-lock.json
+++ b/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",
diff --git a/p4/package.json b/p4/package.json
index 753f20aa0b74113d49b4f639657dfba93f19261c..fd27dc9c20cc222fe43ec0995c4c1b1bb27c4424 100644
--- a/p4/package.json
+++ b/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",
diff --git a/p4/src/actions/index.js b/p4/src/actions/index.js
index 6abfd019a8e0d8c5f2ebd64a3f5f1433f228e070..dccbf85d83ff8deb62ed4aa7193ab4a2930042c6 100644
--- a/p4/src/actions/index.js
+++ b/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
diff --git a/p4/src/components/Body.js b/p4/src/components/Body.js
index 6a30074905cd42a5d4012d71adb5f7d08099f6b1..d3dcbce8ec2e28e3c21838b76553287f870b5f00 100644
--- a/p4/src/components/Body.js
+++ b/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(
+
);
diff --git a/p4/src/components/Content.js b/p4/src/components/Content.js
index 07f6a3fe9d14133a19efd420f0fe88e28aee0448..70f34d092b912b446bcd954f324430f71f2f0e56 100644
--- a/p4/src/components/Content.js
+++ b/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 Loading ... ;
- if (error) return {error} ;
+ variables: { limit: 15, search: stateSearch, sort: stateSort, filters: checkStateTypeEmpty() }});
+ if(loading) return Loading ...
+ if(error) return {error}
const productElements = data.products.products.map(product => (
diff --git a/p4/src/components/Sorting.js b/p4/src/components/Sorting.js
new file mode 100644
index 0000000000000000000000000000000000000000..060c52b0c3a0db9c09f80fa1eea1353fe6b493c3
--- /dev/null
+++ b/p4/src/components/Sorting.js
@@ -0,0 +1,102 @@
+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(
+ // dispatch(sortingCategory(value))}
+ // items={sortingAlternatives}
+ // />
+
+ dispatch(sortingCategory(value))}
+ style={{
+ ...pickerSelectStyles,
+ iconContainer: {
+ top: 20,
+ right: 12,
+ },
+ }}
+
+ // value={this.state.favSport3}
+ useNativeAndroidPickerStyle={false}
+ //textInputProps={{ underlineColorAndroid: 'cyan' }}
+ Icon={() => {return ;
+ }}
+ />
+
+ )
+
+// https://www.npmjs.com/package/react-native-picker-select
+
+
+}
+export default Sorting;
diff --git a/p4/src/reducers/index.js b/p4/src/reducers/index.js
index d6757149cbedd00c2a84cd5ea81554a0473dd57a..7ca266c6ff16251cc5b102116c0f7b3234091c7c 100644
--- a/p4/src/reducers/index.js
+++ b/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;
diff --git a/p4/src/reducers/sort.js b/p4/src/reducers/sort.js
new file mode 100644
index 0000000000000000000000000000000000000000..8dd5fdefe261f37b315bb2a8fcb21dbf4a2aa9db
--- /dev/null
+++ b/p4/src/reducers/sort.js
@@ -0,0 +1,11 @@
+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