Commit 07200669 authored by Simen Kristoffersen's avatar Simen Kristoffersen
Browse files

Refaktorert filter-komponenten

parent 669f6c24
......@@ -5,12 +5,13 @@ import { Picker } from "@react-native-picker/picker";
import {
FilterKeys,
FilterValues,
Genre,
SortDirection,
SortKeys,
} from "../constants/filterOptions/interface";
import { genres, sortDirections, sortValues } from "../constants/filterOptions";
import { capitalize } from "../utils/textTransform";
import { Genre } from "../store/ducks/movies/types";
import SelectInput from "./SelectInput";
export type FilterPaneProps = {
onFilterChange: (key: FilterKeys, value: FilterValues) => void;
......@@ -26,47 +27,22 @@ const FilterPane: React.FC<FilterPaneProps> = ({
return (
<View style={styles.container}>
<View>
<Picker
style={styles.input}
onValueChange={(value: Genre) => onFilterChange("genres", [value])}
>
{genres.length > 0 &&
genres.map((genre) => (
<Picker.Item
key={genre}
label={capitalize(genre)}
value={genre.toLowerCase()}
/>
))}
</Picker>
<SelectInput
defaultValue="Genres"
data={genres}
onChange={(value) => onFilterChange("genres", value ? [value] : [])}
/>
</View>
<View style={styles.inlineRow}>
<Picker
style={styles.input}
onValueChange={(value: SortKeys) => onSortChange(value)}
>
{sortValues.length > 0 &&
sortValues.map((sortValue) => (
<Picker.Item
key={sortValue}
label={capitalize(sortValue)}
value={sortValue}
/>
))}
</Picker>
<Picker
style={styles.input}
onValueChange={(value: SortDirection) => onSortDirectionChange(value)}
>
{sortDirections.length > 0 &&
sortDirections.map((direction) => (
<Picker.Item
key={direction}
label={capitalize(direction)}
value={direction}
/>
))}
</Picker>
<SelectInput
defaultValue="Order by"
data={sortValues}
onChange={(value) => onSortChange(value ? value : "title")}
/>
<SelectInput
data={sortDirections}
onChange={(value) => onSortDirectionChange(value ? value : "asc")}
/>
</View>
</View>
);
......@@ -88,12 +64,6 @@ const styles = StyleSheet.create({
display: "flex",
flexDirection: "row",
},
input: {
borderRadius: 15,
marginLeft: "0.25rem",
marginRight: "0.25rem",
padding: "0.25rem",
},
});
export default FilterPane;
import React from "react";
import { StyleProp, StyleSheet, TextStyle } from "react-native";
import { Picker } from "@react-native-picker/picker";
import { capitalize } from "../utils/textTransform";
type IProps<T> = {
data: T[];
defaultValue?: string;
onChange?: (value: T | null) => void;
};
function SelectInput<T extends string>(props: IProps<T>) {
const { data, defaultValue, onChange } = props;
// Return 'null' if default value is selected
function dispatchValue(value: T | string) {
if (onChange) {
onChange(value === defaultValue ? null : (value as T));
}
}
return (
<Picker<T> style={styles.input} onValueChange={dispatchValue}>
{defaultValue && <Picker.Item label={defaultValue} />}
{data.length > 0 &&
data.map((item) => (
<Picker.Item
key={item}
label={capitalize(item)}
value={item.toLowerCase()}
/>
))}
</Picker>
);
}
const styles = StyleSheet.create({
input: {
borderRadius: 15,
marginLeft: "0.25rem",
marginRight: "0.25rem",
padding: "0.25rem",
},
});
export default SelectInput;
import { Genre, SortDirection, SortKeys } from "./interface";
import { Genre } from "../../store/ducks/movies/types";
import { SortDirection, SortKeys } from "./interface";
export const genres: Genre[] = [
"Action",
......@@ -14,5 +15,5 @@ export const genres: Genre[] = [
"Western",
];
type DefaultValue = [string];
export const sortValues: SortKeys[] = ["", "title", "year", "rating"];
export const sortDirections: SortDirection[] = ["asc", "desc"];
export const sortValues: SortKeys[] = ["title", "year", "rating"];
export const sortDirections: SortDirection[] = ["desc", "asc"];
import { MovieEntity } from "../../store/ducks/movies/types";
import { Genre, MovieEntity } from "../../store/ducks/movies/types";
export type FilterInterval<T> = {
start?: T;
......@@ -15,21 +15,5 @@ export type Filters = {
export type FilterKeys = keyof Filters;
export type FilterValues = Filters[FilterKeys];
export type SortKeys =
| keyof Pick<MovieEntity, "title" | "year" | "rating">
| "";
export type SortKeys = keyof Pick<MovieEntity, "title" | "year" | "rating">;
export type SortDirection = "asc" | "desc";
export type Genre =
| "Action"
| "Comedy"
| "Drama"
| "Fantasy"
| "Horror"
| "Mystery"
| "Romance"
| "Thriller"
| "Western"
| "Science Fiction"
| "Adventure";
import {
Filters,
Genre,
SortDirection,
SortKeys,
} from "../../../constants/filterOptions/interface";
......@@ -74,6 +73,19 @@ export type FetchMovieParams = {
export type FetchMovieByIdParams = { id: string };
export type UpdateMovieRatingParams = { data: MovieRating };
export type Genre =
| "Action"
| "Comedy"
| "Drama"
| "Fantasy"
| "Horror"
| "Mystery"
| "Romance"
| "Thriller"
| "Western"
| "Science Fiction"
| "Adventure";
export const initialQuery: FetchMovieParams = {
perPage: 20,
page: 0,
......
......@@ -1953,6 +1953,11 @@
resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.0.tgz#6dcc3ab167251ace6964310789d8ea80f732a82c"
integrity sha512-GDVwSzwBm4OdQajFCit2UMxskZVcOhs/hYeOvzVW1R+iW6ZOVIBgD+RSrYCtPT0pNBnwNgRaoPPKfoXcwDo+hg==
"@types/lodash@^4.14.177":
version "4.14.177"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.177.tgz#f70c0d19c30fab101cad46b52be60363c43c4578"
integrity sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==
"@types/node@*":
version "16.11.7"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.7.tgz#36820945061326978c42a01e56b61cd223dfdc42"
......
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