Merge pull request #202 from kilowatts-io/197-eas-update-does-not-run…

…-on-production-branch

Eas Update Revision

.github/workflows/expo-preview.yml

@@ -0,0 +1,39 @@
+name: update
+
+on:
+  push:
+    branches:
+      - preview  # This specifies that the workflow should only run on pushes to the production branch.
+
+jobs:
+  update:
+    name: EAS Update
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for EXPO_TOKEN
+        run: |
+          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
+            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
+            exit 1
+          fi
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: yarn
+
+      - name: Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Publish update
+        run: eas update --auto --channel preview 

components/gb-live/bottom-sheet-tabs/live-list-item/live-list-item.tsx

@@ -84,7 +84,7 @@ export const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     gap: 10,
-    height: 35,
+    height: 40,
     justifyContent: "flex-start",
     padding: 5
   },

components/gb-live/bottom-sheet-tabs/totals-list/balancing-totals/balancing-totals.tsx

@@ -3,42 +3,45 @@ import { Text } from "@rneui/themed";
 
 import { useGbSummaryOutputQuery } from "../../../../../state/apis/cloudfront/api";
 import { londonTimeHHMMSS } from "../../../../../utils/dateTime";
+import VersionInfo from "../../../version-info";
 import { GbLiveListItemBalancingTotal } from "../../live-list-item/live-list-item";
 
 export const GbBalancingTotals = () => {
   const { data } = useGbSummaryOutputQuery(undefined, {
     pollingInterval: 1000 * 15
   });
 
-  if (!data) return null;
-
   return (
     <>
-      <View style={styles.totals}>
+      {data && (
         <>
-          <GbLiveListItemBalancingTotal
-            name="Total Bid Acceptances"
-            balancingVolume={data && -data.balancing_totals.bids}
-          />
-          <GbLiveListItemBalancingTotal
-            name="Total Offer Acceptances"
-            balancingVolume={data && data.balancing_totals.offers}
-          />
+          <View style={styles.totals}>
+            <>
+              <GbLiveListItemBalancingTotal
+                name="Total Bid Acceptances"
+                balancingVolume={data && -data.balancing_totals.bids}
+              />
+              <GbLiveListItemBalancingTotal
+                name="Total Offer Acceptances"
+                balancingVolume={data && data.balancing_totals.offers}
+              />
+            </>
+          </View>
+          <View style={styles.center}>
+            <Text>
+              {data && `Valid for ${londonTimeHHMMSS(new Date(data.dt))}`}
+            </Text>
+          </View>
         </>
-      </View>
-      <View style={styles.center}>
-        <Text>
-          {data && `Valid for ${londonTimeHHMMSS(new Date(data.dt))}`}
-        </Text>
-      </View>
+      )}
+      <VersionInfo />
     </>
   );
 };
 
 const styles = StyleSheet.create({
   center: {
-    alignItems: "center",
-    paddingTop: 15
+    paddingTop: 50
   },
   totals: {
     paddingTop: 15

components/gb-live/bottom-sheet-tabs/totals-list/totals-list.tsx

@@ -1,23 +1,32 @@
 import React from "react";
-import { FlatList } from "react-native";
+import { FlatList, StyleSheet, View } from "react-native";
+import { Button, Card, Icon, Text } from "@rneui/themed";
 
 import { useGbSummaryOutputQuery } from "../../../../state/apis/cloudfront/api";
 import {
   calculateBalancingDirection,
   calculateCapacityFactor,
   calculateCycleSeconds
 } from "../../../../state/utils";
+import { ErrorDataRetryCard } from "../../error-data-retry-card";
 import { GbLiveListItem } from "../live-list-item/live-list-item";
 
 import { GbBalancingTotals } from "./balancing-totals/balancing-totals";
 
 const capitalise = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 
 export const GbTotalsList: React.FC = () => {
-  const { data, isLoading, refetch } = useGbSummaryOutputQuery(undefined, {
-    pollingInterval: 1000 * 15,
-    refetchOnReconnect: true
-  });
+  const { data, isLoading, refetch, isError } = useGbSummaryOutputQuery(
+    undefined,
+    {
+      pollingInterval: 1000 * 15,
+      refetchOnReconnect: true
+    }
+  );
+
+  if (isError && !data) {
+    return <ErrorDataRetryCard refetch={refetch} />;
+  }
 
   return (
     <FlatList

components/gb-live/bottom-sheet-tabs/unit-groups-list/unit-groups-list.tsx

@@ -12,17 +12,21 @@ import {
   calculateCapacityFactor,
   calculateCycleSeconds
 } from "../../../../state/utils";
+import { ErrorDataRetryCard } from "../../error-data-retry-card";
 import { GbLiveListItem } from "../live-list-item/live-list-item";
 
 import Pagination from "./pagination";
 
 const WEB_PAGE_SIZE = 15;
 
 export const GbUnitGroupsList: React.FC = () => {
-  const { data, isLoading, refetch } = useGbSummaryOutputQuery(undefined, {
-    pollingInterval: 1000 * 15,
-    refetchOnReconnect: true
-  });
+  const { data, isLoading, refetch, isError } = useGbSummaryOutputQuery(
+    undefined,
+    {
+      pollingInterval: 1000 * 15,
+      refetchOnReconnect: true
+    }
+  );
   const [webPage, setWebPage] = React.useState(0);
   const list = React.useRef<FlashList<{ GbSummaryOutputGenerator }>>(null);
 
@@ -49,6 +53,10 @@ export const GbUnitGroupsList: React.FC = () => {
     }
   }, [data, webPage]);
 
+  if (isError && !data) {
+    return <ErrorDataRetryCard refetch={refetch} />;
+  }
+
   return (
     <FlashList
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

components/gb-live/error-data-retry-card.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { View } from "react-native";
+import { StyleSheet } from "react-native";
+import { Button, Card, Icon, Text } from "@rneui/themed";
+
+interface ErrorDataRetryCardProps {
+  refetch: () => void;
+}
+export const ErrorDataRetryCard: React.FC<ErrorDataRetryCardProps> = (p) => {
+  return (
+    <Card>
+      <Card.Title>Error</Card.Title>
+      <View style={styles.spaced}>
+        <Text>
+          Failed to load data from the internet. Check your internet connection
+          and try again.
+        </Text>
+      </View>
+      <Button
+        // title="Retry"
+        onPress={() => p.refetch()}
+        iconPosition="right"
+        icon={
+          <Icon
+            name="refresh"
+            type="material"
+            size={15}
+            color="white"
+          />
+        }
+      />
+    </Card>
+  );
+};
+
+const styles = StyleSheet.create({
+  spaced: {
+    paddingBottom: 20,
+    paddingTop: 20
+  }
+});

components/gb-live/version-info.tsx

@@ -0,0 +1,31 @@
+// text compoment which renders version information from expo-updates
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { Text } from "@rneui/themed";
+import * as Updates from "expo-updates";
+
+const VersionInfo: React.FC = () => {
+  if (__DEV__) {
+    return (
+      <View style={styles.view}>
+        <Text>Development Mode</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.view}>
+      <Text>
+        {`Release ${Updates.releaseChannel} v${Updates.runtimeVersion} ${Updates.isEmbeddedLaunch ? "Original" : `Updated ${Updates.createdAt.toLocaleString()}`} `}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  view: {
+    paddingTop: 20
+  }
+});
+
+export default VersionInfo;

root.tsx

@@ -1,15 +1,9 @@
 import React from "react";
-import {
-  ActivityIndicator,
-  Alert,
-  AppState,
-  Platform,
-  StyleSheet,
-  View
-} from "react-native";
+import { Alert, AppState, Platform, StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Provider } from "react-redux";
 import { captureException } from "@sentry/react-native";
+import * as Updates from "expo-updates";
 
 import { ErrorBoundaryWithRecovery } from "./components/gb-live/error-boundary";
 import GbLive from "./components/gb-live/live";
@@ -18,6 +12,28 @@ import { store } from "./state/reducer";
 import { initSentry } from "./utils/sentry";
 // import { checkUpdatesRequireStateRefresh } from "./utils/version";
 
+const checkUpdates = () => {
+  if (__DEV__) return;
+
+  Updates.checkForUpdateAsync().then((update) => {
+    if (update.isAvailable) {
+      Alert.alert(
+        "App update",
+        "A new version of the app is available. App must reload.",
+        [
+          {
+            text: "OK",
+            onPress: () =>
+              Updates.fetchUpdateAsync().then(() => {
+                Updates.reloadAsync();
+              })
+          }
+        ]
+      );
+    }
+  });
+};
+
 export default function RootApp() {
   React.useEffect(() => {
     if (__DEV__) {
@@ -26,12 +42,12 @@ export default function RootApp() {
     }
   }, []);
 
-  // React.useEffect(() => {
-  //   checkUpdatesRequireStateRefresh();
-  // }, []);
+  React.useEffect(() => {
+    // check for updates on launch
+    checkUpdates();
+  }, []);
 
   // watch app state and set background
-
   React.useEffect(() => {
     if (Platform.OS == "ios" || Platform.OS == "android") {
       initSentry();
@@ -50,24 +66,25 @@ export default function RootApp() {
 }
 
 const WithFromBackgroundRefresh = () => {
-  const [reloading, setReloading] = React.useState(false);
+  // const [reloading, setReloading] = React.useState(false);
   const { refetch } = useGbSummaryOutputQuery();
   const [background, setBackground] = React.useState(false);
 
   React.useEffect(() => {
     if (Platform.OS !== "ios" && Platform.OS !== "android") return;
     const handleAppStateChange = async (nextAppState: string) => {
       if (nextAppState === "active" && background) {
+        checkUpdates();
         // console.log("App has come to the foreground - refetching data");
         try {
-          setReloading(true);
+          // setReloading(true);
           await refetch();
           // console.log("Data refetched");
         } catch (e) {
           captureException(e);
         } finally {
           // console.log("Done refetching data");
-          setReloading(false);
+          // setReloading(false);
         }
         setBackground(false);
       } else {
@@ -79,22 +96,10 @@ const WithFromBackgroundRefresh = () => {
       listener.remove();
     };
   }, [refetch, background]);
-  if (reloading) {
-    return (
-      <View style={styles.container}>
-        <ActivityIndicator size="large" />
-      </View>
-    );
-  }
   return <GbLive />;
 };
 
 const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    flex: 1,
-    justifyContent: "center"
-  },
   gestureRootView: {
     flex: 1
   }