Closed warnings

samples/react-sp-bookmarks/src/webparts/reactSpBookmarks/components/ReactSpBookmarks.tsx

@@ -27,18 +27,27 @@ const ReactSpBookmarks: React.FC<IReactSpBookmarksProps> = (props) => {
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
   const [editingBookmark, setEditingBookmark] = React.useState<Bookmark | null>(null);
 
-  // Fetch bookmarks from the SharePoint list
-  const fetchBookmarks = async () => {
+  interface ListItem {
+    Id: number;
+    Title: string;
+    URL: string;
+    Icon: string;
+  }
+
+  const fetchBookmarks = async (): Promise<void> => {
     try {
-      const items = await sp.web.lists.getByTitle(listName).items.select('Id', 'Title', 'URL', 'Icon')();
-      const bookmarks: Bookmark[] = items.map((item: any) => ({
+      const items: ListItem[] = await sp.web.lists
+        .getByTitle(listName)
+        .items.select('Id', 'Title', 'URL', 'Icon')();
+
+      const fetchedBookmarks: Bookmark[] = items.map((item: ListItem) => ({
         id: item.Id.toString(),
         title: item.Title,
         url: item.URL,
-        icon: item.Icon
+        icon: item.Icon,
       }));
 
-      setBookmarks(bookmarks);
+      setBookmarks(fetchedBookmarks);
       setLoading(false);
     } catch (error) {
       console.error('Error fetching bookmarks:', error);
@@ -55,16 +64,15 @@ const ReactSpBookmarks: React.FC<IReactSpBookmarksProps> = (props) => {
   };
 
   // Add a new bookmark to the SharePoint list
-  const handleAddBookmark = async (newBookmark: Bookmark) => {
+  const handleAddBookmark = async (newBookmark: Bookmark): Promise<void> => {
     try {
       await sp.web.lists.getByTitle(listName).items.add({
         Title: newBookmark.title,
         URL: newBookmark.url,
-        Icon: newBookmark.icon
+        Icon: newBookmark.icon,
       });
 
-      // Refresh the bookmarks list
-      fetchBookmarks();
+      await fetchBookmarks(); // Ensure bookmarks are refreshed
       setIsModalOpen(false); // Close the modal after adding the bookmark
     } catch (error) {
       console.error('Error adding bookmark:', error);
@@ -73,16 +81,15 @@ const ReactSpBookmarks: React.FC<IReactSpBookmarksProps> = (props) => {
   };
 
   // Update an existing bookmark
-  const handleUpdateBookmark = async (updatedBookmark: Bookmark) => {
+  const handleUpdateBookmark = async (updatedBookmark: Bookmark): Promise<void> => {
     try {
       await sp.web.lists.getByTitle(listName).items.getById(Number(updatedBookmark.id)).update({
         Title: updatedBookmark.title,
         URL: updatedBookmark.url,
-        Icon: updatedBookmark.icon
+        Icon: updatedBookmark.icon,
       });
 
-      // Refresh the bookmarks list
-      fetchBookmarks();
+      await fetchBookmarks(); // Ensure bookmarks are refreshed
       setIsModalOpen(false); // Close the modal after updating the bookmark
       setEditingBookmark(null); // Reset the editing state
     } catch (error) {
@@ -92,35 +99,53 @@ const ReactSpBookmarks: React.FC<IReactSpBookmarksProps> = (props) => {
   };
 
   // Delete a bookmark
-  const handleDeleteBookmark = async (id: string) => {
+  const handleDeleteBookmark = async (id: string): Promise<void> => {
     try {
       await sp.web.lists.getByTitle(listName).items.getById(Number(id)).delete();
 
-      // Refresh the bookmarks list
-      fetchBookmarks();
+      await fetchBookmarks(); // Ensure bookmarks are refreshed
     } catch (error) {
       console.error('Error deleting bookmark:', error);
       setError('Failed to delete the bookmark.');
     }
   };
 
   // Open the modal for adding or editing a bookmark
-  const openModal = (bookmark: Bookmark | null = null) => {
+  const openModal = (bookmark: Bookmark | null = null): void => {
     setEditingBookmark(bookmark);
     setIsModalOpen(true);
   };
 
   // Close the modal and reset the editing state
-  const closeModal = () => {
+  const closeModal = (): void => {
     setIsModalOpen(false);
     setEditingBookmark(null);
   };
 
   // Fetch bookmarks when the component mounts
   React.useEffect(() => {
-    fetchBookmarks();
+    const fetchData = async (): Promise<void> => {
+      try {
+        await fetchBookmarks();
+      } catch (err) {
+        console.error("Error in useEffect fetchBookmarks:", err);
+      }
+    };
+
+    // Explicitly call the function and handle its result
+    fetchData()
+      .then(() => {
+        // Optional: Handle success if needed
+      })
+      .catch((err) => {
+        console.error("Error occurred:", err);
+      });
   }, []);
 
+
+
+
+
   if (loading) return <p>Loading bookmarks...</p>;
   if (error) return <p>{error}</p>;
 
@@ -145,7 +170,6 @@ const ReactSpBookmarks: React.FC<IReactSpBookmarksProps> = (props) => {
       <div className={styles.container}>
         <div className={styles.header}>
           <h2>{props.title}</h2>
-
         </div>
 
         {/* Grid View for Bookmarks */}
@@ -188,13 +212,25 @@ const ReactSpBookmarks: React.FC<IReactSpBookmarksProps> = (props) => {
                 id: editingBookmark ? editingBookmark.id : Date.now().toString(),
                 title: (form.elements.namedItem('title') as HTMLInputElement).value,
                 url: (form.elements.namedItem('url') as HTMLInputElement).value,
-                icon: (form.elements.namedItem('icon') as HTMLInputElement).value
+                icon: (form.elements.namedItem('icon') as HTMLInputElement).value,
               };
 
               if (editingBookmark) {
-                handleUpdateBookmark(updatedBookmark);
+                handleUpdateBookmark(updatedBookmark)
+                  .then(() => {
+                    console.log("Bookmark updated successfully!");
+                  })
+                  .catch((err) => {
+                    console.error("Error updating bookmark:", err);
+                  });
               } else {
-                handleAddBookmark(updatedBookmark);
+                handleAddBookmark(updatedBookmark)
+                  .then(() => {
+                    console.log("Bookmark updated successfully!");
+                  })
+                  .catch((err) => {
+                    console.error("Error updating bookmark:", err);
+                  });
               }
             }}
           >
@@ -216,7 +252,7 @@ const ReactSpBookmarks: React.FC<IReactSpBookmarksProps> = (props) => {
               <TextField
                 label="Icon"
                 name="icon"
-                description='Get the icon name from Fluent UI Icons (https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)'
+                description="Get the icon name from Fluent UI Icons (https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)"
                 required
                 placeholder="Enter the icon name"
                 defaultValue={editingBookmark ? editingBookmark.icon : ''}
@@ -233,4 +269,4 @@ const ReactSpBookmarks: React.FC<IReactSpBookmarksProps> = (props) => {
   );
 };
 
-export default ReactSpBookmarks;
+export default ReactSpBookmarks;