Implement new design

App/App.js

@@ -1,13 +1,18 @@
-// Copyright (c) 2018, Amaury Martiny and the Shoot! I Smoke contributors
+// Copyright (c) 2018, Amaury Martiny
 // SPDX-License-Identifier: GPL-3.0
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { Font } from 'expo';
+import { Provider } from 'mobx-react';
 
-import { Screens } from './Screens';
+import { RootStore } from './stores';
 import { Background as LoadingBackground } from './Screens/Loading/Background';
+import { Screens } from './Screens';
+
+// Set up global MST stores
+const stores = RootStore.create({ api: undefined, error: false, location: {} });
 
-export class App extends Component {
+export class App extends PureComponent {
  state = {
  fontLoaded: false
  };
@@ -26,6 +31,12 @@ export class App extends Component {
  render () {
  const { fontLoaded } = this.state;
 
- return fontLoaded ? <Screens /> : <LoadingBackground />;
+ return fontLoaded ? (
+ <Provider stores={stores}>
+ <Screens />
+ </Provider>
+ ) : (
+ <LoadingBackground />
+ );
  }
 }

App/App.test.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2018, Amaury Martiny and the Shoot! I Smoke contributors
+// Copyright (c) 2018, Amaury Martiny
 // SPDX-License-Identifier: GPL-3.0
 
 /* eslint-env jest */

App/Screens/About/About.js

@@ -0,0 +1,161 @@
+// Copyright (c) 2018, Amaury Martiny
+// SPDX-License-Identifier: GPL-3.0
+
+import React, { PureComponent } from 'react';
+import { Constants } from 'expo';
+import { Linking, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Box } from './Box';
+import * as theme from '../../utils/theme';
+import { BackButton } from '../../components/BackButton';
+
+export class About extends PureComponent {
+ handleOpenAmaury = () => Linking.openURL('https://twitter.com/amaurymartiny');
+
+ handleOpenAqi = () => Linking.openURL('http:https://aqicn.org/');
+
+ handleOpenArticle = () =>
+ Linking.openURL(
+ 'http:https://berkeleyearth.org/air-pollution-and-cigarette-equivalence/'
+ );
+
+ handleOpenGithub = () => Linking.openURL(Constants.manifest.extra.githubUrl);
+
+ handleOpenMarcelo = () =>
+ Linking.openURL('https://www.behance.net/marceloscoelho');
+
+ render () {
+ const { navigation } = this.props;
+ return (
+ <ScrollView style={theme.withPadding}>
+ <BackButton onClick={navigation.pop} style={styles.backButton} />
+
+ <View style={styles.section}>
+ <Text style={styles.h2}>
+ How do you calculate the number of cigarettes?
+ </Text>
+ <Text style={theme.text}>
+ This app was inspired by Berkeley Earth’s findings about the{' '}
+ <Text onPress={this.handleOpenArticle} style={theme.link}>
+ equivalence between air pollution and cigarette smoking
+ </Text>
+ . The rule of thumb is simple: one cigarette per day is the rough
+ equivalent of a PM2.5 level of 22{' '}
+ <Text style={styles.micro}>&micro;</Text>
+ g/m&sup3;
+ {' \u207D'}
+ &sup1;
+ {'\u207E'}.
+ </Text>
+ <Box />
+ <Text style={styles.articleLink}>
+ (1){' '}
+ <Text onPress={this.handleOpenArticle} style={theme.link}>
+ http:https://berkeleyearth.org/air-pollution-and-cigarette-equivalence/
+ </Text>
+ </Text>
+ </View>
+
+ <View style={styles.section}>
+ <Text style={styles.h2}>Where does the data come from?</Text>
+ <Text style={theme.text}>
+ Air quality data comes from{' '}
+ <Text onPress={this.handleOpenAqi} style={theme.link}>
+ WAQI
+ </Text>{' '}
+ in the form of PM2.5 AQI levels which are usually updated every one
+ hour and converted to direct PM2.5 levels by the app.
+ </Text>
+ </View>
+
+ <View style={styles.section}>
+ <Text style={styles.h2}>
+ Why is the station so far away from my current location?
+ </Text>
+ <Text style={theme.text}>
+ Since stations that measure and communicate Air Quality results
+ every hour are expensive, the data is still limited to
+ well-developed regions and larger cities around the globe. If you
+ are far from a more prominent urban center, results will probably
+ not be so accurate. Chances are that your air is better in that case
+ at least!
+ </Text>
+ </View>
+
+ <View style={styles.section}>
+ <Text style={styles.h2}>
+ The results are weird or inconsistent with other sources!
+ </Text>
+ <Text style={theme.text}>
+ We have also encountered a few surprising results: large cities with
+ better air than small villages; sudden huge increases in the number
+ of cigarettes; stations of the same town showing significantly
+ different numbers... The fact is air quality depends on several
+ factors such as temperature, pressure, humidity and even wind
+ direction and intensity. If the result seems weird for you, check{' '}
+ <Text onPress={this.handleOpenAqi} style={theme.link}>
+ WAQI
+ </Text>{' '}
+ for more information and history on your station.
+ </Text>
+ </View>
+
+ <View style={styles.credits}>
+ <Text style={styles.h2}>Credits</Text>
+ <Text style={theme.text}>
+ Concept &amp; Development by{' '}
+ <Text onPress={this.handleOpenAmaury} style={theme.link}>
+ Amaury Martiny
+ </Text>
+ .{'\n'}
+ Design &amp; Copywriting by{' '}
+ <Text onPress={this.handleOpenMarcelo} style={theme.link}>
+ Marcelo S. Coelho
+ </Text>
+ .{'\n'}
+ {'\n'}
+ Air quality data from{' '}
+ <Text onPress={this.handleOpenAqi} style={theme.link}>
+ WAQI
+ </Text>
+ .{'\n'}
+ Source code{' '}
+ <Text onPress={this.handleOpenGithub} style={theme.link}>
+ available on Github
+ </Text>
+ .{'\n'}
+ {'\n'}
+ Shoot! I Smoke v{Constants.manifest.version}.
+ </Text>
+ </View>
+ </ScrollView>
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ articleLink: {
+ ...theme.text,
+ fontSize: 8
+ },
+ backButton: {
+ marginBottom: theme.spacing.normal,
+ marginTop: theme.spacing.normal
+ },
+ credits: {
+ borderTopColor: theme.iconBackgroundColor,
+ borderTopWidth: 1,
+ marginBottom: theme.spacing.normal,
+ paddingTop: theme.spacing.big
+ },
+ h2: {
+ ...theme.title,
+ fontSize: 20,
+ letterSpacing: 0,
+ lineHeight: 24,
+ marginBottom: theme.spacing.small
+ },
+ section: {
+ marginBottom: theme.spacing.big
+ }
+});

App/Screens/About/Box/Box.js

@@ -0,0 +1,107 @@
+// Copyright (c) 2018, Amaury Martiny
+// SPDX-License-Identifier: GPL-3.0
+
+import React, { PureComponent } from 'react';
+import { Image, Platform, StyleSheet, Text, View } from 'react-native';
+
+import cigarette from '../../../../assets/images/cigarette.png';
+import * as theme from '../../../utils/theme';
+
+export class Box extends PureComponent {
+ render () {
+ return (
+ <View style={styles.box}>
+ <View style={styles.equivalence}>
+ <View style={styles.statisticsLeft}>
+ <Image source={cigarette} style={styles.cigarette} />
+ <Text style={styles.value} />
+ <Text style={styles.label}>per day</Text>
+ </View>
+ <Text style={styles.equal}>=</Text>
+ <View style={styles.statisticsRight}>
+ <Text style={styles.value}>22</Text>
+ <Text style={styles.label}>
+ <Text style={styles.micro}>&micro;</Text>
+ g/m&sup3; PM2.5*
+ </Text>
+ </View>
+ </View>
+ <Text style={styles.boxDescription}>
+ *Atmospheric particulate matter (PM) that have a diameter of less than
+ 2.5 micrometers, with increased chances of inhalation by living
+ beings.
+ </Text>
+ </View>
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ box: {
+ alignItems: 'center',
+ borderColor: '#EAEAEA',
+ borderRadius: 8,
+ borderWidth: 1,
+ backgroundColor: 'white',
+ marginTop: 20,
+ marginBottom: 10,
+ padding: 10
+ },
+ boxDescription: {
+ ...theme.text,
+ fontSize: 9,
+ lineHeight: 16,
+ marginTop: 15
+ },
+ cigarette: {
+ left: 6,
+ position: 'absolute',
+ bottom: 12
+ },
+ equal: {
+ ...theme.text,
+ color: theme.secondaryTextColor,
+ fontSize: 44,
+ lineHeight: 44,
+ marginHorizontal: 18
+ },
+ equivalence: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ justifyContent: 'center'
+ },
+ label: {
+ ...theme.title,
+ color: theme.secondaryTextColor,
+ fontSize: 12,
+ fontWeight: '900',
+ letterSpacing: 0.5
+ },
+ micro: {
+ ...Platform.select({
+ ios: {
+ fontFamily: 'Georgia'
+ },
+ android: {
+ fontFamily: 'normal'
+ }
+ })
+ },
+ statisticsLeft: {
+ alignItems: 'flex-end',
+ justifyContent: 'flex-end',
+ marginTop: 36,
+ paddingRight: 10,
+ width: 90
+ },
+ statisticsRight: {
+ alignItems: 'center',
+ width: 90
+ },
+ value: {
+ ...theme.text,
+ color: theme.secondaryTextColor,
+ fontSize: 44,
+ lineHeight: 44
+ }
+});

App/Screens/About/Box/index.js

@@ -0,0 +1,4 @@
+// Copyright (c) 2018, Amaury Martiny
+// SPDX-License-Identifier: GPL-3.0
+
+export * from './Box';

App/Screens/About/index.js

@@ -0,0 +1,4 @@
+// Copyright (c) 2018, Amaury Martiny
+// SPDX-License-Identifier: GPL-3.0
+
+export * from './About';