IO-3092 Add imgproxy uploads and update expo version.

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

@@ -10,38 +10,93 @@ import {
 import env from "../../env";
 import { DetermineFileType } from "../../util/document-upload.utility";
 import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
-export default function JobDocumentsComponent({ job, loading, refetch }) {
-  const [previewVisible, setPreviewVisible] = useState(false);
+import { useEffect } from "react";
+import axios from "axios";
 
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobDocumentsComponent);
+
+export function JobDocumentsComponent({ bodyshop, job, loading, refetch }) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [fullphotos, setFullPhotos] = useState([]);
   const [imgIndex, setImgIndex] = useState(0);
   const onRefresh = async () => {
     return refetch();
   };
 
-  const fullphotos = useMemo(
-    () =>
-      job.documents.map((doc, idx) => {
-        return {
-          id: idx,
-          videoUrl:
-            DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
-          source:
-            DetermineFileType(doc.type) === "video"
-              ? { uri: GenerateThumbUrl(doc) }
-              : { uri: GenerateSrcUrl(doc) },
-          url:
-            DetermineFileType(doc.type) === "video"
-              ? GenerateThumbUrl(doc)
-              : GenerateSrcUrl(doc),
-          uri:
-            DetermineFileType(doc.type) === "video"
-              ? GenerateThumbUrl(doc)
-              : GenerateSrcUrl(doc),
-          thumbUrl: GenerateThumbUrl(doc),
-        };
-      }),
-    [job.documents]
-  );
+  useEffect(() => {
+    async function getPhotos() {
+      if (bodyshop.localmediatoken === "imgproxy") {
+        const result = await axios.post(
+          `${env.API_URL}/media/imgproxy/thumbnails`,
+          {
+            jobid: job.id,
+          }
+        );
+
+        setFullPhotos(
+          result.data.map((doc, idx) => {
+            return {
+              id: idx,
+              videoUrl:
+                DetermineFileType(doc.type) === "video" &&
+                doc.originalUrlViaProxyPath,
+              source:
+                DetermineFileType(doc.type) === "video"
+                  ? { uri: doc.thumbnailUrl }
+                  : { uri: doc.originalUrl },
+              url:
+                DetermineFileType(doc.type) === "video"
+                  ? doc.thumbnailUrl
+                  : doc.originalUrl,
+              uri:
+                DetermineFileType(doc.type) === "video"
+                  ? doc.originalUrlViaProxyPath
+                  : doc.originalUrl,
+              thumbUrl: doc.thumbnailUrl,
+            };
+          })
+        );
+      } else {
+        setFullPhotos(
+          job.documents.map((doc, idx) => {
+            return {
+              id: idx,
+              videoUrl:
+                DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
+              source:
+                DetermineFileType(doc.type) === "video"
+                  ? { uri: GenerateThumbUrl(doc) }
+                  : { uri: GenerateSrcUrl(doc) },
+              url:
+                DetermineFileType(doc.type) === "video"
+                  ? GenerateThumbUrl(doc)
+                  : GenerateSrcUrl(doc),
+              uri:
+                DetermineFileType(doc.type) === "video"
+                  ? GenerateThumbUrl(doc)
+                  : GenerateSrcUrl(doc),
+              thumbUrl: GenerateThumbUrl(doc),
+            };
+          })
+        );
+      }
+    }
+
+    getPhotos();
+  }, [job.documents]);
 
   return (
     <View style={{ flex: 1 }}>
@@ -49,7 +104,7 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
         refreshControl={
           <RefreshControl refreshing={loading} onRefresh={onRefresh} />
         }
-        data={job.documents}
+        data={fullphotos}
         numColumns={4}
         style={{ flex: 1 }}
         keyExtractor={(item) => item.id}
@@ -65,14 +120,15 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
               style={{ flex: 1 }}
               resizeMode="cover"
               source={{
-                uri: GenerateThumbUrl(object.item),
+                uri: object.item.thumbUrl,
                 aspectRatio: 1,
               }}
             />
           </TouchableOpacity>
         )}
       />
-      <Text>{job.documents.length}</Text>
+
+      <Text>{fullphotos.length}</Text>
 
       <MediaCacheOverlay
         photos={fullphotos}