Merge pull request #6688 from nursoltan-s/timeline-wall-final-fix

fix upload bugs

Author: igoroshko

src/shared/containers/timeline-wall/modal-photo-viewer/index.jsx

@@ -7,8 +7,10 @@ import IconClose from 'assets/images/timeline-wall/btn-close.svg';
 import IconCheveronLeft from 'assets/images/timeline-wall/cheveron-left.svg';
 import IconCheveronRight from 'assets/images/timeline-wall/cheveron-right.svg';
 import PhotoVideoItem from 'components/GUIKit/PhotoVideoItem';
+import { v4 as uuidv4 } from 'uuid';
 
 import style from './styles.scss';
+import { isImage } from '../../../utils/url';
 
 function ModalPhotoViewer({ onClose, selectedPhoto, photos }) {
   const newPhotos = photos.map((photo, index) => ({ ...photo, id: index }));
@@ -17,15 +19,17 @@ function ModalPhotoViewer({ onClose, selectedPhoto, photos }) {
     () => _.find(newPhotos, { id: localSelectedPhoto }), [localSelectedPhoto],
   );
 
+  const photosMapped = photos.map((item, index) => ({ ...item, id: index }));
+
   return (
     <Modal
       theme={{ container: style.container, overlay: style.overlay }}
       onCancel={onClose}
     >
       <button styleName="btn-close" onClick={onClose} type="button"><IconClose /></button>
       <div styleName="content">
-        {selectedPhotoObject && !selectedPhotoObject.videoThumnailUrl ? (<img src={selectedPhotoObject.url} alt="main" />) : null}
-        {selectedPhotoObject && !!selectedPhotoObject.videoThumnailUrl ? (
+        {selectedPhotoObject && isImage(selectedPhotoObject.url) ? (<img src={selectedPhotoObject.url} alt="main" />) : null}
+        {selectedPhotoObject && !isImage(selectedPhotoObject.url) ? (
           <video controls>
             <source src={selectedPhotoObject.url} />
             <track kind="captions" />
@@ -36,42 +40,42 @@ function ModalPhotoViewer({ onClose, selectedPhoto, photos }) {
         <button
           styleName="btn-left"
           onClick={() => {
-            let currentIndex = _.findIndex(photos, photo => photo.id === localSelectedPhoto);
+            let currentIndex = _.findIndex(photosMapped, photo => photo.id === localSelectedPhoto);
             currentIndex -= 1;
             if (currentIndex < 0) {
-              currentIndex = photos.length - 1;
+              currentIndex = photosMapped.length - 1;
             }
-            setLocalSelectedPhoto(photos[currentIndex].id);
+            setLocalSelectedPhoto(photosMapped[currentIndex].id);
           }}
           type="button"
         ><IconCheveronLeft />
         </button>
         <button
           styleName="btn-right"
           onClick={() => {
-            let currentIndex = _.findIndex(photos, photo => photo.id === localSelectedPhoto);
+            let currentIndex = _.findIndex(photosMapped, photo => photo.id === localSelectedPhoto);
             currentIndex += 1;
-            if (currentIndex >= photos.length) {
+            if (currentIndex >= photosMapped.length) {
               currentIndex = 0;
             }
-            setLocalSelectedPhoto(photos[currentIndex].id);
+            setLocalSelectedPhoto(photosMapped[currentIndex].id);
           }}
           type="button"
         ><IconCheveronRight />
         </button>
       </div>
 
       <div styleName="bottom">
-        {photos.map(photo => (
+        {photosMapped.map(photo => (
           <PhotoVideoItem
             styleName={cn('photo-item', {
               selected: photo.id === localSelectedPhoto,
             })}
-            url={photo.url}
+            url={photo.previewUrl || photo.url}
             videoThumnailUrl={photo.videoThumnailUrl}
             isUrlPhoto={!photo.videoThumnailUrl}
             onClick={() => setLocalSelectedPhoto(photo.id)}
-            key={photo.id}
+            key={uuidv4()}
           />
         ))}
       </div>

src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx

@@ -68,7 +68,7 @@ function EventItem({
             {eventItem.mediaFiles.map(photo => (
               <PhotoVideoItem
                 styleName="photo-item hide-mobile"
-                url={photo.url}
+                url={photo.previewUrl || photo.url}
                 videoThumnailUrl={photo.videoThumnailUrl}
                 isUrlPhoto={!photo.videoThumnailUrl}
                 key={photo.id}

src/shared/reducers/timelineWall.js

@@ -2,6 +2,7 @@
  * Reducer for state.timelineWall
 */
 import actions from 'actions/timelineWall';
+import _ from 'lodash';
 import { handleActions } from 'redux-actions';
 import { DEFAULT_AVATAR_URL } from '../utils/url';
 
@@ -70,10 +71,11 @@ function onPendingApprovalInit(state) {
 * @param {Object} payload The payload.
 */
 function onPendingApprovalDone(state, { payload }) {
+  const approvals = _.isArray(payload) ? payload : [];
   return {
     ...state,
     loading: false,
-    pendingApprovals: payload,
+    pendingApprovals: approvals,
   };
 }
 

src/shared/services/timelineWall.js

@@ -70,8 +70,11 @@ export const createEvent = async (tokenV3, formData) => {
   form.append('title', formData.eventName);
   form.append('description', formData.description);
   form.append('eventDate', formData.date);
-  if (formData.files) {
-    form.append('mediaFiles', new File(formData.files || [], formData.eventName));
+  if (formData.files && formData.files.length) {
+    formData.files.forEach((file) => {
+      const fileExt = (file.type && file.type.length > 1) ? file.type.split('/')[1] : '';
+      form.append('mediaFiles', new File([file], `${formData.eventName}.${fileExt}`, { type: file.type }));
+    });
   }
 
   try {

src/shared/utils/url.js

@@ -128,7 +128,7 @@ export function isImage(url) {
 }
 
 export function isVideo(url) {
-  return /\.(mp4|mov|wmv|avi|mkv|flv)$/.test(`${url}`.toLowerCase());
+  return /\.(mp4|mov|wmv|webm|avi|mkv|flv)$/.test(`${url}`.toLowerCase());
 }
 
 export const DEFAULT_AVATAR_URL = 'https://images.ctfassets.net/b5f1djy59z3a/4PTwZVSf3W7qgs9WssqbVa/4c51312671a4b9acbdfd7f5e22320b62/default_avatar.svg';