Create FilterList #7

d90d4f77 · Thor-Herman · 2d6ef07c · d90d4f77
Commit d90d4f77 authored Nov 13, 2020 by Thor-Herman
--- a/prosjekt-4/components/FilterList.tsx
+++ b/prosjekt-4/components/FilterList.tsx
+import _ from "lodash";
+import { List, ListItem, CheckBox, Body, Item } from "native-base";
+import React, { useState } from "react";
+import { Text } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+import { changeFilters } from "../actions";
+import { RootState } from "../reducers";
+import { FilterState, Genres } from "../types/filter";
+
+const genres: Array<Genres> = [
+  "Action",
+  "Comedy",
+  "Musical",
+  "Romance",
+  "Drama",
+  "Horror",
+];
+
+const FilterList = () => {
+  const checkedGenres: Record<Genres, boolean> = useSelector((state: RootState) => state.filtering.filter.genres);
+  const dispatch = useDispatch()
+  const onPress = (genre: Genres) => {
+    const checked = checkedGenres[genre];
+    dispatch(changeFilters({...checkedGenres, [genre]: !checked, to: "", from: ""}));
+  };
+
+  const filterItems = genres.map((genre) => (
+    <ListItem onPress={() => onPress(genre)} key={genre}>
+      <CheckBox checked={checkedGenres[genre]} />
+      <Body>
+        <Text>{genre}</Text>
+      </Body>
+    </ListItem>
+  ));
+
+  return (
+    <>
+      <Text>Genres: </Text>
+      <List>{filterItems}</List>
+    </>
+  );
+};
+
+export default FilterList;