From 887ed74a82e7f44c6e2c32deb31de4b9d6e0efb9 Mon Sep 17 00:00:00 2001
From: Nursoltan Saipolda <nursoltan.s@gmail.com>
Date: Wed, 19 Oct 2022 02:57:07 +0800
Subject: [PATCH] fix upload bugs

---
 .../modal-photo-viewer/index.jsx              | 26 +++++++++++--------
 .../events/event-item/index.jsx               |  2 +-
 src/shared/reducers/timelineWall.js           |  4 ++-
 src/shared/services/timelineWall.js           |  7 +++--
 src/shared/utils/url.js                       |  2 +-
 5 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/shared/containers/timeline-wall/modal-photo-viewer/index.jsx b/src/shared/containers/timeline-wall/modal-photo-viewer/index.jsx
index 2b8b1fa9cc..70392afb98 100644
--- a/src/shared/containers/timeline-wall/modal-photo-viewer/index.jsx
+++ b/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,6 +19,8 @@ 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 }}
@@ -24,8 +28,8 @@ function ModalPhotoViewer({ onClose, selectedPhoto, photos }) {
     >
       <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,12 +40,12 @@ 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 />
@@ -49,12 +53,12 @@ function ModalPhotoViewer({ onClose, selectedPhoto, photos }) {
         <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 />
@@ -62,16 +66,16 @@ function ModalPhotoViewer({ onClose, selectedPhoto, photos }) {
       </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>
diff --git a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx
index cf7acd81a1..6c9f25fd86 100644
--- a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx
+++ b/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}
diff --git a/src/shared/reducers/timelineWall.js b/src/shared/reducers/timelineWall.js
index e1ff42bd84..b4419fac05 100644
--- a/src/shared/reducers/timelineWall.js
+++ b/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,
   };
 }
 
diff --git a/src/shared/services/timelineWall.js b/src/shared/services/timelineWall.js
index 215502a28d..7ca916e706 100644
--- a/src/shared/services/timelineWall.js
+++ b/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 {
diff --git a/src/shared/utils/url.js b/src/shared/utils/url.js
index dc4c999f26..60f083112c 100644
--- a/src/shared/utils/url.js
+++ b/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';