Show more services button on home

components/Home/ActionsDashboardItem.js

@@ -0,0 +1,67 @@
+// @flow
+
+import * as React from 'react';
+import {Button, Card, withTheme} from 'react-native-paper';
+import {StyleSheet} from "react-native";
+
+type Props = {
+    navigation: Object,
+    theme: Object,
+}
+
+class ActionsDashBoardItem extends React.PureComponent<Props> {
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = this.props.theme.colors;
+    }
+
+    openDrawer = () => this.props.navigation.openDrawer();
+
+    render() {
+        return (
+            <Card style={{
+                ...styles.card,
+                borderColor: this.colors.primary,
+            }}>
+                <Card.Content style={styles.content}>
+                    <Button
+                        icon="information"
+                        mode="contained"
+                        onPress={this.openDrawer}
+                        style={styles.button}
+                    >
+                        PLUS DE SERVICES
+                    </Button>
+                </Card.Content>
+            </Card>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    card: {
+        width: 'auto',
+        marginLeft: 10,
+        marginRight: 10,
+        marginTop: 10,
+        overflow: 'hidden',
+        elevation: 4,
+        borderWidth: 1,
+    },
+    avatar: {
+        backgroundColor: 'transparent'
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+    },
+    button: {
+        marginLeft: 'auto',
+        marginRight: 'auto',
+    }
+});
+
+export default withTheme(ActionsDashBoardItem);

components/Home/SmallDashboardItem.js

@@ -8,7 +8,7 @@ import {View} from "react-native";
  * @param props Props to pass to the component
  * @return {*}
  */
-function SquareDashboardItem(props) {
+function SmallDashboardItem(props) {
     const {colors} = props.theme;
     return (
         <View>
@@ -37,4 +37,4 @@ function SquareDashboardItem(props) {
     );
 }
 
-export default withTheme(SquareDashboardItem);
+export default withTheme(SmallDashboardItem);

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);

components/Sidebar/Sidebar.js

@@ -57,6 +57,7 @@ class SideBar extends React.PureComponent<Props, State> {
                 route: "LoginScreen",
                 icon: "login",
                 onlyWhenLoggedOut: true,
+                shouldEmphasis: true,
             },
             {
                 name: i18n.t('screens.profile'),
@@ -206,6 +207,7 @@ class SideBar extends React.PureComponent<Props, State> {
         const onListItemPress = this.onListItemPress.bind(this, item);
         const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
         const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
+        const shouldEmphasis = item.shouldEmphasis !== undefined && item.shouldEmphasis === true;
         if (onlyWhenLoggedIn && !this.state.isLoggedIn || onlyWhenLoggedOut && this.state.isLoggedIn)
             return null;
         else if (item.icon !== undefined) {
@@ -214,6 +216,7 @@ class SideBar extends React.PureComponent<Props, State> {
                     title={item.name}
                     icon={item.icon}
                     onPress={onListItemPress}
+                    shouldEmphasis={shouldEmphasis}
                 />
             );
         } else {

components/Sidebar/SidebarItem.js

@@ -17,7 +17,7 @@ function SidebarItem(props) {
             focused={false}
             onPress={props.onPress}
             icon={({color, size}) =>
-                <MaterialCommunityIcons color={color} size={size} name={props.icon}/>}
+                <MaterialCommunityIcons color={props.shouldEmphasis ? colors.primary : color} size={size} name={props.icon}/>}
             style={{
                 marginLeft: 0,
                 marginRight: 0,

navigation/DrawerNavigator.js

@@ -17,8 +17,9 @@ import HeaderButton from "../components/Custom/HeaderButton";
 import i18n from "i18n-js";
 import LoginScreen from "../screens/Amicale/LoginScreen";
 import ProfileScreen from "../screens/Amicale/ProfileScreen";
-import ClubListScreen from "../screens/Amicale/ClubListScreen";
-import ClubDisplayScreen from "../screens/Amicale/ClubDisplayScreen";
+import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
+import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
+import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -268,6 +269,16 @@ function ClubStackComponent() {
                     };
                 }}
             />
+            <ClubStack.Screen
+                name="ClubAboutScreen"
+                component={ClubAboutScreen}
+                options={({navigation}) => {
+                    return {
+                        title: "ABOUT",
+                        ...TransitionPresets.ModalSlideFromBottomIOS,
+                    };
+                }}
+            />
         </ClubStack.Navigator>
     );
 }

screens/Amicale/Clubs/ClubAboutScreen.js

@@ -0,0 +1,39 @@
+// @flow
+
+import * as React from 'react';
+import {ScrollView} from 'react-native';
+import {Linking} from "expo";
+import {Text, withTheme} from 'react-native-paper';
+
+type Props = {
+};
+
+type State = {
+};
+
+function openWebLink(event, link) {
+    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
+}
+
+/**
+ * Class defining a planning event information page.
+ */
+class ClubAboutScreen extends React.Component<Props, State> {
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    render() {
+        return (
+            <ScrollView style={{padding: 5}}>
+                <Text>TEXT</Text>
+            </ScrollView>
+        );
+    }
+}
+
+export default withTheme(ClubAboutScreen);

screens/Amicale/Clubs/ClubListScreen.js

@@ -1,12 +1,14 @@
 // @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 AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import i18n from "i18n-js";
-import ClubListItem from "../../components/Lists/ClubListItem";
-import {isItemInCategoryFilter, stringMatchQuery} from "../../utils/Search";
+import ClubListItem from "../../../components/Lists/ClubListItem";
+import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
+import ClubListHeader from "../../../components/Lists/ClubListHeader";
+import HeaderButton from "../../../components/Custom/HeaderButton";
 
 type Props = {
     navigation: Object,
@@ -39,9 +41,9 @@ class ClubListScreen extends React.Component<Props, State> {
      * Creates the header content
      */
     componentDidMount() {
-        const title = this.getSearchBar.bind(this);
         this.props.navigation.setOptions({
-            headerTitle: title,
+            headerTitle: this.getSearchBar,
+            headerRight: this.getHeaderButtons,
             headerBackTitleVisible: false,
             headerTitleContainerStyle: Platform.OS === 'ios' ?
                 {marginHorizontal: 0, width: '70%'} :
@@ -54,14 +56,23 @@ class ClubListScreen extends React.Component<Props, State> {
      *
      * @return {*}
      */
-    getSearchBar() {
+    getSearchBar = () => {
         return (
             <Searchbar
                 placeholder={i18n.t('proximoScreen.search')}
                 onChangeText={this.onSearchStringChange}
             />
         );
-    }
+    };
+
+    /**
+     * Gets the header button
+     * @return {*}
+     */
+    getHeaderButtons = () => {
+        const onPress = this.props.navigation.navigate.bind(this, "ClubAboutScreen");
+        return <HeaderButton icon={'information'} onPress={onPress}/>;
+    };
 
     /**
      * Callback used when the search changes
@@ -103,7 +114,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 +137,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) => {

screens/HomeScreen.js

@@ -7,10 +7,11 @@ import DashboardItem from "../components/Home/EventDashboardItem";
 import WebSectionList from "../components/Lists/WebSectionList";
 import {Text, withTheme} from 'react-native-paper';
 import FeedItem from "../components/Home/FeedItem";
-import SquareDashboardItem from "../components/Home/SquareDashboardItem";
+import SquareDashboardItem from "../components/Home/SmallDashboardItem";
 import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
 import {stringToDate} from "../utils/Planning";
 import {openBrowser} from "../utils/WebBrowser";
+import ActionsDashBoardItem from "../components/Home/ActionsDashboardItem";
 // import DATA from "../dashboard_data.json";
 
 
@@ -143,9 +144,13 @@ class HomeScreen extends React.Component<Props, State> {
         let dataset = [
 
             {
-                id: 'middle',
+                id: 'top',
                 content: []
             },
+            {
+                id: 'actions',
+                content: undefined
+            },
             {
                 id: 'event',
                 content: undefined
@@ -154,7 +159,7 @@ class HomeScreen extends React.Component<Props, State> {
         for (let [key, value] of Object.entries(dashboardData)) {
             switch (key) {
                 case 'today_events':
-                    dataset[1]['content'] = value;
+                    dataset[2]['content'] = value;
                     break;
                 case 'available_machines':
                     dataset[0]['content'][0] = {id: key, data: value};
@@ -184,8 +189,14 @@ class HomeScreen extends React.Component<Props, State> {
         let content = item['content'];
         if (item['id'] === 'event')
             return this.getDashboardEventItem(content);
-        else if (item['id'] === 'middle')
-            return this.getDashboardMiddleItem(content);
+        else if (item['id'] === 'top')
+            return this.getDashboardTopItem(content);
+        else if (item['id'] === 'actions')
+            return this.getActionsDashboardItem();
+    }
+
+    getActionsDashboardItem() {
+        return <ActionsDashBoardItem {...this.props}/>;
     }
 
     /**
@@ -359,7 +370,7 @@ class HomeScreen extends React.Component<Props, State> {
      * @param content
      * @return {*}
      */
-    getDashboardMiddleItem(content: Array<Object>) {
+    getDashboardTopItem(content: Array<Object>) {
         let proxiwashData = content[0]['data'];
         let tutorinsaData = content[1]['data'];
         let proximoData = content[2]['data'];

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 category 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",