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 { Item, Label, Picker, Icon } from "native-base";
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 = [
{ key: "title", order: "asc" },
{ key: "title", order: "desc" },
{ key: "year", order: "asc" },
{ key: "year", order: "desc" },
{ key: "length", order: "asc" },
{ key: "length", order: "desc" },
// The available sorting options
"title - asc",
"title - desc",
"year - asc",
"year - desc",
"length - asc",
"length - desc",
];
// Pickrder
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) => {
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) => (
<Picker.Item
label={`${_.startCase(option.key)} - ${option.order}`}
label={`${_.startCase(option)}`}
value={option}
key={option.key}
key={option}
/>
));
return (
<Item fixedLabel picker>
<Label>Order by...</Label>
......@@ -34,7 +50,7 @@ const OrderingPicker = () => {
placeholderStyle={{ color: "#bfc6ea" }}
placeholderIconColor="#007aff"
style={{ width: undefined }}
selectedValue={selected}
selectedValue={value}
onValueChange={onValueChange}
>
{pickerItems}
......
......@@ -12,7 +12,6 @@ type Props = {
navigation: FilterScreenNavigationProp;
};
const FilterPage = ({ navigation }: Props) => {
return (
<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