support profile image update

app/mobile/ios/Databag.xcodeproj/project.pbxproj

@@ -246,12 +246,16 @@
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Databag/Pods-Databag-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

app/mobile/ios/Databag/Info.plist

@@ -22,6 +22,8 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+  <key>NSPhotoLibraryUsageDescription</key>
+  <string>Used to set profile image and post photos</string>
 	<key>NSAppTransportSecurity</key>
 	<dict>
 		<key>NSAllowsArbitraryLoads</key>

app/mobile/ios/Podfile.lock

@@ -314,6 +314,15 @@ PODS:
     - React-perflogger (= 0.69.5)
   - RNGestureHandler (2.6.1):
     - React-Core
+  - RNImageCropPicker (0.38.0):
+    - React-Core
+    - React-RCTImage
+    - RNImageCropPicker/QBImagePickerController (= 0.38.0)
+    - TOCropViewController
+  - RNImageCropPicker/QBImagePickerController (0.38.0):
+    - React-Core
+    - React-RCTImage
+    - TOCropViewController
   - RNReanimated (2.10.0):
     - DoubleConversion
     - FBLazyVector
@@ -341,6 +350,7 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
+  - TOCropViewController (2.6.0)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -387,12 +397,14 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
   trunk:
     - fmt
+    - TOCropViewController
 
 EXTERNAL SOURCES:
   boost:
@@ -479,6 +491,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNImageCropPicker:
+    :path: "../node_modules/react-native-image-crop-picker"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   Yoga:
@@ -528,7 +542,9 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: c778439c3c430a5719d027d3c67423b390a221fe
   ReactCommon: ab1003b81be740fecd82509c370a45b1a7dda0c1
   RNGestureHandler: 28ad20bf02257791f7f137b31beef34b9549f54b
+  RNImageCropPicker: ffbba608264885c241cbf3a8f78eb7aeeb978241
   RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa
+  TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
   Yoga: c2b1f2494060865ac1f27e49639e72371b1205fa
 
 PODFILE CHECKSUM: df5a4d8901f42ad69df9f07100579df01b20e7e8

app/mobile/package.json

@@ -21,6 +21,7 @@
     "react-native": "0.69.5",
     "react-native-base64": "^0.2.1",
     "react-native-gesture-handler": "^2.6.1",
+    "react-native-image-crop-picker": "^0.38.0",
     "react-native-reanimated": "^2.10.0",
     "react-native-safe-area-context": "^4.3.3",
     "react-native-safe-area-view": "^1.1.1",

app/mobile/src/session/profile/Profile.jsx

@@ -5,6 +5,7 @@ import { useProfile } from './useProfile.hook';
 import { Logo } from 'utils/Logo';
 import Ionicons from '@expo/vector-icons/AntDesign';
 import Colors from 'constants/Colors';
+import ImagePicker from 'react-native-image-crop-picker'
 
 export function Profile() {
 
@@ -23,18 +24,43 @@ export function Profile() {
     }
   }
 
+  const onGallery = async () => {
+    try {
+      const full = await ImagePicker.openPicker({ mediaType: 'photo', width: 256, height: 256 });
+      const crop = await ImagePicker.openCropper({ path: full.path, width: 256, height: 256, cropperCircleOverlay: true, includeBase64: true });
+      await actions.setProfileImage(crop.data);
+    }
+    catch (err) {
+      console.log(err);
+    }
+  }
+
+  const onCamera = async () => {
+    try {
+      const full = await ImagePicker.openCamera({ mediaType: 'photo', width: 256, height: 256 });
+      const crop = await ImagePicker.openCropper({ path: full.path, width: 256, height: 256, cropperCircleOverlay: true, includeBase64: true });
+      await actions.setProfileImage(crop.data);
+    }
+    catch (err) {
+      console.log(err);
+    }
+  }
+
   return (
     <ScrollView>
       <View style={styles.container}>
       <TouchableOpacity style={styles.header}>
         <Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
       </TouchableOpacity>
-      <TouchableOpacity style={{ width: 128 }}>
+      <View style={{ width: 128 }}>
         <Logo src={state.imageSource} width={128} height={128} radius={8} />
-        <View style={styles.edit}>
-          <Ionicons name="edit" size={14} color={Colors.white} />
-        </View>
-      </TouchableOpacity>
+        <TouchableOpacity style={styles.camera} onPress={onCamera}>
+          <Ionicons name="camerao" size={14} color={Colors.white} />
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.gallery} onPress={onGallery}>
+          <Ionicons name="picture" size={14} color={Colors.white} />
+        </TouchableOpacity>
+      </View>
       <TouchableOpacity style={styles.detail}>
         <View style={styles.attribute}>
           <Text style={styles.nametext}>{ state.name }</Text>
@@ -51,7 +77,7 @@ export function Profile() {
       </TouchableOpacity>
       <View style={styles.visible}>
         <Text style={styles.visibleText}>Visible in Registry</Text>
-        <Switch style={styles.visibleSwitch} value={state.searchable} onValueChange={setVisible} />
+        <Switch style={styles.visibleSwitch} value={state.searchable} onValueChange={setVisible} trackColor={styles.switch}/>
       </View>
       <TouchableOpacity style={styles.logout} onPress={actions.logout}>
         <Ionicons name="logout" size={14} color={Colors.white} />

app/mobile/src/session/profile/Profile.styled.js

@@ -24,11 +24,20 @@ export const styles = StyleSheet.create({
     paddingRight: 4,
     textDecorationLine: 'underline',
   },
-  edit: {
+  camera: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    padding: 8,
+    backgroundColor: Colors.lightgrey,
+    borderBottomLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  gallery: {
     position: 'absolute',
     bottom: 0,
     right: 0,
-    padding: 4,
+    padding: 8,
     backgroundColor: Colors.lightgrey,
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 8,
@@ -89,6 +98,10 @@ export const styles = StyleSheet.create({
   logoutText: {
     color: Colors.white,
     paddingLeft: 8,
-  }
+  },
+  switch: {
+    false: Colors.grey,
+    true: Colors.background,
+  },
 })
 

app/mobile/src/session/profile/useProfile.hook.js

@@ -43,6 +43,9 @@ export function useProfile() {
     setVisible: async (visible) => {
       await account.actions.setSearchable(visible);
     },
+    setProfileImage: async (data) => {
+      await profile.actions.setProfileImage(data);
+    },
   };
 
   return { state, actions };

app/mobile/yarn.lock

@@ -5512,6 +5512,11 @@ react-native-gradle-plugin@^0.0.7:
   resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz"
   integrity sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g==
 
+react-native-image-crop-picker@^0.38.0:
+  version "0.38.0"
+  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.38.0.tgz#3f67a0ec40618e3cd6e05d3e7b90e70d01eaddf8"
+  integrity sha512-FaLASXOP7R23pi20vMiVlXl0Y7cwTdl7y7yBqrlrsSH9gl9ibsU5y4mYWPYRbe8x9F/3zPGUE+1F0Gj/QF/peg==
+
 react-native-reanimated@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.10.0.tgz#ed53be66bbb553b5b5e93e93ef4217c87b8c73db"