Merge pull request #19 from Deep-Consulting-Solutions/grouping-improv…

…ements-1

fix: logic with loadingMore

src/Calendar.js

@@ -1047,8 +1047,13 @@ class Calendar extends React.Component {
   setFetchingMoreEvents = ({
     isFetchingMoreEvents,
     dateTriggeringShowMore,
+    resourceTriggeringPopup,
   }) => {
-    this.setState({ isFetchingMoreEvents, dateTriggeringShowMore })
+    this.setState({
+      isFetchingMoreEvents,
+      dateTriggeringShowMore,
+      resourceTriggeringPopup,
+    })
   }
 
   getView = () => {

src/DateContentRow.js

@@ -126,6 +126,7 @@ class DateContentRow extends React.Component {
       isPopupOpen,
       loadingMore,
       dateTriggeringShowMore,
+      triggeredLoadingMore,
     } = this.props
 
     if (renderForMeasure) return this.renderDummy()
@@ -199,6 +200,7 @@ class DateContentRow extends React.Component {
                   onShowMore={this.handleShowMore}
                   loadingMore={loadingMore}
                   dateTriggeringShowMore={dateTriggeringShowMore}
+                  triggeredLoadingMore={triggeredLoadingMore}
                   {...eventRowProps}
                 />
               )}
@@ -240,6 +242,7 @@ DateContentRow.propTypes = {
   isAllDay: PropTypes.bool,
   isPopupOpen: PropTypes.bool,
   loadingMore: PropTypes.bool,
+  triggeredLoadingMore: PropTypes.bool,
   dateTriggeringShowMore: PropTypes.instanceOf(Date),
 
   accessors: PropTypes.object.isRequired,

src/EventEndingRow.js

@@ -81,6 +81,7 @@ class EventEndingRow extends React.Component {
       components,
       loadingMore,
       dateTriggeringShowMore,
+      triggeredLoadingMore,
     } = this.props
     const events = slotMetrics.getEventsForSlot(slot)
     const remainingEvents = eventsInSlot(segments, slot)
@@ -114,7 +115,7 @@ class EventEndingRow extends React.Component {
         className={clsx('rbc-button-link', 'rbc-show-more')}
         onClick={(e) => this.showMore(slot, e)}
       >
-        {loadingMore && isSameDate
+        {loadingMore && isSameDate && triggeredLoadingMore
           ? 'Loading...'
           : localizer.messages.showMore(count, remainingEvents, events)}
       </button>

src/Month.js

@@ -129,6 +129,8 @@ class MonthView extends React.Component {
       isPopupOpen,
       isFetchingMoreEvents,
       dateTriggeringShowMore,
+      resourceId,
+      resourceTriggeringPopup,
     } = this.props
 
     const { needLimitMeasure, rowLimit } = this.state
@@ -175,6 +177,7 @@ class MonthView extends React.Component {
         isPopupOpen={isPopupOpen}
         loadingMore={isFetchingMoreEvents}
         dateTriggeringShowMore={dateTriggeringShowMore}
+        triggeredLoadingMore={resourceId === resourceTriggeringPopup}
       />
     )
   }
@@ -347,6 +350,7 @@ class MonthView extends React.Component {
         setFetchingMoreEvents({
           isFetchingMoreEvents: true,
           dateTriggeringShowMore: date,
+          resourceTriggeringPopup: resourceId,
         })
         events = await getMoreEvents(date)
       } else {

src/TimeGrid.js

@@ -108,6 +108,7 @@ export default class TimeGrid extends Component {
         setFetchingMoreEvents({
           isFetchingMoreEvents: true,
           dateTriggeringShowMore: date,
+          resourceTriggeringPopup: resourceId,
         })
         events = await getMoreEvents(date)
       } else {
@@ -312,6 +313,7 @@ export default class TimeGrid extends Component {
             hideGutter={this.props.isWeekGrouping}
             loadingMore={isFetchingMoreEvents}
             dateTriggeringShowMore={dateTriggeringShowMore}
+            triggeredLoadingMore={resourceId === resourceTriggeringPopup}
             isPopupOpen={isPopupOpen}
             isGrouped={isGrouped}
           />

src/TimeGridHeader.js

@@ -75,6 +75,7 @@ class TimeGridHeader extends React.Component {
       maxRows,
       loadingMore,
       dateTriggeringShowMore,
+      triggeredLoadingMore,
       isPopupOpen,
       isGrouped,
     } = this.props
@@ -111,6 +112,7 @@ class TimeGridHeader extends React.Component {
         resizable={resizable}
         loadingMore={loadingMore}
         dateTriggeringShowMore={dateTriggeringShowMore}
+        triggeredLoadingMore={triggeredLoadingMore}
         isPopupOpen={isPopupOpen}
       />
     )
@@ -135,6 +137,7 @@ class TimeGridHeader extends React.Component {
       loadingMore,
       isGrouped,
       dateTriggeringShowMore,
+      triggeredLoadingMore,
       components: {
         timeGutterHeader: TimeGutterHeader,
         resourceHeader: ResourceHeaderComponent = ResourceHeader,
@@ -216,6 +219,7 @@ class TimeGridHeader extends React.Component {
               resizable={resizable}
               loadingMore={loadingMore}
               dateTriggeringShowMore={dateTriggeringShowMore}
+              triggeredLoadingMore={triggeredLoadingMore}
               isPopupOpen={isPopupOpen}
             />
           </div>
@@ -250,6 +254,7 @@ TimeGridHeader.propTypes = {
   isGrouped: PropTypes.bool,
   isPopupOpen: PropTypes.bool,
   loadingMore: PropTypes.bool,
+  triggeredLoadingMore: PropTypes.bool,
   dateTriggeringShowMore: PropTypes.instanceOf(Date),
 
   onSelectSlot: PropTypes.func,

src/sass/month.scss

@@ -123,7 +123,7 @@
   border-bottom: 1px solid #e5e5e5;
   margin: -10px -10px 5px -10px;
   padding: 2px 10px;
-  height: 28px;
+  height: 32px;
   display: flex;
   align-items: center;
 }

src/sass/time-grid.scss

@@ -51,7 +51,7 @@
 
   .rbc-row {
     box-sizing: border-box;
-    min-height: 20px;
+    min-height: 36px;
   }
 }
 

stories/props/grouping.stories.js

@@ -93,12 +93,12 @@ const getMoreEvents = (date) => {
   console.log({ date })
   return new Promise((resolve) => {
     setTimeout(() => {
-      resolve(shifts.map((shift) => formatEvent(shift)))
-    }, 5000)
+      resolve(shifts.map(formatEvent).slice(0, 50))
+    }, 3000)
   })
 }
 
-const events = shifts.map((shift) => formatEvent(shift))
+const events = shifts.map(formatEvent)
 
 const Template = (args) => {
   const [view, setView] = React.useState(Views.MONTH)