** Major Change**. Removed unknown dependencies, and reset project to a new start state. See MD file for instructions.

2025-10-07 14:58:09 -07:00
parent 809badc9e1
commit befa06a6b5
77 changed files with 1684 additions and 1924 deletions
--- a/components-old/job-documents/job-documents.component.jsx
+++ b/components-old/job-documents/job-documents.component.jsx
@@ -0,0 +1,175 @@
+import axios from "axios";
+import React, { useEffect, 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 { splitClient } from "../screen-main/screen-main.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobDocumentsComponent);
+
+export function JobDocumentsComponent({ bodyshop, job, loading, refetch }) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [fullphotos, setFullPhotos] = useState([]);
+  const [imgIndex, setImgIndex] = useState(0);
+
+  const useImgproxy = splitClient?.getTreatment("Imgproxy");
+
+  const onRefresh = async () => {
+    return refetch();
+  };
+
+  useEffect(() => {
+    async function getPhotos() {
+      if (useImgproxy) {
+        const result = await axios.post(
+          `${env.API_URL}/media/imgproxy/thumbnails`,
+          {
+            jobid: job.id,
+          }
+        );
+
+        setFullPhotos(
+          result.data.map((doc, idx) => {
+            return {
+              id: idx,
+              videoUrl:
+                DetermineFileType(doc.type) === "video" &&
+                doc.originalUrlViaProxyPath,
+              source:
+                DetermineFileType(doc.type) === "video"
+                  ? { uri: doc.thumbnailUrl }
+                  : { uri: doc.originalUrl },
+              url:
+                DetermineFileType(doc.type) === "video"
+                  ? doc.thumbnailUrl
+                  : doc.originalUrl,
+              uri:
+                DetermineFileType(doc.type) === "video"
+                  ? doc.originalUrlViaProxyPath
+                  : doc.originalUrl,
+              thumbUrl: doc.thumbnailUrl,
+            };
+          })
+        );
+      } else {
+        setFullPhotos(
+          job.documents.map((doc, idx) => {
+            return {
+              id: idx,
+              videoUrl:
+                DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
+              source:
+                DetermineFileType(doc.type) === "video"
+                  ? { uri: GenerateThumbUrl(doc) }
+                  : { uri: GenerateSrcUrl(doc) },
+              url:
+                DetermineFileType(doc.type) === "video"
+                  ? GenerateThumbUrl(doc)
+                  : GenerateSrcUrl(doc),
+              uri:
+                DetermineFileType(doc.type) === "video"
+                  ? GenerateThumbUrl(doc)
+                  : GenerateSrcUrl(doc),
+              thumbUrl: GenerateThumbUrl(doc),
+            };
+          })
+        );
+      }
+    }
+
+    getPhotos();
+  }, [job.documents]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+        data={fullphotos}
+        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
+        style={{ textAlign: "center", color: useImgproxy ? "blue" : "black" }}
+      >
+        {fullphotos.length}
+      </Text>
+
+      <MediaCacheOverlay
+        photos={fullphotos}
+        imgIndex={imgIndex}
+        setImgIndex={setImgIndex}
+        previewVisible={previewVisible}
+        setPreviewVisible={setPreviewVisible}
+      />
+    </View>
+  );
+}
+
+export const GenerateSrcUrl = (value) => {
+  let extension = value.extension;
+  if (extension && extension.toLowerCase().includes("heic")) extension = "jpg";
+
+  return `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+    value.type
+  )}/upload/${value.key}${extension ? `.${extension}` : ""}`;
+};
+
+export const GenerateThumbUrl = (value) => {
+  let extension = value.extension;
+  if (extension && extension.includes("heic")) extension = "jpg";
+  else if (
+    DetermineFileType(value.type) !== "image" ||
+    (value.type && value.type.includes("application"))
+  )
+    extension = "jpg";
+
+  return `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+    value.type
+  )}/upload/${env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}${
+    extension ? `.${extension}` : ""
+  }`;
+};