Added image picker and cleaned up main and job list screens.

components/screen-media-cache/screen-media-cache.component.jsx

@@ -1,9 +1,11 @@
-import { Button, Container, Spinner, Text as NBText, View } from "native-base";
+import _ from "lodash";
+import { Button, Spinner, Text as NBText, View } from "native-base";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   FlatList,
   Image,
+  SafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -38,24 +40,14 @@ export function ScreenMediaCache({
   const { t } = useTranslation();
   const [previewVisible, setPreviewVisible] = useState(false);
   const [imgIndex, setImgIndex] = useState(0);
-  const [imagesInDir, setImagesInDir] = useState([]);
 
-  console.log("Photos", photos);
-
-  return (
-    <Container>
-      <View style={styles.actions}>
-        <Button onPress={() => removeAllPhotos()}>
-          <NBText>{t("mediacache.actions.deleteall")}</NBText>
-        </Button>
-        <Button onPress={() => uploadAllphotos()}>
-          <NBText>{t("mediacache.actions.uploadall")}</NBText>
-          {uploadInProgress && <Spinner />}
-        </Button>
-      </View>
+  const groupedPhotos = _.groupBy(photos, "jobId");
 
+  const RenderJobPictures = ({ jobId, jobPhotos }) => (
+    <View>
+      <Text>{jobId}</Text>
       <FlatList
-        data={photos}
+        data={jobPhotos}
         style={{ flex: 1 }}
         contentContainerStyle={styles.listContentContainer}
         keyExtractor={(item) => item.id}
@@ -83,6 +75,32 @@ export function ScreenMediaCache({
           )
         }
       />
+    </View>
+  );
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.actions}>
+        <Button onPress={() => removeAllPhotos()}>
+          <NBText>{t("mediacache.actions.deleteall")}</NBText>
+        </Button>
+        <Button onPress={() => uploadAllphotos()}>
+          <NBText>{t("mediacache.actions.uploadall")}</NBText>
+          {uploadInProgress && <Spinner />}
+        </Button>
+      </View>
+      <FlatList
+        data={groupedPhotos ? Object.keys(groupedPhotos) : []}
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.listContentContainer}
+        keyExtractor={(item) => item}
+        renderItem={(object) => (
+          <RenderJobPictures
+            jobPhotos={groupedPhotos[object.item]}
+            jobId={object.item}
+          />
+        )}
+      />
       <MediaCacheOverlay
         imgIndex={imgIndex}
         setImgIndex={setImgIndex}
@@ -90,7 +108,7 @@ export function ScreenMediaCache({
         setPreviewVisible={setPreviewVisible}
       />
       <Text>{`${photos.length} Photos`}</Text>
-    </Container>
+    </SafeAreaView>
   );
 }