Refactor to using RNP & UI Updates.

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

@@ -1,55 +1,78 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import {
   FlatList,
   Image,
   RefreshControl,
-  StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from "react-native";
+import env from "../../env";
+import { DetermineFileType } from "../../util/document-upload.utility";
 import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
 
-const REACT_APP_CLOUDINARY_IMAGE_ENDPOINT =
-  "https://res.cloudinary.com/bodyshop/image/upload";
-const REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS = "c_fill,f_auto,h_250,w_250";
-
 export default function JobDocumentsComponent({ job, loading, refetch }) {
   const [previewVisible, setPreviewVisible] = useState(false);
   const [imgIndex, setImgIndex] = useState(0);
   const onRefresh = async () => {
     return refetch();
   };
+
+  const fullphotos = useMemo(
+    () =>
+      job.documents.map((doc) => {
+        return {
+          source: {
+            uri: `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+              doc.type
+            )}/upload/${doc.key}`,
+          },
+        };
+      }),
+    [job.documents]
+  );
+
   return (
-    <View>
+    <View style={{ flex: 1 }}>
       <FlatList
         refreshControl={
           <RefreshControl refreshing={loading} onRefresh={onRefresh} />
         }
         data={job.documents}
-        contentContainerStyle={styles.listContentContainer}
-        keyExtractor={(item) => item.id}
         numColumns={4}
+        keyExtractor={(item) => item.id}
         renderItem={(object) => (
-          <TouchableOpacity
-            onPress={() => {
-              setImgIndex(object.index);
-              setPreviewVisible(true);
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "column",
+              margin: 5,
             }}
           >
-            <Image
-              style={{ margin: 5 }}
-              source={{
-                width: 100,
-                height: 100,
-                uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`,
+            <TouchableOpacity
+              onPress={() => {
+                setImgIndex(object.index);
+                setPreviewVisible(true);
               }}
-            />
-          </TouchableOpacity>
+            >
+              <Image
+                source={{
+                  width: 100,
+                  height: 100,
+                  uri: `${
+                    env.REACT_APP_CLOUDINARY_ENDPOINT
+                  }/${DetermineFileType(object.item.type)}/upload/${
+                    env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
+                  }/${object.item.key}`,
+                }}
+              />
+            </TouchableOpacity>
+          </View>
         )}
       />
       <Text>{job.documents.length}</Text>
       <MediaCacheOverlay
+        photos={fullphotos}
         imgIndex={imgIndex}
         setImgIndex={setImgIndex}
         previewVisible={previewVisible}
@@ -58,22 +81,3 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  actions: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-evenly",
-  },
-  listContentContainer: {
-    flex: 1,
-  },
-  thumbnail: {
-    width: 10,
-    height: 10,
-    backgroundColor: "tomato",
-  },
-});