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

prosjekt-4/components/OrderingPicker.tsx

 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}

prosjekt-4/pages/FilterPage.tsx

@@ -12,11 +12,10 @@ type Props = {
   navigation: FilterScreenNavigationProp;
 };
 
-
 const FilterPage = ({ navigation }: Props) => {
   return (
     <Form>
-        <OrderingPicker />
+      <OrderingPicker />
       <FilterList />
     </Form>
   );