diff --git a/components/Lists/ClubListItem.js b/components/Lists/ClubListItem.js new file mode 100644 index 0000000..dfa05bb --- /dev/null +++ b/components/Lists/ClubListItem.js @@ -0,0 +1,62 @@ +// @flow + +import * as React from 'react'; +import {Avatar, List, withTheme} from 'react-native-paper'; +import {View} from "react-native"; + +type Props = { + onPress: Function, + categoryTranslator: Function, + chipRender: Function, + item: Object, +} + +class ClubListItem extends React.PureComponent { + + colors: Object; + hasManagers: boolean; + + constructor(props) { + super(props); + this.colors = props.theme.colors; + this.hasManagers = props.item.responsibles.length > 0; + } + + getCategoriesRender(categories: Array) { + let final = []; + for (let i = 0; i < categories.length; i++) { + if (categories[i] !== null) + final.push(this.props.chipRender(this.props.categoryTranslator(categories[i]))); + } + return {final}; + } + + render() { + const categoriesRender = this.getCategoriesRender.bind(this, this.props.item.category); + return ( + } + right={(props) => } + /> + ); + } +} + +export default withTheme(ClubListItem); diff --git a/screens/Amicale/ClubListScreen.js b/screens/Amicale/ClubListScreen.js index 3a67660..fef4a97 100644 --- a/screens/Amicale/ClubListScreen.js +++ b/screens/Amicale/ClubListScreen.js @@ -1,26 +1,33 @@ // @flow import * as React from 'react'; -import {View} from "react-native"; -import {Avatar, Chip, List, withTheme} from 'react-native-paper'; +import {FlatList, Platform, View} from "react-native"; +import {Chip, Searchbar, withTheme} from 'react-native-paper'; import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen"; -import PureFlatList from "../../components/Lists/PureFlatList"; +import i18n from "i18n-js"; +import ClubListItem from "../../components/Lists/ClubListItem"; type Props = { navigation: Object, theme: Object, } -type State = {} +type State = { + currentlySelectedCategories: Array, + currentSearchString: string, +} class ClubListScreen extends React.Component { - state = {}; + state = { + currentlySelectedCategories: [], + currentSearchString: '', + }; colors: Object; getRenderItem: Function; - + originalData: Array; categories: Array; constructor(props) { @@ -28,6 +35,53 @@ class ClubListScreen extends React.Component { this.colors = props.theme.colors; } + /** + * Creates the header content + */ + componentDidMount() { + const title = this.getSearchBar.bind(this); + this.props.navigation.setOptions({ + headerTitle: title, + headerBackTitleVisible: false, + headerTitleContainerStyle: Platform.OS === 'ios' ? + {marginHorizontal: 0, width: '70%'} : + {marginHorizontal: 0, right: 50, left: 50}, + }); + } + + /** + * Gets the header search bar + * + * @return {*} + */ + getSearchBar() { + return ( + + ); + } + + /** + * Callback used when the search changes + * + * @param str The new search string + */ + onSearchStringChange = (str: string) => { + this.updateFilteredData(this.sanitizeString(str), null); + }; + + /** + * Sanitizes the given string to improve search performance + * + * @param str The string to sanitize + * @return {string} The sanitized string + */ + sanitizeString(str: string): string { + return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); + } + keyExtractor = (item: Object) => { return item.name + item.logo; }; @@ -35,59 +89,99 @@ class ClubListScreen extends React.Component { getScreen = (data: Object) => { this.categories = data.categories; return ( - ) }; - getCategoryName(id: number) { - for (let i = 0; i < this.categories.length; i++) { - if (id === this.categories[i].id) - return this.categories[i].name; - } - return ""; + onChipSelect(id: string) { + this.updateFilteredData(null, id); } - getCategoriesRender(categories: Array) { - let final = []; - for (let i = 0; i < categories.length; i++) { - if (categories[i] !== null) - final.push({this.getCategoryName(categories[i])}); + updateFilteredData(filterStr: string | null, categoryId: string | null) { + let newCategoriesState = [...this.state.currentlySelectedCategories]; + let newStrState = this.state.currentSearchString; + if (filterStr !== null) + newStrState = filterStr; + if (categoryId !== null) { + let index = newCategoriesState.indexOf(categoryId); + if (index === -1) + newCategoriesState.push(categoryId); + else + newCategoriesState.splice(index); } - return {final}; + if (filterStr !== null || categoryId !== null) + this.setState({ + currentSearchString: newStrState, + currentlySelectedCategories: newCategoriesState, + }) + } + + isItemInCategoryFilter(categories: Array) { + for (const category of categories) { + if (this.state.currentlySelectedCategories.indexOf(category) !== -1) + return true; + } + return false; + } + + getChipRender = (category: Object) => { + const onPress = this.onChipSelect.bind(this, category.id); + return + {category.name} + ; + }; + + getListHeader() { + let final = []; + for (let i = 0; i < this.categories.length; i++) { + final.push(this.getChipRender(this.categories[i])); + } + return {final}; + } + + getCategoryOfId = (id: number) => { + for (let i = 0; i < this.categories.length; i++) { + if (id === this.categories[i].id) + return this.categories[i]; + } + }; + + shouldRenderItem(item) { + let shouldRender = this.state.currentlySelectedCategories.length === 0 + || this.isItemInCategoryFilter(item.category); + if (shouldRender) + shouldRender = this.sanitizeString(item.name).includes(this.state.currentSearchString); + return shouldRender; } getRenderItem = ({item}: Object) => { const onPress = this.onListItemPress.bind(this, item); - const categoriesRender = this.getCategoriesRender.bind(this, item.category); - const hasManagers = item.responsibles.length > 0; - return ( - } - right={(props) => } - /> - ); + if (this.shouldRenderItem(item)) { + return ( + + ); + } else + return null; }; /**