Added loading of documents thumbnails

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",
+  },
+});

components/job-notes-item/job-notes-item.component.jsx

@@ -7,7 +7,7 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 import styles from "../styles";
 import { AntDesign } from "@expo/vector-icons";
-
+import { DateTime } from "luxon";
 export default function NoteListItem({ item }) {
   const { t } = useTranslation();
 
@@ -40,7 +40,11 @@ export default function NoteListItem({ item }) {
                   color="tomato"
                 />
               )}
-              <Text style={{ fontSize: 12 }}>{item.created_at}</Text>
+              <Text style={{ fontSize: 12 }}>
+                {DateTime.fromISO(item.created_at).toLocaleString(
+                  DateTime.DATETIME_SHORT
+                )}
+              </Text>
             </View>
           </View>
         </CardItem>

components/job-notes/job-notes.component.jsx

@@ -1,18 +1,11 @@
-import Dinero from "dinero.js";
-import {
-  Card,
-  CardItem,
-  H3,
-  Text,
-  View,
-  Container,
-  Content,
-} from "native-base";
+import { Card, CardItem, H3, Text } from "native-base";
 import React from "react";
-import { StyleSheet, RefreshControl, FlatList } from "react-native";
+import { useTranslation } from "react-i18next";
+import { FlatList, RefreshControl } from "react-native";
 import JobNotesItem from "../job-notes-item/job-notes-item.component";
 
 export default function JobNotes({ job, loading, refetch }) {
+  const { t } = useTranslation();
   if (!!!job) {
     <Card>
       <Text>Job is not defined.</Text>
@@ -22,6 +15,14 @@ export default function JobNotes({ job, loading, refetch }) {
   const onRefresh = async () => {
     return refetch();
   };
+  if (job.notes.length === 0)
+    return (
+      <Card>
+        <CardItem>
+          <H3>{t("jobdetail.labels.nojobnotes")}</H3>
+        </CardItem>
+      </Card>
+    );
 
   return (
     <FlatList

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

@@ -8,6 +8,8 @@ import ErrorDisplay from "../error-display/error-display.component";
 import JobTombstone from "../job-tombstone/job-tombstone.component";
 import LoadingDisplay from "../loading-display/loading-display.component";
 import JobNotes from "../job-notes/job-notes.component";
+import JobDocuments from "../job-documents/job-documents.component";
+
 export default function ScreenJobDetail({ navigation, route, ...restProps }) {
   const {
     params: { jobId },
@@ -34,7 +36,11 @@ export default function ScreenJobDetail({ navigation, route, ...restProps }) {
         />
       </Tab>
       <Tab heading={t("jobdetail.labels.documents")}>
-        <Text>Tab1</Text>
+        <JobDocuments
+          job={data.jobs_by_pk}
+          loading={loading}
+          refetch={refetch}
+        />
       </Tab>
       <Tab heading={t("jobdetail.labels.notes")}>
         <JobNotes job={data.jobs_by_pk} loading={loading} refetch={refetch} />