IO-3092 Imgproxy changes, Split client,

components/job-documents/job-documents.component.jsx

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from "react";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
 import {
   FlatList,
   Image,
@@ -10,12 +11,12 @@ import {
 import env from "../../env";
 import { DetermineFileType } from "../../util/document-upload.utility";
 import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
-import { useEffect } from "react";
-import axios from "axios";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { splitClient } from "../screen-main/screen-main.component";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -32,13 +33,16 @@ export function JobDocumentsComponent({ bodyshop, job, loading, refetch }) {
   const [previewVisible, setPreviewVisible] = useState(false);
   const [fullphotos, setFullPhotos] = useState([]);
   const [imgIndex, setImgIndex] = useState(0);
+
+  const useImgproxy = splitClient.getTreatment("Imgproxy");
+
   const onRefresh = async () => {
     return refetch();
   };
 
   useEffect(() => {
     async function getPhotos() {
-      if (bodyshop.localmediatoken === "imgproxy") {
+      if (useImgproxy) {
         const result = await axios.post(
           `${env.API_URL}/media/imgproxy/thumbnails`,
           {
@@ -128,7 +132,11 @@ export function JobDocumentsComponent({ bodyshop, job, loading, refetch }) {
         )}
       />
 
-      <Text>{fullphotos.length}</Text>
+      <Text
+        style={{ textAlign: "center", color: useImgproxy ? "blue" : "black" }}
+      >
+        {fullphotos.length}
+      </Text>
 
       <MediaCacheOverlay
         photos={fullphotos}

components/screen-job-detail/screen-job-detail.component.jsx

@@ -58,17 +58,15 @@ export function ScreenJobDetail({ bodyshop, route }) {
       }),
 
     documents: () => {
-      return bodyshop.uselocalmediaserver
-        ? JobDocumentsLocalComponent({
-            job: data.jobs_by_pk,
-
-            bodyshop: bodyshop,
-          })
-        : JobDocuments({
-            job: data.jobs_by_pk,
-            loading: loading,
-            refetch: refetch,
-          });
+      return bodyshop.uselocalmediaserver ? (
+        <JobDocumentsLocalComponent job={data.jobs_by_pk} bodyshop={bodyshop} />
+      ) : (
+        <JobDocuments
+          job={data.jobs_by_pk}
+          loading={loading}
+          refetch={refetch}
+        />
+      );
     },
 
     notes: () =>

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

@@ -19,12 +19,14 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import env from "../../env";
 import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
 import ScreenJobList from "../screen-job-list/screen-job-list.component";
 import ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
 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 { SplitFactory } from "@splitsoftware/splitio-react-native";
 
 const ActiveJobStack = createNativeStackNavigator();
 const MoreStack = createNativeStackNavigator();
@@ -148,6 +150,8 @@ const BottomTabsNavigator = () => (
   </BottomTabs.Navigator>
 );
 
+export var splitClient;
+
 export function ScreenMainComponent({
   checkUserSession,
   currentUser,
@@ -157,6 +161,16 @@ export function ScreenMainComponent({
     checkUserSession();
   }, [checkUserSession]);
 
+  useEffect(() => {
+    if (bodyshop && bodyshop.imexshopid) {
+      splitClient = SplitFactory({
+        //debug: true,
+        core: { authorizationKey: env.SPLIT_API, key: bodyshop.imexshopid },
+      }).client();
+      splitClient.setAttribute("imexshopid", bodyshop.imexshopid);
+    }
+  }, [bodyshop]);
+
   return (
     <NavigationContainer>
       {currentUser.authorized === null ? (

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

@@ -271,8 +271,7 @@ export function UploadProgress({
         jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
         uploaded_by: currentUser.email,
         photo: p,
-      },
-      bodyshop.localmediatoken === "imgproxy" ? "imgproxy" : "" //Choose which destination to use.
+      }
     );
   };