feat: fixes and formatter
This commit is contained in:
+152
-154
@@ -1,27 +1,27 @@
|
||||
import { useActionSheet } from "@expo/react-native-action-sheet";
|
||||
import * as DocumentPicker from "expo-document-picker";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import moment from "moment";
|
||||
import { Image, Pressable, Text, View } from "react-native";
|
||||
import Compressor from "react-native-compressor";
|
||||
import useMinuit from "react-native-minuit/src/hooks/useMinuit";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "reactn";
|
||||
import { useActionSheet } from '@expo/react-native-action-sheet'
|
||||
import * as DocumentPicker from 'expo-document-picker'
|
||||
import * as ImagePicker from 'expo-image-picker'
|
||||
import moment from 'moment'
|
||||
import { Image, Pressable, Text, View } from 'react-native'
|
||||
import Compressor from 'react-native-compressor'
|
||||
import useMinuit from 'react-native-minuit/src/hooks/useMinuit'
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'reactn'
|
||||
|
||||
import { arrayUnion } from "../config/firebase";
|
||||
import { arrayUnion } from '../config/firebase'
|
||||
|
||||
import { icons } from "../assets";
|
||||
import { Fonts, Palette } from "../styles";
|
||||
import Style, { gutterConstant, mainBorderRadius } from "../styles/Style";
|
||||
import { icons } from '../assets'
|
||||
import { Fonts, Palette } from '../styles'
|
||||
import Style, { gutterConstant, mainBorderRadius } from '../styles/Style'
|
||||
|
||||
import { uploadFileToFirebase } from "../helpers/uploadToFirebase";
|
||||
import useLayoutType from "../hooks/useLayoutType";
|
||||
import { uploadFileToFirebase } from '../helpers/uploadToFirebase'
|
||||
import useLayoutType from '../hooks/useLayoutType'
|
||||
|
||||
const NATIVE_OPTIONS = [
|
||||
"Importer depuis la galerie",
|
||||
"Ajouter un fichier",
|
||||
"Prendre une photo ou une vidéo",
|
||||
"Annuler",
|
||||
];
|
||||
'Importer depuis la galerie',
|
||||
'Ajouter un fichier',
|
||||
'Prendre une photo ou une vidéo',
|
||||
'Annuler',
|
||||
]
|
||||
|
||||
const DocumentDropZone = ({
|
||||
containerStyle = {},
|
||||
@@ -35,162 +35,162 @@ const DocumentDropZone = ({
|
||||
customElement = null,
|
||||
shouldReturnObject = false,
|
||||
}) => {
|
||||
const dropRef = useRef(null);
|
||||
const dropRef = useRef(null)
|
||||
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
|
||||
const { setIsLoading, setTooltip } = useMinuit();
|
||||
const { isDesktop, isWeb, isNative } = useLayoutType();
|
||||
const { showActionSheetWithOptions } = useActionSheet();
|
||||
const { setIsLoading, setTooltip } = useMinuit()
|
||||
const { isDesktop, isWeb, isNative } = useLayoutType()
|
||||
const { showActionSheetWithOptions } = useActionSheet()
|
||||
|
||||
useEffect(() => {
|
||||
if (isWeb && dropRef.current) {
|
||||
const el = dropRef.current;
|
||||
const el = dropRef.current
|
||||
|
||||
const handleDragIn = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(true);
|
||||
};
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsDragging(true)
|
||||
}
|
||||
|
||||
const handleDragOut = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (!dropRef.current.contains(e.relatedTarget)) {
|
||||
console.log("drag left");
|
||||
setIsDragging(false);
|
||||
console.log('drag left')
|
||||
setIsDragging(false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsDragging(false)
|
||||
|
||||
let files = [...e.dataTransfer.files];
|
||||
let files = [...e.dataTransfer.files]
|
||||
|
||||
if (files.length > 0) {
|
||||
for (const file of files) {
|
||||
handleWebFile({ file });
|
||||
handleWebFile({ file })
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
el.addEventListener("dragenter", handleDragIn);
|
||||
el.addEventListener("dragleave", handleDragOut);
|
||||
el.addEventListener("dragover", (e) => e.preventDefault());
|
||||
el.addEventListener("drop", handleDrop);
|
||||
el.addEventListener('dragenter', handleDragIn)
|
||||
el.addEventListener('dragleave', handleDragOut)
|
||||
el.addEventListener('dragover', (e) => e.preventDefault())
|
||||
el.addEventListener('drop', handleDrop)
|
||||
|
||||
return () => {
|
||||
el.removeEventListener("dragenter", handleDragIn);
|
||||
el.removeEventListener("dragleave", handleDragOut);
|
||||
el.removeEventListener("dragover", (e) => e.preventDefault());
|
||||
el.removeEventListener("drop", handleDrop);
|
||||
};
|
||||
el.removeEventListener('dragenter', handleDragIn)
|
||||
el.removeEventListener('dragleave', handleDragOut)
|
||||
el.removeEventListener('dragover', (e) => e.preventDefault())
|
||||
el.removeEventListener('drop', handleDrop)
|
||||
}
|
||||
}
|
||||
}, [dropRef?.current]);
|
||||
}, [dropRef?.current])
|
||||
|
||||
const handleWebFile = ({ file }) => {
|
||||
try {
|
||||
const { type = "" } = file;
|
||||
const reader = new FileReader();
|
||||
const { type = '' } = file
|
||||
const reader = new FileReader()
|
||||
|
||||
reader.onloadend = () => {
|
||||
const base64 = reader.result.split(",")[1]; // Vous pourriez avoir besoin de cette valeur base64 pour un upload direct
|
||||
const uri = reader.result; // URI en base64 du fichier
|
||||
const base64 = reader.result.split(',')[1] // Vous pourriez avoir besoin de cette valeur base64 pour un upload direct
|
||||
const uri = reader.result // URI en base64 du fichier
|
||||
|
||||
console.log("file", file);
|
||||
console.log('file', file)
|
||||
|
||||
onUploadDocument({ files: [{ name: file.name, uri, type }] });
|
||||
};
|
||||
onUploadDocument({ files: [{ name: file.name, uri, type }] })
|
||||
}
|
||||
|
||||
reader.onerror = (err) => {
|
||||
console.error("FileReader error", err);
|
||||
};
|
||||
console.error('FileReader error', err)
|
||||
}
|
||||
|
||||
reader.readAsDataURL(file); // Lire le fichier et déclencher reader.onloadend lorsque c'est fait
|
||||
reader.readAsDataURL(file) // Lire le fichier et déclencher reader.onloadend lorsque c'est fait
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setTooltip({ text: error.message, type: "error" });
|
||||
console.log(error)
|
||||
setTooltip({ text: error.message, type: 'error' })
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onAddFile = async ({} = {}) => {
|
||||
try {
|
||||
if (isNative) {
|
||||
const cancelButtonIndex = NATIVE_OPTIONS.length - 1;
|
||||
const cancelButtonIndex = NATIVE_OPTIONS.length - 1
|
||||
|
||||
showActionSheetWithOptions(
|
||||
{
|
||||
options: NATIVE_OPTIONS,
|
||||
cancelButtonIndex,
|
||||
userInterfaceStyle: "dark",
|
||||
userInterfaceStyle: 'dark',
|
||||
...Style.actionSheet,
|
||||
},
|
||||
async (selectedIndex) => {
|
||||
if (selectedIndex !== cancelButtonIndex) {
|
||||
switch (selectedIndex) {
|
||||
case 0:
|
||||
onChooseLibrary();
|
||||
break;
|
||||
onChooseLibrary()
|
||||
break
|
||||
case 1:
|
||||
onChooseDocumentPicker();
|
||||
break;
|
||||
onChooseDocumentPicker()
|
||||
break
|
||||
case 2:
|
||||
onTakePicture();
|
||||
break;
|
||||
onTakePicture()
|
||||
break
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
)
|
||||
} else {
|
||||
onChooseDocumentPicker();
|
||||
onChooseDocumentPicker()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setTooltip({ text: error.message, type: "error" });
|
||||
console.log(error)
|
||||
setTooltip({ text: error.message, type: 'error' })
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsLoading(false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onChooseLibrary = async ({} = {}) => {
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.All,
|
||||
allowsEditing: false,
|
||||
quality: 3,
|
||||
});
|
||||
})
|
||||
|
||||
if (result?.assets?.[0]?.uri) {
|
||||
const { uri, fileName = "" } = result?.assets?.[0];
|
||||
const { uri, fileName = '' } = result?.assets?.[0]
|
||||
|
||||
onUploadDocument({
|
||||
files: [
|
||||
{
|
||||
name: getAssetName({ fileName, uri }),
|
||||
uri,
|
||||
type: "IMAGE",
|
||||
type: 'IMAGE',
|
||||
},
|
||||
],
|
||||
});
|
||||
})
|
||||
} else {
|
||||
throw new Error("Aucune image sélectionnée");
|
||||
throw new Error('Aucune image sélectionnée')
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onChooseDocumentPicker = async ({} = {}) => {
|
||||
const result = await DocumentPicker.getDocumentAsync({
|
||||
type: "*/*",
|
||||
type: '*/*',
|
||||
copyToCacheDirectory: false,
|
||||
});
|
||||
})
|
||||
|
||||
if (result?.assets?.length > 0) {
|
||||
const { name = "", uri = null } = result?.assets[0] || {};
|
||||
const { name = '', uri = null } = result?.assets[0] || {}
|
||||
|
||||
if (!uri) {
|
||||
throw new Error("Erreur lors de l'ajout du document");
|
||||
throw new Error("Erreur lors de l'ajout du document")
|
||||
}
|
||||
|
||||
onUploadDocument({
|
||||
@@ -200,117 +200,117 @@ const DocumentDropZone = ({
|
||||
uri,
|
||||
},
|
||||
],
|
||||
});
|
||||
})
|
||||
} else {
|
||||
console.log(result);
|
||||
throw new Error("Erreur lors de l'ajout du document");
|
||||
console.log(result)
|
||||
throw new Error("Erreur lors de l'ajout du document")
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onTakePicture = useCallback(async () => {
|
||||
const { status } = await ImagePicker.requestCameraPermissionsAsync();
|
||||
const { status } = await ImagePicker.requestCameraPermissionsAsync()
|
||||
|
||||
if (status !== "granted") {
|
||||
throw new Error("Permissions caméra non accordées");
|
||||
if (status !== 'granted') {
|
||||
throw new Error('Permissions caméra non accordées')
|
||||
}
|
||||
|
||||
const result = await ImagePicker.launchCameraAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.All,
|
||||
allowsEditing: true,
|
||||
quality: 1,
|
||||
});
|
||||
})
|
||||
|
||||
if (result?.assets?.[0]?.uri) {
|
||||
const { uri, fileName = "" } = result?.assets?.[0];
|
||||
const { uri, fileName = '' } = result?.assets?.[0]
|
||||
|
||||
onUploadDocument({
|
||||
files: [
|
||||
{
|
||||
name: getAssetName({ fileName, uri }),
|
||||
uri,
|
||||
type: "IMAGE",
|
||||
type: 'IMAGE',
|
||||
},
|
||||
],
|
||||
});
|
||||
})
|
||||
} else {
|
||||
throw new Error("Aucune image sélectionnée");
|
||||
throw new Error('Aucune image sélectionnée')
|
||||
}
|
||||
}, []);
|
||||
}, [])
|
||||
|
||||
const getDefaultFileName = () => {
|
||||
const randomID = Math.random().toString(36).substring(7);
|
||||
return `${moment().format(`DD_MM_YYYY_HH_mm_ss`)}_${randomID}`;
|
||||
};
|
||||
const randomID = Math.random().toString(36).substring(7)
|
||||
return `${moment().format(`DD_MM_YYYY_HH_mm_ss`)}_${randomID}`
|
||||
}
|
||||
|
||||
const getAssetName = ({ fileName = "", uri = "" }) => {
|
||||
let name = fileName;
|
||||
const getAssetName = ({ fileName = '', uri = '' }) => {
|
||||
let name = fileName
|
||||
|
||||
if (!name && uri?.startsWith("file://")) {
|
||||
const splittedArray = uri?.split("/") || [];
|
||||
name = splittedArray?.[splittedArray?.length - 1] || "";
|
||||
if (!name && uri?.startsWith('file://')) {
|
||||
const splittedArray = uri?.split('/') || []
|
||||
name = splittedArray?.[splittedArray?.length - 1] || ''
|
||||
}
|
||||
|
||||
if (!name?.length) {
|
||||
let extension = uri?.split(";")?.[0]?.split("/")?.[1] || "";
|
||||
let extension = uri?.split(';')?.[0]?.split('/')?.[1] || ''
|
||||
|
||||
const defaultFileName = getDefaultFileName();
|
||||
const defaultFileName = getDefaultFileName()
|
||||
|
||||
if (extension?.length) {
|
||||
name = `${defaultFileName}.${extension}`;
|
||||
name = `${defaultFileName}.${extension}`
|
||||
} else {
|
||||
name = `${defaultFileName}`;
|
||||
name = `${defaultFileName}`
|
||||
}
|
||||
}
|
||||
|
||||
return name;
|
||||
};
|
||||
return name
|
||||
}
|
||||
|
||||
const onUploadDocument = async ({ files = [] } = {}) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setIsLoading(true)
|
||||
|
||||
const filesToUpdate = [];
|
||||
const filesToUpdate = []
|
||||
|
||||
await Promise.all(
|
||||
files.map(async (file) => {
|
||||
const { name = "", uri = null } = file;
|
||||
const { name = '', uri = null } = file
|
||||
|
||||
console.log(file);
|
||||
console.log(file)
|
||||
|
||||
if (!uri) {
|
||||
throw new Error("Erreur lors de l'ajout du document");
|
||||
throw new Error("Erreur lors de l'ajout du document")
|
||||
}
|
||||
|
||||
const fileName = name || getDefaultFileName();
|
||||
let type = "FILE";
|
||||
const fileName = name || getDefaultFileName()
|
||||
let type = 'FILE'
|
||||
|
||||
if (name?.toLowerCase()?.match(/\.(jpeg|jpg|gif|png)$/) != null) {
|
||||
type = "IMAGE";
|
||||
type = 'IMAGE'
|
||||
}
|
||||
|
||||
if (name?.toLowerCase()?.match(/\.(mp4|mov|avi|mkv)$/) != null) {
|
||||
type = "VIDEO";
|
||||
type = 'VIDEO'
|
||||
}
|
||||
|
||||
let compressedURI = uri;
|
||||
let thumbnailURI = null;
|
||||
let compressedURI = uri
|
||||
let thumbnailURI = null
|
||||
|
||||
if (isNative) {
|
||||
if (type === "IMAGE") {
|
||||
if (type === 'IMAGE') {
|
||||
compressedURI = await Compressor.Image.compress(uri, {
|
||||
compressionMethod: "manual",
|
||||
compressionMethod: 'manual',
|
||||
maxWidth: 1000,
|
||||
quality: 0.8,
|
||||
});
|
||||
} else if (type === "VIDEO") {
|
||||
compressedURI = await Compressor.Video.compress(uri);
|
||||
})
|
||||
} else if (type === 'VIDEO') {
|
||||
compressedURI = await Compressor.Video.compress(uri)
|
||||
}
|
||||
}
|
||||
|
||||
const { resultURI = null } = await uploadFileToFirebase({
|
||||
uri: compressedURI,
|
||||
path: `documents/${documentID}/files/${fileName}`,
|
||||
});
|
||||
})
|
||||
|
||||
if (resultURI) {
|
||||
if (shouldReturnObject) {
|
||||
@@ -319,39 +319,39 @@ const DocumentDropZone = ({
|
||||
uri: resultURI,
|
||||
type,
|
||||
thumbnailURI,
|
||||
});
|
||||
})
|
||||
} else {
|
||||
filesToUpdate.push(resultURI);
|
||||
filesToUpdate.push(resultURI)
|
||||
}
|
||||
} else {
|
||||
console.log("resultURI is null");
|
||||
console.log('resultURI is null')
|
||||
}
|
||||
})
|
||||
);
|
||||
)
|
||||
|
||||
if (filesToUpdate.length > 0) {
|
||||
if (documentExists) {
|
||||
await collectionRef.doc(documentID).update({
|
||||
files: arrayUnion(...filesToUpdate),
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
if (setFiles) {
|
||||
setFiles((prev) => [...prev, ...filesToUpdate]);
|
||||
setFiles((prev) => [...prev, ...filesToUpdate])
|
||||
}
|
||||
}
|
||||
|
||||
setTooltip({ text: "Document(s) ajouté(s) avec succès" });
|
||||
setTooltip({ text: 'Document(s) ajouté(s) avec succès' })
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setTooltip({ text: error.message, type: "error" });
|
||||
console.log(error)
|
||||
setTooltip({ text: error.message, type: 'error' })
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsLoading(false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (!documentID) {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -361,11 +361,9 @@ const DocumentDropZone = ({
|
||||
<View
|
||||
style={{
|
||||
...Style.containerCenter,
|
||||
backgroundColor: isDragging
|
||||
? Palette.transparentGreen
|
||||
: Palette.transparentPrimary,
|
||||
backgroundColor: isDragging ? Palette.transparentGreen : Palette.transparentPrimary,
|
||||
borderRadius: mainBorderRadius,
|
||||
borderStyle: "dashed",
|
||||
borderStyle: 'dashed',
|
||||
borderWidth: 2,
|
||||
borderColor: isDragging ? Palette.green : Palette.primary,
|
||||
...containerStyle,
|
||||
@@ -380,20 +378,20 @@ const DocumentDropZone = ({
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({ type: "default" }),
|
||||
textAlign: "center",
|
||||
...Fonts({ type: 'default' }),
|
||||
textAlign: 'center',
|
||||
color: Palette.white,
|
||||
}}
|
||||
>
|
||||
{isWeb && isDesktop
|
||||
? `Glissez-déposez ici\nles fichiers, images et vidéos\nà ajouter.`
|
||||
: "Ajouter une image,\nun fichier ou une vidéo."}
|
||||
: 'Ajouter une image,\nun fichier ou une vidéo.'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default DocumentDropZone;
|
||||
export default DocumentDropZone
|
||||
|
||||
Reference in New Issue
Block a user