From 8dc4f656411dc1b8ce3c4b7d8de66673108e6f35 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 24 Jul 2019 20:11:44 +0200 Subject: [PATCH] feat: Add scrolling to relevant section in About (#145) * chore: Optimize assets * Run expo optimize * feat: Add scrolling to relevant section in About --- App/Screens/About/About.tsx | 50 ++++++++++++++++++++---- App/Screens/Home/Footer/Footer.tsx | 62 +++++++++++++++++++++++------- App/localization/languages/en.json | 1 + package.json | 1 + yarn.lock | 9 ++++- 5 files changed, 101 insertions(+), 22 deletions(-) diff --git a/App/Screens/About/About.tsx b/App/Screens/About/About.tsx index fdabf158..6984df95 100644 --- a/App/Screens/About/About.tsx +++ b/App/Screens/About/About.tsx @@ -24,6 +24,7 @@ import { Text, View } from 'react-native'; +import { ScrollIntoView, wrapScrollView } from 'react-native-scroll-into-view'; import { scale } from 'react-native-size-matters'; import { NavigationInjectedProps } from 'react-navigation'; @@ -33,9 +34,28 @@ import { Dev } from './Dev'; import { i18n } from '../../localization'; import * as theme from '../../util/theme'; -interface AboutProps extends NavigationInjectedProps {} +const CustomScrollView = wrapScrollView(ScrollView); +const scrollViewOptions = { + align: 'top' as 'top', + insets: { + bottom: 0, + top: scale(theme.spacing.normal) + } +}; + +export const aboutSections = { + about_how_results: 'about_how_results', + about_why_is_the_station_so_far_title: 'about_why_is_the_station_so_far_title' +}; + +interface AboutProps + extends NavigationInjectedProps<{ + scrollInto?: keyof typeof aboutSections; + }> {} export function About (props: AboutProps) { + const { navigation } = props; + const handleOpenAmaury = () => Linking.openURL('https://twitter.com/amaurymartiny'); @@ -52,9 +72,11 @@ export function About (props: AboutProps) { const handleOpenMarcelo = () => Linking.openURL('https://www.behance.net/marceloscoelho'); - const { navigation } = props; return ( - + navigation.pop()} style={styles.backButton} /> @@ -101,14 +123,20 @@ export function About (props: AboutProps) { - + {i18n.t('about_why_is_the_station_so_far_title')} {i18n.t('about_why_is_the_station_so_far_message')} - + {i18n.t('about_weird_results_title')} @@ -121,6 +149,14 @@ export function About (props: AboutProps) { + + HELLO + TODO + + {i18n.t('about_credits_title')} @@ -146,12 +182,12 @@ export function About (props: AboutProps) { .{'\n'} {'\n'} - Shoot! I Smoke v{Constants.manifest.version}. + Sh**t! I Smoke v{Constants.manifest.version}. {/* Add languages https://github.com/amaurymartiny/shoot-i-smoke/issues/73 */} - + ); } diff --git a/App/Screens/Home/Footer/Footer.tsx b/App/Screens/Home/Footer/Footer.tsx index 81e93dfb..3b4fb76c 100644 --- a/App/Screens/Home/Footer/Footer.tsx +++ b/App/Screens/Home/Footer/Footer.tsx @@ -15,10 +15,12 @@ // along with Sh**t! I Smoke. If not, see . import * as O from 'fp-ts/lib/Option'; +import { pipe } from 'fp-ts/lib/pipeable'; import React, { useContext } from 'react'; import { Share, StyleSheet, Text, View } from 'react-native'; import { NavigationInjectedProps } from 'react-navigation'; +import { aboutSections } from '../../About'; import { Button } from '../../../components'; import { i18n } from '../../../localization'; import { AqiHistory } from '../../../managers'; @@ -43,6 +45,18 @@ export function Footer (props: FooterProps) { props.navigation.navigate('About'); } + function goToAboutAqiHistory () { + props.navigation.navigate('About', { + scrollInto: aboutSections.about_how_results + }); + } + + function goToAboutWhySoFar () { + props.navigation.navigate('About', { + scrollInto: aboutSections.about_why_is_the_station_so_far_title + }); + } + function goToDetails () { props.navigation.navigate('Details'); } @@ -67,7 +81,7 @@ export function Footer (props: FooterProps) { switch (frequency) { case 'daily': { return isTooFar ? ( - ) : ( @@ -78,10 +92,20 @@ export function Footer (props: FooterProps) { } case 'weekly': case 'monthly': { - return ( - + return pipe( + aqiHistory, + O.map(history => history[frequency]), + O.filter(({ isCorrect }) => isCorrect), + O.map(() => ( + + )), + O.getOrElse(() => ( + + )) ); } } @@ -113,15 +137,25 @@ export function Footer (props: FooterProps) { } case 'weekly': case 'monthly': { - return ( - - - - + return pipe( + aqiHistory, + O.map(history => history[frequency]), + O.filter(({ isCorrect }) => isCorrect), + O.map(() => ( + + + + + )), + O.getOrElse(() => null) ); } } diff --git a/App/localization/languages/en.json b/App/localization/languages/en.json index bca7a261..bd15af83 100644 --- a/App/localization/languages/en.json +++ b/App/localization/languages/en.json @@ -11,6 +11,7 @@ "home_header_from_search": "from search", "home_btn_why_is_station_so_far": "Why is the station so far?", "home_btn_see_detailed_info": "See detailed info", + "home_btn_see_how_it_works": "See how it works", "home_btn_more_details": "More details", "home_btn_faq_about": "Faq/About", "home_btn_share": "Share", diff --git a/package.json b/package.json index d1e882b7..dc94f5a4 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react": "16.8.3", "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz", "react-native-maps": "^0.24.2", + "react-native-scroll-into-view": "^1.0.3", "react-native-size-matters": "^0.2.1", "react-navigation": "^3.11.0", "retry-ts": "^0.1.0", diff --git a/yarn.lock b/yarn.lock index 0f7c5b13..f555a162 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6397,7 +6397,7 @@ prompts@^2.0.1: kleur "^3.0.2" sisteransi "^1.0.0" -prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@>=15.6.1, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -6601,6 +6601,13 @@ react-native-screens@1.0.0-alpha.22: dependencies: debounce "^1.2.0" +react-native-scroll-into-view@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/react-native-scroll-into-view/-/react-native-scroll-into-view-1.0.3.tgz#a71f807dff5fa2b9e76422df19d7ef63caabb931" + integrity sha512-WBrgzLSvmSgi+LMHOch87TKwk8vMDwlyMhXGagf3BDOTSP4aVmHQ3PUuiIIWo2wK6jexHnPasN0LeA48Qvzxkw== + dependencies: + prop-types ">=15.6.1" + react-native-sentry@^0.42.0: version "0.42.0" resolved "https://registry.yarnpkg.com/react-native-sentry/-/react-native-sentry-0.42.0.tgz#9cd59659d9b6cd36d6fc4c48f50613cd82cde25f"