From bbe343da3bfeec94de7750151c052489d177a869 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Wed, 22 Apr 2020 09:37:31 +0200 Subject: [PATCH] Render services in sections --- src/components/Lists/CardList/CardList.js | 48 +++--- src/components/Lists/CardList/CardListItem.js | 2 + src/navigation/MainTabNavigator.js | 2 + src/screens/Services/ServicesScreen.js | 163 ++++++++++++------ src/screens/Services/ServicesSectionScreen.js | 69 ++++++++ 5 files changed, 209 insertions(+), 75 deletions(-) create mode 100644 src/screens/Services/ServicesSectionScreen.js diff --git a/src/components/Lists/CardList/CardList.js b/src/components/Lists/CardList/CardList.js index 8a1bb25..ebb7e81 100644 --- a/src/components/Lists/CardList/CardList.js +++ b/src/components/Lists/CardList/CardList.js @@ -1,11 +1,12 @@ // @flow import * as React from 'react'; -import {Animated, View} from "react-native"; +import {Animated} from "react-native"; import CardListItem from "./CardListItem"; type Props = { - dataset: Array + dataset: Array, + isHorizontal: boolean, } export type cardItem = { @@ -15,41 +16,46 @@ export type cardItem = { onPress: () => void, }; -export type cards = Array; +export type cardList = Array; export default class CardList extends React.Component { - renderItem = ({item}: { item: cards }) => { - let width = '80%'; - if (item.length > 1) { - width = '40%'; - } + static defaultProps = { + isHorizontal: false, + } + + renderItem = ({item}: { item: cardItem }) => { return ( - - {item.map((card: cardItem, index: number) => { - return ( - - ); - })} - + ); }; - keyExtractor = (item: cards) => item[0].title; + keyExtractor = (item: cardItem) => item.title; render() { + let containerStyle = { + ...this.props.contentContainerStyle, + height: 200, + justifyContent: 'space-around', + }; + if (!this.props.isHorizontal) { + containerStyle = { + ...containerStyle, + marginLeft: 'auto', + marginRight: 'auto', + height: 'auto', + } + } return ( ); } diff --git a/src/components/Lists/CardList/CardListItem.js b/src/components/Lists/CardList/CardListItem.js index 85e8a86..2a7c04b 100644 --- a/src/components/Lists/CardList/CardListItem.js +++ b/src/components/Lists/CardList/CardListItem.js @@ -25,6 +25,8 @@ export default class CardListItem extends React.Component { diff --git a/src/navigation/MainTabNavigator.js b/src/navigation/MainTabNavigator.js index d479481..eed5f81 100644 --- a/src/navigation/MainTabNavigator.js +++ b/src/navigation/MainTabNavigator.js @@ -38,6 +38,7 @@ import VoteScreen from "../screens/Amicale/VoteScreen"; import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen"; import AmicaleHomeScreen from "../screens/Amicale/AmicaleHomeScreen"; import WebsitesHomeScreen from "../screens/Services/ServicesScreen"; +import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen"; const defaultScreenOptions = { gestureEnabled: true, @@ -92,6 +93,7 @@ function ServicesStackComponent() { screenOptions={defaultScreenOptions} > {createScreenCollapsibleStack("index", ServicesStack, WebsitesHomeScreen, i18n.t('screens.services'))} + {createScreenCollapsibleStack("services-section", ServicesStack, ServicesSectionScreen, "SECTION")} {createScreenCollapsibleStack("proximo", ServicesStack, ProximoMainScreen, "Proximo")} {createScreenCollapsibleStack( diff --git a/src/screens/Services/ServicesScreen.js b/src/screens/Services/ServicesScreen.js index 420d31a..a06b147 100644 --- a/src/screens/Services/ServicesScreen.js +++ b/src/screens/Services/ServicesScreen.js @@ -1,12 +1,14 @@ // @flow import * as React from 'react'; -import type {cards} from "../../components/Lists/CardList/CardList"; +import type {cardList} from "../../components/Lists/CardList/CardList"; import CardList from "../../components/Lists/CardList/CardList"; import CustomTabBar from "../../components/Tabbar/CustomTabBar"; import {withCollapsible} from "../../utils/withCollapsible"; import {Collapsible} from "react-navigation-collapsible"; import {CommonActions} from "@react-navigation/native"; +import {Animated} from "react-native"; +import {Avatar, Card, List} from "react-native-paper"; type Props = { navigation: Object, @@ -25,57 +27,30 @@ const AMICALE_IMAGE = require("../../../assets/amicale.png"); const EE_IMAGE = "https://etud.insa-toulouse.fr/~eeinsat/wp-content/uploads/2019/09/logo-blanc.png"; const TUTORINSA_IMAGE = "https://www.etud.insa-toulouse.fr/~tutorinsa/public/images/logo-gray.png"; +type listItem = { + title: string, + description: string, + image: string | number, + content: cardList, +} + class ServicesScreen extends React.Component { - dataset: Array; + studentsDataset: cardList; + insaDataset: cardList; + + finalDataset: Array constructor(props) { super(props); const nav = props.navigation; - this.dataset = [ - [ - { - title: "RU", - subtitle: "the ru", - image: RU_IMAGE, - onPress: () => nav.navigate("self-menu"), - }, + this.studentsDataset = [ { title: "proximo", subtitle: "proximo", image: PROXIMO_IMAGE, onPress: () => nav.navigate("proximo"), }, - ], - [ - { - title: "AVAILABLE ROOMS", - subtitle: "ROOMS", - image: ROOM_IMAGE, - onPress: () => nav.navigate("available-rooms"), - }, - { - title: "BIB", - subtitle: "BIB", - image: BIB_IMAGE, - onPress: () => nav.navigate("bib"), - }, - ], - [ - { - title: "EMAIL", - subtitle: "EMAIL", - image: EMAIL_IMAGE, - onPress: () => nav.navigate("bluemind"), - }, - { - title: "ENT", - subtitle: "ENT", - image: ENT_IMAGE, - onPress: () => nav.navigate("ent"), - }, - ], - [ { title: "AMICALE", subtitle: "AMICALE", @@ -88,8 +63,6 @@ class ServicesScreen extends React.Component { image: WIKETUD_LINK, onPress: () => nav.navigate("wiketud"), }, - ], - [ { title: "ELUS ETUDIANTS", subtitle: "ELUS ETUDIANTS", @@ -102,8 +75,53 @@ class ServicesScreen extends React.Component { image: TUTORINSA_IMAGE, onPress: () => nav.navigate("tutorinsa"), }, - ], ]; + this.insaDataset = [ + { + title: "RU", + subtitle: "the ru", + image: RU_IMAGE, + onPress: () => nav.navigate("self-menu"), + }, + { + title: "AVAILABLE ROOMS", + subtitle: "ROOMS", + image: ROOM_IMAGE, + onPress: () => nav.navigate("available-rooms"), + }, + { + title: "BIB", + subtitle: "BIB", + image: BIB_IMAGE, + onPress: () => nav.navigate("bib"), + }, + { + title: "EMAIL", + subtitle: "EMAIL", + image: EMAIL_IMAGE, + onPress: () => nav.navigate("bluemind"), + }, + { + title: "ENT", + subtitle: "ENT", + image: ENT_IMAGE, + onPress: () => nav.navigate("ent"), + }, + ]; + this.finalDataset = [ + { + title: "AMICALE", + description: "youhou", + image: AMICALE_IMAGE, + content: this.studentsDataset + }, + { + title: "INSA", + description: "youhou", + image: AMICALE_IMAGE, + content: this.insaDataset + }, + ] } componentDidMount() { @@ -121,19 +139,56 @@ class ServicesScreen extends React.Component { } }; + getAvatar(props, source: string | number) { + if (typeof source === "number") + return + else + return + } + + renderItem = ({item} : {item: listItem}) => { + return ( + this.props.navigation.navigate("services-section", {data: item})} + > + this.getAvatar(props, item.image)} + right={(props) => } + /> + + + + ); + }; + + keyExtractor = (item: listItem) => { + return item.title; + } + render() { const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack; - return ( - - ); + return } } diff --git a/src/screens/Services/ServicesSectionScreen.js b/src/screens/Services/ServicesSectionScreen.js new file mode 100644 index 0000000..e247337 --- /dev/null +++ b/src/screens/Services/ServicesSectionScreen.js @@ -0,0 +1,69 @@ +// @flow + +import * as React from 'react'; +import type {cardList} from "../../components/Lists/CardList/CardList"; +import CardList from "../../components/Lists/CardList/CardList"; +import CustomTabBar from "../../components/Tabbar/CustomTabBar"; +import {withCollapsible} from "../../utils/withCollapsible"; +import {Collapsible} from "react-navigation-collapsible"; +import {CommonActions} from "@react-navigation/native"; + +type Props = { + navigation: Object, + route: Object, + collapsibleStack: Collapsible, +} +const BIB_IMAGE = "https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/50695561_2124263197597162_2325349608210825216_n.jpg?_nc_cat=109&_nc_sid=8bfeb9&_nc_ohc=tmcV6FWO7_kAX9vfWHU&_nc_ht=scontent-cdg2-1.xx&oh=3b81c76e46b49f7c3a033ea3b07ec212&oe=5EC59B4D"; +const RU_IMAGE = "https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/47123773_2041883702501779_5289372776166064128_o.jpg?_nc_cat=100&_nc_sid=cdbe9c&_nc_ohc=dpuBGlIIy_EAX8CyC0l&_nc_ht=scontent-cdg2-1.xx&oh=5c5bb4f0c7f12b554246f7c9b620a5f3&oe=5EC4DB31"; +const ROOM_IMAGE = "https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-9/47041013_2043521689004647_316124496522117120_n.jpg?_nc_cat=103&_nc_sid=8bfeb9&_nc_ohc=bIp8OVJvvSEAX8mKnDZ&_nc_ht=scontent-cdt1-1.xx&oh=b4fef72a645804a849ad30e9e20fca12&oe=5EC29309"; +const EMAIL_IMAGE = "https://etud-mel.insa-toulouse.fr/webmail/images/logo-bluemind.png"; +const ENT_IMAGE = "https://ent.insa-toulouse.fr/media/org/jasig/portal/layout/tab-column/xhtml-theme/insa/institutional/LogoInsa.png"; + +const PROXIMO_IMAGE = require("../../../assets/proximo-logo.png"); +const WIKETUD_LINK = "https://wiki.etud.insa-toulouse.fr/resources/assets/wiketud.png?ff051"; +const AMICALE_IMAGE = require("../../../assets/amicale.png"); +const EE_IMAGE = "https://etud.insa-toulouse.fr/~eeinsat/wp-content/uploads/2019/09/logo-blanc.png"; +const TUTORINSA_IMAGE = "https://www.etud.insa-toulouse.fr/~tutorinsa/public/images/logo-gray.png"; + +type listItem = { + title: string, + description: string, + image: string | number, + content: cardList, +} + +class ServicesSectionScreen extends React.Component { + + finalDataset: listItem; + + constructor(props) { + super(props); + this.handleNavigationParams(); + } + + handleNavigationParams() { + if (this.props.route.params != null) { + if (this.props.route.params.data != null) { + this.finalDataset = this.props.route.params.data; + // reset params to prevent infinite loop + this.props.navigation.dispatch(CommonActions.setParams({data: null})); + } + } + } + + render() { + const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack; + return + } +} + +export default withCollapsible(ServicesSectionScreen);