@boneframework/native-components 1.0.15 → 1.0.17

package/README.md

@@ -1,5 +1,5 @@
 # @boneframework/native-components
-React Native expo components for BoneFramework WIP
+React Native expo components for BoneFramework
 ## project level files referred to in code
 ```
 config/settings

package/components/SessionProvider.tsx

@@ -1,22 +1,51 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 
-import AuthContext from "../contexts/auth";
-import useAuth from "../hooks/useAuth";
+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";
+import useApi from "@boneframework/native-components/hooks/useApi";
+import usersApi from "@boneframework/native-components/api/users";
 
 function SessionProvider(props: object) {
-    const {login, logout, updateUser, user, isLoading} = useAuth();
+    const profileApi = useApi(usersApi.getProfile);
+    const [[isAuthTokenLoading, authToken], setAuthToken] = useSecureStorageState('authToken');
+    const [[isUserLoading, user], setUser] = useStorageState('user');
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        setIsLoading(profileApi.loading || isAuthTokenLoading || isUserLoading);
+    }, [profileApi.loading || isAuthTokenLoading || isUserLoading]);
+
 
     return (
         <AuthContext.Provider
             value={{
-                signIn: async (authToken: string) => {
-                    login(authToken);
+                login: async (authToken: object) => {
+                    setIsLoading(true);
+                    await authStorage.storeAuthToken(authToken).then(async () => {
+                        const userProfile = await profileApi.request(authToken.accessToken);
+                        userProfile.data.authToken = authToken;
+                        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: () => {
+                    setAuthToken(null);
+                    setUser(null);
                 },
-                signOut: () => {
-                    logout();
+                updateUser: async data => {
+                    setUser(data)
                 },
-                update: data => updateUser(data),
                 user,
+                isLoading
             }}>
             {props.children}
         </AuthContext.Provider>

package/contexts/auth.ts

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

package/hooks/useAuth.ts

@@ -6,36 +6,13 @@ import useApi from "./useApi";
 import usersApi from "../api/users";
 
 export default useAuth = () => {
-    const profileApi = useApi(usersApi.getProfile);
-    const {user, setUser} = useContext(AuthContext);
-    const {isLoading, setIsLoading} = useState(false);
+    const value = useContext(AuthContext);
 
-    const login = async authToken => {
-        setIsLoading(true);
-        await authStorage.storeAuthToken(authToken).then(async () => {
-            const user = await profileApi.request(authToken);
-            authStorage.storeUser(user.data);
-            user.data.authToken = authToken;
-            setUser(user.data);
-            setIsLoading(false);
-        });
+    if (process.env.NODE_ENV !== 'production') {
+        if (!value) {
+            throw new Error('useSession must be wrapped in a <SessionProvider />');
+        }
     }
 
-    const updateUser = async user => {
-        setIsLoading(true);
-        const authToken = user.authToken;
-        await delete user.authToken;
-        authStorage.storeUser(user);
-        user.authToken = authToken;
-        setUser({...user});
-        setIsLoading(false);
-    }
-
-    const logout = () => {
-        setUser(null);
-        authStorage.removeAuthToken();
-        authStorage.removeUser();
-    }
-
-    return {login, logout, updateUser, user, isLoading};
+    return value;
 }

package/hooks/useSecureStorageState.ts

@@ -0,0 +1,95 @@
+import * as SecureStore from 'expo-secure-store';
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+type UseStateHook<T> = [[boolean, T | null], (value: T | null) => void];
+
+function useAsyncState<T>(
+    initialValue: [boolean, T | null] = [true, null],
+): UseStateHook<T> {
+    return React.useReducer(
+        (state: [boolean, T | null], action: T | null = null): [boolean, T | null] => [false, action],
+        initialValue
+    ) as UseStateHook<T>;
+}
+
+export async function setStorageItemAsync(key: string, value: string | null) {
+    if (typeof value === 'object') {
+        value = JSON.stringify(value);
+    }
+
+    if (Platform.OS === 'web') {
+        try {
+            if (value === null) {
+                localStorage.removeItem(key);
+            } else {
+                localStorage.setItem(key, value);
+            }
+        } catch (e) {
+            console.error('Local storage is unavailable:', e);
+        }
+    } else {
+        if (value == null) {
+            await SecureStore.deleteItemAsync(key);
+        } else {
+            await SecureStore.setItemAsync(key, value);
+        }
+    }
+}
+
+export function useSecureStorageState(key: string): UseStateHook<string> {
+    // Public
+    const [state, setState] = useAsyncState<string|object>();
+
+    const isJson = () => {
+        try {
+            const result = JSON.parse(str);
+            const type = Object.prototype.toString.call(result);
+            return type === '[object Object]'
+                || type === '[object Array]';
+        } catch (err) {
+            return false;
+        }
+    }
+
+    // Get
+    React.useEffect(() => {
+        if (Platform.OS === 'web') {
+            try {
+                if (typeof localStorage !== 'undefined') {
+                    value = localStorage.getItem(key);
+
+                    if (isJson(value)) {
+                        value = JSON.parse(value);
+                    }
+
+                    setState(value);
+                }
+            } catch (e) {
+                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)
+            });
+        }
+    }, [key]);
+
+    // Set
+    const setValue = React.useCallback(
+        (value: string | null) => {
+            setState(value);
+            setStorageItemAsync(key, value);
+        },
+        [key]
+    );
+
+    return [state, setValue];
+}

package/hooks/useStorageState.ts

@@ -0,0 +1,95 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+type UseStateHook<T> = [[boolean, T | null], (value: T | null) => void];
+
+function useAsyncState<T>(
+    initialValue: [boolean, T | null] = [true, null],
+): UseStateHook<T> {
+    return React.useReducer(
+        (state: [boolean, T | null], action: T | null = null): [boolean, T | null] => [false, action],
+        initialValue
+    ) as UseStateHook<T>;
+}
+
+
+
+export async function setStorageItemAsync(key: string, value: object | string | null) {
+    if (typeof value === 'object') {
+        value = JSON.stringify(value);
+    }
+
+    if (Platform.OS === 'web') {
+        try {
+            if (value === null) {
+                localStorage.removeItem(key);
+            } else {
+                localStorage.setItem(key, value);
+            }
+        } catch (e) {
+            console.error('Local storage is unavailable:', e);
+        }
+    } else {
+        if (value == null) {
+            await AsyncStorage.removeItem(key);
+        } else {
+            await AsyncStorage.setItem(key, value);
+        }
+    }
+}
+
+export function useStorageState(key: string): UseStateHook<string> {
+    const isJson = () => {
+        try {
+            const result = JSON.parse(str);
+            const type = Object.prototype.toString.call(result);
+            return type === '[object Object]'
+                || type === '[object Array]';
+        } catch (err) {
+            return false;
+        }
+    }
+    // Public
+    const [state, setState] = useAsyncState<string|object>();
+    // Get
+
+    React.useEffect(() => {
+        if (Platform.OS === 'web') {
+            try {
+                if (typeof localStorage !== 'undefined') {
+                    value = localStorage.getItem(key);
+
+                    if (isJson(value)) {
+                        value = JSON.parse(value);
+                    }
+
+                    setState(value);
+                }
+            } catch (e) {
+                console.error('Local storage is unavailable:', e);
+            }
+        } else {
+            AsyncStorage.getItem(key).then(value => {
+
+                if (isJson(value)) {
+                    value = JSON.parse(value);
+                }
+
+                setState(value);
+            });
+        }
+    }, [key]);
+
+
+    // Set
+    const setValue = React.useCallback(
+        (value: object | string | null) => {
+            setState(value);
+            setStorageItemAsync(key, value);
+        },
+        [key]
+    );
+
+    return [state, setValue];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -31,6 +31,7 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.24.0",
     "@react-native-community/datetimepicker": "^8.2.0",
+    "@react-native-community/netinfo": "^11.3.2",
     "apisauce": "^3.0.1",
     "expo-auth-session": "^5.5.2",
     "expo-camera": "^15.0.13",

package/screens/WelcomeScreen.tsx

@@ -4,10 +4,12 @@ import {exchangeCodeAsync, makeRedirectUri, useAuthRequest} from "expo-auth-sess
 
 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'}) {
+function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}, title = 'BONE FRAMEWORK', isLoading = false}) {
     return (
         <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
+            <ActivityIndicator visible={isLoading} type={'overlay'}/>
             <View style={styles.logoContainer}>
                 <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
                 <Text style={styles.tagline}>{ title }</Text>

package/utilities/json.ts

@@ -0,0 +1,13 @@
+const hasJsonStructure = (str) =>  {
+    if (typeof str !== 'string') return false;
+    try {
+        const result = JSON.parse(str);
+        const type = Object.prototype.toString.call(result);
+        return type === '[object Object]'
+            || type === '[object Array]';
+    } catch (err) {
+        return false;
+    }
+}
+
+export default {hasJsonStructure};

package/Bone.ts

@@ -1,6 +0,0 @@
-import Components from "./Components";
-import Hooks from "./Hooks";
-import Screens from "./Screens";
-import Utilities from "./Utilities";
-
-export default {Components, Hooks, Screens, Utilities}

package/Components.ts

@@ -1 +0,0 @@
-export default {}

package/Contexts.ts

@@ -1 +0,0 @@
-export default {}

package/Hooks.ts

@@ -1,3 +0,0 @@
-import useAuth from './hooks/useAuth';
-
-export default { useAuth }

package/Screens.ts

@@ -1,4 +0,0 @@
-import RegisterScreen from './screens/RegisterScreen'
-import WelcomeScreen from './screens/WelcomeScreen'
-
-export default { RegisterScreen, WelcomeScreen }

package/Utilities.ts

@@ -1 +0,0 @@
-export default {}