Rename JSX to JS.

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

@@ -0,0 +1,140 @@
+import _ from "lodash";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Button } from "react-native-paper";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  removeAllPhotos,
+  uploadAllPhotos,
+} from "../../redux/photos/photos.actions";
+import {
+  selectPhotos,
+  selectUploadInProgress,
+} from "../../redux/photos/photos.selectors";
+import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
+
+const mapStateToProps = createStructuredSelector({
+  photos: selectPhotos,
+  uploadInProgress: selectUploadInProgress,
+});
+const mapDispatchToProps = (dispatch) => ({
+  removeAllPhotos: () => dispatch(removeAllPhotos()),
+  uploadAllphotos: () => dispatch(uploadAllPhotos()),
+});
+
+export function ScreenMediaCache({
+  photos,
+  removeAllPhotos,
+  uploadAllphotos,
+  uploadInProgress,
+}) {
+  const { t } = useTranslation();
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [imgIndex, setImgIndex] = useState(0);
+
+  const groupedPhotos = _.groupBy(photos, "jobId");
+
+  const RenderJobPictures = ({ jobId, jobPhotos }) => (
+    <View>
+      <Text>{jobId}</Text>
+      <FlatList
+        data={jobPhotos}
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.listContentContainer}
+        keyExtractor={(item) => item.id}
+        numColumns={4}
+        renderItem={(object) =>
+          object.item.video ? (
+            <Text>Video</Text>
+          ) : (
+            <TouchableOpacity
+              style={{
+                flex: 1 / 4, //here you can use flex:1 also
+                aspectRatio: 1,
+              }}
+              onPress={() => {
+                setImgIndex(object.index);
+                setPreviewVisible(true);
+              }}
+            >
+              <Image
+                source={{ uri: object.item.uri }}
+                style={{ flex: 1 }}
+                resizeMode="cover"
+              />
+            </TouchableOpacity>
+          )
+        }
+      />
+    </View>
+  );
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.actions}>
+        <Button onPress={() => removeAllPhotos()}>
+          <Text>{t("mediacache.actions.deleteall")}</Text>
+        </Button>
+        <Button onPress={() => uploadAllphotos()}>
+          <Text>{t("mediacache.actions.uploadall")}</Text>
+          {uploadInProgress && <ActivityIndicator />}
+        </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}
+        previewVisible={previewVisible}
+        setPreviewVisible={setPreviewVisible}
+      />
+      <Text>{`${photos.length} Photos`}</Text>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  actions: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+  },
+  listContentContainer: {
+    //flex: 1,
+    justifyContent: "flex-start",
+    //flexDirection: "row",
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);
+
+// <FlatList
+//   data={imagesInDir}
+//   style={{}}
+//   keyExtractor={(item) => item.id}
+//   renderItem={(object) => <Text>{object.item}</Text>}
+// />;