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

Timeline wall final fix

Author: igoroshko

src/shared/components/GUIKit/PhotoVideoItem/styles.scss

@@ -18,7 +18,7 @@
 }
 
 .img-container {
-  max-height: 100%;
+  height: 100%;
   width: 100%;
   object-fit: cover;
 }

src/shared/components/GUIKit/PhotoVideoPicker/index.jsx

@@ -21,6 +21,15 @@ function PhotoVideoPicker({
   inputOptions,
   file,
 }) {
+  const renderUpload = () => (
+    <React.Fragment>
+      <p styleName="infoText hide-mobile">
+        {infoText}
+      </p>
+      <button styleName="btn hide-mobile" type="button">{btnText}</button>
+    </React.Fragment>
+  );
+
   return (
     <React.Fragment>
       <Dropzone
@@ -66,7 +75,7 @@ function PhotoVideoPicker({
                 <React.Fragment>
 
                   <section
-                    styleName={cn('container', { hasError: !!errorMsg, hasFile: !!file && !!file.length })}
+                    styleName={cn('container', { hasError: !!errorMsg, hasFile: !!file && !!file.length, 'hide-mobile': file.length === 3 })}
                     {...getRootProps()}
                     className={cn(className, getRootProps().className)}
                   >
@@ -76,44 +85,48 @@ function PhotoVideoPicker({
                     })}
                     />
                     {
-                file && file.length ? (
-                  <div styleName="photo-list hide-mobile">
-                    {file.map((fileInfo, index) => (
-                      <div
-                        styleName="photo-item"
-                        key={fileInfo.name}
-                      ><PhotoVideoItem notSelectable file={fileInfo} />
-                        <button
-                          type="button"
-                          styleName="btn-delete"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            const newFile = [...file];
-                            newFile.splice(index, 1);
-                            onFilePick(newFile);
-                          }}
-                        ><BtnDeletePhoto />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <React.Fragment>
-                    <p styleName="infoText hide-mobile">
-                      {infoText}
-                    </p>
-                    <button styleName="btn hide-mobile" type="button">{btnText}</button>
-                  </React.Fragment>
-                )
-              }
+                      file && file.length ? (
+                        <div styleName="photo-list hide-mobile">
+                          {file.map((fileInfo, index) => (
+                            <div
+                              styleName="photo-item"
+                              key={fileInfo.name}
+                            ><PhotoVideoItem notSelectable file={fileInfo} />
+                              <button
+                                type="button"
+                                styleName="btn-delete"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  e.preventDefault();
+                                  const newFile = [...file];
+                                  newFile.splice(index, 1);
+                                  onFilePick(newFile);
+                                }}
+                              ><BtnDeletePhoto />
+                              </button>
+                            </div>
+                          ))}
+                          {
+                            file.length < 3 && (
+                              <div styleName="photo-item browse-button">
+                                {renderUpload()}
+                              </div>
+                            )
+                          }
+                        </div>
+                      ) : renderUpload()
+                    }
 
-                    <React.Fragment>
-                      <p styleName="infoText hide-desktop show-mobile">
-                        {infoTextMobile}
-                      </p>
-                      <button styleName="btn hide-desktop show-mobile" type="button">{btnText}</button>
-                    </React.Fragment>
+                    {
+                      (file || []).length < 3 && (
+                        <React.Fragment>
+                          <p styleName="infoText hide-desktop show-mobile">
+                            {infoTextMobile}
+                          </p>
+                          <button styleName="btn hide-desktop show-mobile" type="button">{btnText}</button>
+                        </React.Fragment>
+                      )
+                    }
                   </section>
 
                 </React.Fragment>

src/shared/components/GUIKit/PhotoVideoPicker/styles.scss

@@ -103,6 +103,13 @@
     justify-content: center;
     position: relative;
 
+    &.browse-button {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: 0 10px;
+    }
+
     @media (max-width: 768px) {
       height: 100px;
       border: none;

src/shared/containers/timeline-wall/index.jsx

@@ -106,6 +106,7 @@ function TimelineWallContainer(props) {
   const deleteEvent = (id) => {
     deleteEventById(authToken, id, () => {
       getPendingApprovals(authToken);
+      getTimelineEvents();
     });
   };
 
@@ -115,9 +116,15 @@ function TimelineWallContainer(props) {
     });
   };
 
-  const removeEvent = (id, body) => {
-    rejectEventById(authToken, id, body, () => {
+  const removeEvent = (event = {}, body) => {
+    const rejectBody = body;
+    const id = event.id ? event.id : event;
+    if (!body.reason) {
+      rejectBody.reason = 'Deleted by admin.';
+    }
+    rejectEventById(authToken, id, rejectBody, () => {
       getPendingApprovals(authToken);
+      getTimelineEvents();
     });
   };
 
@@ -188,6 +195,7 @@ function TimelineWallContainer(props) {
             getAvatar={getAvatar}
             userAvatars={userAvatars}
             uploading={uploading}
+            deleteEvent={deleteEvent}
           />
           <React.Fragment>
             {

src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx

@@ -67,7 +67,7 @@ function ApprovalItem({
             <PhotoVideoItem
               key={photo.id}
               styleName="photo-item"
-              url={photo.url}
+              url={photo.previewUrl || photo.url}
               videoThumnailUrl={photo.videoThumnailUrl}
               isUrlPhoto={!photo.videoThumnailUrl}
               onClick={() => {

src/shared/containers/timeline-wall/pending-approvals/approval-item/styles.scss

@@ -100,7 +100,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 16px;
+    margin-top: 36px;
 
     .btn-trash {
       border: none;

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

@@ -149,7 +149,7 @@ function AddEvents({
                   files: files.slice(0, 3),
                 });
               }}
-              infoText={'Drag & drop your photo or video here\nYou can upload only up to 3 photos/videos'}
+              infoText={'Drag & drop your photo or video here\nYou can upload up to 3 photos/videos'}
               infoTextMobile="Drag & drop your photo or video here"
               btnText="BROWSE"
               options={{

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

@@ -16,7 +16,7 @@ import './styles.scss';
 import { DEFAULT_AVATAR_URL } from '../../../../../utils/url';
 
 function EventItem({
-  className, isLeft, eventItem, removeEvent, isAdmin, userAvatars,
+  className, isLeft, eventItem, removeEvent, deleteEvent, isAdmin, userAvatars,
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [showModalPhoto, setShowModalPhoto] = useState(false);
@@ -112,13 +112,15 @@ function EventItem({
 
       {showModalDelete ? (
         <ModalDeleteConfirmation
+          id={eventItem.id}
           eventItem={showModalDelete}
           onClose={(result) => {
             if (result === true) {
               removeEvent(showModalDelete);
             }
             setShowModalDelete(false);
           }}
+          deleteEvent={deleteEvent}
         />
       ) : null}
     </div>
@@ -150,6 +152,7 @@ EventItem.propTypes = {
   removeEvent: PT.func,
   isAdmin: PT.bool,
   userAvatars: PT.shape(),
+  deleteEvent: PT.func.isRequired,
 };
 
 export default EventItem;

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

@@ -6,7 +6,7 @@ import EventItem from './event-item';
 const colors = ['green', 'red', 'purple'];
 
 function Events({
-  events, removeEvent, isAuthenticated, getAvatar, userAvatars,
+  events, removeEvent, isAuthenticated, getAvatar, userAvatars, isAdmin, deleteEvent,
 }) {
   const [leftItems, setLeftItems] = useState([]);
   const [rightItems, setRightItems] = useState([]);
@@ -65,6 +65,8 @@ function Events({
             }}
             getAvatar={getAvatar}
             userAvatars={userAvatars}
+            isAdmin={isAdmin}
+            deleteEvent={deleteEvent}
           />
         ))}
       </div>
@@ -80,6 +82,8 @@ function Events({
             }}
             getAvatar={getAvatar}
             userAvatars={userAvatars}
+            isAdmin={isAdmin}
+            deleteEvent={deleteEvent}
           />
         ))}
       </div>
@@ -95,6 +99,8 @@ function Events({
             }}
             getAvatar={getAvatar}
             userAvatars={userAvatars}
+            isAdmin={isAdmin}
+            deleteEvent={deleteEvent}
           />
         ))}
       </div>
@@ -110,6 +116,7 @@ Events.defaultProps = {
   removeEvent: () => { },
   isAuthenticated: false,
   userAvatars: {},
+  isAdmin: false,
 };
 
 /**
@@ -121,6 +128,8 @@ Events.propTypes = {
   isAuthenticated: PT.bool,
   getAvatar: PT.func.isRequired,
   userAvatars: PT.shape(),
+  isAdmin: PT.bool,
+  deleteEvent: PT.func.isRequired,
 };
 
 export default Events;

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

@@ -22,6 +22,7 @@ function TimelineEvents({
   userAvatars,
   onDoneAddEvent,
   uploading,
+  deleteEvent,
 }) {
   return (
     <div className={className} styleName="container">
@@ -44,6 +45,7 @@ function TimelineEvents({
             }}
             getAvatar={getAvatar}
             userAvatars={userAvatars}
+            deleteEvent={deleteEvent}
           />
         )
           : null}
@@ -112,6 +114,7 @@ TimelineEvents.propTypes = {
   onDoneAddEvent: PT.func.isRequired,
   userAvatars: PT.shape(),
   uploading: PT.bool,
+  deleteEvent: PT.func.isRequired,
 };
 
 export default TimelineEvents;

src/shared/containers/timeline-wall/timeline-events/right-filter/styles.scss

@@ -52,6 +52,10 @@
   width: 120px;
   border-radius: 8px;
   padding: 10px 0;
+  position: fixed;
+  right: 0;
+  max-height: 70%;
+  overflow: scroll;
 
   @media (max-width: 768px) {
     border-radius: 0;