@boneframework/native-components 1.0.25 → 1.0.27

package/components/Image.tsx

@@ -4,16 +4,12 @@ import {Image as ExpoImage} from "expo-image";
 import useAuth from "../hooks/useAuth";
 import settings from '../../../../config/api';
 
-function Image({style, uri, onPress, handleError, source, ...rest}) {
+function Image({style, uri, onPress, handleError = error => console.error, source, ...rest}) {
     const {user} = useAuth();
 
     const tryAgain = async error => {
-        if (handleError !== null) {
-            handleError();
-        }
-        setTimeout(() => {
-
-        }, 1000);
+        handleError();
+        setTimeout(() => {}, 1000);
     };
     let imageSource;
     let protectedUri = false;
@@ -49,10 +45,6 @@ function Image({style, uri, onPress, handleError, source, ...rest}) {
     }
 }
 
-const styles = StyleSheet.create({
-    container: {}
-})
-
 export default Image;
 
 

package/hooks/useCache.js

@@ -0,0 +1,7 @@
+import {useEffect} from "react";
+
+import cache from '../utility/cache'
+
+export default useCache = () => {
+    return cache;
+};

package/hooks/useNavigationTheme.js

@@ -0,0 +1,19 @@
+import {DarkTheme, DefaultTheme} from "@react-navigation/native";
+
+import useStyle from "./useStyle";
+import colors from "../../../../config/colors";
+
+export default useNavigationTheme = () => {
+    const style = useStyle();
+    const theme = style.dark ? DarkTheme : DefaultTheme
+    return {
+        ...theme,
+        colors: {
+            ...theme.colors,
+            primary: style.text.color,
+            background: style.backgroundColor,
+            card: style.backgroundColor
+        },
+        dark: style.dark
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -39,14 +39,15 @@
     "expo-device": "^6.0.2",
     "expo-image": "^1.12.13",
     "expo-image-picker": "^15.0.7",
+    "expo-location": "~17.0.1",
     "expo-notifications": "^0.28.11",
     "expo-secure-store": "^13.0.2",
     "formik": "^2.4.6",
     "jwt-decode": "^4.0.0",
     "lottie-react-native": "^6.7.2",
     "react": "18.2.0",
+    "react-native-maps": "^1.17.3",
     "react-native-progress": "^5.0.1",
-    "yup": "^1.4.0",
-    "expo-location": "~17.0.1"
+    "yup": "^1.4.0"
   }
 }

package/screens/EditProfileScreen.tsx

@@ -0,0 +1,249 @@
+import React, {useEffect, useState} from 'react';
+import {
+    Alert,
+    Button,
+    KeyboardAvoidingView,
+    Platform,
+    ScrollView,
+    StyleSheet,
+    TouchableWithoutFeedback,
+    View
+} from "react-native"
+import {Field} from "formik";
+import * as FileSystem from 'expo-file-system';
+import {useAsyncStorage} from "@react-native-async-storage/async-storage";
+import * as Yup from "yup";
+
+import colors from '../../../../config/colors';
+import ImageInput from '../components/ImageInput';
+import Image from '../components/Image';
+import Screen from '../components/Screen';
+import Text from '../components/Text';
+import {Form, FormDateTimePicker, FormField, SubmitButton} from "../components/forms";
+import ActivityIndicator from "../components/ActivityIndicator";
+import UploadScreen from "./UploadScreen";
+import useApi from "../hooks/useApi";
+import userApi from "../api/users";
+import useAuth from "../hooks/useAuth";
+import useCache from "../hooks/useCache";
+import useCamera from "../hooks/useCamera";
+import usePhotos from "../hooks/usePhotos";
+import useStyle from "../hooks/useStyle";
+
+const validationSchema = Yup.object().shape({
+    firstname: Yup.string().required().min(2).max(60).label('First name'),
+    middlename: Yup.string().min(1).max(60).label('Middle name'),
+    lastname: Yup.string().required().min(1).max(60).label('Last name'),
+    aka: Yup.string().min(1).max(50).label('Display name'),
+    dob: Yup.date().required().label('Date of birth'),
+    birthplace: Yup.string().required().label('Birthplace'),
+    country: Yup.string().required().min(2).max(3).label('Country')
+});
+
+function EditProfileScreen(props) {
+    const [progressVisible, setProgressVisible] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [profileImage, setProfileImage] = useState(null);
+    const [profileBackground, setProfileBackground] = useState(null);
+    const style = useStyle();
+
+    const { updateUser, user} = useAuth();
+    const updateProfileApi = useApi(userApi.updateProfile);
+    const userImageUploadApi = useApi(userApi.uploadUserImage);
+    const userImageApi = useApi(userApi.userImage);
+    const userBackgroundImageUploadApi = useApi(userApi.uploadUserBackgroundImage);
+    const userBackgroundImageApi = useApi(userApi.userBackgroundImage);
+    const camera = useCamera();
+    const photos = usePhotos();
+    const person = user.person;
+
+    useEffect(() => {
+        if(!profileImage) {
+            setProfileImage(user.person.image);
+        }
+        if(!profileImage) {
+            setProfileBackground(user.person.backgroundImage);
+        }
+    }, [])
+
+    const handleSubmit = values => {
+        updateProfileApi.request(values)
+            .then(data => {
+                user.person = data.data;
+                updateUser(user);
+
+            })
+            .catch(console.error)
+    };
+
+    const cameraOrPhotos = phptoOrBackground => {
+        const title = phptoOrBackground ===  'image' ? 'Edit Profile Photo' : 'Edit Profile Background'
+        Alert.alert(
+            title,
+            null,
+            [
+                { text: 'Photos', onPress: () => selectImage('photos', phptoOrBackground) },
+                { text: 'Camera', onPress: () => selectImage('camera', phptoOrBackground) },
+                { text: 'Cancel', style: 'cancel' }
+            ]
+        );
+    }
+
+    const selectImage = async (pickerType, phptoOrBackground) => {
+        try {
+            if (pickerType === 'camera') {
+                const result = await camera.takePhoto({
+                    allowsEditing: true,
+                    base64: true,
+                    quality: 0.5
+                });
+                if (!result.canceled) {
+                    handleSelection(result.assets[0].uri, phptoOrBackground);
+                }
+            } else {
+                const result = await photos.selectImage({
+                    quality: 0.5,
+                    base64: true
+                });
+
+                if (!result.canceled) {
+                    handleSelection(result.assets[0].uri, phptoOrBackground);
+                }
+            }
+
+        } catch (error) {
+            Alert.alert('Image error', 'Error reading image');
+            console.error(error);
+        }
+    };
+
+    const handleSelection = (uri, phptoOrBackground) => {
+        if (phptoOrBackground === 'background-image')  {
+            uploadImage(uri, userBackgroundImageUploadApi, 'background');
+            setProfileBackground(uri);
+            user.person.backgroundImage = uri;
+        } else {
+            uploadImage(uri, userImageUploadApi, 'avatar');
+            setProfileImage(uri);
+            user.person.image = uri;
+        }
+        updateUser(user);
+    }
+
+    const uploadImage = async (url, api, fieldName) => {
+        let formData = new FormData();
+        let filename = url.split('/').pop();
+        let match = /\.(\w+)$/.exec(filename);
+        let type = match ? `image/${match[1]}` : `image`;
+        formData.append(fieldName, { uri: url, name: filename, type });
+        const response = await api.request(formData).catch(e => {
+            console.error('upload error', e);
+        });
+    }
+
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: style.backgroundColor
+        },
+        wallpaper: {
+            height: 240,
+            width: '100%',
+            backgroundColor: colors.secondary
+        },
+        image: {
+            width: 150,
+            height: 150,
+            borderRadius: 75,
+            marginTop: -75,
+            borderColor: colors.white,
+            borderWidth: 7,
+            backgroundColor: colors.light,
+        },
+        fullWidth: {
+            width: '100%'
+        },
+        centred: {
+            width: '100%',
+        },
+        imageContainer: {
+            alignItems: "center",
+            width: '100%',
+        }
+    })
+
+    return (
+        <>
+            <KeyboardAvoidingView
+                behavior="position"
+                keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 140}
+                style={styles.container}
+            >
+                <ActivityIndicator visible={updateProfileApi.loading || userImageApi.loading || userImageUploadApi.loading || userBackgroundImageApi.loading || userBackgroundImageUploadApi.loading  } type={'overlay'}/>
+                <UploadScreen onDone={() => setProgressVisible(false)} progress={progress} visible={progressVisible}/>
+                <ScrollView contentContainerStyle={styles.centred}>
+                    <TouchableWithoutFeedback onPress={() => {cameraOrPhotos('background-image')}} >
+                        <View style={styles.wallpaper}>
+                            <Image style={styles.wallpaper} uri={profileBackground} />
+                        </View>
+                    </TouchableWithoutFeedback>
+
+                    <TouchableWithoutFeedback onPress={() => {cameraOrPhotos('image')}} >
+                        <View style={styles.imageContainer}>
+                            <Image style={styles.image} uri={profileImage} />
+                        </View>
+                    </TouchableWithoutFeedback>
+
+                    <Form
+                        initialValues={{
+                            firstname: person.firstname,
+                            middlename: person.middlename,
+                            lastname: person.lastname,
+                            aka: person.aka,
+                            dob: person.dob ? new Date(person.dob) : new Date(),
+                            birthplace: person.birthplace,
+                            image: person.image,
+                            country: person.country?.iso,
+                        }}
+                        onSubmit={handleSubmit}
+                        validationSchema={validationSchema}
+                    >
+                        <FormField
+                            name="firstname"
+                            placeholder="First name"
+                            maxLength={60}
+                        />
+                        <FormField
+                            name="middlename"
+                            placeholder="Middle name"
+                            maxLength={60}
+                        />
+                        <FormField
+                            name="lastname"
+                            placeholder="Last name"
+                            maxLength={60}
+                        />
+                        <FormField
+                            name="aka"
+                            placeholder="Display name"
+                            maxLength={50}
+                        />
+                        <FormDateTimePicker name={'dob'}/>
+                        <FormField
+                            name="birthplace"
+                            placeholder="Birthplace"
+                            maxLength={50}
+                        />
+                        <FormField
+                            name="country"
+                            placeholder="Country"
+                            maxLength={3}
+                        />
+                        <SubmitButton color="primary" title="Update profile"/>
+                    </Form>
+                </ScrollView>
+            </KeyboardAvoidingView>
+        </>
+    );
+}
+
+export default EditProfileScreen;