Merge local with github

cederstrom · Jul 5, 2018 · d57eacc · d57eacc
1 parent 6abb5ca
commit d57eacc
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 13 deletions.
diff --git a/App.js b/App.js
@@ -4,13 +4,19 @@ import {
   ActivityIndicator,
   StyleSheet,
   Text,
-  View
+  View,
+  ScrollView,
+  RefreshControl,
+  Linking
 } from "react-native";
+import { Card, Header } from "react-native-elements";
+import moment from "moment/min/moment-with-locales";
 
 export default class FetchExample extends React.Component {
   constructor(props) {
     super(props);
     this.state = { isLoading: true };
+    moment.locale("sv-SE");
   }
 
   componentDidMount() {
@@ -20,7 +26,7 @@ export default class FetchExample extends React.Component {
         this.setState(
           {
             isLoading: false,
-            dataSource: responseJson
+            dataSource: responseJson.sort(this.bouySort)
           },
           function() {}
         );
@@ -30,6 +36,16 @@ export default class FetchExample extends React.Component {
       });
   }
 
+  bouySort(a, b) {
+    if (a.name < b.name) return -1;
+    if (a.name > b.name) return 1;
+    return 0;
+  }
+
+  onRefresh = () => {
+    this.componentDidMount();
+  };
+
   render() {
     if (this.state.isLoading) {
       return (
@@ -41,15 +57,52 @@ export default class FetchExample extends React.Component {
 
     return (
       <View style={{ flex: 1, paddingTop: 20 }}>
-        <FlatList
-          data={this.state.dataSource}
-          renderItem={({ item }) => (
-            <Text>
-              {item.name}: {Math.round(item.temperature)}°C
-            </Text>
-          )}
-          keyExtractor={(item, index) => index}
+        <Header
+          centerComponent={{
+            text: "Badtemperaturer i Karlskrona kommun",
+            style: { color: "#fff" }
+          }}
         />
+        <ScrollView
+          contentContainerStyle={{ paddingBottom: 20 }}
+          refreshControl={
+            <RefreshControl
+              refreshing={this.state.isLoading}
+              onRefresh={this.onRefresh}
+            />
+          }
+        >
+          {this.state.dataSource.map((item, i) => (
+            <Card key={i}>
+              <Text h1 style={{ fontWeight: "bold", fontSize: 20 }}>
+                {item.name}
+              </Text>
+              <Text style={{ fontWeight: "bold", fontSize: 40 }}>
+                {Math.round(item.temperature)}°C
+              </Text>
+              <Text style={{ color: "gray", fontSize: 10 }}>
+                Uppdaterad {moment(new Date(item.time)).fromNow()}
+              </Text>
+            </Card>
+          ))}
+          <Text
+            style={{
+              textAlign: "center",
+              color: "gray",
+              paddingTop: 20,
+              padding: 15
+            }}
+          >
+            Byggd av Andreas Cederström med data från Karlskrona kommun och All
+            Binary. Mer info på{" "}
+            <Text
+              style={{ color: "blue" }}
+              onPress={() => Linking.openURL("https://buoy.ioe.allbin.se")}
+            >
+              https://buoy.ioe.allbin.se
+            </Text>
+          </Text>
+        </ScrollView>
       </View>
     );
   }

diff --git a/app.json b/app.json
@@ -1,5 +1,15 @@
 {
   "expo": {
-    "sdkVersion": "27.0.0"
+    "name": "Badtemperatur i Karlskrona",
+    "icon": "./icon.png",
+    "description":
+      "Visa aktuella badtemperaturer vid stränderna i Karlskrona kommun.",
+    "version": "1.0.0",
+    "slug": "badtemperatur-i-karlskrona",
+    "privacy": "public",
+    "sdkVersion": "27.0.0",
+    "android": {
+      "package": "com.cederstrom.badtemp"
+    }
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "expo": "^27.0.1",
+    "moment": "^2.22.2",
     "react": "16.3.1",
     "react-native": "~0.55.2",
     "react-native-elements": "^0.19.1"