Minimally functional app after expo upgrade.

app.json

@@ -2,19 +2,19 @@
   "expo": {
     "name": "ImEX Mobile",
     "slug": "imexmobile",
-    "version": "1.2.3",
+    "version": "1.3.0",
     "extra": { "expover": "1" },
     "orientation": "default",
     "icon": "./assets/logo192noa.png",
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.imex.imexmobile",
-      "buildNumber": "1.2.3",
+      "buildNumber": "1.3.0",
       "googleServicesFile": "./GoogleService-Info.plist"
     },
     "android": {
       "package": "com.imex.imexmobile",
-      "versionCode": 1020300,
+      "versionCode": 1030000,
       "googleServicesFile": "./google-services.json"
     },
     "splash": {

components/job-list/job-list.component.jsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@apollo/client";
 import React from "react";
-import { RefreshControl, View, Text } from "react-native";
+import { RefreshControl, View, Text, FlatList } from "react-native";
-import { FlatList } from "react-native-gesture-handler";
+
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";

components/screen-main/screen-main.component.jsx

@@ -107,6 +107,15 @@ const MoreStackNavigator = () => (
 const BottomTabsNavigator = () => (
   <BottomTabs.Navigator
     screenOptions={({ route }) => ({
+      // tabBarActiveTintColor: "dodgerblue",
+      // tabBarInactiveTintColor: "slategrey",
+      // tabBarStyle: [
+      //   {
+      //     display: "flex",
+      //   },
+      //   null,
+      // ],
+
       // eslint-disable-next-line react/display-name
       tabBarIcon: ({ color, size }) => {
         let iconName;
@@ -123,24 +132,27 @@ const BottomTabsNavigator = () => (
         return <Ionicons name={iconName} size={size} color={color} />;
       },
     })}
-    tabBarOptions={{
-      activeTintColor: "dodgerblue",
-      inactiveTintColor: "slategrey",
-    }}
   >
     <BottomTabs.Screen
       name="JobTab"
-      options={{ title: i18n.t("joblist.titles.jobtab") }}
+      options={{
+        title: i18n.t("joblist.titles.jobtab"),
+
+        headerShown: false,
+      }}
       component={JobStackNavigator}
     />
     <BottomTabs.Screen
       name="MediaBrowserTab"
-      options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
+      options={{
+        title: i18n.t("mediabrowser.titles.mediabrowsertab"),
+        headerShown: false,
+      }}
       component={MediaBrowserStackNavigator}
     />
     <BottomTabs.Screen
       name="MoreTab"
-      options={{ title: i18n.t("more.titles.moretab") }}
+      options={{ title: i18n.t("more.titles.moretab"), headerShown: false }}
       component={MoreStackNavigator}
     />
   </BottomTabs.Navigator>
@@ -152,7 +164,7 @@ export function ScreenMainComponent({
   bodyshop,
 }) {
   useEffect(() => {
-    checkUserSession();
+    checkUserSession;
   }, [checkUserSession]);
 
   return (

components/screen-media-browser/screen-media-browser.component.jsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { AssetsSelector } from "expo-images-picker";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { StyleSheet, Text, View } from "react-native";
 import { connect } from "react-redux";
@@ -11,6 +11,7 @@ import CameraSelectJob from "../camera-select-job/camera-select-job.component";
 import JobSpaceAvailable from "../job-space-available/job-space-available.component";
 import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
 import UploadProgress from "../upload-progress/upload-progress.component";
+import { MediaType } from "expo-media-library";
 
 const mapStateToProps = createStructuredSelector({
   selectedCameraJobId: selectCurrentCameraJobId,
@@ -29,6 +30,93 @@ export function ImageBrowserScreen({ selectedCameraJobId }) {
     if (data.length !== 0) setUploads(data);
   };
 
+  const widgetErrors = useMemo(
+    () => ({
+      errorTextColor: "black",
+      errorMessages: {
+        hasErrorWithPermissions: "Please Allow media gallery permissions.",
+        hasErrorWithLoading: "There was an error while loading images.",
+        hasErrorWithResizing: "There was an error while loading images.",
+        hasNoAssets: "No images found.",
+      },
+    }),
+    []
+  );
+
+  const widgetSettings = useMemo(
+    () => ({
+      getImageMetaData: false, // true might perform slower results but gives meta data and absolute path for ios users
+      initialLoad: 100,
+      assetsType: [MediaType.photo, MediaType.video],
+      minSelection: 1,
+      maxSelection: 3,
+      portraitCols: 4,
+      landscapeCols: 4,
+    }),
+    []
+  );
+
+  const widgetResize = useMemo(
+    () => ({
+      width: 50,
+      compress: 0.7,
+      base64: false,
+      saveTo: "jpeg",
+    }),
+    []
+  );
+
+  const _textStyle = {
+    color: "white",
+  };
+
+  const _buttonStyle = {
+    backgroundColor: "orange",
+    borderRadius: 5,
+  };
+
+  const widgetNavigator = useMemo(
+    () => ({
+      Texts: {
+        finish: t("mediabrowser.actions.upload"),
+        back: t("mediabrowser.actions.refresh"),
+        selected: "selected",
+      },
+      midTextColor: "black",
+      minSelection: 1,
+      buttonTextStyle: styles.textStyle,
+      buttonStyle: styles.buttonStyle,
+      onBack: () => {
+        forceRerender();
+      },
+      onSuccess: onDone,
+    }),
+    []
+  );
+
+  const widgetStyles = useMemo(
+    () => ({
+      margin: 2,
+      bgColor: "white",
+      spinnerColor: "blue",
+      widgetWidth: 99,
+      videoIcon: {
+        Component: Ionicons,
+        iconName: "ios-videocam",
+        color: "white",
+        size: 20,
+      },
+      selectedIcon: {
+        Component: Ionicons,
+        iconName: "ios-checkmark-circle-outline",
+        color: "white",
+        bg: "rgba(35,35,35, 0.75)",
+        size: 32,
+      },
+    }),
+    []
+  );
+
   return (
     <View style={[styles.flex, styles.container]}>
       <CameraSelectJob />
@@ -49,62 +137,10 @@ export function ImageBrowserScreen({ selectedCameraJobId }) {
         <AssetsSelector
           style={{ flex: 1 }}
           key={tick}
-          options={{
+          Settings={widgetSettings}
-            assetsType: ["photo", "video"],
+          Errors={widgetErrors}
-            margin: 3,
+          Styles={widgetStyles}
-            portraitCols: 4,
+          Navigator={widgetNavigator}
-            landscapeCols: 6,
-            widgetWidth: 100,
-            widgetBgColor: "white",
-            selectedBgColor: "#adadad",
-            spinnerColor: "#c8c8c8",
-            videoIcon: {
-              Component: Ionicons,
-              iconName: "ios-videocam",
-              color: "white",
-              size: 20,
-            },
-            selectedIcon: {
-              Component: Ionicons,
-              iconName: "ios-checkmark-circle-outline",
-              color: "white",
-              bg: "rgba(35,35,35, 0.75)",
-              size: 32,
-            },
-            defaultTopNavigator: {
-              continueText: t("mediabrowser.actions.upload"),
-              goBackText: t("mediabrowser.actions.refresh"),
-              buttonStyle: styles.buttonStyle,
-              textStyle: styles.textStyle,
-              backFunction: () => {
-                forceRerender();
-              },
-              doneFunction: onDone,
-            },
-
-            noAssets: {
-              Component: function NoAsset() {
-                return (
-                  <View
-                    style={{
-                      display: "flex",
-                      flex: 1,
-                      height: 200,
-                      marginHorizontal: 20,
-
-                      alignItems: "center",
-                      justifyContent: "center",
-                    }}
-                  >
-                    <Ionicons name="ios-camera" size={72} />
-                    <Text style={{ textAlign: "center", marginTop: 10 }}>
-                      {t("mediabrowser.labels.nomedia")}
-                    </Text>
-                  </View>
-                );
-              },
-            },
-          }}
         />
       )}
       <UploadProgress uploads={uploads} forceRerender={forceRerender} />
@@ -130,3 +166,60 @@ const styles = StyleSheet.create({
 });
 
 export default connect(mapStateToProps, null)(ImageBrowserScreen);
+
+// options={{
+//             assetsType: ["photo", "video"],
+//             margin: 3,
+//             portraitCols: 4,
+//             landscapeCols: 6,
+//             widgetWidth: 100,
+//             widgetBgColor: "white",
+//             selectedBgColor: "#adadad",
+//             spinnerColor: "#c8c8c8",
+//             videoIcon: {
+//               Component: Ionicons,
+//               iconName: "ios-videocam",
+//               color: "white",
+//               size: 20,
+//             },
+//             selectedIcon: {
+//               Component: Ionicons,
+//               iconName: "ios-checkmark-circle-outline",
+//               color: "white",
+//               bg: "rgba(35,35,35, 0.75)",
+//               size: 32,
+//             },
+//             defaultTopNavigator: {
+//               continueText: t("mediabrowser.actions.upload"),
+//               goBackText: t("mediabrowser.actions.refresh"),
+//               buttonStyle: styles.buttonStyle,
+//               textStyle: styles.textStyle,
+//               backFunction: () => {
+//                 forceRerender();
+//               },
+//               doneFunction: onDone,
+//             },
+
+//             noAssets: {
+//               Component: function NoAsset() {
+//                 return (
+//                   <View
+//                     style={{
+//                       display: "flex",
+//                       flex: 1,
+//                       height: 200,
+//                       marginHorizontal: 20,
+
+//                       alignItems: "center",
+//                       justifyContent: "center",
+//                     }}
+//                   >
+//                     <Ionicons name="ios-camera" size={72} />
+//                     <Text style={{ textAlign: "center", marginTop: 10 }}>
+//                       {t("mediabrowser.labels.nomedia")}
+//                     </Text>
+//                   </View>
+//                 );
+//               },
+//             },
+//           }}

components/upload-progress/upload-progress.component.jsx

@@ -173,7 +173,8 @@ export function UploadProgress({
 
     if (deleteAfterUpload) {
       try {
-        await MediaLibrary.deleteAssetsAsync(filesToDelete);
+        const result = await MediaLibrary.deleteAssetsAsync(filesToDelete);
+        console.log("Delete Result", result);
       } catch (error) {
         console.log("Unable to delete picture.", error);
       }

firebase/firebase.utils.js

@@ -1,15 +1,26 @@
-import firebase from "firebase/app";
+import { initializeApp } from "firebase/app";
-import "firebase/auth";
+import { getAuth, onAuthStateChanged } from "firebase/auth";
 import env from "../env";
+import { store } from "../redux/store";
+import { signInSuccess, unauthorizedUser } from "../redux/user/user.actions";
 
-if (!firebase.apps.length) {
+initializeApp(env.firebase);
-  firebase.initializeApp(env.firebase);
-}
 
-export const auth = firebase.auth();
+export const auth = getAuth();
-//export const analytics = firebase.analytics();
 
-export default firebase;
+export const unsubscribe = onAuthStateChanged(auth, (user) => {
+  store.dispatch(
+    user
+      ? signInSuccess({
+          uid: user.uid,
+          email: user.email,
+          displayName: user.displayName,
+          photoURL: user.photoURL,
+          authorized: true,
+        })
+      : unauthorizedUser()
+  );
+});
 
 export const getCurrentUser = () => {
   return new Promise((resolve, reject) => {
@@ -19,14 +30,3 @@ export const getCurrentUser = () => {
     }, reject);
   });
 };
-
-export const updateCurrentUser = (userDetails) => {
-  return new Promise((resolve, reject) => {
-    const unsubscribe = auth.onAuthStateChanged((userAuth) => {
-      userAuth.updateProfile(userDetails).then((r) => {
-        unsubscribe();
-        resolve(userAuth);
-      });
-    }, reject);
-  });
-};

metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("metro-config");
+const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();
+exports.resolver = {
+  ...defaultResolver,
+  sourceExts: [...defaultResolver.sourceExts, "cjs", "jsx"],
+};

package.json

@@ -14,66 +14,70 @@
     "build:android:test": "expo build:android --release-channel test"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.19",
+    "@apollo/client": "^3.5.6",
     "@expo/vector-icons": "^12.0.0",
-    "@react-native-async-storage/async-storage": "^1.13.0",
+    "@react-native-async-storage/async-storage": "~1.15.0",
     "@react-native-community/art": "^1.2.0",
-    "@react-native-community/masked-view": "0.1.10",
+    "@react-native-community/masked-view": "0.1.11",
-    "@react-navigation/bottom-tabs": "^5.11.11",
+    "@react-navigation/bottom-tabs": "^6.0.9",
-    "@react-navigation/drawer": "^5.12.5",
+    "@react-navigation/drawer": "^6.1.8",
-    "@react-navigation/native": "^5.9.4",
+    "@react-navigation/native": "^6.0.6",
-    "@react-navigation/stack": "^5.14.5",
+    "@react-navigation/stack": "^6.0.11",
-    "axios": "^0.21.0",
+    "axios": "^0.24.0",
-    "cloudinary-core": "^2.11.4",
+    "cloudinary-core": "^2.12.0",
-    "dinero.js": "^1.8.1",
+    "dinero.js": "^1.9.1",
-    "expo": "^41.0.0",
+    "expo": "^44.0.0",
-    "expo-app-loading": "^1.0.3",
+    "expo-app-loading": "~1.3.0",
-    "expo-av": "~9.1.2",
+    "expo-av": "~10.2.0",
-    "expo-camera": "~11.0.2",
+    "expo-camera": "~12.1.0",
-    "expo-file-system": "~11.0.2",
+    "expo-constants": "~13.0.0",
-    "expo-firebase-analytics": "~4.0.2",
+    "expo-device": "~4.1.0",
-    "expo-font": "~9.1.0",
+    "expo-file-system": "~13.1.0",
-    "expo-images-picker": "git+https://github.com/snaptsoft/expo-images-picker/",
+    "expo-firebase-analytics": "~6.0.0",
-    "expo-localization": "~10.1.0",
+    "expo-font": "~10.0.4",
-    "expo-media-library": "~12.0.2",
+    "expo-images-picker": "^2.2.3",
-    "expo-permissions": "~12.0.1",
+    "expo-localization": "~12.0.0",
-    "expo-status-bar": "~1.0.4",
+    "expo-media-library": "~14.0.0",
-    "expo-video-thumbnails": "~5.1.0",
+    "expo-permissions": "~13.1.0",
-    "firebase": "8.2.3",
+    "expo-status-bar": "~1.2.0",
-    "formik": "^2.2.8",
+    "expo-updates": "~0.11.3",
-    "graphql": "^15.4.0",
+    "expo-video-thumbnails": "~6.1.0",
-    "i18next": "^20.3.1",
+    "firebase": "9.6.1",
+    "formik": "^2.2.9",
+    "graphql": "^16.2.0",
+    "i18next": "^21.6.4",
     "lodash": "^4.17.20",
-    "luxon": "^1.27.0",
+    "luxon": "^2.2.0",
-    "react": "16.13.1",
+    "react": "17.0.2",
-    "react-dom": "16.13.1",
+    "react-dom": "17.0.2",
-    "react-i18next": "^11.10.0",
+    "react-i18next": "^11.15.2",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native": "0.64.3",
-    "react-native-gesture-handler": "~1.10.2",
+    "react-native-gesture-handler": "~2.1.0",
-    "react-native-image-gallery": "archriss/react-native-image-gallery#152/head",
+    "react-native-image-gallery": "^2.1.5",
     "react-native-indicators": "^0.17.0",
-    "react-native-pager-view": "5.0.12",
+    "react-native-pager-view": "5.4.9",
-    "react-native-paper": "^4.9.1",
+    "react-native-paper": "^4.11.1",
-    "react-native-progress": "^4.1.2",
+    "react-native-progress": "^5.0.0",
-    "react-native-reanimated": "~2.1.0",
+    "react-native-reanimated": "~2.3.1",
-    "react-native-screens": "~3.0.0",
+    "react-native-safe-area-context": "3.3.2",
-    "react-native-tab-view": "3.0.1",
+    "react-native-screens": "~3.10.1",
-    "react-native-web": "~0.13.12",
+    "react-native-tab-view": "3.1.1",
-    "react-redux": "^7.2.4",
+    "react-native-web": "0.17.5",
-    "redux": "^4.1.0",
+    "react-redux": "^7.2.6",
+    "redux": "^4.1.2",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
-    "reselect": "^4.0.0",
+    "reselect": "^4.1.5",
-    "sentry-expo": "^3.1.0",
+    "sentry-expo": "^4.0.0",
-    "subscriptions-transport-ws": "^0.9.18"
+    "subscriptions-transport-ws": "^0.11.0"
   },
   "devDependencies": {
-    "@babel/core": "~7.9.0",
+    "@babel/core": "^7.12.9",
-    "babel-preset-expo": "8.3.0",
+    "babel-preset-expo": "9.0.2",
-    "eslint": "^7.27.0",
+    "eslint": "^8.5.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-native": "^3.11.0"
+    "eslint-plugin-react-native": "^4.0.0"
   },
   "private": true
 }

redux/user/user.sagas.js

@@ -1,11 +1,8 @@
 import * as Analytics from "expo-firebase-analytics";
+import { signInWithEmailAndPassword, signOut } from "firebase/auth";
 import { all, call, put, takeLatest } from "redux-saga/effects";
-import {
-  auth,
-  getCurrentUser,
-  updateCurrentUser,
-} from "../../firebase/firebase.utils";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
+import { auth, getCurrentUser } from "../../firebase/firebase.utils";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { client } from "../../graphql/client";
 import {
@@ -17,7 +14,6 @@ import {
   signOutFailure,
   signOutSuccess,
   unauthorizedUser,
-  updateUserDetailsSuccess,
   validatePasswordResetFailure,
   validatePasswordResetSuccess,
 } from "./user.actions";
@@ -29,7 +25,7 @@ export function* onEmailSignInStart() {
 export function* signInWithEmail({ payload: { email, password } }) {
   try {
     logImEXEvent("imexmobile_sign_in_attempt", { user: email });
-    const { user } = yield auth.signInWithEmailAndPassword(email, password);
+    const { user } = yield signInWithEmailAndPassword(auth, email, password);
     yield put(
       signInSuccess({
         uid: user.uid,
@@ -53,6 +49,7 @@ export function* isUserAuthenticated() {
     //logImEXEvent("redux_auth_check");
 
     const user = yield getCurrentUser();
+
     if (!user) {
       yield put(unauthorizedUser());
       return;
@@ -78,26 +75,13 @@ export function* signOutStart() {
   try {
     logImEXEvent("imexmobile_sign_out");
 
-    yield auth.signOut();
+    yield signOut(auth);
     yield put(signOutSuccess());
   } catch (error) {
     yield put(signOutFailure(error.message));
   }
 }
 
-export function* onUpdateUserDetails() {
-  yield takeLatest(UserActionTypes.UPDATE_USER_DETAILS, updateUserDetails);
-}
-export function* updateUserDetails(userDetails) {
-  try {
-    yield updateCurrentUser(userDetails.payload);
-    yield put(updateUserDetailsSuccess(userDetails.payload));
-  } catch (error) {
-    //yield put(signOutFailure(error.message));
-    //TODO error handling
-  }
-}
-
 export function* onSignInSuccess() {
   yield takeLatest(UserActionTypes.SIGN_IN_SUCCESS, signInSuccessSaga);
 }
@@ -151,8 +135,6 @@ export function* userSagas() {
     call(onEmailSignInStart),
     call(onCheckUserSession),
     call(onSignOutStart),
-    call(onUpdateUserDetails),
-
     call(onSignInSuccess),
     call(onSendPasswordResetStart),
     call(onValidatePasswordResetStart),