Merge pull request #70 from npapapietro/feature/upgrade-remoteEvents

[Feature] Structured remote events

Author: aldabil21

README.md

@@ -1,6 +1,6 @@
 {
   "name": "@aldabil/react-scheduler",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "description": "React scheduler component based on Material-UI & date-fns",
   "files": [
     "*"

package-lock.json

@@ -8,6 +8,9 @@ function App() {
   return (
     <Scheduler
       events={EVENTS}
+      // getRemoteEvents={async () => {
+      //   return EVENTS;
+      // }}
       // eventRenderer={(event) => <>{event.title}</>}
       // dialogMaxWidth="sm"
       // loading={loading}

package.json

@@ -130,6 +130,11 @@ export interface FieldProps {
 }
 export type ProcessedEvent = CalendarEvent & Record<string, any>;
 export type EventActions = "create" | "edit";
+export type ViewEvent = {
+  start: Date;
+  end: Date;
+  view: "day" | "week" | "month";
+};
 export type DefaultRecourse = {
   assignee?: string | number;
   text?: string;
@@ -171,8 +176,11 @@ export interface SchedulerProps {
   events: ProcessedEvent[];
   /** Custom event render method */
   eventRenderer?: (event: ProcessedEvent) => JSX.Element | null;
-  /**Async function to load remote data */
+  /**Async function to load remote data
+   * @deprecated User `getRemoteEvents` */
   remoteEvents?(query: string): Promise<ProcessedEvent[] | void>;
+  /**Async function to load remote data with current view data. */
+  getRemoteEvents?(params: ViewEvent): Promise<ProcessedEvent[] | void>;
   /**Custom additional fields with it's settings */
   fields: FieldProps[];
   /**Table loading state */

src/App.tsx

@@ -41,6 +41,7 @@ const Day = () => {
     events,
     height,
     remoteEvents,
+    getRemoteEvents,
     triggerLoading,
     handleState,
     resources,
@@ -71,8 +72,18 @@ const Day = () => {
       triggerLoading(true);
       const start = addDays(START_TIME, -1);
       const end = addDays(END_TIME, 1);
-      const query = `?start=${start}&end=${end}`;
-      const events = await remoteEvents!(query);
+      const events = await (async () => {
+        // Remove `remoteEvents` in future release
+        if (remoteEvents) {
+          return await remoteEvents(`?start=${start}&end=${end}`);
+        } else {
+          return await getRemoteEvents!({
+            start,
+            end,
+            view: "day",
+          });
+        }
+      })();
       if (events && events?.length) {
         handleState(events, "events");
       }
@@ -82,10 +93,11 @@ const Day = () => {
       triggerLoading(false);
     }
     // eslint-disable-next-line
-  }, [selectedDate, remoteEvents]);
+  }, [selectedDate, remoteEvents, getRemoteEvents]);
 
   useEffect(() => {
-    if (remoteEvents instanceof Function) {
+    // Remove `remoteEvents` in future release
+    if ((remoteEvents || getRemoteEvents) instanceof Function) {
       fetchEvents();
     }
     // eslint-disable-next-line

src/lib/types.ts

@@ -35,6 +35,7 @@ const Month = () => {
     events,
     handleGotoDay,
     remoteEvents,
+    getRemoteEvents,
     triggerLoading,
     handleState,
     resources,
@@ -64,8 +65,18 @@ const Month = () => {
       triggerLoading(true);
       const start = eachWeekStart[0];
       const end = addDays(eachWeekStart[eachWeekStart.length - 1], daysList.length);
-      const query = `?start=${start}&end=${end}`;
-      const events = await remoteEvents!(query);
+      const events = await (async () => {
+        // Remove `remoteEvents` in future release
+        if (remoteEvents) {
+          return await remoteEvents(`?start=${start}&end=${end}`);
+        } else {
+          return await getRemoteEvents!({
+            start,
+            end,
+            view: "month",
+          });
+        }
+      })();
       if (events && events?.length) {
         handleState(events, "events");
       }
@@ -75,10 +86,11 @@ const Month = () => {
       triggerLoading(false);
     }
     // eslint-disable-next-line
-  }, [selectedDate, remoteEvents]);
+  }, [selectedDate, remoteEvents, getRemoteEvents]);
 
   useEffect(() => {
-    if (remoteEvents instanceof Function) {
+    // Remove `remoteEvents` in future release
+    if ((remoteEvents || getRemoteEvents) instanceof Function) {
       fetchEvents();
     }
     // eslint-disable-next-line

src/lib/views/Day.tsx

@@ -46,6 +46,7 @@ const Week = () => {
     events,
     handleGotoDay,
     remoteEvents,
+    getRemoteEvents,
     triggerLoading,
     handleState,
     resources,
@@ -78,8 +79,19 @@ const Week = () => {
   const fetchEvents = useCallback(async () => {
     try {
       triggerLoading(true);
-      const query = `?start=${weekStart}&end=${weekEnd}`;
-      const events = await remoteEvents!(query);
+
+      const events = await (async () => {
+        // Remove `remoteEvents` in future release
+        if (remoteEvents) {
+          return await remoteEvents(`?start=${weekStart}&end=${weekEnd}`);
+        } else {
+          return await getRemoteEvents!({
+            start: weekStart,
+            end: weekEnd,
+            view: "week",
+          });
+        }
+      })();
       if (Array.isArray(events)) {
         handleState(events, "events");
       }
@@ -89,14 +101,15 @@ const Week = () => {
       triggerLoading(false);
     }
     // eslint-disable-next-line
-  }, [selectedDate, remoteEvents]);
+  }, [selectedDate, remoteEvents, getRemoteEvents]);
 
   useEffect(() => {
-    if (remoteEvents instanceof Function) {
+    // Remove `remoteEvents` in future release
+    if ((remoteEvents || getRemoteEvents) instanceof Function) {
       fetchEvents();
     }
     // eslint-disable-next-line
-  }, [fetchEvents]);
+  }, [selectedDate, remoteEvents, getRemoteEvents]);
 
   const renderMultiDayEvents = (events: ProcessedEvent[], today: Date) => {
     const isFirstDayInWeek = isSameDay(weekStart, today);