** Major Change**. Removed unknown dependencies, and reset project to a new start state. See MD file for instructions.
This commit is contained in:
Patrick Fic
@@ -1,112 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
FlatList,
|
||||
Image,
|
||||
RefreshControl,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
|
||||
import * as Sentry from "@sentry/react-native";
|
||||
import Toast from "react-native-toast-message";
|
||||
|
||||
import cleanAxios from "../../util/CleanAxios";
|
||||
|
||||
export default function JobDocumentsLocalComponent({ bodyshop, job }) {
|
||||
const [previewVisible, setPreviewVisible] = useState(false);
|
||||
const [images, setImages] = useState([]);
|
||||
const [imgIndex, setImgIndex] = useState(0);
|
||||
useEffect(() => {
|
||||
if (job.id) {
|
||||
getPhotos({ bodyshop, jobid: job.id, setImages });
|
||||
}
|
||||
}, [job.id, bodyshop]);
|
||||
|
||||
const onRefresh = async () => {
|
||||
return getPhotos({ bodyshop, jobid: job.id, setImages });
|
||||
};
|
||||
|
||||
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 }) {
|
||||
let localmediaserverhttp = bodyshop.localmediaserverhttp.trim();
|
||||
if (localmediaserverhttp.endsWith("/")) {
|
||||
localmediaserverhttp = localmediaserverhttp.slice(0, -1);
|
||||
}
|
||||
|
||||
try {
|
||||
const imagesFetch = await cleanAxios.post(
|
||||
`${localmediaserverhttp}/jobs/list`,
|
||||
{
|
||||
jobid,
|
||||
},
|
||||
{ headers: { ims_token: bodyshop.localmediatoken } }
|
||||
);
|
||||
|
||||
const normalizedImages = imagesFetch.data
|
||||
.filter((d) => d.type?.mime?.startsWith("image"))
|
||||
.map((d, idx) => {
|
||||
return {
|
||||
...d,
|
||||
// src: `${localmediaserverhttp}/${d.src}`,
|
||||
|
||||
uri: `${localmediaserverhttp}${d.src}`,
|
||||
thumbUrl: `${localmediaserverhttp}${d.thumbnail}`,
|
||||
id: idx,
|
||||
};
|
||||
});
|
||||
|
||||
setImages(normalizedImages);
|
||||
} catch (error) {
|
||||
Sentry.captureException(error);
|
||||
Toast.show({
|
||||
type: "error",
|
||||
text1: `Error fetching photos.`,
|
||||
|
||||
text2: JSON.stringify(error),
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,175 +0,0 @@
|
||||
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}` : ""
|
||||
}`;
|
||||
};
|
||||
Reference in New Issue
Block a user