IO-2035 LMS Media.

2022-08-30 12:26:22 -07:00
parent 64a31dc544
commit e25172f0bf
8 changed files with 1185 additions and 830 deletions
--- a/components/job-documents/job-documents-local.component.jsx
+++ b/components/job-documents/job-documents-local.component.jsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  FlatList,
+  Image,
+  RefreshControl,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import env from "../../env";
+import { DetermineFileType } from "../../util/document-upload.utility";
+import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import axios from "axios";
+import cleanAxios from "../../util/CleanAxios";
+import normalizeUrl from "normalize-url";
+
+export default function JobDocumentsLocalComponent({ bodyshop, job }) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [images, setImages] = useState([]);
+  const [imgIndex, setImgIndex] = useState(0);
+  useEffect(() => {
+    if (job.id) {
+      console.log("Getting Photos!");
+      getPhotos({ bodyshop, jobid: job.id, setImages });
+    }
+  }, [job.id, bodyshop]);
+
+  const onRefresh = async () => {
+    return getPhotos({ bodyshop, jobid: job.id, setImages });
+  };
+  console.log(images);
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={false} onRefresh={onRefresh} />
+        }
+        data={images}
+        numColumns={4}
+        style={{ flex: 1 }}
+        keyExtractor={(item) => item.id}
+        renderItem={(object) => (
+          <TouchableOpacity
+            style={{ flex: 1 / 4, aspectRatio: 1, margin: 4 }}
+            onPress={async () => {
+              setImgIndex(object.index);
+              setPreviewVisible(true);
+            }}
+          >
+            <Image
+              style={{ flex: 1 }}
+              resizeMode="cover"
+              source={{
+                uri: object.item.thumbUrl,
+                aspectRatio: 1,
+              }}
+            />
+          </TouchableOpacity>
+        )}
+      />
+      <Text>
+        {images?.filter((d) => d.type?.mime?.startsWith("image")).length}
+      </Text>
+
+      <MediaCacheOverlay
+        photos={images}
+        imgIndex={imgIndex}
+        setImgIndex={setImgIndex}
+        previewVisible={previewVisible}
+        setPreviewVisible={setPreviewVisible}
+      />
+    </View>
+  );
+}
+
+async function getPhotos({ bodyshop, jobid, setImages }) {
+  console.log("In Get Photos", bodyshop.localmediatoken);
+  const localmediaserverhttp = bodyshop.localmediaserverhttp.trim();
+  try {
+    const imagesFetch = await cleanAxios.post(
+      `${localmediaserverhttp}/jobs/list`,
+      {
+        jobid,
+      },
+      { headers: { ims_token: bodyshop.localmediatoken } }
+    );
+    console.log(
+      "🚀  ~ file: job-documents-local.component.jsx  ~ line 86  ~ imagesFetch",
+      imagesFetch
+    );
+
+    const normalizedImages = imagesFetch.data
+      .filter((d) => d.type?.mime?.startsWith("image"))
+      .map((d, idx) => {
+        return {
+          ...d,
+          // src: `${bodyshop.localmediaserverhttp}/${d.src}`.replace("//", "/"),
+
+          uri: `${bodyshop.localmediaserverhttp}/${d.src}`.replace("//", "/"),
+          thumbUrl: `${bodyshop.localmediaserverhttp}/${d.thumbnail}`.replace(
+            "//",
+            "/"
+          ),
+          id: idx,
+        };
+      });
+    setImages(normalizedImages);
+  } catch (error) {
+    console.log("error,", error);
+  }
+}