Skip to content

Commit

Permalink
feat: Add scrolling to relevant section in About (#145)
Browse files Browse the repository at this point in the history 
* chore: Optimize assets

* Run expo optimize

* feat: Add scrolling to relevant section in About
  • Loading branch information
@amaury1093
amaury1093 committed Jul 24, 2019
1 parent 2c4dcfc commit 8dc4f65
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 22 deletions.
50 changes: 43 additions & 7 deletions App/Screens/About/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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');

Expand All @@ -52,9 +72,11 @@ export function About (props: AboutProps) {
const handleOpenMarcelo = () =>
Linking.openURL('https://www.behance.net/marceloscoelho');

const { navigation } = props;
return (
<ScrollView style={theme.withPadding}>
<CustomScrollView
scrollIntoViewOptions={scrollViewOptions}
style={theme.withPadding}
>
<BackButton onPress={() => navigation.pop()} style={styles.backButton} />

<View style={styles.section}>
Expand Down Expand Up @@ -101,14 +123,20 @@ export function About (props: AboutProps) {
</Text>
</View>

<View style={styles.section}>
<ScrollIntoView
onMount={
navigation.getParam('scrollInto') ===
'about_why_is_the_station_so_far_title'
}
style={styles.section}
>
<Text style={styles.h2}>
{i18n.t('about_why_is_the_station_so_far_title')}
</Text>
<Text style={theme.text}>
{i18n.t('about_why_is_the_station_so_far_message')}
</Text>
</View>
</ScrollIntoView>

<View style={styles.section}>
<Text style={styles.h2}>{i18n.t('about_weird_results_title')}</Text>
Expand All @@ -121,6 +149,14 @@ export function About (props: AboutProps) {
</Text>
</View>

<ScrollIntoView
onMount={navigation.getParam('scrollInto') === 'about_how_results'}
style={styles.section}
>
<Text style={styles.h2}>HELLO</Text>
<Text style={theme.text}>TODO</Text>
</ScrollIntoView>

<View style={styles.credits}>
<Text style={styles.h2}>{i18n.t('about_credits_title')}</Text>
<Text style={theme.text}>
Expand All @@ -146,12 +182,12 @@ export function About (props: AboutProps) {
</Text>
.{'\n'}
{'\n'}
Shoot! I Smoke v{Constants.manifest.version}.
Sh**t! I Smoke v{Constants.manifest.version}.
</Text>
{/* Add languages https://github.com/amaurymartiny/shoot-i-smoke/issues/73 */}
</View>
<Dev />
</ScrollView>
</CustomScrollView>
);
}

Expand Down
62 changes: 48 additions & 14 deletions App/Screens/Home/Footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@
// along with Sh**t! I Smoke. If not, see <http://www.gnu.org/licenses/>.

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';
Expand All @@ -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');
}
Expand All @@ -67,7 +81,7 @@ export function Footer (props: FooterProps) {
switch (frequency) {
case 'daily': {
return isTooFar ? (
<Button onPress={goToAbout}>
<Button onPress={goToAboutWhySoFar}>
{i18n.t('home_btn_why_is_station_so_far').toUpperCase()}
</Button>
) : (
Expand All @@ -78,10 +92,20 @@ export function Footer (props: FooterProps) {
}
case 'weekly':
case 'monthly': {
return (
<Button onPress={goToPastStations}>
{i18n.t('home_btn_see_detailed_info').toUpperCase()}
</Button>
return pipe(
aqiHistory,
O.map(history => history[frequency]),
O.filter(({ isCorrect }) => isCorrect),
O.map(() => (
<Button onPress={goToPastStations}>
{i18n.t('home_btn_see_detailed_info').toUpperCase()}
</Button>
)),
O.getOrElse(() => (
<Button onPress={goToAboutAqiHistory}>
{i18n.t('home_btn_see_how_it_works').toUpperCase()}
</Button>
))
);
}
}
Expand Down Expand Up @@ -113,15 +137,25 @@ export function Footer (props: FooterProps) {
}
case 'weekly':
case 'monthly': {
return (
<View style={styles.smallButtons}>
<Button icon="question-circle" onPress={goToAbout} type="secondary">
{i18n.t('home_btn_faq_about').toUpperCase()}
</Button>
<Button icon="share-alt" onPress={handleShare} type="secondary">
{i18n.t('home_btn_share').toUpperCase()}
</Button>
</View>
return pipe(
aqiHistory,
O.map(history => history[frequency]),
O.filter(({ isCorrect }) => isCorrect),
O.map(() => (
<View style={styles.smallButtons}>
<Button
icon="question-circle"
onPress={goToAbout}
type="secondary"
>
{i18n.t('home_btn_faq_about').toUpperCase()}
</Button>
<Button icon="share-alt" onPress={handleShare} type="secondary">
{i18n.t('home_btn_share').toUpperCase()}
</Button>
</View>
)),
O.getOrElse<JSX.Element | null>(() => null)
);
}
}
Expand Down
1 change: 1 addition & 0 deletions App/localization/languages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 8 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 8dc4f65

Please sign in to comment.