@boneframework/native-components 1.0.19 → 1.0.22

package/api/notifications.js

@@ -1,9 +1,11 @@
 import client from './client';
 
+const register = pushToken => client.post('/api/notifications/register-token', {token: pushToken});
+
 const send = (message, data) => {
     return client.post('/api/notifications/send-notification', {message, data})
 };
 
 export default {
-    send
+    register, send
 };

package/components/Card.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import {StyleSheet, TouchableWithoutFeedback, View} from "react-native";
-import {Image} from 'react-native-expo-image-cache';
+import Image from './Image';
 
 import Text from './Text'
 import colors from '../../../../config/colors'
 import useStyle from "../hooks/useStyle";
 
-function Card({title, subtitle, imageUrl, onPress, thumbnaiilUrl}) {
+function Card({title, subtitle, imageUrl, onPress, thumbnailUrl}) {
     const style = useStyle();
-
     const styles = StyleSheet.create({
         card: {
             borderRadius: 15,
@@ -37,7 +36,7 @@ function Card({title, subtitle, imageUrl, onPress, thumbnaiilUrl}) {
                 <Image
                     style={styles.image}
                     uri={imageUrl}
-                    preview={{uri: thumbnaiilUrl}}
+                    preview={{uri: thumbnailUrl}}
                     tint={'light'}
                 />
                 <View style={styles.detailsContainer}>

package/components/Image.tsx

@@ -1,10 +1,10 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {Image as RNImage, StyleSheet, View} from "react-native";
+import {StyleSheet, View} from "react-native";
+import {Image as ExpoImage} from "expo-image";
 
 import useAuth from "../hooks/useAuth";
 import settings from '../../../../config/api';
 
-function Image({style, uri, onPress, handleError, source}) {
+function Image({style, uri, onPress, handleError, source, ...rest}) {
     const {user} = useAuth();
 
     const tryAgain = async error => {
@@ -39,11 +39,12 @@ function Image({style, uri, onPress, handleError, source}) {
 
     if ((null !== user.authToken.accessToken && protectedUri == true) || protectedUri == false) {
         return (
-            <RNImage
+            <ExpoImage
                 source={imageSource}
                 style={style}
                 onError={tryAgain}
-            ></RNImage>
+                {...rest}
+            ></ExpoImage>
         );
     }
 }

package/components/SessionProvider.tsx

@@ -1,7 +1,6 @@
 import React, {useEffect, useState} from 'react';
 
 import AuthContext from "@boneframework/native-components/contexts/auth";
-import useAuth from "@boneframework/native-components/hooks/useAuth";
 import {useSecureStorageState} from "@boneframework/native-components/hooks/useSecureStorageState";
 import {useStorageState} from "@boneframework/native-components/hooks/useStorageState";
 import authStorage from "@boneframework/native-components/utilities/authStorage";
@@ -16,7 +15,7 @@ function SessionProvider(props: object) {
 
     useEffect(() => {
         setIsLoading(profileApi.loading || isAuthTokenLoading || isUserLoading);
-    }, [profileApi.loading || isAuthTokenLoading || isUserLoading]);
+    }, [profileApi.loading, isAuthTokenLoading, isUserLoading]);
 
 
     return (
@@ -30,11 +29,6 @@ function SessionProvider(props: object) {
                         setAuthToken(authToken)
                         await setUser(userProfile.data);
                         setIsLoading(false);
-                        console.log('token : ', authToken)
-                        console.log('user : ', user)
-                        console.log('profile : ', userProfile.data)
-                        console.log('user : ', user)
-
                     });
                 },
                 logout: () => {

package/contexts/auth.ts

@@ -5,7 +5,7 @@ const AuthContext = createContext<{
     logout: () => void;
     updateUser: () => void;
     user?: object | null;
-    isLoading: bool;
+    isLoading: boolean;
 }>({
     login: () => null,
     logout: () => null,

package/hooks/useNotifications.ts

@@ -1,10 +1,15 @@
 import * as Device from "expo-device";
 import * as Notifications from "expo-notifications";
-import expoPushTokensApi from "../api/expoPushTokens";
 import {useEffect} from "react";
-import router from "../navigation/rootNavigation";
+import {Platform} from "react-native";
+import Constants from "expo-constants";
+
+import expoPushTokensApi from "../api/notifications";
+import {useStorageState} from "./useStorageState";
 
 export default useNotifications = (notificationReceivedListener = notification => {}) => {
+    const [[isPushTokenLoading, pushToken], setPushToken] = useStorageState('pushToken');
+
     useEffect(() => {
         registerForPushNotifications();
         Notifications.addNotificationReceivedListener(notification => {
@@ -14,6 +19,17 @@ export default useNotifications = (notificationReceivedListener = notification =
 
     const registerForPushNotifications = () => registerForPushNotificationsAsync();
 
+    const handleRegistrationError = (errorMessage: string) => {
+        alert(errorMessage);
+        throw new Error(errorMessage);
+    }
+
+    const projectId = Constants?.expoConfig?.extra?.eas?.projectId ?? Constants?.easConfig?.projectId;
+
+    if (!projectId) {
+        handleRegistrationError('Project ID not found');
+    }
+
     const registerForPushNotificationsAsync = async () => {
         if (Device.isDevice) {
             const { status: existingStatus } = await Notifications.getPermissionsAsync();
@@ -26,8 +42,15 @@ export default useNotifications = (notificationReceivedListener = notification =
             if (finalStatus !== 'granted') {
                 return;
             }
-            const token = (await Notifications.getExpoPushTokenAsync()).data;
-            expoPushTokensApi.register(token);
+            const token = (await Notifications.getExpoPushTokenAsync({
+                projectId,
+            })).data;
+
+            if (!isPushTokenLoading && pushToken !== token) {
+                setPushToken(token)
+                expoPushTokensApi.register(token);
+            }
+
         } else {
             alert('Must use physical device for Push Notifications');
         }

package/hooks/useSecureStorageState.ts

@@ -41,9 +41,9 @@ export function useSecureStorageState(key: string): UseStateHook<string> {
     // Public
     const [state, setState] = useAsyncState<string|object>();
 
-    const isJson = () => {
+    const isJson = value => {
         try {
-            const result = JSON.parse(str);
+            const result = JSON.parse(value);
             const type = Object.prototype.toString.call(result);
             return type === '[object Object]'
                 || type === '[object Array]';
@@ -57,7 +57,7 @@ export function useSecureStorageState(key: string): UseStateHook<string> {
         if (Platform.OS === 'web') {
             try {
                 if (typeof localStorage !== 'undefined') {
-                    value = localStorage.getItem(key);
+                    let value = localStorage.getItem(key);
 
                     if (isJson(value)) {
                         value = JSON.parse(value);
@@ -69,15 +69,12 @@ export function useSecureStorageState(key: string): UseStateHook<string> {
                 console.error('Local storage is unavailable:', e);
             }
         } else {
-            console.log('fetching ' + key);
             SecureStore.getItemAsync(key).then(value => {
-                console.log('value', value)
                 if (isJson(value)) {
                     value = JSON.parse(value);
                 }
 
-                setState(value);
-                console.log('state ', state)
+                setState(false, value);
             });
         }
     }, [key]);

package/hooks/useStorageState.ts

@@ -40,9 +40,9 @@ export async function setStorageItemAsync(key: string, value: object | string |
 }
 
 export function useStorageState(key: string): UseStateHook<string> {
-    const isJson = () => {
+    const isJson = value => {
         try {
-            const result = JSON.parse(str);
+            const result = JSON.parse(value);
             const type = Object.prototype.toString.call(result);
             return type === '[object Object]'
                 || type === '[object Array]';
@@ -58,7 +58,7 @@ export function useStorageState(key: string): UseStateHook<string> {
         if (Platform.OS === 'web') {
             try {
                 if (typeof localStorage !== 'undefined') {
-                    value = localStorage.getItem(key);
+                    let value = localStorage.getItem(key);
 
                     if (isJson(value)) {
                         value = JSON.parse(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.19",
+  "version": "1.0.22",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -35,6 +35,7 @@
     "apisauce": "^3.0.1",
     "expo-auth-session": "^5.5.2",
     "expo-camera": "^15.0.13",
+    "expo-constants": "^16.0",
     "expo-device": "^6.0.2",
     "expo-image": "^1.12.13",
     "expo-image-picker": "^15.0.7",

package/screens/WelcomeScreen.tsx

@@ -1,10 +1,10 @@
+import ActivityIndicator from "@boneframework/native-components/components/ActivityIndicator";
+import {exchangeCodeAsync, makeRedirectUri, useAuthRequest} from "expo-auth-session";
 import React from 'react';
 import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
-import {exchangeCodeAsync, makeRedirectUri, useAuthRequest} from "expo-auth-session";
 
 import Button from '../components/Button'
 import colors from '../../../../config/colors'
-import ActivityIndicator from "@boneframework/native-components/components/ActivityIndicator";
 
 function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}, title = 'BONE FRAMEWORK', isLoading = false}) {
     return (

package/utilities/logger.ts

@@ -1,8 +1,6 @@
 // import Bugsnag from '@bugsnag/expo';
 // or sentry, whatever
 
-import {object} from "prop-types";
-
 const log = (message: any) => {
     console.log(message);
     // Bugsnag.notify(error);

package/api/expoPushTokens.js

@@ -1,7 +0,0 @@
-import client from './client';
-
-const register = pushToken => client.post('/api/notifications/register-token', {token: pushToken});
-
-export default {
-    register,
-}