OrderingPicker.tsx 1.64 KB
Newer Older
Thor-Herman's avatar
Thor-Herman committed
1
2
3
import _ from "lodash";
import { Item, Label, Picker, Icon } from "native-base";
import React, { useState } from "react";
Thor-Herman's avatar
Thor-Herman committed
4
5
6
7
import { useDispatch, useSelector } from "react-redux";
import { changeOrdering } from "../actions";
import { RootState } from "../reducers";
import { OrderingActionPayload, OrderingOptions } from "../types/ordering";
Thor-Herman's avatar
Thor-Herman committed
8
9

const orderingOptions = [
Thor-Herman's avatar
Thor-Herman committed
10
11
12
13
14
15
16
  // The available sorting options
  "title - asc",
  "title - desc",
  "year - asc",
  "year - desc",
  "length - asc",
  "length - desc",
Thor-Herman's avatar
Thor-Herman committed
17
18
];

Thor-Herman's avatar
Thor-Herman committed
19
// Pickrder
Thor-Herman's avatar
Thor-Herman committed
20
const OrderingPicker = () => {
Thor-Herman's avatar
Thor-Herman committed
21
22
23
24
25
  const dispatch = useDispatch();
  const selectedOrdering = useSelector(
    (state: RootState) => state.filtering.ordering
  );
  const value = `${selectedOrdering.key} - ${selectedOrdering.order}`;
Thor-Herman's avatar
Thor-Herman committed
26
  const onValueChange = (value: string) => {
Thor-Herman's avatar
Thor-Herman committed
27
28
29
30
    const splitValue = value.split('-');
    const key = splitValue[0].trim() as OrderingOptions;
    const order = splitValue[1].trim() as "asc" | "desc";
    dispatch(changeOrdering({key, order}));
Thor-Herman's avatar
Thor-Herman committed
31
32
  };

Thor-Herman's avatar
Thor-Herman committed
33
34
  console.log(selectedOrdering);

Thor-Herman's avatar
Thor-Herman committed
35
36
  const pickerItems = orderingOptions.map((option) => (
    <Picker.Item
Thor-Herman's avatar
Thor-Herman committed
37
      label={`${_.startCase(option)}`}
Thor-Herman's avatar
Thor-Herman committed
38
      value={option}
Thor-Herman's avatar
Thor-Herman committed
39
      key={option}
Thor-Herman's avatar
Thor-Herman committed
40
41
    />
  ));
Thor-Herman's avatar
Thor-Herman committed
42

Thor-Herman's avatar
Thor-Herman committed
43
44
45
46
47
48
49
50
51
52
  return (
    <Item fixedLabel picker>
      <Label>Order by...</Label>
      <Picker
        mode="dropdown"
        iosIcon={<Icon name="arrow-down" />}
        placeholder=""
        placeholderStyle={{ color: "#bfc6ea" }}
        placeholderIconColor="#007aff"
        style={{ width: undefined }}
Thor-Herman's avatar
Thor-Herman committed
53
        selectedValue={value}
Thor-Herman's avatar
Thor-Herman committed
54
55
56
57
58
59
60
61
62
        onValueChange={onValueChange}
      >
        {pickerItems}
      </Picker>
    </Item>
  );
};

export default OrderingPicker;