Resolve jobs list refresh.

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={{
-            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>
-                );
-              },
-            },
-          }}
+          Settings={widgetSettings}
+          Errors={widgetErrors}
+          Styles={widgetStyles}
+          Navigator={widgetNavigator}
         />
       )}
       <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>
+//                 );
+//               },
+//             },
+//           }}