Added loading of documents thumbnails

2020-12-09 20:45:45 -08:00
parent ee77860112
commit 2efac1ed2b
9 changed files with 134 additions and 24 deletions
--- a/components/job-documents/job-documents.component.jsx
+++ b/components/job-documents/job-documents.component.jsx
@@ -0,0 +1,79 @@
+import { Container, Content, Thumbnail } from "native-base";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  FlatList,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+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 { t } = useTranslation();
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [imgIndex, setImgIndex] = useState(0);
+
+  return (
+    <Container>
+      <Content padder>
+        <FlatList
+          data={job.documents}
+          style={{ flex: 1 }}
+          contentContainerStyle={styles.listContentContainer}
+          keyExtractor={(item) => item.id}
+          numColumns={4}
+          renderItem={(object) => (
+            <TouchableOpacity
+              onPress={() => {
+                // setImgIndex(object.index);
+                // setPreviewVisible(true);
+              }}
+            >
+              <Thumbnail
+                square
+                large
+                style={{ margin: 5 }}
+                source={{
+                  uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`,
+                }}
+              />
+            </TouchableOpacity>
+          )}
+        />
+        <Text>{job.documents.length}</Text>
+        <MediaCacheOverlay
+          imgIndex={imgIndex}
+          setImgIndex={setImgIndex}
+          previewVisible={previewVisible}
+          setPreviewVisible={setPreviewVisible}
+        />
+      </Content>
+    </Container>
+  );
+}
+
+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",
+  },
+});