Improve club list header

components/Lists/ClubListHeader.js

@@ -0,0 +1,79 @@
+// @flow
+
+import * as React from 'react';
+import {Card, List, Text, withTheme} from 'react-native-paper';
+import {StyleSheet, View} from "react-native";
+import i18n from 'i18n-js';
+
+type Props = {
+    categoryRender: Function,
+    categories: Array<Object>,
+}
+
+type State = {
+    expanded: boolean,
+}
+
+class ClubListHeader extends React.Component<Props, State> {
+
+    state = {
+        expanded: true
+    };
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    getCategoriesRender() {
+        let final = [];
+        for (let i = 0; i < this.props.categories.length; i++) {
+            final.push(this.props.categoryRender(this.props.categories[i], this.props.categories[i].id));
+        }
+        return final;
+    }
+
+    onPress = () => this.setState({expanded: !this.state.expanded});
+
+    render() {
+        return (
+            <Card style={styles.card}>
+                <List.Accordion
+                    title={i18n.t("clubs.categories")}
+                    left={props => <List.Icon {...props} icon="star"/>}
+                    expanded={this.state.expanded}
+                    onPress={this.onPress}
+                >
+                    <Text style={styles.text}>{i18n.t("clubs.categoriesFilterMessage")}</Text>
+                    <View style={styles.chipContainer}>
+                        {this.getCategoriesRender()}
+                    </View>
+                </List.Accordion>
+            </Card>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    card: {
+        margin: 5
+    },
+    text: {
+        paddingLeft: 0,
+        marginTop: 5,
+        marginBottom: 10,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+    },
+    chipContainer: {
+        justifyContent: 'space-around',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        paddingLeft: 0,
+        marginBottom: 5,
+    },
+});
+
+export default withTheme(ClubListHeader);

screens/Amicale/ClubListScreen.js

@@ -1,12 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, Platform, View} from "react-native";
+import {FlatList, Platform} from "react-native";
 import {Chip, Searchbar, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import i18n from "i18n-js";
 import ClubListItem from "../../components/Lists/ClubListItem";
 import {isItemInCategoryFilter, stringMatchQuery} from "../../utils/Search";
+import ClubListHeader from "../../components/Lists/ClubListHeader";
 
 type Props = {
     navigation: Object,
@@ -103,7 +104,7 @@ class ClubListScreen extends React.Component<Props, State> {
             if (index === -1)
                 newCategoriesState.push(categoryId);
             else
-                newCategoriesState.splice(index,1);
+                newCategoriesState.splice(index, 1);
         }
         if (filterStr !== null || categoryId !== null)
             this.setState({
@@ -126,16 +127,10 @@ class ClubListScreen extends React.Component<Props, State> {
     };
 
     getListHeader() {
-        let final = [];
-        for (let i = 0; i < this.categories.length; i++) {
-            final.push(this.getChipRender(this.categories[i], this.categories[i].id));
-        }
-        return <View style={{
-            justifyContent: 'space-around',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            margin: 10,
-        }}>{final}</View>;
+        return <ClubListHeader
+            categories={this.categories}
+            categoryRender={this.getChipRender}
+        />;
     }
 
     getCategoryOfId = (id: number) => {

translations/en.json

@@ -246,7 +246,9 @@
     "clubList": "Club list",
     "managers": "Managers",
     "managersSubtitle": "These people make the club live",
-    "managersUnavailable": "This club has no one :("
+    "managersUnavailable": "This club has no one :(",
+    "categories": "Categories",
+    "categoriesFilterMessage": "Click on a categories to filter the list"
   },
   "dialog": {
     "ok": "OK",

translations/fr.json

@@ -247,7 +247,9 @@
     "clubList": "Liste des clubs",
     "managers": "Responsables",
     "managersSubtitle": "Ces personnes font vivre le club",
-    "managersUnavailable": "Ce club est tout seul :("
+    "managersUnavailable": "Ce club est tout seul :(",
+    "categories": "Catégories",
+    "categoriesFilterMessage": "Cliquez sur une catégorie pour filtrer la list"
   },
   "dialog": {
     "ok": "OK",