Merge pull request #1879 from Eli-Schei/main

samples/react-calendar/README.md

@@ -114,12 +114,13 @@ The Web Part Use PnPjs library, Office-ui-fabric-react components. react Big-Cal
 
 Solution|Author(s)
 --------|---------
-Calendar Web PArt|[Mohammed Amer](https://www.linkedin.com/in/mohammad3mer/) ([@https://twitter.com/Mohammad3mer](https://twitter.com/Mohammad3mer))
+Calendar Web Part|[Abderahman Moujahid](https://github.com/Abderahman88)
-Calendar Web Part|Abderahman Moujahid
+Calendar Web Part|[Eli H. Schei](https://github.com/Eli-Schei)
-Calendar Web Part|Hugo Bernier ([@bernier](https://twitter.com/bernierh), [Tahoe Ninjas](https://tahoeninjas.blog/))
+Calendar Web Part|[Hugo Bernier](https://github.com/hugoabernier) ([@bernier](https://twitter.com/bernierh), [Tahoe Ninjas](https://tahoeninjas.blog/))
-Calendar Web Part|João Mendes
+Calendar Web Part|[João Mendes](https://github.com/joaojmendes)
-Calendar Web Part|Mohamed Derhalli
+Calendar Web Part|[Mohamed Derhalli](https://github.com/derhallim)
-Calendar Web Part|Nanddeep Nachan ([@NanddeepNachan](https://twitter.com/NanddeepNachan))
+Calendar Web PArt|[Mohammed Amer](https://www.linkedin.com/in/mohammad3mer/) ([@Mohammad3mer](https://twitter.com/Mohammad3mer))
+Calendar Web Part|[Nanddeep Nachan](https://github.com/nanddeepn) ([@NanddeepNachan](https://twitter.com/NanddeepNachan))
 
 ## Version history
 
@@ -136,12 +137,8 @@ Version|Date|Comments
 1.0.8|December 24, 2020|Fixed timezone difference (#1646)
 1.0.9|March 16, 2021|Fixed issue deleting events (#1773)
 1.0.10|March 27, 2021|Updated prompt message when deleting single v/s multi-event.
+1.0.11|May 10, 2021|Optimized page refresh using local storage
 
-## Disclaimer
-
-**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
-
----
 
 ## Minimal Path to Awesome
 
@@ -153,4 +150,21 @@ Version|Date|Comments
   - `gulp package-solution --ship`
   - Add to **AppCatalog** and deploy
 
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+
+## Support
+
+We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
+
+If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
+
+
+
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-calendar" />

samples/react-calendar/assets/sample.json

@@ -200,6 +200,10 @@
         "pictureUrl": "https://avatars.githubusercontent.com/u/19314043?s=460&u=79acb7fd0ad466e1040ddd8a739fa93385018b81&v=4",
         "name": "Mohammed Amer",
         "twitter": "Mohammad3mer"
+      }, {
+        "gitHubAccount": "Eli-Schei",
+        "name": "Eli H. Schei",
+        "pictureUrl": "https://github.com/Eli-Schei"
       }
     ],
     "references": [

samples/react-calendar/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar",
-  "version": "1.0.4",
+  "version": "1.0.10",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

samples/react-calendar/src/services/spservices.ts

@@ -490,7 +490,7 @@ export default class spservices {
 
       if (results && results.Row.length > 0) {
         let event: any = '';
-        
+        const mapEvents = async () : Promise<boolean> => {
             for (event of results.Row) {
               const eventDate = await this.getLocalTime(event.EventDate);
               const endDate = await this.getLocalTime(event.EndDate);
@@ -538,10 +538,30 @@ export default class spservices {
                 UID: event.UID.replace("{", "").replace("}", ""),
               });
             }
-
+          return true;
+        };
+        //Checks to see if there are any results saved in local storage
+        if(window.localStorage.getItem("eventResult")){
+          //if there is a local version - compares it to the current version 
+          if(window.localStorage.getItem("eventResult") === JSON.stringify(results)){
+            //No update needed use current savedEvents
+            events = JSON.parse(window.localStorage.getItem("calendarEventsWithLocalTime"));
+          }else{
+            //update local storage
+            window.localStorage.setItem("eventResult", JSON.stringify(results));
+            //when they are not equal then we loop through the results and maps them to IEventData
+            /* tslint:disable:no-unused-expression */
+            await mapEvents() ? window.localStorage.setItem("calendarEventsWithLocalTime", JSON.stringify(events)) : null;           
+          }
+        }else{
+          //if there is no local storage of the events we create them
+          window.localStorage.setItem("eventResult", JSON.stringify(results));
+          //we also needs to map through the events the first time and save the mapped version to local storage
+          await mapEvents() ? window.localStorage.setItem("calendarEventsWithLocalTime", JSON.stringify(events)) : null;           
+        }
+      }
       let parseEvt: parseRecurrentEvent = new parseRecurrentEvent();
       events = parseEvt.parseEvents(events, null, null);
-      }
        
       // Return Data
       return events;

samples/react-calendar/src/webparts/calendar/components/Calendar.tsx

@@ -122,7 +122,9 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
       if (!this.props.list || !this.props.siteUrl || !this.props.eventStartDate.value || !this.props.eventEndDate.value) return;
 
       this.userListPermissions = await this.spService.getUserPermissions(this.props.siteUrl, this.props.list);
+      
       const eventsData: IEventData[] = await this.spService.getEvents(escape(this.props.siteUrl), escape(this.props.list), this.props.eventStartDate.value, this.props.eventEndDate.value);
+
       this.setState({ eventData: eventsData, hasError: false, errorMessage: "" });
     } catch (error) {
       this.setState({ hasError: true, errorMessage: error.message, isloading: false });