Merge pull request #2067 from chandaniprajapati/react-my-events/fixed-date-issues

samples/react-emoji-ratings/release/component-dependency-audit/react-emoji-ratings.json

@@ -0,0 +1,116 @@
+{
+  "bundles": {
+    "react-emoji-reaction-rating-web-part": {
+      "dependencies": [
+        {
+          "componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
+          "componentName": "@microsoft/sp-property-pane",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": true
+        },
+        {
+          "componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
+          "componentName": "@microsoft/sp-loader",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
+          "componentName": "@ms/sp-telemetry",
+          "componentVersion": "0.19.2",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "e40f8203-b39d-425a-a957-714852e33b79",
+          "componentName": "@microsoft/sp-dynamic-data",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
+          "componentName": "@microsoft/sp-lodash-subset",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
+          "componentName": "@microsoft/sp-core-library",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
+          "componentName": "tslib",
+          "componentVersion": "1.10.0",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
+          "componentName": "@ms/odsp-core-bundle",
+          "componentVersion": "1.1.13",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
+          "componentName": "@microsoft/sp-diagnostics",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
+          "componentName": "@microsoft/sp-page-context",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
+          "componentName": "@microsoft/load-themed-styles",
+          "componentVersion": "0.1.2",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
+          "componentName": "@microsoft/sp-http",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
+          "componentName": "react",
+          "componentVersion": "16.9.0",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
+          "componentName": "react-dom",
+          "componentVersion": "16.9.0",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "02a01e42-69ab-403d-8a16-acd128661f8e",
+          "componentName": "@microsoft/office-ui-fabric-react-bundle",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": true
+        },
+        {
+          "componentId": "17ce0976-e69a-4355-be84-89b69a74717d",
+          "componentName": "@ms/uifabric-styling-bundle",
+          "componentVersion": "0.1.0",
+          "isDirectDependency": false
+        },
+        {
+          "componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
+          "componentName": "@microsoft/sp-webpart-base",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": true
+        },
+        {
+          "componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
+          "componentName": "@microsoft/sp-component-base",
+          "componentVersion": "1.12.1",
+          "isDirectDependency": false
+        }
+      ]
+    }
+  }
+}

samples/react-emoji-ratings/release/manifests/0dbbad17-3a6b-44ed-8ebb-989a8dd906b5.manifest.json

@@ -0,0 +1,138 @@
+{
+  "id": "0dbbad17-3a6b-44ed-8ebb-989a8dd906b5",
+  "alias": "ReactEmojiReactionRatingWebPart",
+  "componentType": "WebPart",
+  "version": "0.0.1",
+  "manifestVersion": 2,
+  "requiresCustomScript": false,
+  "supportedHosts": [
+    "SharePointWebPart"
+  ],
+  "preconfiguredEntries": [
+    {
+      "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+      "group": {
+        "default": "Other"
+      },
+      "title": {
+        "default": "react-emoji-reaction-rating"
+      },
+      "description": {
+        "default": "react-emoji-reaction-rating description"
+      },
+      "officeFabricIconFontName": "Page",
+      "properties": {
+        "propertyRatingText": "React emoji reaction rating web part!. How does you like this news/article? ",
+        "propertyEmojisCollection": [
+          {
+            "Title": "Wow!",
+            "ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg1.png"
+          },
+          {
+            "Title": "Mmm",
+            "ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg2.png"
+          },
+          {
+            "Title": "Hmm",
+            "ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg3.png"
+          },
+          {
+            "Title": "Meh",
+            "ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg4.png"
+          },
+          {
+            "Title": "Pff",
+            "ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg5.png"
+          }
+        ],
+        "propertyEnableComments": "True",
+        "propertyEnableCount": "True"
+      }
+    }
+  ],
+  "loaderConfig": {
+    "internalModuleBaseUrls": [
+      "<!-- PATH TO CDN -->"
+    ],
+    "entryModuleId": "react-emoji-reaction-rating-web-part",
+    "scriptResources": {
+      "react-emoji-reaction-rating-web-part": {
+        "type": "path",
+        "path": "react-emoji-reaction-rating-web-part.js"
+      },
+      "@microsoft/sp-property-pane": {
+        "type": "component",
+        "id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
+        "version": "1.12.1"
+      },
+      "@microsoft/office-ui-fabric-react-bundle": {
+        "type": "component",
+        "id": "02a01e42-69ab-403d-8a16-acd128661f8e",
+        "version": "1.12.1"
+      },
+      "@microsoft/sp-lodash-subset": {
+        "type": "component",
+        "id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
+        "version": "1.12.1"
+      },
+      "@microsoft/sp-core-library": {
+        "type": "component",
+        "id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
+        "version": "1.12.1"
+      },
+      "@microsoft/sp-webpart-base": {
+        "type": "component",
+        "id": "974a7777-0990-4136-8fa6-95d80114c2e0",
+        "version": "1.12.1"
+      },
+      "react": {
+        "type": "component",
+        "id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
+        "version": "16.9.0"
+      },
+      "react-dom": {
+        "type": "component",
+        "id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
+        "version": "16.9.0"
+      },
+      "ReactEmojiReactionRatingWebPartStrings": {
+        "type": "path",
+        "path": "ReactEmojiReactionRatingWebPartStrings_en-us.js"
+      },
+      "PropertyControlStrings": {
+        "type": "localizedPath",
+        "paths": {
+          "bg-BG": "PropertyControlStrings_bg-bg.js",
+          "ca-ES": "PropertyControlStrings_ca-es.js",
+          "da-DK": "PropertyControlStrings_da-dk.js",
+          "de-DE": "PropertyControlStrings_de-de.js",
+          "el-GR": "PropertyControlStrings_el-gr.js",
+          "en-US": "PropertyControlStrings_en-us.js",
+          "es-ES": "PropertyControlStrings_es-es.js",
+          "et-EE": "PropertyControlStrings_et-ee.js",
+          "fi-FI": "PropertyControlStrings_fi-fi.js",
+          "fr-FR": "PropertyControlStrings_fr-fr.js",
+          "it-IT": "PropertyControlStrings_it-it.js",
+          "ja-JP": "PropertyControlStrings_ja-jp.js",
+          "lt-LT": "PropertyControlStrings_lt-lt.js",
+          "lv-LV": "PropertyControlStrings_lv-lv.js",
+          "nb-NO": "PropertyControlStrings_nb-no.js",
+          "nl-NL": "PropertyControlStrings_nl-nl.js",
+          "no": "PropertyControlStrings_no.js",
+          "pl-PL": "PropertyControlStrings_pl-pl.js",
+          "pt-PT": "PropertyControlStrings_pt-pt.js",
+          "ro-RO": "PropertyControlStrings_ro-ro.js",
+          "ru-RU": "PropertyControlStrings_ru-ru.js",
+          "sk-SK": "PropertyControlStrings_sk-sk.js",
+          "sr-Latn-RS": "PropertyControlStrings_sr-latn-rs.js",
+          "sv-SE": "PropertyControlStrings_sv-se.js",
+          "tr-TR": "PropertyControlStrings_tr-tr.js",
+          "vi-VN": "PropertyControlStrings_vi-vn.js",
+          "zh-CN": "PropertyControlStrings_zh-cn.js",
+          "zh-TW": "PropertyControlStrings_zh-tw.js"
+        },
+        "defaultPath": "PropertyControlStrings_en-us.js"
+      }
+    }
+  }
+}

samples/react-my-events/README.md

@@ -21,9 +21,11 @@ This web part provides loggedin user's outlook events with some advanced feature
 
 ![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
 ![Node.js LTS v14 | LTS v12 | LTS v10](https://img.shields.io/badge/Node.js-LTS%20v14%20%7C%20LTS%20v12%20%7C%20LTS%20v10-green.svg) 
-![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
+![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
-![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") 
+![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%202019-Not%20compatible-red.svg)
-![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
+![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%202016%20(Feature%20Pack%202)-Not%20compatible-red.svg)
+![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "This solution requires access to user's Outlook events")
+![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 
 ## Applies to
 
@@ -61,6 +63,7 @@ react-my-events | [Chandani Prajapati](https://github.com/chandaniprajapati) ([@
 Version|Date|Comments
 -------|----|--------
 1.0 | August 18, 2021 | Initial release
+1.1 | October 4, 2021 | Fixed date issue as start and end date are rendering incorrect in event card.
 
 ## Minimal Path to Awesome
 

samples/react-my-events/assets/sample.json

@@ -9,7 +9,7 @@
             "This web part provides loggedin user's outlook events with some advanced features"
         ],
         "created": "2021-08-18",
-        "modified": "2021-08-18",
+        "modified": "2021-10-04",
         "products": [
             "SharePoint",
             "Office"
@@ -22,6 +22,10 @@
             {
                 "key": "SPFX-VERSION",
                 "value": "1.12.1"
+            },
+            {
+                "key": "PNPCONTROLS",
+                "value": "PropertyFieldNumber, WebPartTitle"
             }
         ],
         "thumbnails": [

samples/react-my-events/src/shared/components/DateBox/DateBox.tsx

@@ -55,9 +55,9 @@ export default class DateBox extends React.Component<IDateBoxProps, {}>{
           (this.props.size === IDateBoxSize.Small ? styles.boxIsSmall : styles.boxIsMedium), this.props.className
         )}
         data-automation-id="multipleDayBox">
-        <div className={styles.date} data-automation-id="multipleDayStartDateContainer">{startEvent.format("MMM D").toUpperCase()}</div>
+        <div className={styles.month} data-automation-id="multipleDayStartDateContainer">{startEvent.format("MMM").toUpperCase()}</div>
-        <hr className={styles.separator} />
+        <div className={styles.day}
-        <div className={styles.date} data-automation-id="multipleDayEndDateContainer">{endEvent.format("MMM D").toUpperCase()}</div>
+          data-automation-id="singleDayDayContainer">{startEvent.format("D") + "-" + endEvent.format("D")}</div>
       </div>);
   }
 }

samples/react-my-events/src/shared/components/EventCard/EventCard.tsx

@@ -66,8 +66,8 @@ export const EventCard = (props: IEventCardProps) => {
                         <div>
                             <DateBox
                                 className={styles.dateBox}
-                                startDate={start}
+                                startDate={eventDate}
-                                endDate={end}
+                                endDate={endDate}
                                 size={IDateBoxSize.Small}
                                 themeVariant={themeVariant}
                             />
@@ -102,8 +102,8 @@ export const EventCard = (props: IEventCardProps) => {
                             <div className={styles.dateBoxContainer} style={{ height: 120, borderBottom: '1px solid rgb(237, 235, 233)' }}>
                                 <DateBox
                                     className={styles.dateBox}
-                                    startDate={start}
+                                    startDate={eventDate}
-                                    endDate={end}
+                                    endDate={endDate}
                                     size={IDateBoxSize.Medium}
                                     themeVariant={themeVariant}
                                 />

samples/react-my-events/src/shared/services/CalendarService.ts

@@ -26,8 +26,6 @@ export class CalendarService {
         catch (err) {
             Promise.reject(err);
         }
-    }
+    }    
-
-    
 }
 

samples/react-my-events/src/webparts/reactMyEvents/components/ReactMyEvents.tsx

@@ -47,26 +47,21 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
   public getStartEndDate() {
     switch (this.props.dateRange) {
       case DateRange.AllUpcoming:
-        //this.endDate = moment().add(1, "years").format('YYYY-MM-DD');
         this.endDate = moment().endOf('week').day('Friday').add(1, 'years').format('YYYY-MM-DD');
         break;
       case DateRange.ThisWeek:
         this.endDate = moment().endOf('week').day('Friday').format('YYYY-MM-DD');
-        //this.endDate = moment().add(1, "weeks").format('YYYY-MM-DD');
         break;
       case DateRange.NextTwoWeeks:
-        //this.endDate = moment().add(3, "weeks").format('YYYY-MM-DD');
         this.endDate = moment().endOf('week').day('Friday').add(2, 'week').format('YYYY-MM-DD');
         break;
       case DateRange.Month:
-        //this.endDate = moment().add(1, "months").format('YYYY-MM-DD');
         this.endDate = moment().endOf('week').day('Friday').add(1, "months").format('YYYY-MM-DD');
         break;
       case DateRange.Quarter:
-        //this.endDate = moment().add(1, "quarters").format('YYYY-MM-DD');
         this.endDate = moment().endOf('week').day('Friday').add(1, "quarters").format('YYYY-MM-DD');
         break;
-    }   
+    }
   }
 
   public componentDidMount() {
@@ -105,6 +100,33 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
       });
   }
 
+
+  private _onPageUpdate = (pageNumber: number): void => {
+    this.setState({
+      currentPage: pageNumber
+    });
+  }
+
+  private _onRenderCompactItem = (item: any, _index: number): JSX.Element => {
+    return <div
+      data-is-focusable={true}
+      data-is-focus-item={true}
+      role="listitem"
+      aria-label={item.subject}
+    >
+      <EventCard
+        key={`eventCard${_index}`}
+        event={item}
+        isCompact={Layouts.compact}
+        layout={this.props.layout}
+        themeVariant={this.props.themeVariant} />
+    </div>;
+  }
+
+  private _onConfigure = () => {
+    this.props.context.propertyPane.open();
+  }
+
   private _renderFilmstripList(): JSX.Element {
     const {
       events } = this.state;
@@ -139,12 +161,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
     } = this.state;
 
     const { maxEvents } = this.props;
-
-
-    let pagedItems: any[] = this.state.events;
-    const totalItems: number = pagedItems.length;
-    let showPages: boolean = false;
-
     let pagedEvents: ICalendarEvent[] = events;
     let usePaging: boolean = false;
 
@@ -158,7 +174,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
     }
 
     return (
-
       <div className={styles.compact}>
         <CompactLayout
           items={pagedEvents}
@@ -177,32 +192,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
     );
   }
 
-  private _onPageUpdate = (pageNumber: number): void => {
-    this.setState({
-      currentPage: pageNumber
-    });
-  }
-
-  private _onRenderCompactItem = (item: any, _index: number): JSX.Element => {
-    return <div
-      data-is-focusable={true}
-      data-is-focus-item={true}
-      role="listitem"
-      aria-label={item.subject}
-    >
-      <EventCard
-        key={`eventCard${_index}`}
-        event={item}
-        isCompact={Layouts.compact}
-        layout={this.props.layout}
-        themeVariant={this.props.themeVariant} />
-    </div>;
-  }
-
-  private _onConfigure = () => {
-    this.props.context.propertyPane.open();
-  }
-
   private _renderContent(): JSX.Element {
     const isCompact = this.props.layout;
     const { errorMessage, events, loading } = this.state;
@@ -224,11 +213,9 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
     }
 
     else if (events.length === 0) {
-      // we're done loading, no errors, but have no events
       return (<MessageBar
         messageBarType={MessageBarType.error}>{this.state.noEventsFoundMessage}</MessageBar>);
     }
-
   }
 
   public render(): React.ReactElement<IReactMyEventsProps> {