From b6024ae9211a2fe98f1069c3587093ec76c92513 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Wed, 28 Sep 2022 19:58:33 +0200 Subject: [PATCH] Add stack&bottom-tab navigation to App&move out closeDB¬ifications --- components/app-wrapper.js | 4 +- components/app.js | 117 ++++++++++++++++++++----------------- components/header/index.js | 10 ++-- components/menu/index.js | 42 ------------- lib/notifications.js | 9 ++- 5 files changed, 77 insertions(+), 105 deletions(-) delete mode 100644 components/menu/index.js diff --git a/components/app-wrapper.js b/components/app-wrapper.js index 892af2c..a2a8213 100644 --- a/components/app-wrapper.js +++ b/components/app-wrapper.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react' import { getLicenseFlag, saveEncryptionFlag } from '../local-storage' -import { openDb } from '../db' +import { closeDb, openDb } from '../db' import App from './app' import AppLoadingView from './common/app-loading' @@ -29,6 +29,8 @@ export default function AppWrapper() { useEffect(() => { checkIsLicenseAccepted() checkIsDbEncrypted() + + return () => closeDb() }, []) if (isLoading) { diff --git a/components/app.js b/components/app.js index 8112245..fb2500c 100644 --- a/components/app.js +++ b/components/app.js @@ -1,71 +1,82 @@ -import React, { useState, useEffect } from 'react' -import { BackHandler, StyleSheet, View } from 'react-native' -import PropTypes from 'prop-types' - -import { LocalDate } from '@js-joda/core' +import React from 'react' +import 'react-native-gesture-handler' +import { StyleSheet, Text } from 'react-native' +import { NavigationContainer } from '@react-navigation/native' +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' +import { createStackNavigator } from '@react-navigation/stack' +import Home from './Home' +import Chart from './chart/chart' +import CalendarView from './calendar' +import CycleDayOverview from './cycle-day/cycle-day-overview' +import Stats from './stats' +import Icon from './common/menu-icon' import Header from './header' -import Menu from './menu' -import { viewsList } from './views' -import { pages } from './pages' -import setupNotifications from '../lib/notifications' -import { closeDb } from '../db' +import { Colors, Fonts, Sizes } from '../styles' -const App = ({ restartApp }) => { - const [date, setDate] = useState(LocalDate.now().toString()) - const [currentPage, setCurrentPage] = useState('Home') - const goBack = () => { - if (currentPage === 'Home') { - closeDb() - BackHandler.exitApp() - } else { - const { parent } = pages.find((p) => p.component === currentPage) - - setCurrentPage(parent) - } - - return true - } - - useEffect(() => { - const backHandler = BackHandler.addEventListener( - 'hardwareBackPress', - goBack - ) - - return () => backHandler.remove() - }) - - useEffect(() => setupNotifications(setCurrentPage, setDate), []) - - const Page = viewsList[currentPage] - const isTemperatureEditView = currentPage === 'TemperatureEditView' - const headerProps = { navigate: setCurrentPage } - const pageProps = { - date, - setDate, - isTemperatureEditView, - navigate: setCurrentPage, - } +const HomeStack = createStackNavigator() +function HomeStackScreen() { return ( - -
- - - + + + + ) } -App.propTypes = { - restartApp: PropTypes.func, +const Tab = createBottomTabNavigator() + +const App = () => { + return ( + + ({ + header: ({ navigation }) =>
, + tabBarIcon: ({ focused }) => { + let icon = 'chart' + + if (route.name === 'CalendarStackScreen') { + icon = 'calendar' + } else if (route.name === 'Stats') { + icon = 'statistics' + } + + return + }, + tabBarLabel: ({ color }) => { + return ( + {route.name} + ) + }, + tabBarActiveTintColor: Colors.orange, + tabBarInactiveTintColor: Colors.grey, + tabBarStyle: { height: 80 }, + })} + > + null, tabBarVisible: false }} + /> + + + + + + ) } const styles = StyleSheet.create({ container: { flex: 1, }, + text: { + fontFamily: Fonts.bold, + fontSize: Sizes.small, + textTransform: 'uppercase', + }, }) export default App diff --git a/components/header/index.js b/components/header/index.js index 14f7beb..97e947d 100644 --- a/components/header/index.js +++ b/components/header/index.js @@ -7,17 +7,17 @@ import HamburgerMenu from './hamburger-menu' import { Colors, Containers, Sizes } from '../../styles' -const Header = ({ isStatic, navigate }) => { +const Header = ({ isStatic, navigation }) => { return ( {isStatic ? ( ) : ( <> - navigate('Home')}> + navigation.navigate('Home')}> - + )} @@ -26,7 +26,9 @@ const Header = ({ isStatic, navigate }) => { Header.propTypes = { isStatic: PropTypes.bool, - navigate: PropTypes.func, + navigation: PropTypes.shape({ + navigate: PropTypes.func.isRequired, + }).isRequired, } Header.defaultProps = { diff --git a/components/menu/index.js b/components/menu/index.js deleted file mode 100644 index ae885ec..0000000 --- a/components/menu/index.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import { StyleSheet, View } from 'react-native' -import PropTypes from 'prop-types' - -import MenuItem from './menu-item' - -import { Containers } from '../../styles' -import { pages } from '../pages' - -const Menu = ({ currentPage, navigate }) => { - const menuItems = pages.filter((page) => page.isInMenu) - - return ( - - {menuItems.map(({ icon, label, component }) => { - return ( - navigate(component)} - icon={icon} - key={label} - label={label} - /> - ) - })} - - ) -} - -Menu.propTypes = { - currentPage: PropTypes.string, - navigate: PropTypes.func, -} - -const styles = StyleSheet.create({ - container: { - backgroundColor: 'white', - ...Containers.rowContainer, - }, -}) - -export default Menu diff --git a/lib/notifications.js b/lib/notifications.js index 31778ad..cec4bc7 100644 --- a/lib/notifications.js +++ b/lib/notifications.js @@ -11,16 +11,15 @@ import { getBleedingDaysSortedByDate } from '../db' import cycleModule from './cycle' import nothingChanged from '../db/db-unchanged' -export default function setupNotifications(navigate, setDate) { +export default function setupNotifications(navigation) { Notification.configure({ onNotification: (notification) => { + const date = LocalDate.now().toString() // https://github.com/zo0r/react-native-push-notification/issues/966#issuecomment-479069106 if (notification.data?.id === '1' || notification.id === '1') { - const todayDate = LocalDate.now().toString() - setDate(todayDate) - navigate('TemperatureEditView') + navigation.navigate('TemperatureEditView', { date }) } else { - navigate('Home') + navigation.navigate('Home', { date }) } }, })