React application news ticker (#1444)

* Upgraded to SPFX 1.20, React 17 , Node 18! Rewrite the code to use Graph API, Also coded a native Ticker instead of another module as it's was no longer maintained! Also refactored alot of the code! * fixed the SCSS and cleaned up abit! * forgot to update readme... * Update samples/react-application-news-ticker/package.json Co-authored-by: Adam Wójcik <[email protected]> * Update samples/react-application-news-ticker/package.json Co-authored-by: Adam Wójcik <[email protected]> --------- Co-authored-by: Adam Wójcik <[email protected]>
pnp · Oct 30, 2024 · 34ab7fa · 34ab7fa
1 parent 338fa87
commit 34ab7fa
Show file tree

Hide file tree

Showing 19 changed files with 32,643 additions and 22,185 deletions.
diff --git a/samples/react-application-news-ticker/.eslintrc.js b/samples/react-application-news-ticker/.eslintrc.js
diff --git a/samples/react-application-news-ticker/.yo-rc.json b/samples/react-application-news-ticker/.yo-rc.json
@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "plusBeta": false,
     "isCreatingSolution": true,
-    "version": "1.15.2",
+    "version": "1.20.0",
     "libraryName": "react-application-news-ticker",
     "libraryId": "bae26017-8238-4422-8a72-e052d8cd1bd9",
     "environment": "spo",

diff --git a/samples/react-application-news-ticker/README.md b/samples/react-application-news-ticker/README.md
@@ -8,8 +8,8 @@ An SPFx Extension that displays news as a running text at the top of every moder
 
 ## Compatibility
 
-![SPFx 1.15.2](https://img.shields.io/badge/SPFx-1.15.2-green.svg)
-![Node.js LTS v14](https://img.shields.io/badge/Node.js-LTS%20v14-green.svg) 
+![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
+![Node.js LTS v18](https://img.shields.io/badge/Node.js-LTS%20v18-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@@ -31,6 +31,7 @@ Create list as the data source for the app with below details:
    - `Title`: single line text
    - `Content`: multiline text (plain text)
    - `PublishDate`: date
+   - `ExpiryDate`: date
 3. Required View:
    - Title: `Published News`
    - Configure the view as you like. The app will get the data based on the view. Below is the example:
@@ -44,6 +45,8 @@ Solution|Author(s)
 --------|---------
 react-application-news-ticker | [Ari Gunawan](https://github.com/AriGunawan) ([@arigunawan3023](https://twitter.com/arigunawan3023))
 react-application-news-ticker | [Sudharsan Kesavanarayanan](https://github.com/sudharsank) (NTT Ltd, [@sudharsank](https://twitter.com/sudharsank))
+react-application-news-ticker | [Nicolas Kheirallah](https://github.com/NicolasKheirallah) 
+
 
 ## Version history
 
@@ -52,6 +55,7 @@ Version|Date|Comments
 1.0|April 19, 2021|Initial release
 1.1|October 17, 2021|Update SPFx version to 1.12.1
 1.2|August 27, 2021|Fixed failed upgrade and update SPFx version to 1.15.2
+1.3|October 24, 2024|Upgraded to SPFX 1.20, React 17 , Node 18! Rewrite the code to use Graph API, Also coded a native Ticker instead of another module as it's was no longer maintained! Also refactored a lot of the code
 
 
 ## Minimal Path to Awesome
@@ -73,15 +77,13 @@ This extension illustrates the following concepts:
 ## References
 
 - [SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview)
-- [PnP JS](https://pnp.github.io/pnpjs/)
-- [react-ticker](https://github.com/AndreasFaust/react-ticker)
 
 
 ## Debug URL for testing
 Here's a debug URL for testing around this sample. 
 
 ```
-?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&customActions={"4358e70e-ec3c-4713-beb6-39c88f7621d1":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"listTitle":"News","listViewTitle":"Published+News","bgColor":"%2348c78e","textColor":"white"}}}
+?debugManifestsFile=https://localhost:4321/temp/manifests.js
 ```
 
 ## Disclaimer

diff --git a/samples/react-application-news-ticker/assets/sample.json b/samples/react-application-news-ticker/assets/sample.json
@@ -9,7 +9,7 @@
       "An SPFx Extension that displays news as a running text at the top of every modern page."
     ],
     "creationDateTime": "2021-04-19",
-    "updateDateTime": "2022-11-11",
+    "updateDateTime": "2024-10-24",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.15.2"
+        "value": "1.20.0"
       }
     ],
     "thumbnails": [

diff --git a/samples/react-application-news-ticker/config/package-solution.json b/samples/react-application-news-ticker/config/package-solution.json
@@ -7,12 +7,18 @@
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
+    "webApiPermissionRequests": [
+      {
+        "resource": "Microsoft Graph",
+        "scope": "Sites.Read.All"
+      }
+    ],
     "developer": {
       "name": "",
       "websiteUrl": "",
       "privacyUrl": "",
       "termsOfUseUrl": "",
-      "mpnId": "Undefined-1.15.2"
+      "mpnId": "Undefined-1.20.0"
     },
     "metadata": {
       "shortDescription": {
@@ -43,4 +49,4 @@
   "paths": {
     "zippedPackage": "solution/React News Ticker.sppkg"
   }
-}
+}
diff --git a/samples/react-application-news-ticker/config/serve.json b/samples/react-application-news-ticker/config/serve.json
@@ -2,34 +2,5 @@
     "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
     "port": 4321,
     "https": true,
-    "serveConfigurations": {
-        "default": {
-            "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
-            "customActions": {
-                "4358e70e-ec3c-4713-beb6-39c88f7621d1": {
-                    "location": "ClientSideExtension.ApplicationCustomizer",
-                    "properties": {
-                        "listTitle": "News",
-                        "listViewTitle": "Published News",
-                        "bgColor": "#48c78e",
-                        "textColor": "white"
-                    }
-                }
-            }
-        },
-        "newsTicker": {
-            "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
-            "customActions": {
-                "4358e70e-ec3c-4713-beb6-39c88f7621d1": {
-                    "location": "ClientSideExtension.ApplicationCustomizer",
-                    "properties": {
-                        "listTitle": "News",
-                        "listViewTitle": "Published News",
-                        "bgColor": "#48c78e",
-                        "textColor": "white"
-                    }
-                }
-            }
-        }
-    }
+    "initialPage": "https://localhost:5432/workbench"
 }