Resolve jobs list refresh.

2022-01-12 15:26:50 -08:00
parent 972d2e3d3c
commit 352d57bb36
4 changed files with 182 additions and 92 deletions
--- a/components/job-list/job-list.component.jsx
+++ b/components/job-list/job-list.component.jsx
@@ -1,7 +1,8 @@
 import { useQuery } from "@apollo/client";
 import React from "react";
-import { RefreshControl, View, Text } from "react-native";
-import { FlatList } from "react-native-gesture-handler";
+import { useTranslation } from "react-i18next";
+import { FlatList, RefreshControl, Text, View } from "react-native";
+import { Button, Searchbar, Title } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
@@ -9,8 +10,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import ErrorDisplay from "../error-display/error-display.component";
 import JobListItem from "../job-list-item/job-list-item.component";
 import LoadingDisplay from "../loading-display/loading-display.component";
-import { Title, Button, Searchbar } from "react-native-paper";
-import { useTranslation } from "react-i18next";
+
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
 });
--- a/components/screen-main/screen-main.component.jsx
+++ b/components/screen-main/screen-main.component.jsx
@@ -5,7 +5,7 @@ import { createStackNavigator } from "@react-navigation/stack";
 import i18n from "i18next";
 import React, { useEffect } from "react";
 import { Button } from "react-native-paper";
-import { SafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
@@ -25,7 +25,7 @@ import ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.com
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
-import moment from "moment";
+
 const JobStack = createStackNavigator();
 const MoreStack = createStackNavigator();
 const BottomTabs = createBottomTabNavigator();
@@ -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>
@@ -155,27 +167,16 @@ export function ScreenMainComponent({
    checkUserSession();
  }, [checkUserSession]);

-  const hasMobileAccess =
-    bodyshop &&
-    bodyshop.features &&
-    (bodyshop.features.allAccess === true ||
-      moment(bodyshop.features.mobile).isAfter(moment()));
-
-  console.log(
-    "🚀  ~ file: screen-main.component.jsx  ~ line 171  ~ hasMobileAccess",
-    hasMobileAccess,
-    bodyshop && bodyshop.features
-  );
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <NavigationContainer>
        {currentUser.authorized === null ? (
          <ScreenSplash />
        ) : currentUser.authorized ? (
-          bodyshop && hasMobileAccess ? (
+          bodyshop ? (
            <BottomTabsNavigator />
          ) : (
-            <ScreenSplash noAccess />
+            <ScreenSplash />
          )
        ) : (
          <ScreenSignIn />
--- a/components/screen-media-browser/screen-media-browser.component.jsx
+++ b/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>
+//                 );
+//               },
+//             },
+//           }}