Commit 3ed3aef6 authored by Simen Kristoffersen's avatar Simen Kristoffersen
Browse files

Lagt til søkefelt

parent 07200669
import React from "react";
import { StyleSheet } from "react-native";
import { StyleSheet, TextInput } from "react-native";
import { View } from "../components/Themed";
import { Picker } from "@react-native-picker/picker";
import {
FilterKeys,
FilterValues,
......@@ -9,39 +8,49 @@ import {
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";
import SearchInput from "./SearchInput";
export type FilterPaneProps = {
onSearchChange: (value: string) => void;
onFilterChange: (key: FilterKeys, value: FilterValues) => void;
onSortChange: (value: SortKeys) => void;
onSortDirectionChange: (value: SortDirection) => void;
};
const FilterPane: React.FC<FilterPaneProps> = ({
onSearchChange,
onFilterChange,
onSortChange,
onSortDirectionChange,
}: FilterPaneProps) => {
return (
<View style={styles.container}>
<View>
<SelectInput
defaultValue="Genres"
data={genres}
onChange={(value) => onFilterChange("genres", value ? [value] : [])}
/>
<View style={styles.row}>
<View>
<SelectInput
defaultValue="Genres"
data={genres}
onChange={(value) => onFilterChange("genres", value ? [value] : [])}
/>
</View>
<View style={styles.inlineRow}>
<SelectInput
defaultValue="Order by"
data={sortValues}
onChange={(value) => onSortChange(value ? value : "title")}
/>
<SelectInput
data={sortDirections}
onChange={(value) => onSortDirectionChange(value ? value : "asc")}
/>
</View>
</View>
<View style={styles.inlineRow}>
<SelectInput
defaultValue="Order by"
data={sortValues}
onChange={(value) => onSortChange(value ? value : "title")}
/>
<SelectInput
data={sortDirections}
onChange={(value) => onSortDirectionChange(value ? value : "asc")}
<View style={styles.row}>
<SearchInput
placeholder="Search for movie titles"
searchThreshold={3}
onChange={onSearchChange}
/>
</View>
</View>
......@@ -50,15 +59,17 @@ const FilterPane: React.FC<FilterPaneProps> = ({
const styles = StyleSheet.create({
container: {
marginTop: "3rem",
marginTop: "6rem",
marginHorizontal: "1rem",
width: "100%",
},
row: {
flex: 1,
paddingTop: "1rem",
paddingBottom: "1rem",
display: "flex",
flexDirection: "row",
paddingVertical: "0.25rem",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
},
inlineRow: {
display: "flex",
......
import React from "react";
import { StyleSheet, TextInput } from "react-native";
type IProps = {
searchThreshold: number;
placeholder: string;
onChange: (value: string) => void;
};
const SearchInput: React.FC<IProps> = (props: IProps) => {
const { searchThreshold, placeholder, onChange } = props;
// Return string value if the string's length is above the set threshold
// else, return an empty string
function handleChange(value: string) {
onChange(value.length >= searchThreshold ? value : "");
}
return (
<TextInput
style={styles.input}
placeholder={props.placeholder}
onChangeText={handleChange}
/>
);
};
const styles = StyleSheet.create({
input: {
borderRadius: 15,
borderColor: "#333",
width: "100%",
marginLeft: "0.25rem",
marginRight: "0.25rem",
paddingVertical: "0.25rem",
paddingHorizontal: "0.75rem",
},
});
export default SearchInput;
......@@ -50,58 +50,67 @@ export default function MovieTableScreen({
});
setMovies([...moviesToAdd]);
}
// Clear movies when component is unmounted
return () => setMovies([]);
// Reset loaded content when component unmounts
return () => {
setMovies([]);
setCurrentPage(0);
};
}, [data]);
// Reset pagination increments and loaded movies
// Used when filter/sort parameters are changed
const resetPagination = () => {
setMovies([]);
setCurrentPage(0);
};
// Update the query state with new values
// Reset pagination increments and loaded movies, if reset is true
function updateQuery(newQuery: FetchMovieParams, reset = true) {
let { page, ...other } = newQuery;
if (reset) {
setMovies([]);
page = 0;
}
setCurrentPage(page);
setQuery({ ...other, page });
}
function handleSearchChange(value: string) {
const prevValue = query.filters?.title;
// Return early if the search string is unchanged, i.e. empty
if (prevValue === value) {
return;
}
const { filters, ...other } = query;
updateQuery({ ...other, page: 0, filters: { ...filters, title: value } });
}
// Update filter parameters for the query
function handleFilterChange(key: FilterKeys, value: FilterValues) {
resetPagination();
const { filters, page, ...other } = query;
setQuery({ ...other, page: 0, filters: { ...filters, [key]: value } });
const { filters, ...other } = query;
updateQuery({ ...other, filters: { ...filters, [key]: value } });
}
// Update sort parameter for the query
function handleSortChange(value: SortKeys) {
resetPagination();
const { orderBy, page, ...other } = query;
setQuery({ ...other, page: 0, orderBy: value });
updateQuery({ ...query, orderBy: value });
}
// Change sort direction
function handleSortDirectionChange(value: SortDirection) {
resetPagination();
const { order, page, ...other } = query;
setQuery({ ...other, page: 0, order: value });
updateQuery({ ...query, order: value });
}
// Increment pages, i.e. load next set of movies from the api
function handlePageScroll() {
const nextPage = currentPage + 1;
setQuery({ ...query, page: nextPage });
setCurrentPage(nextPage);
updateQuery({ ...query, page: nextPage }, false);
}
// Map properties to the filter component
const mapStateToFilterProps: FilterPaneProps = {
onSearchChange: useCallback((value) => handleSearchChange(value), [query]),
onFilterChange: useCallback(
(key: FilterKeys, value: FilterValues) => {
handleFilterChange(key, value);
},
(key, value) => handleFilterChange(key, value),
[query]
),
onSortChange: useCallback((value: SortKeys) => handleSortChange(value), [
query,
]),
onSortChange: useCallback((value) => handleSortChange(value), [query]),
onSortDirectionChange: useCallback(
(value: SortDirection) => handleSortDirectionChange(value),
(value) => handleSortDirectionChange(value),
[query]
),
};
......
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