From df23eb0947ef7b329fb34cf67597d5ca09837391 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 9 Mar 2021 20:56:13 -0800
Subject: [PATCH] Remove duplicated virtualized lists.

---
 .../job-documents/job-documents.component.jsx | 70 ++++++++---------
 components/job-lines/job-lines.component.jsx  | 78 +++++++++----------
 2 files changed, 70 insertions(+), 78 deletions(-)

diff --git a/components/job-documents/job-documents.component.jsx b/components/job-documents/job-documents.component.jsx
index 34f7c82..e81218e 100644
--- a/components/job-documents/job-documents.component.jsx
+++ b/components/job-documents/job-documents.component.jsx
@@ -1,4 +1,4 @@
-import { Container, Content, Thumbnail } from "native-base";
+import { Thumbnail } from "native-base";
 import React, { useState } from "react";
 import {
   FlatList,
@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
+  View,
 } from "react-native";
 import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
 
@@ -20,46 +21,41 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
     return refetch();
   };
   return (
-    <Container>
-      <Content
-        padder
+    <View>
+      <FlatList
         refreshControl={
           <RefreshControl refreshing={loading} onRefresh={onRefresh} />
         }
-      >
-        <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);
+        data={job.documents}
+        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}`,
               }}
-            >
-              <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>
+            />
+          </TouchableOpacity>
+        )}
+      />
+      <Text>{job.documents.length}</Text>
+      <MediaCacheOverlay
+        imgIndex={imgIndex}
+        setImgIndex={setImgIndex}
+        previewVisible={previewVisible}
+        setPreviewVisible={setPreviewVisible}
+      />
+    </View>
   );
 }
 
diff --git a/components/job-lines/job-lines.component.jsx b/components/job-lines/job-lines.component.jsx
index c16f7ee..7922a3e 100644
--- a/components/job-lines/job-lines.component.jsx
+++ b/components/job-lines/job-lines.component.jsx
@@ -1,11 +1,12 @@
-import { Card, CardItem, Container, Content, Text } from "native-base";
+import Dinero from "dinero.js";
+import { Card, CardItem, Text } from "native-base";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, RefreshControl, StyleSheet } from "react-native";
-import Dinero from "dinero.js";
+import { FlatList, RefreshControl, StyleSheet, View } from "react-native";
 
 export default function JobLines({ job, loading, refetch }) {
   const { t } = useTranslation();
+
   if (!job) {
     <Card>
       <Text>Job is not defined.</Text>
@@ -16,49 +17,44 @@ export default function JobLines({ job, loading, refetch }) {
   };
 
   return (
-    <Container>
-      <Content
-        padder
+    <View>
+      <FlatList
+        data={job.joblines}
         refreshControl={
           <RefreshControl refreshing={loading} onRefresh={onRefresh} />
         }
-      >
-        <FlatList
-          data={job.joblines}
-          style={{ flex: 1 }}
-          contentContainerStyle={localStyles.listContentContainer}
-          keyExtractor={(item) => item.id}
-          renderItem={(object) => (
-            <Card>
-              <CardItem style={localStyles.flexRow}>
-                <Text style={localStyles.growWithEllipsis}>{`${
-                  object.item.line_desc
-                }${
-                  object.item.part_qty > 1 ? ` x ${object.item.part_qty}` : ""
-                }`}</Text>
-                {object.item.part_type && (
-                  <Text style={localStyles.sideMargins}>
-                    {t(`jobdetail.part_types.${object.item.part_type}`)}
-                  </Text>
-                )}
+        contentContainerStyle={localStyles.listContentContainer}
+        keyExtractor={(item) => item.id}
+        renderItem={(object) => (
+          <Card>
+            <CardItem style={localStyles.flexRow}>
+              <Text style={localStyles.growWithEllipsis}>{`${
+                object.item.line_desc
+              }${
+                object.item.part_qty > 1 ? ` x ${object.item.part_qty}` : ""
+              }`}</Text>
+              {object.item.part_type && (
                 <Text style={localStyles.sideMargins}>
-                  {Dinero({
-                    amount: Math.round((object.item.act_price || 0) * 100),
-                  }).toFormat()}
+                  {t(`jobdetail.part_types.${object.item.part_type}`)}
                 </Text>
-              </CardItem>
-              <CardItem style={localStyles.flexRow}>
-                {object.item.mod_lbr_ty && (
-                  <Text>
-                    {t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
-                  </Text>
-                )}
-              </CardItem>
-            </Card>
-          )}
-        />
-      </Content>
-    </Container>
+              )}
+              <Text style={localStyles.sideMargins}>
+                {Dinero({
+                  amount: Math.round((object.item.act_price || 0) * 100),
+                }).toFormat()}
+              </Text>
+            </CardItem>
+            <CardItem style={localStyles.flexRow}>
+              {object.item.mod_lbr_ty && (
+                <Text>
+                  {t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
+                </Text>
+              )}
+            </CardItem>
+          </Card>
+        )}
+      />
+    </View>
   );
 }