feat: Add list of stations that monitored user's AQI

App/Screens/Details/Header/Header.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Sh**t! I Smoke.  If not, see <http://www.gnu.org/licenses/>.
 
-import { formatRelative } from 'date-fns';
+import { distanceInWords } from 'date-fns';
 import React, { useContext } from 'react';
 import {
   GestureResponderEvent,
@@ -63,7 +63,9 @@ export function Header (props: HeaderProps) {
           {lastUpdated &&
             renderInfo(
               i18n.t('details_header_latest_update_label'),
-              formatRelative(lastUpdated, new Date())
+              `${distanceInWords(lastUpdated, new Date())} ${i18n.t(
+                'details_header_latest_update_ago'
+              )}`
             )}
           {dominentpol &&
             renderInfo(

App/Screens/Home/Footer/Footer.tsx

@@ -14,22 +14,26 @@
 // You should have received a copy of the GNU General Public License
 // along with Sh**t! I Smoke.  If not, see <http://www.gnu.org/licenses/>.
 
+import * as O from 'fp-ts/lib/Option';
 import React, { useContext } from 'react';
 import { Share, StyleSheet, Text, View } from 'react-native';
 import { NavigationInjectedProps } from 'react-navigation';
 
 import { Button } from '../../../components';
 import { i18n } from '../../../localization';
+import { AqiHistory } from '../../../managers';
 import { Frequency } from '../SelectFrequency';
 import { ApiContext, CurrentLocationContext } from '../../../stores';
 import { isStationTooFar } from '../../../util/station';
 import * as theme from '../../../util/theme';
 
 interface FooterProps extends NavigationInjectedProps {
+  aqiHistory: O.Option<AqiHistory>;
   frequency: Frequency;
 }
 
 export function Footer (props: FooterProps) {
+  const { aqiHistory, frequency } = props;
   const { api } = useContext(ApiContext)!;
   const { currentLocation } = useContext(CurrentLocationContext);
 
@@ -43,6 +47,13 @@ export function Footer (props: FooterProps) {
     props.navigation.navigate('Details');
   }
 
+  function goToPastStations () {
+    props.navigation.navigate('PastStations', {
+      aqiHistory,
+      frequency
+    });
+  }
+
   function handleShare () {
     return Share.share({
       title: i18n.t('home_share_title'),
@@ -53,43 +64,72 @@ export function Footer (props: FooterProps) {
   }
 
   const renderBigButton = () => {
-    if (isTooFar) {
-      return (
-        <Button onPress={goToAbout}>
-          {i18n.t('home_btn_why_is_station_so_far').toUpperCase()}
-        </Button>
-      );
+    switch (frequency) {
+      case 'daily': {
+        return isTooFar ? (
+          <Button onPress={goToAbout}>
+            {i18n.t('home_btn_why_is_station_so_far').toUpperCase()}
+          </Button>
+        ) : (
+          <Button onPress={goToDetails}>
+            {i18n.t('home_btn_see_detailed_info').toUpperCase()}
+          </Button>
+        );
+      }
+      case 'weekly':
+      case 'monthly': {
+        return (
+          <Button onPress={goToPastStations}>
+            {i18n.t('home_btn_see_detailed_info').toUpperCase()}
+          </Button>
+        );
+      }
     }
-
-    return (
-      <Button onPress={goToDetails}>
-        {i18n.t('home_btn_see_detailed_info').toUpperCase()}
-      </Button>
-    );
   };
 
   const renderSmallButtons = () => {
-    return (
-      <View style={styles.smallButtons}>
-        {isTooFar ? (
-          <Button icon="plus-circle" onPress={goToDetails} type="secondary">
-            {i18n.t('home_btn_more_details').toUpperCase()}
-          </Button>
-        ) : (
-          <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>
-    );
+    switch (frequency) {
+      case 'daily': {
+        return (
+          <View style={styles.smallButtons}>
+            {isTooFar ? (
+              <Button icon="plus-circle" onPress={goToDetails} type="secondary">
+                {i18n.t('home_btn_more_details').toUpperCase()}
+              </Button>
+            ) : (
+              <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>
+        );
+      }
+      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 (
     <View style={styles.container}>
-      {isTooFar && props.frequency === 'daily' && (
+      {isTooFar && frequency === 'daily' && (
         <Text style={styles.isStationTooFar}>
           {i18n.t('home_station_too_far_message')}
         </Text>

App/Screens/Home/Home.tsx

@@ -59,7 +59,7 @@ export function Home (props: HomeProps) {
           return T.of(undefined);
         },
         history => {
-          console.log(`<Home> - getAqiHistory - ${JSON.stringify(history)}`);
+          console.log(`<Home> - getAqiHistory - Got data from DB`);
 
           setAqiHistory(O.some(history));
 
@@ -198,7 +198,11 @@ export function Home (props: HomeProps) {
             </Text>
           )}
         </View>
-        <Footer frequency={frequency} navigation={props.navigation} />
+        <Footer
+          aqiHistory={aqiHistory}
+          frequency={frequency}
+          navigation={props.navigation}
+        />
       </ScrollView>
     </View>
   );

App/Screens/Loading/Loading.tsx

@@ -19,8 +19,9 @@ import { StyleSheet, Text } from 'react-native';
 import { Background } from './Background';
 
 import { i18n } from '../../localization';
-import { ApiContext, GpsLocationContext, Location } from '../../stores';
+import { ApiContext, GpsLocationContext } from '../../stores';
 import { Api } from '../../stores/fetchApi';
+import { Location } from '../../stores/fetchGpsPosition';
 import * as theme from '../../util/theme';
 
 // The variable returned by setTimeout for longWaiting

App/Screens/PastStations/PastStations.tsx

@@ -0,0 +1,130 @@
+// Sh**t! I Smoke
+// Copyright (C) 2018-2019  Marcelo S. Coelho, Amaury Martiny
+
+// Sh**t! I Smoke is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Sh**t! I Smoke is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Sh**t! I Smoke.  If not, see <http://www.gnu.org/licenses/>.
+
+import { format } from 'date-fns';
+import { uniq } from 'fp-ts/lib/Array';
+import { contramap, eqString } from 'fp-ts/lib/Eq';
+import * as O from 'fp-ts/lib/Option';
+import { pipe } from 'fp-ts/lib/pipeable';
+import React from 'react';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { NavigationInjectedProps } from 'react-navigation';
+
+import { BackButton, ListItem, ListSeparator } from '../../components';
+import { Frequency } from '../Home/SelectFrequency';
+import { i18n } from '../../localization';
+import { AqiHistory, AqiHistoryDbItem } from '../../managers/AqiHistoryDb';
+import * as theme from '../../util/theme';
+
+interface Params {
+  aqiHistory: O.Option<AqiHistory>;
+  frequency: Frequency;
+}
+
+interface PastStationsProps extends NavigationInjectedProps<Params> {}
+
+// Determine when two `AqiHistoryDbItem` items are equal in the list, so that we
+// only show them once
+const eqStation = contramap((item: AqiHistoryDbItem) => item.station)(eqString);
+
+export function PastStations (props: PastStationsProps) {
+  const { navigation } = props;
+  const aqiHistory = navigation.getParam('aqiHistory');
+  const frequency = navigation.getParam('frequency');
+
+  if (frequency === 'daily') {
+    navigation.pop();
+    return;
+  }
+
+  return (
+    <View style={styles.container}>
+      <BackButton onPress={() => navigation.pop()} style={theme.withPadding} />
+      <View style={theme.withPadding}>
+        <Text style={styles.date}>
+          {pipe(
+            aqiHistory,
+            O.map(history => history[frequency]),
+            O.fold(
+              () => i18n.t('past_stations_loading').toUpperCase(),
+              summary =>
+                i18n
+                  .t('past_stations_date_from_to', {
+                    startDate: format(summary.firstResult, 'DD/MM/YYYY'),
+                    endDate: format(summary.lastResult, 'DD/MM/YYYY')
+                  })
+                  .toUpperCase()
+            )
+          )}
+        </Text>
+        <Text style={styles.description}>
+          {i18n
+            .t(
+              frequency === 'weekly'
+                ? 'past_stations_monitored_weekly'
+                : 'past_stations_monitored_monthly'
+            )
+            .toUpperCase()}
+        </Text>
+      </View>
+
+      <FlatList
+        data={pipe(
+          aqiHistory,
+          O.map(history => history[frequency].data),
+          O.map(uniq(eqStation)),
+          O.getOrElse<AqiHistoryDbItem[]>(() => [])
+        )}
+        ItemSeparatorComponent={renderSeparator}
+        keyExtractor={({ station }) => station}
+        renderItem={renderItem}
+        style={styles.list}
+      />
+    </View>
+  );
+}
+
+function renderItem ({ item }: { item: AqiHistoryDbItem }) {
+  return (
+    <ListItem
+      description={[item.city, item.country].join(', ')}
+      icon="pin"
+      title={item.station}
+    />
+  );
+}
+
+function renderSeparator () {
+  return <ListSeparator />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    marginTop: theme.spacing.normal
+  },
+  date: {
+    ...theme.title,
+    color: theme.primaryColor,
+    marginTop: theme.spacing.normal
+  },
+  description: {
+    ...theme.title
+  },
+  list: {
+    flex: 1
+  }
+});

App/Screens/PastStations/index.ts

@@ -0,0 +1,17 @@
+// Sh**t! I Smoke
+// Copyright (C) 2018-2019  Marcelo S. Coelho, Amaury Martiny
+
+// Sh**t! I Smoke is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Sh**t! I Smoke is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Sh**t! I Smoke.  If not, see <http://www.gnu.org/licenses/>.
+
+export * from './PastStations';

App/Screens/Screens.tsx

@@ -27,6 +27,7 @@ import { Details } from './Details';
 import { ErrorScreen } from './ErrorScreen';
 import { Home } from './Home';
 import { Loading } from './Loading';
+import { PastStations } from './PastStations';
 import { Search } from './Search';
 import { ApiContext, ErrorContext } from '../stores';
 import { Api } from '../stores/fetchApi';
@@ -60,6 +61,9 @@ const RootStack = createAppContainer(
       Home: {
         screen: Home
       },
+      PastStations: {
+        screen: PastStations
+      },
       Search: {
         screen: Search
       }

App/Screens/Search/AlgoliaItem/AlgoliaItem.tsx

@@ -16,9 +16,9 @@
 
 import React from 'react';
 
+import { ListItem } from '../../../components';
 import { AlgoliaHit } from '../fetchAlgolia';
-import { Item } from '../Item';
-import { Location } from '../../../stores/location';
+import { Location } from '../../../stores/fetchGpsPosition';
 
 interface ItemProps {
   item: AlgoliaHit;
@@ -46,7 +46,7 @@ export function AlgoliaItem (props: ItemProps) {
   };
 
   return (
-    <Item
+    <ListItem
       description={[city, county && county.length ? county[0] : null, country]
         .filter(_ => _)
         .join(', ')}