chore: improve ux and pages

Author: vacom

app.json

@@ -5,7 +5,7 @@
     "name": "Diary",
     "description": "Reflect on your daily events and save beautiful moments with Diary by Storytics.",
     "slug": "diary-by-storytics",
-    "version": "1.0.0",
+    "version": "1.0.6",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "backgroundColor": "#ffffff",

package.json

@@ -33,9 +33,9 @@
     "expo-local-authentication": "~9.5.0",
     "expo-localization": "~9.1.0",
     "expo-network": "~2.4.0",
-    "expo-splash-screen": "~0.8.1",
     "expo-sqlite": "~8.5.0",
     "expo-status-bar": "~1.0.3",
+    "expo-updates": "~0.4.1",
     "i18n-js": "^3.8.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",

src/components/NoteBook/index.tsx

@@ -9,7 +9,6 @@ import {
   Header,
   HeaderWrapper,
   Content,
-  Line,
   Footer,
   LoadingContainer,
   LoadingBox,
@@ -57,7 +56,6 @@ const NoteBook: React.FC<ActivityCardProps> = ({
 }) => {
   const linesAnimation = useRef(new Animated.Value(0)).current;
   const theme = useTheme();
-  const lineHeight = 40;
 
   useEffect(() => {
     Animated.loop(
@@ -114,10 +112,6 @@ const NoteBook: React.FC<ActivityCardProps> = ({
             <LoadingContainer isSimpleLayout={isSimpleLayout}>
               <AnimatedLoadingBox style={animationStyles} top={16} />
               <AnimatedLoadingBox style={animationStyles} top={56} width={50} />
-              {!isSimpleLayout &&
-                [...Array(20)].map((e, i) => (
-                  <Line key={i.toString()} height={lineHeight} />
-                ))}
             </LoadingContainer>
           )}
           <LinearGradient

src/components/NoteBook/styles.ts

@@ -58,12 +58,6 @@ export const ContentWrapper = styled.View`
   flex: 1;
 `;
 
-export const Line = styled.View<{ height?: number }>`
-  height: ${({ height }) => (height ? `${height}px` : "40px")};
-  flex-shrink: 0;
-  ${borderStyle};
-`;
-
 export const Footer = styled.View`
   display: flex;
   align-items: center;

src/index.tsx

@@ -1,13 +1,7 @@
-import React, {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useCallback,
-} from "react";
-import { AppState, AppStateStatus, StatusBar, View } from "react-native";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Alert, AppState, AppStateStatus, StatusBar, View } from "react-native";
 import AppLoading from "expo-app-loading";
-import * as SplashScreen from "expo-splash-screen";
+import * as Updates from "expo-updates";
 // Components
 import Notification from "components/Notification";
 import { getLastCloudSync, uploadDataToCloud } from "components/NetworkStatus";
@@ -32,6 +26,10 @@ import useStore from "hooks/useStore";
 import useInterval from "hooks/useInterval";
 // Types
 import { NetworkStatus, SubscriptionStatus } from "types/store";
+// Utils
+import Constants from "expo-constants";
+// Locales
+import i18n from "locales/index";
 
 /** URL polyfill. Required for Supabase queries to work in React Native. */
 import "react-native-url-polyfill/auto";
@@ -105,6 +103,40 @@ const Register: React.FC<Props> = ({ isFontsLoading, isDatabaseLoading }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isHomeScreenLoading, hasPasswordPin, appStateVisible]);
 
+  useEffect(() => {
+    // Over the air updates
+    const checkForOTA = async () => {
+      try {
+        const { isAvailable } = await Updates.checkForUpdateAsync();
+
+        if (isAvailable) {
+          const { isNew } = await Updates.fetchUpdateAsync();
+          if (isNew) {
+            Alert.alert(
+              `${i18n.t("alerts.ota.title")} (v${Constants.manifest.version})`,
+              i18n.t("alerts.ota.message"),
+              [
+                {
+                  text: i18n.t("alerts.ota.buttons.ok"),
+                  onPress: async () => {
+                    await Updates.reloadAsync();
+                  },
+                },
+              ],
+              { cancelable: false }
+            );
+          }
+        }
+      } catch (e) {
+        console.log("Error getting the OTA = ", e);
+      }
+    };
+
+    if (!isHomeScreenLoading) {
+      checkForOTA();
+    }
+  }, [isHomeScreenLoading]);
+
   const handleAppStateChange = (nextAppState: AppStateStatus) => {
     appState.current = nextAppState;
     setAppStateVisible(appState.current);
@@ -117,12 +149,8 @@ const Register: React.FC<Props> = ({ isFontsLoading, isDatabaseLoading }) => {
     };
   }, []);
 
-  const onRemoveSplashScreen = useCallback(async () => {
-    await SplashScreen.hideAsync();
-  }, []);
-
   if ((isFontsLoading && isDatabaseLoading) || isHomeScreenLoading) {
-    return <AppLoading onFinish={onRemoveSplashScreen} autoHideSplash />;
+    return <AppLoading autoHideSplash />;
   }
 
   return (

src/locales/lang/en.ts

@@ -236,5 +236,13 @@ export default {
         ok: "Load Draft",
       },
     },
+    ota: {
+      title: "New update available",
+      message:
+        "A new version of the app is available, which brings improvements and corrections.",
+      buttons: {
+        ok: "Download",
+      },
+    },
   },
 };

src/locales/lang/pt.ts

@@ -237,5 +237,13 @@ export default {
         ok: "Carregar",
       },
     },
+    ota: {
+      title: "Nova atualização disponível",
+      message:
+        "Está disponível uma nova versão do aplicativo, que traz melhorias e correções.",
+      buttons: {
+        ok: "Descarregar",
+      },
+    },
   },
 };

src/screens/Diary/index.tsx

@@ -78,6 +78,8 @@ const DiaryScreen: React.FC<DiaryNavigationProps> = ({
             (page: PageProps) => page.id === params.activityPageId
           );
 
+          console.log("activityIndex = ", activityIndex);
+
           setBookPages([...pages, defaultPage]);
           setPageNumber(activityIndex === -1 ? pages.length : activityIndex);
 
@@ -103,12 +105,13 @@ const DiaryScreen: React.FC<DiaryNavigationProps> = ({
   );
 
   useEffect(() => {
-    RichTextViewRef.current?.setContentHTML(unescapeHtml(currentPage.content));
     if (!isEditorLoading) {
+      RichTextViewRef.current?.setContentHTML(
+        unescapeHtml(currentPage.content)
+      );
       setEditorLoading(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentPage, isEditorLoading]);
+  }, [currentPage, isEditorLoading, RichTextViewRef, params.activityPageId]);
 
   const onPrevPage = () => {
     const prevPage = pageNumber - 1;

src/utils/constants.ts

@@ -4,6 +4,8 @@ export const SUPABASE_URL = "https://svysmlxhputrpnaoigve.supabase.co";
 export const SUPABASE_KEY =
   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYxMjgxNDQ4NCwiZXhwIjoxOTI4MzkwNDg0fQ.z-MICAaM9GVzKHcGpN8jY0KSXOngZWz72uwyfEDMCKk";
 
+export const isDev = __DEV__;
+
 export const billing = {
   checkout: `https://billing.storytics.pt/diary/plans/checkout`,
   plans: `https://billing.storytics.pt/diary/plans/select`,