Commit 2c3bd734 authored by Joakim Hantho Qvale's avatar Joakim Hantho Qvale

#6 sorting results is now finished. Could use some coloring enhancement

parent f704eb94
{
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": null,
"packagerPid": null,
"expoServerNgrokUrl": "https://cs-j3h.jallakim.p4.exp.direct",
"packagerNgrokUrl": "https://packager.cs-j3h.jallakim.p4.exp.direct",
"ngrokPid": 20464
"packagerPort": 19001,
"packagerPid": 868,
"expoServerNgrokUrl": "https://v7-3j2.jallakim.p4.exp.direct",
"packagerNgrokUrl": "https://packager.v7-3j2.jallakim.p4.exp.direct",
"ngrokPid": 1784
}
......@@ -3,6 +3,6 @@
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": "cs-j3h",
"urlRandomness": "v7-3j2",
"https": false
}
......@@ -8008,6 +8008,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",
......
......@@ -24,6 +24,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",
......
......@@ -37,9 +37,10 @@ const Content = () => {
const stateAlbums = useSelector(state => state.albums);
const stateSearch = useSelector(state => state.search);
const stateGenre = useSelector(state => state.filter);
const stateSort = useSelector(state => state.sortingCategory);
const { loading, error, data } = useQuery(GET_PRODUCTS, {
variables: { limit: 15, search: stateSearch, sort: "-price"}
variables: { limit: 15, search: stateSearch, sort: stateSort}
});
if (loading) return <Text> Loading ... </Text>;
if (error) return <Text> {error} </Text>;
......
import React from 'react';
import {Text, View } from 'react-native';
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 stateSort = useSelector(state => state.sortingCategory);
const dispatch = useDispatch();
<Picker
selectedValue={this.state.language}
style={{height: 50, width: 100}}
onValueChange={(itemValue, itemIndex) =>
this.setState({language: itemValue})
}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
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" />;
}}
/>
// var data = [["C", "B"],["milos", "beige", "cadt"], ["C", "B"]];
)
// https://www.npmjs.com/package/react-native-picker-select
// return (
// <View>
// <Text>
// Milosssssss
// </Text>
// <DropdownMenu
// style={{flex: 1}}
// bgColor={'white'}
// tintColor={'#666666'}
// activityTintColor={'green'}
// handler={(selection, row) => dispatch(sortingCategory(data[selection][row]))}
// data={data}
// >
// <View style={{flex: 1}}>
// <Text>
// {stateSort} is the best language in the world
// </Text>
// </View>
// </DropdownMenu>
// </View>
// )
}
export default Sorting;
const sortingReducer = (state = '', action) => {
const sortingReducer = (state = 'name', action) => {
switch(action.type){
case 'SORT':
state = action.payload;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment