Remove expo-images-picker package and related code (#52)

* fix: remove old image picker code
fix: status needed in deps list to refresh closure

* deps: remove packages
test: fix photo selector tests to use new picker

apps/mobile/package.json

@@ -35,7 +35,6 @@
     "expo-font": "~12.0.4",
     "expo-image-manipulator": "~12.0.3",
     "expo-image-picker": "~15.0.4",
-    "expo-images-picker": "^2.5.1",
     "expo-location": "~17.0.1",
     "expo-media-library": "~16.0.3",
     "expo-splash-screen": "~0.27.4",
@@ -56,7 +55,6 @@
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
-    "styled-components": "5.1.1",
     "uuid": "^3.4.0"
   },
   "devDependencies": {

apps/mobile/src/components/forms/index.ts

@@ -2,7 +2,6 @@ export * from "./CustomTextInput";
 export * from "./DateSelector";
 export * from "./ExpoPhotoSelector";
 export * from "./GpsCoordinatesInput";
-export * from "./PhotoSelector";
 export * from "./TextArea";
 export * from "./TypeSelector";
 export * from "./UserIdentityInput";

apps/mobile/src/components/test/PhotoSelector.test.tsx

@@ -3,7 +3,7 @@ import { render, waitFor } from "@testing-library/react-native";
 import { NativeBaseProviderForTesting } from "../../../jesttest.setup";
 import { SelectedPhoto } from "../../../types";
 import { RootStackNavigationProp } from "../../navigation/Routes";
-import { PhotoSelector } from "../forms/PhotoSelector";
+import { ExpoPhotoSelector } from "../forms/ExpoPhotoSelector";
 
 const navigation: RootStackNavigationProp = {} as RootStackNavigationProp;
 navigation.goBack = () => {};
@@ -18,7 +18,12 @@ describe("PhotoSelector test suite", () => {
 
     const { getByText, toJSON } = render(
       <NativeBaseProviderForTesting>
-        <PhotoSelector navigation={navigation} photos={photos} />
+        <ExpoPhotoSelector
+          recordId="123"
+          photos={photos}
+          setSelectedPhotos={() => {}}
+          setStatus={() => {}}
+        />
       </NativeBaseProviderForTesting>,
     );
 
@@ -34,7 +39,12 @@ describe("PhotoSelector test suite", () => {
 
     const { getByText, toJSON } = render(
       <NativeBaseProviderForTesting>
-        <PhotoSelector navigation={navigation} photos={photos} />
+        <ExpoPhotoSelector
+          recordId="123"
+          photos={photos}
+          setSelectedPhotos={() => {}}
+          setStatus={() => {}}
+        />
       </NativeBaseProviderForTesting>,
     );
 

apps/mobile/src/navigation/MainTabNavigator.tsx

@@ -8,7 +8,6 @@ import {
 import { useColorModeValue, useTheme } from "native-base";
 import {
   FirstRunScreen,
-  ImagesPickerScreen,
   RecordDetailsScreen,
   RecordScreen,
   SettingsScreen,
@@ -71,11 +70,6 @@ function RootNavigator() {
       />
       <Stack.Screen name="Record" component={RecordScreen} />
       <Stack.Screen name="Settings" component={SettingsScreen} />
-      <Stack.Screen
-        name="ImageSelection"
-        component={ImagesPickerScreen}
-        options={{ title: "Camera Roll" }}
-      />
       <Stack.Screen
         name="RecordDetails"
         component={RecordDetailsScreen}

apps/mobile/src/navigation/Routes.ts

@@ -2,21 +2,16 @@ import {
   NativeStackNavigationProp,
   NativeStackScreenProps,
 } from "@react-navigation/native-stack";
-import { Asset } from "expo-media-library";
 
 type RecordScreenRouteProps = {
   record?: string; // when coming from Timeline, Edit Mode, JSON.stringify'd AlgaeRecord
-  photos?: Asset[]; // when coming (back) from Image Selection
 };
 
 export type RootStackParamList = {
   Welcome: undefined;
   Timeline: undefined;
   Record: RecordScreenRouteProps | undefined; // undefined => new record
   Settings: undefined;
-  ImageSelection: {
-    existingSelection?: string[];
-  };
   RecordDetails: { record: string }; // JSON.stringify'd MinimalAlgaeRecord
 };
 
@@ -41,14 +36,6 @@ export type RecordScreenProps = NativeStackScreenProps<
 export type RecordScreenNavigationProp = RecordScreenProps["navigation"];
 export type RecordScreenRouteProp = RecordScreenProps["route"];
 
-export type ImagesPickerScreenProps = NativeStackScreenProps<
-  RootStackParamList,
-  "ImageSelection"
->;
-export type ImagesPickerScreenNavigationProp =
-  ImagesPickerScreenProps["navigation"];
-export type ImagesPickerScreenRouteProp = ImagesPickerScreenProps["route"];
-
 export type RecordDetailsScreenProps = NativeStackScreenProps<
   RootStackParamList,
   "RecordDetails"

apps/mobile/src/screens/RecordScreen.tsx

@@ -26,7 +26,6 @@ import {
   DateSelector,
   ExpoPhotoSelector,
   GpsCoordinatesInput,
-  // PhotoSelector,
   TextArea,
 } from "../components/forms";
 import { getAppSettings } from "../../AppSettings";
@@ -127,26 +126,16 @@ export function RecordScreen({ navigation, route }: RecordScreenProps) {
 
   const [selectedPhotos, setSelectedPhotos] = useState<SelectedPhoto[]>([]);
 
-  // navigation.navigate(...) from ImagesPickerScreen with selected photos
+  // initialization; modifying existing record
   useEffect(() => {
-    // coming back from ImagePickerScreen
-    // TODO: be sure to test unselecting all
-    if (route?.params?.photos) {
-      setSelectedPhotos(route.params.photos);
-      PhotoManager.addSelected(record.id, route.params.photos);
-
-      return;
-    }
-
-    // initialization; modifying existing record
     if (editMode) {
       PhotoManager.getSelected(record.id).then((photos) => {
         if (photos) {
           setSelectedPhotos(photos);
         }
       });
     }
-  }, [route?.params?.photos, editMode, record.id]);
+  }, [editMode, record.id]);
 
   const today = recordDateFormat(dateWithOffset(new Date(), "subtract"));
   const dateString = recordDateFormat(record.date);
@@ -252,10 +241,10 @@ export function RecordScreen({ navigation, route }: RecordScreenProps) {
       headerRight: () => RecordAction,
     });
 
-    // event handlers need to refresh whenever state or photos update
+    // event handlers need to refresh whenever state, status, or photos update
     // this is safe because navigation header renders independently of screen
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [record, selectedPhotos]);
+  }, [record, status, selectedPhotos]);
 
   const setCoordinates = useCallback(
     ({ latitude, longitude }) =>
@@ -359,7 +348,6 @@ export function RecordScreen({ navigation, route }: RecordScreenProps) {
           />
 
           <Space />
-          {/* <PhotoSelector navigation={navigation} photos={selectedPhotos} /> */}
           <ExpoPhotoSelector
             recordId={record.id}
             photos={selectedPhotos}

apps/mobile/src/screens/index.ts

@@ -1,5 +1,4 @@
 export { FirstRunScreen } from "./FirstRunScreen";
-export { ImagesPickerScreen } from "./ImagesPickerScreen";
 export { RecordDetailsScreen } from "./RecordDetailsScreen";
 export { RecordScreen } from "./RecordScreen";
 export { SettingsScreen } from "./SettingsScreen";