chore(spfx-extensions): udptade readme.md, sample.json, lint issues

Author: Hugo Bernier

samples/react-application-customizer-feedback-widget/README.md

@@ -77,8 +77,7 @@ Create a SharePoint custom list Feedbacks in the SPO site where this application
 ?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&customActions=%7B"33ce42af-1748-4989-ab97-a8d9f782b886"%3A%7B"location"%3A"ClientSideExtension.ApplicationCustomizer"%2C"properties"%3A%7B"title"%3A"Submit+your+feedbacks+%26+ideas"%2C"position"%3A"rightBottom"%7D%7D%7D
 ```
 
-## Deploy Package Solution 🚀
-
+## Deploy Package Solution 
 - Ensure that you are at the solution folder
 - in the command-line run:
   - `gulp build --ship`

samples/react-application-customizer-feedback-widget/assets/sample.json

@@ -9,7 +9,7 @@
       "An SPFx Application Customizer Extension placed in the bottom placeholder which allows users to input their feedbacks without scrolling down to the end of the page."
     ],
     "creationDateTime": "2023-07-02",
-    "updateDateTime": "2023-07-02",
+    "updateDateTime": "2025-05-25",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.16.1"
+        "value": "1.20.2"
       }
     ],
 "tags": [],

samples/react-application-customizer-feedback-widget/src/Configuration/PnPConfig.ts

@@ -10,10 +10,11 @@ import "@pnp/sp/site-users/web"
 import "@pnp/sp/items"
 import "@pnp/sp/comments"
 
+// eslint-disable-next-line no-var, @rushstack/no-new-null
 var _sp: SPFI | null = null
 
 export const getSP = (context?: BaseComponentContext): SPFI => {
-  if (context != null) {
+  if (context !== null) {
     //You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
     // The LogLevel set's at what level a message will be written to the console
     _sp = spfi().using(SPFx(context)).using(PnPLogging(LogLevel.Warning))

samples/react-application-customizer-feedback-widget/src/extensions/feedback/FeedbackApplicationCustomizer.ts

@@ -53,6 +53,7 @@ export default class FeedbackApplicationCustomizer extends BaseApplicationCustom
         this._rootElement = this.HeaderPlaceholder.domElement
       }
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const elem: React.ReactElement<any> = React.createElement(
         FeedbackCustomizer,
         {

samples/react-application-customizer-feedback-widget/src/extensions/feedback/components/FeedbackCustomizer.tsx

@@ -21,38 +21,42 @@ type CurrentUser = {
 }
 
 interface IFeedbackCustomizerProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   context: any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   properties: any
 }
 
 export default function FeedbackCustomizer({
   context,
   properties,
-}: IFeedbackCustomizerProps) {
+// eslint-disable-next-line @rushstack/no-new-null
+}: IFeedbackCustomizerProps): React.ReactElement | null {
   const [open, setOpen] = useState(false)
   const [currentUser, setCurrentUser] = useState<CurrentUser>({
     name: "",
     mailId: "",
   })
   const [feedbackComment, setfeedbackComment] = useState("")
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [currentRating, setCurrentRating] = useState<any>(0)
   const [errorMessage, setErrorMessage] = useState("")
   const [successFlag, setSuccessFlag] = useState(false)
   const [currentsiteUrl, setSiteUrl] = useState("")
   const [isExiting, setIsExiting] = useState(false)
 
-  const handleOpen = () => {
+  const handleOpen = (): void => {
     setOpen(true)
   }
 
-  const handleBtnClose = () => {
+  const handleBtnClose = (): void => {
     setOpen(false)
     setfeedbackComment("")
     setSuccessFlag(false)
     handleOpen() // Call handleOpen to show the popup again
   }
 
-  const handleClose = () => {
+  const handleClose = (): void => {
     setIsExiting(true)
     setTimeout(() => {
       setOpen(false)
@@ -69,23 +73,23 @@ export default function FeedbackCustomizer({
       })
     }
     // set current page siteurl
-    let getpageUrl = window.location.href
+    const getpageUrl = window.location.href
     setSiteUrl(getpageUrl)
   }, [])
 
-  const handleTextArea = (event) => {
+  const handleTextArea = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
     setfeedbackComment(event.target.value)
   }
 
-  const handleFeedbackSubmit = async () => {
-    let sp: SPFI = getSP()
+  const handleFeedbackSubmit = async (): Promise<void> => {
+    const sp: SPFI = getSP()
 
     if (feedbackComment.trim() === "") {
       setErrorMessage("Comment can't be empty")
     } else if (feedbackComment.length < 30) {
       setErrorMessage("Comment should be at least 50 characters long")
     } else {
-      let data = await sp.web.lists.getByTitle("Feedbacks").items.add({
+      const data = await sp.web.lists.getByTitle("Feedbacks").items.add({
         Employee_Name: currentUser.name,
         Employee_MailId: currentUser.mailId,
         Comment: feedbackComment,
@@ -123,7 +127,7 @@ export default function FeedbackCustomizer({
             }`}
           >
             <div
-              className={styles["buttonWrapper"]}
+              className={styles.buttonWrapper}
               onClick={open ? handleClose : handleOpen}
             >
               <BiMessageSquareDetail
@@ -162,15 +166,15 @@ export default function FeedbackCustomizer({
                   />
                 </div>
                 {successFlag === false ? (
-                  <div className={styles["feedbackWrapper"]}>
+                  <div className={styles.feedbackWrapper}>
                     <Textarea
-                      className={styles["textArea__style"]}
+                      className={styles.textArea__style}
                       value={feedbackComment}
                       onChange={(event) => handleTextArea(event)}
                       placeholder='Type here...'
                     ></Textarea>
                     {errorMessage && (
-                      <p className={styles["errorTxt"]}>{errorMessage}</p>
+                      <p className={styles.errorTxt}>{errorMessage}</p>
                     )}
                     <Rating
                       value={currentRating}
@@ -180,7 +184,7 @@ export default function FeedbackCustomizer({
                       onChange={(_, data) => setCurrentRating(data.value)}
                     />
                     <button
-                      className={styles["submitbtn"]}
+                      className={styles.submitbtn}
                       onClick={handleFeedbackSubmit}
                     >
                       Submit
@@ -190,7 +194,7 @@ export default function FeedbackCustomizer({
                   <SuccessPage goBack={handleBtnClose} />
                 )}
                 <div
-                  className={`${styles["downarrow"]} ${
+                  className={`${styles.downarrow} ${
                     properties.position === "leftBottom"
                       ? styles["downarrow-left"]
                       : ""

samples/react-application-customizer-feedback-widget/src/extensions/feedback/components/SuccessPage.tsx

@@ -9,12 +9,14 @@ export interface ISuccessProps {
 
 export const SuccessPage: React.FC<ISuccessProps> = (props:ISuccessProps): JSX.Element => {
 
-  const handleGoBack = () => {
-    props.goBack && props.goBack();
+  const handleGoBack = (): void => {
+    if (props.goBack) {
+      props.goBack();
+    }
   };
 
   return (
-    <div className={styles["successWrapper"]}>
+    <div className={styles.successWrapper}>
       <p style={{ marginBottom: "0", fontSize: "15px", fontWeight: "500" }}>
         Thanks for submitting your feedback!
       </p>