Merge pull request #5923 from strapi/tracking/front-end-events

Add front-end media lib usage events
This commit is contained in:
cyril lopez 2020-04-23 18:13:16 +02:00 committed by GitHub
commit 024de9ac5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 6 deletions

View File

@ -172,7 +172,7 @@ const EditForm = forwardRef(
try {
const file = await getCroppedResult();
onSubmitEdit(e, shouldDuplicate, file);
onSubmitEdit(e, shouldDuplicate, file, true);
} catch (err) {
// Silent
} finally {

View File

@ -10,7 +10,7 @@ import stepper from './stepper';
import useModalContext from '../../hooks/useModalContext';
const InputModalStepper = ({ isOpen, onToggle, noNavigation, onInputMediaChange }) => {
const { formatMessage } = useGlobalContext();
const { emitEvent, formatMessage } = useGlobalContext();
const [shouldDeleteFile, setShouldDeleteFile] = useState(false);
const [displayNextButton, setDisplayNextButton] = useState(false);
const {
@ -62,6 +62,8 @@ const InputModalStepper = ({ isOpen, onToggle, noNavigation, onInputMediaChange
const editModalRef = useRef();
const handleReplaceMedia = () => {
emitEvent('didReplaceMedia', { location: 'upload' });
editModalRef.current.click();
};
@ -199,12 +201,20 @@ const InputModalStepper = ({ isOpen, onToggle, noNavigation, onInputMediaChange
const handleSubmitEditExistingFile = async (
e,
shouldDuplicateMedia = false,
file = fileToEdit.file
file = fileToEdit.file,
isSubmittingAfterCrop = false
) => {
e.preventDefault();
submitEditExistingFile();
if (isSubmittingAfterCrop) {
emitEvent('didCropFile', {
duplicatedFile: shouldDuplicateMedia,
location: 'content-manager',
});
}
const headers = {};
const formData = new FormData();

View File

@ -34,7 +34,7 @@ const InputModalStepperProvider = ({
step,
}) => {
const [formErrors, setFormErrors] = useState(null);
const { plugins } = useGlobalContext();
const { emitEvent, plugins } = useGlobalContext();
const [, updated_at] = getFileModelTimestamps(plugins);
const [reducerState, dispatch] = useReducer(reducer, initialState, state =>
init({
@ -69,6 +69,11 @@ const InputModalStepperProvider = ({
const downloadFiles = async () => {
const files = getFilesToDownload(filesToUpload);
// Emit event when the users download files from url
if (files.length > 0) {
emitEvent('didSelectFile', { source: 'url', location: 'content-manager' });
}
try {
await Promise.all(
files.map(file => {
@ -263,6 +268,9 @@ const InputModalStepperProvider = ({
};
const handleSetCropResult = blob => {
// Emit event : the user cropped a file that is not uploaded
emitEvent('didCropFile', { duplicatedFile: null, location: 'content-manager' });
dispatch({
type: 'SET_CROP_RESULT',
blob,
@ -352,6 +360,8 @@ const InputModalStepperProvider = ({
};
const addFilesToUpload = ({ target: { value } }) => {
emitEvent('didSelectFile', { source: 'computer', location: 'content-manager' });
dispatch({
type: 'ADD_FILES_TO_UPLOAD',
filesToUpload: value,

View File

@ -26,7 +26,7 @@ const ModalStepper = ({
onDeleteMedia,
onToggle,
}) => {
const { formatMessage } = useGlobalContext();
const { emitEvent, formatMessage } = useGlobalContext();
const [isWarningDeleteOpen, setIsWarningDeleteOpen] = useState(false);
const [shouldDeleteFile, setShouldDeleteFile] = useState(false);
const [isFormDisabled, setIsFormDisabled] = useState(false);
@ -74,6 +74,8 @@ const ModalStepper = ({
}, [isOpen]);
const addFilesToUpload = ({ target: { value } }) => {
emitEvent('didSelectFile', { source: 'computer', location: 'upload' });
dispatch({
type: 'ADD_FILES_TO_UPLOAD',
filesToUpload: value,
@ -85,6 +87,11 @@ const ModalStepper = ({
downloadFilesRef.current = async () => {
const files = getFilesToDownload(filesToUpload);
// Emit event when the users download files from url
if (files.length > 0) {
emitEvent('didSelectFile', { source: 'url', location: 'upload' });
}
try {
await Promise.all(
files.map(file => {
@ -255,6 +262,9 @@ const ModalStepper = ({
};
const handleSetCropResult = blob => {
// Emit event : the user cropped a file that is not uploaded
emitEvent('didCropFile', { duplicatedFile: null, location: 'upload' });
dispatch({
type: 'SET_CROP_RESULT',
blob,
@ -274,10 +284,15 @@ const ModalStepper = ({
const handleSubmitEditExistingFile = async (
e,
shouldDuplicateMedia = false,
file = fileToEdit.file
file = fileToEdit.file,
isSubmittingAfterCrop = false
) => {
e.preventDefault();
if (isSubmittingAfterCrop) {
emitEvent('didCropFile', { duplicatedFile: shouldDuplicateMedia, location: 'upload' });
}
dispatch({
type: 'ON_SUBMIT_EDIT_EXISTING_FILE',
});
@ -331,6 +346,7 @@ const ModalStepper = ({
};
const handleReplaceMedia = () => {
emitEvent('didReplaceMedia', { location: 'upload' });
editModalRef.current.click();
};