Commit 468e418e authored by Thor-Herman's avatar Thor-Herman
Browse files

Fix Picker SelectedValue bug #7

selectedValue uses deep comparison to objects in the options, and it couldn't find those because of object pointers were different
parent 4a66c29f
import _ from "lodash"; import _ from "lodash";
import { Item, Label, Picker, Icon } from "native-base"; import { Item, Label, Picker, Icon } from "native-base";
import React, { useState } from "react"; import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeOrdering } from "../actions";
import { RootState } from "../reducers";
import { OrderingActionPayload, OrderingOptions } from "../types/ordering";
const orderingOptions = [ const orderingOptions = [
{ key: "title", order: "asc" }, // The available sorting options
{ key: "title", order: "desc" }, "title - asc",
{ key: "year", order: "asc" }, "title - desc",
{ key: "year", order: "desc" }, "year - asc",
{ key: "length", order: "asc" }, "year - desc",
{ key: "length", order: "desc" }, "length - asc",
"length - desc",
]; ];
// Pickrder
const OrderingPicker = () => { const OrderingPicker = () => {
const [selected, setSelected] = useState(""); const dispatch = useDispatch();
const selectedOrdering = useSelector(
(state: RootState) => state.filtering.ordering
);
const value = `${selectedOrdering.key} - ${selectedOrdering.order}`;
const onValueChange = (value: string) => { const onValueChange = (value: string) => {
setSelected(value); const splitValue = value.split('-');
const key = splitValue[0].trim() as OrderingOptions;
const order = splitValue[1].trim() as "asc" | "desc";
dispatch(changeOrdering({key, order}));
}; };
console.log(selectedOrdering);
const pickerItems = orderingOptions.map((option) => ( const pickerItems = orderingOptions.map((option) => (
<Picker.Item <Picker.Item
label={`${_.startCase(option.key)} - ${option.order}`} label={`${_.startCase(option)}`}
value={option} value={option}
key={option.key} key={option}
/> />
)); ));
return ( return (
<Item fixedLabel picker> <Item fixedLabel picker>
<Label>Order by...</Label> <Label>Order by...</Label>
...@@ -34,7 +50,7 @@ const OrderingPicker = () => { ...@@ -34,7 +50,7 @@ const OrderingPicker = () => {
placeholderStyle={{ color: "#bfc6ea" }} placeholderStyle={{ color: "#bfc6ea" }}
placeholderIconColor="#007aff" placeholderIconColor="#007aff"
style={{ width: undefined }} style={{ width: undefined }}
selectedValue={selected} selectedValue={value}
onValueChange={onValueChange} onValueChange={onValueChange}
> >
{pickerItems} {pickerItems}
......
...@@ -12,7 +12,6 @@ type Props = { ...@@ -12,7 +12,6 @@ type Props = {
navigation: FilterScreenNavigationProp; navigation: FilterScreenNavigationProp;
}; };
const FilterPage = ({ navigation }: Props) => { const FilterPage = ({ navigation }: Props) => {
return ( return (
<Form> <Form>
......
Supports Markdown
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