diff --git a/src/navigation/MainNavigator.js b/src/navigation/MainNavigator.js index 3207960..554ee59 100644 --- a/src/navigation/MainNavigator.js +++ b/src/navigation/MainNavigator.js @@ -1,204 +1,231 @@ // @flow import * as React from 'react'; +import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; +import i18n from 'i18n-js'; +import {Platform} from 'react-native'; import SettingsScreen from '../screens/Other/Settings/SettingsScreen'; import AboutScreen from '../screens/About/AboutScreen'; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import DebugScreen from '../screens/About/DebugScreen'; -import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; -import i18n from "i18n-js"; -import TabNavigator from "./TabNavigator"; -import GameMainScreen from "../screens/Game/screens/GameMainScreen"; -import VoteScreen from "../screens/Amicale/VoteScreen"; -import LoginScreen from "../screens/Amicale/LoginScreen"; -import {Platform} from "react-native"; -import SelfMenuScreen from "../screens/Services/SelfMenuScreen"; -import ProximoMainScreen from "../screens/Services/Proximo/ProximoMainScreen"; -import ProximoListScreen from "../screens/Services/Proximo/ProximoListScreen"; -import ProximoAboutScreen from "../screens/Services/Proximo/ProximoAboutScreen"; -import ProfileScreen from "../screens/Amicale/ProfileScreen"; -import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen"; -import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen"; -import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; -import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils"; -import BugReportScreen from "../screens/Other/FeedbackScreen"; -import WebsiteScreen from "../screens/Services/WebsiteScreen"; -import EquipmentScreen from "../screens/Amicale/Equipment/EquipmentListScreen"; -import EquipmentLendScreen from "../screens/Amicale/Equipment/EquipmentRentScreen"; -import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen"; -import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen"; -import GameStartScreen from "../screens/Game/screens/GameStartScreen"; +import TabNavigator from './TabNavigator'; +import GameMainScreen from '../screens/Game/screens/GameMainScreen'; +import VoteScreen from '../screens/Amicale/VoteScreen'; +import LoginScreen from '../screens/Amicale/LoginScreen'; +import SelfMenuScreen from '../screens/Services/SelfMenuScreen'; +import ProximoMainScreen from '../screens/Services/Proximo/ProximoMainScreen'; +import ProximoListScreen from '../screens/Services/Proximo/ProximoListScreen'; +import ProximoAboutScreen from '../screens/Services/Proximo/ProximoAboutScreen'; +import ProfileScreen from '../screens/Amicale/ProfileScreen'; +import ClubListScreen from '../screens/Amicale/Clubs/ClubListScreen'; +import ClubAboutScreen from '../screens/Amicale/Clubs/ClubAboutScreen'; +import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen'; +import { + createScreenCollapsibleStack, + getWebsiteStack, +} from '../utils/CollapsibleUtils'; +import BugReportScreen from '../screens/Other/FeedbackScreen'; +import WebsiteScreen from '../screens/Services/WebsiteScreen'; +import EquipmentScreen from '../screens/Amicale/Equipment/EquipmentListScreen'; +import EquipmentLendScreen from '../screens/Amicale/Equipment/EquipmentRentScreen'; +import EquipmentConfirmScreen from '../screens/Amicale/Equipment/EquipmentConfirmScreen'; +import DashboardEditScreen from '../screens/Other/Settings/DashboardEditScreen'; +import GameStartScreen from '../screens/Game/screens/GameStartScreen'; -const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS; +const modalTransition = + Platform.OS === 'ios' + ? TransitionPresets.ModalPresentationIOS + : TransitionPresets.ModalSlideFromBottomIOS; const defaultScreenOptions = { - gestureEnabled: true, - cardOverlayEnabled: true, - ...TransitionPresets.SlideFromRightIOS, + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.SlideFromRightIOS, }; - const MainStack = createStackNavigator(); -function MainStackComponent(props: { createTabNavigator: () => React.Node }) { - return ( - - - {createScreenCollapsibleStack( - "settings", - MainStack, - SettingsScreen, - i18n.t('screens.settings.title'))} - {createScreenCollapsibleStack( - "dashboard-edit", - MainStack, - DashboardEditScreen, - i18n.t('screens.settings.dashboardEdit.title'))} - {createScreenCollapsibleStack( - "about", - MainStack, - AboutScreen, - i18n.t('screens.about.title'))} - {createScreenCollapsibleStack( - "dependencies", - MainStack, - AboutDependenciesScreen, - i18n.t('screens.about.libs'))} - {createScreenCollapsibleStack( - "debug", - MainStack, - DebugScreen, - i18n.t('screens.about.debug'))} +function MainStackComponent(props: { + createTabNavigator: () => React.Node, +}): React.Node { + const {createTabNavigator} = props; + return ( + + + {createScreenCollapsibleStack( + 'settings', + MainStack, + SettingsScreen, + i18n.t('screens.settings.title'), + )} + {createScreenCollapsibleStack( + 'dashboard-edit', + MainStack, + DashboardEditScreen, + i18n.t('screens.settings.dashboardEdit.title'), + )} + {createScreenCollapsibleStack( + 'about', + MainStack, + AboutScreen, + i18n.t('screens.about.title'), + )} + {createScreenCollapsibleStack( + 'dependencies', + MainStack, + AboutDependenciesScreen, + i18n.t('screens.about.libs'), + )} + {createScreenCollapsibleStack( + 'debug', + MainStack, + DebugScreen, + i18n.t('screens.about.debug'), + )} - {createScreenCollapsibleStack( - "game-start", - MainStack, - GameStartScreen, - i18n.t('screens.game.title'))} - - {createScreenCollapsibleStack( - "login", - MainStack, - LoginScreen, - i18n.t('screens.login.title'), - true, - {headerTintColor: "#fff"}, - 'transparent')} - {getWebsiteStack("website", MainStack, WebsiteScreen, "")} + {createScreenCollapsibleStack( + 'game-start', + MainStack, + GameStartScreen, + i18n.t('screens.game.title'), + )} + + {createScreenCollapsibleStack( + 'login', + MainStack, + LoginScreen, + i18n.t('screens.login.title'), + true, + {headerTintColor: '#fff'}, + 'transparent', + )} + {getWebsiteStack('website', MainStack, WebsiteScreen, '')} + {createScreenCollapsibleStack( + 'self-menu', + MainStack, + SelfMenuScreen, + i18n.t('screens.menu.title'), + )} + {createScreenCollapsibleStack( + 'proximo', + MainStack, + ProximoMainScreen, + i18n.t('screens.proximo.title'), + )} + {createScreenCollapsibleStack( + 'proximo-list', + MainStack, + ProximoListScreen, + i18n.t('screens.proximo.articleList'), + )} + {createScreenCollapsibleStack( + 'proximo-about', + MainStack, + ProximoAboutScreen, + i18n.t('screens.proximo.title'), + true, + {...modalTransition}, + )} - {createScreenCollapsibleStack( - "self-menu", - MainStack, - SelfMenuScreen, - i18n.t('screens.menu.title'))} - {createScreenCollapsibleStack( - "proximo", - MainStack, - ProximoMainScreen, - i18n.t('screens.proximo.title'))} - {createScreenCollapsibleStack( - "proximo-list", - MainStack, - ProximoListScreen, - i18n.t('screens.proximo.articleList'), - )} - {createScreenCollapsibleStack( - "proximo-about", - MainStack, - ProximoAboutScreen, - i18n.t('screens.proximo.title'), - true, - {...modalTransition}, - )} + {createScreenCollapsibleStack( + 'profile', + MainStack, + ProfileScreen, + i18n.t('screens.profile.title'), + )} + {createScreenCollapsibleStack( + 'club-list', + MainStack, + ClubListScreen, + i18n.t('screens.clubs.title'), + )} + {createScreenCollapsibleStack( + 'club-information', + MainStack, + ClubDisplayScreen, + i18n.t('screens.clubs.details'), + true, + {...modalTransition}, + )} + {createScreenCollapsibleStack( + 'club-about', + MainStack, + ClubAboutScreen, + i18n.t('screens.clubs.title'), + true, + {...modalTransition}, + )} + {createScreenCollapsibleStack( + 'equipment-list', + MainStack, + EquipmentScreen, + i18n.t('screens.equipment.title'), + )} + {createScreenCollapsibleStack( + 'equipment-rent', + MainStack, + EquipmentLendScreen, + i18n.t('screens.equipment.book'), + )} + {createScreenCollapsibleStack( + 'equipment-confirm', + MainStack, + EquipmentConfirmScreen, + i18n.t('screens.equipment.confirm'), + )} + {createScreenCollapsibleStack( + 'vote', + MainStack, + VoteScreen, + i18n.t('screens.vote.title'), + )} + {createScreenCollapsibleStack( + 'feedback', + MainStack, + BugReportScreen, + i18n.t('screens.feedback.title'), + )} + + ); +} - {createScreenCollapsibleStack( - "profile", - MainStack, - ProfileScreen, - i18n.t('screens.profile.title'))} - {createScreenCollapsibleStack( - "club-list", - MainStack, - ClubListScreen, - i18n.t('screens.clubs.title'))} - {createScreenCollapsibleStack( - "club-information", - MainStack, - ClubDisplayScreen, - i18n.t('screens.clubs.details'), - true, - {...modalTransition})} - {createScreenCollapsibleStack( - "club-about", - MainStack, - ClubAboutScreen, - i18n.t('screens.clubs.title'), - true, - {...modalTransition})} - {createScreenCollapsibleStack( - "equipment-list", - MainStack, - EquipmentScreen, - i18n.t('screens.equipment.title'))} - {createScreenCollapsibleStack( - "equipment-rent", - MainStack, - EquipmentLendScreen, - i18n.t('screens.equipment.book'))} - {createScreenCollapsibleStack( - "equipment-confirm", - MainStack, - EquipmentConfirmScreen, - i18n.t('screens.equipment.confirm'))} - {createScreenCollapsibleStack( - "vote", - MainStack, - VoteScreen, - i18n.t('screens.vote.title'))} - {createScreenCollapsibleStack( - "feedback", - MainStack, - BugReportScreen, - i18n.t('screens.feedback.title'))} - +type PropsType = { + defaultHomeRoute: string | null, + // eslint-disable-next-line flowtype/no-weak-types + defaultHomeData: {[key: string]: string}, +}; + +export default class MainNavigator extends React.Component { + createTabNavigator: () => React.Node; + + constructor(props: PropsType) { + super(props); + this.createTabNavigator = (): React.Node => ( + ); -} - -type Props = { - defaultHomeRoute: string | null, - defaultHomeData: { [key: string]: any } -} - -export default class MainNavigator extends React.Component { - - createTabNavigator: () => React.Node; - - constructor(props: Props) { - super(props); - this.createTabNavigator = () => - } - - render() { - return ( - - ); - } + } + + render(): React.Node { + return ; + } } diff --git a/src/navigation/TabNavigator.js b/src/navigation/TabNavigator.js index 6e00b4c..cee6972 100644 --- a/src/navigation/TabNavigator.js +++ b/src/navigation/TabNavigator.js @@ -1,271 +1,292 @@ +// @flow + import * as React from 'react'; import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; -import {createBottomTabNavigator} from "@react-navigation/bottom-tabs"; +import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; +import {Title, useTheme} from 'react-native-paper'; +import {Platform} from 'react-native'; +import i18n from 'i18n-js'; +import {createCollapsibleStack} from 'react-navigation-collapsible'; +import {View} from 'react-native-animatable'; import HomeScreen from '../screens/Home/HomeScreen'; import PlanningScreen from '../screens/Planning/PlanningScreen'; import PlanningDisplayScreen from '../screens/Planning/PlanningDisplayScreen'; import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen'; import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen'; import PlanexScreen from '../screens/Planex/PlanexScreen'; -import AsyncStorageManager from "../managers/AsyncStorageManager"; -import {Title, useTheme} from 'react-native-paper'; -import {Platform} from 'react-native'; -import i18n from "i18n-js"; -import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; -import ScannerScreen from "../screens/Home/ScannerScreen"; -import FeedItemScreen from "../screens/Home/FeedItemScreen"; -import {createCollapsibleStack} from "react-navigation-collapsible"; -import GroupSelectionScreen from "../screens/Planex/GroupSelectionScreen"; -import CustomTabBar from "../components/Tabbar/CustomTabBar"; -import WebsitesHomeScreen from "../screens/Services/ServicesScreen"; -import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen"; -import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen"; -import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils"; -import {View} from "react-native-animatable"; -import Mascot, {MASCOT_STYLE} from "../components/Mascot/Mascot"; - -const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS; +import AsyncStorageManager from '../managers/AsyncStorageManager'; +import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen'; +import ScannerScreen from '../screens/Home/ScannerScreen'; +import FeedItemScreen from '../screens/Home/FeedItemScreen'; +import GroupSelectionScreen from '../screens/Planex/GroupSelectionScreen'; +import CustomTabBar from '../components/Tabbar/CustomTabBar'; +import WebsitesHomeScreen from '../screens/Services/ServicesScreen'; +import ServicesSectionScreen from '../screens/Services/ServicesSectionScreen'; +import AmicaleContactScreen from '../screens/Amicale/AmicaleContactScreen'; +import { + createScreenCollapsibleStack, + getWebsiteStack, +} from '../utils/CollapsibleUtils'; +import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot'; +const modalTransition = + Platform.OS === 'ios' + ? TransitionPresets.ModalPresentationIOS + : TransitionPresets.ModalSlideFromBottomIOS; const defaultScreenOptions = { - gestureEnabled: true, - cardOverlayEnabled: true, - ...modalTransition, + gestureEnabled: true, + cardOverlayEnabled: true, + ...modalTransition, }; - const ServicesStack = createStackNavigator(); -function ServicesStackComponent() { - return ( - - {createScreenCollapsibleStack( - "index", - ServicesStack, - WebsitesHomeScreen, - i18n.t('screens.services.title'))} - {createScreenCollapsibleStack( - "services-section", - ServicesStack, - ServicesSectionScreen, - "SECTION")} - {createScreenCollapsibleStack( - "amicale-contact", - ServicesStack, - AmicaleContactScreen, - i18n.t('screens.amicaleAbout.title'))} - - ); +function ServicesStackComponent(): React.Node { + return ( + + {createScreenCollapsibleStack( + 'index', + ServicesStack, + WebsitesHomeScreen, + i18n.t('screens.services.title'), + )} + {createScreenCollapsibleStack( + 'services-section', + ServicesStack, + ServicesSectionScreen, + 'SECTION', + )} + {createScreenCollapsibleStack( + 'amicale-contact', + ServicesStack, + AmicaleContactScreen, + i18n.t('screens.amicaleAbout.title'), + )} + + ); } const ProxiwashStack = createStackNavigator(); -function ProxiwashStackComponent() { - return ( - - {createScreenCollapsibleStack( - "index", - ProxiwashStack, - ProxiwashScreen, - i18n.t('screens.proxiwash.title'))} - {createScreenCollapsibleStack( - "proxiwash-about", - ProxiwashStack, - ProxiwashAboutScreen, - i18n.t('screens.proxiwash.title'))} - - ); +function ProxiwashStackComponent(): React.Node { + return ( + + {createScreenCollapsibleStack( + 'index', + ProxiwashStack, + ProxiwashScreen, + i18n.t('screens.proxiwash.title'), + )} + {createScreenCollapsibleStack( + 'proxiwash-about', + ProxiwashStack, + ProxiwashAboutScreen, + i18n.t('screens.proxiwash.title'), + )} + + ); } const PlanningStack = createStackNavigator(); -function PlanningStackComponent() { - return ( - - - {createScreenCollapsibleStack( - "planning-information", - PlanningStack, - PlanningDisplayScreen, - i18n.t('screens.planning.eventDetails'))} - - ); +function PlanningStackComponent(): React.Node { + return ( + + + {createScreenCollapsibleStack( + 'planning-information', + PlanningStack, + PlanningDisplayScreen, + i18n.t('screens.planning.eventDetails'), + )} + + ); } const HomeStack = createStackNavigator(); -function HomeStackComponent(initialRoute: string | null, defaultData: { [key: string]: any }) { - let params = undefined; - if (initialRoute != null) - params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true}; - const {colors} = useTheme(); - return ( - - {createCollapsibleStack( - - - - {i18n.t('screens.home.title')} - - }} - initialParams={params} - />, - { - collapsedColor: colors.surface, - useNativeDriver: true, - } - )} - +function HomeStackComponent( + initialRoute: string | null, + defaultData: {[key: string]: string}, +): React.Node { + let params; + if (initialRoute != null) + params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true}; + const {colors} = useTheme(); + return ( + + {createCollapsibleStack( + ( + + + + {i18n.t('screens.home.title')} + + + ), + }} + initialParams={params} + />, + { + collapsedColor: colors.surface, + useNativeDriver: true, + }, + )} + - {createScreenCollapsibleStack( - "club-information", - HomeStack, - ClubDisplayScreen, - i18n.t('screens.clubs.details'))} - {createScreenCollapsibleStack( - "feed-information", - HomeStack, - FeedItemScreen, - i18n.t('screens.home.feed'))} - {createScreenCollapsibleStack( - "planning-information", - HomeStack, - PlanningDisplayScreen, - i18n.t('screens.planning.eventDetails'))} - - ); + {createScreenCollapsibleStack( + 'club-information', + HomeStack, + ClubDisplayScreen, + i18n.t('screens.clubs.details'), + )} + {createScreenCollapsibleStack( + 'feed-information', + HomeStack, + FeedItemScreen, + i18n.t('screens.home.feed'), + )} + {createScreenCollapsibleStack( + 'planning-information', + HomeStack, + PlanningDisplayScreen, + i18n.t('screens.planning.eventDetails'), + )} + + ); } const PlanexStack = createStackNavigator(); -function PlanexStackComponent() { - return ( - - {getWebsiteStack( - "index", - PlanexStack, - PlanexScreen, - i18n.t("screens.planex.title"))} - {createScreenCollapsibleStack( - "group-select", - PlanexStack, - GroupSelectionScreen, - "")} - - ); +function PlanexStackComponent(): React.Node { + return ( + + {getWebsiteStack( + 'index', + PlanexStack, + PlanexScreen, + i18n.t('screens.planex.title'), + )} + {createScreenCollapsibleStack( + 'group-select', + PlanexStack, + GroupSelectionScreen, + '', + )} + + ); } const Tab = createBottomTabNavigator(); -type Props = { - defaultHomeRoute: string | null, - defaultHomeData: { [key: string]: any } -} - -export default class TabNavigator extends React.Component { - - createHomeStackComponent: () => HomeStackComponent; - defaultRoute: string; - - constructor(props) { - super(props); - if (props.defaultHomeRoute != null) - this.defaultRoute = 'home'; - else - this.defaultRoute = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key).toLowerCase(); - this.createHomeStackComponent = () => HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData); - } - - render() { - return ( - } - > - - - - - - - - ); - } +type PropsType = { + defaultHomeRoute: string | null, + defaultHomeData: {[key: string]: string}, +}; + +export default class TabNavigator extends React.Component { + createHomeStackComponent: () => React.Node; + + defaultRoute: string; + + constructor(props: PropsType) { + super(props); + if (props.defaultHomeRoute != null) this.defaultRoute = 'home'; + else + this.defaultRoute = AsyncStorageManager.getString( + AsyncStorageManager.PREFERENCES.defaultStartScreen.key, + ).toLowerCase(); + this.createHomeStackComponent = (): React.Node => + HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData); + } + + render(): React.Node { + return ( + }> + + + + + + + + ); + } }