@apvee/spfx-react-toolkit 1.0.0 → 1.2.0

package/lib/hooks/useSPFxSPHttpClient.js

@@ -36,8 +36,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { useState, useCallback, useEffect } from 'react';
-import { useSPFxContext } from './useSPFxContext';
+import { useMemo, useState, useCallback } from 'react';
+import { useSPFxServiceScope } from './useSPFxServiceScope';
+import { useSPFxPageContext } from './useSPFxPageContext';
+import { SPHttpClient } from '@microsoft/sp-http';
 /**
  * Hook to access SharePoint REST APIs with built-in state management
  *
@@ -49,13 +51,18 @@ import { useSPFxContext } from './useSPFxContext';
  *
  * For type safety, import SPFx types:
  * ```typescript
- * import type { SPHttpClient } from '@microsoft/sp-http';
+ * import { SPHttpClient } from '@microsoft/sp-http';
  * ```
  *
  * Requirements:
- * - SPHttpClient available in SPFx context
+ * - SPFx ServiceScope with SPHttpClient service
  * - Appropriate SharePoint permissions for target APIs
  *
+ * @remarks
+ * This hook consumes SPHttpClient from SPFx ServiceScope using dependency injection.
+ * The service is consumed lazily (only when this hook is used) and cached for optimal
+ * performance. The client is always available (non-undefined) after Provider initialization.
+ *
  * @param initialBaseUrl - Base URL for SharePoint site (optional, defaults to current site)
  *
  * @example Using invoke with state management
@@ -89,14 +96,14 @@ import { useSPFxContext } from './useSPFxContext';
  *
  * @example Using client directly for advanced control
  * ```tsx
- * import type { SPHttpClient } from '@microsoft/sp-http';
+ * import { SPHttpClient } from '@microsoft/sp-http';
  *
  * function ListItems() {
  *   const { client, baseUrl } = useSPFxSPHttpClient();
  *   const [items, setItems] = useState([]);
  *   const [loading, setLoading] = useState(false);
  *
- *   if (!client) return <Spinner label="Initializing HTTP client..." />;
+ *   // client is always available after Provider initialization
  *
  *   const loadItems = async () => {
  *     setLoading(true);
@@ -211,27 +218,22 @@ import { useSPFxContext } from './useSPFxContext';
  */
 export function useSPFxSPHttpClient(initialBaseUrl) {
     var _this = this;
-    var _a, _b;
-    var spfxContext = useSPFxContext().spfxContext;
-    // Extract context data
-    var ctx = spfxContext;
+    var consume = useSPFxServiceScope().consume;
+    var pageContext = useSPFxPageContext();
+    // Lazy consume SPHttpClient from ServiceScope (cached by useMemo)
+    var client = useMemo(function () {
+        return consume(SPHttpClient.serviceKey);
+    }, [consume]);
     // Default to current site if no baseUrl provided
-    var defaultBaseUrl = (initialBaseUrl === null || initialBaseUrl === void 0 ? void 0 : initialBaseUrl.trim()) || ((_b = (_a = ctx.pageContext) === null || _a === void 0 ? void 0 : _a.web) === null || _b === void 0 ? void 0 : _b.absoluteUrl) || '';
+    var defaultBaseUrl = (initialBaseUrl === null || initialBaseUrl === void 0 ? void 0 : initialBaseUrl.trim()) || pageContext.web.absoluteUrl || '';
     // Normalize: remove trailing slash for consistency (ES5-compatible)
     var normalizedBaseUrl = defaultBaseUrl.charAt(defaultBaseUrl.length - 1) === '/'
         ? defaultBaseUrl.slice(0, -1)
         : defaultBaseUrl;
     // State management
-    var client = useState(ctx.spHttpClient)[0];
-    var _c = useState(normalizedBaseUrl), baseUrl = _c[0], setBaseUrlState = _c[1];
-    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = useState(undefined), error = _e[0], setError = _e[1];
-    // Initialize client
-    useEffect(function () {
-        if (!ctx.spHttpClient) {
-            console.warn('SPHttpClient not available in SPFx context');
-        }
-    }, [ctx.spHttpClient]);
+    var _a = useState(normalizedBaseUrl), baseUrl = _a[0], setBaseUrlState = _a[1];
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(undefined), error = _c[0], setError = _c[1];
     // Public setter for baseUrl with normalization
     var setBaseUrl = useCallback(function (url) {
         var trimmed = url.trim();

package/lib/hooks/useSPFxSPHttpClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSPFxSPHttpClient.js","sourceRoot":"","sources":["../../src/hooks/useSPFxSPHttpClient.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSPFxSPHttpClient.js","sourceRoot":"","sources":["../../src/hooks/useSPFxSPHttpClient.ts"],"names":[],"mappings":"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"}

package/lib/webparts/spFxReactToolkitTest/components/SpFxReactToolkitTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpFxReactToolkitTest.d.ts","sourceRoot":"","sources":["../../../../src/webparts/spFxReactToolkitTest/components/SpFxReactToolkitTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsD/B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAm3B5B,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAy+BjC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"SpFxReactToolkitTest.d.ts","sourceRoot":"","sources":["../../../../src/webparts/spFxReactToolkitTest/components/SpFxReactToolkitTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyD/B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AA6+B5B,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EA8/BjC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/SpFxReactToolkitTest.js

@@ -46,13 +46,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import * as React from 'react';
 import styles from './SpFxReactToolkitTest.module.scss';
 import { Stack, Pivot, PivotItem, TextField, PrimaryButton, DefaultButton, MessageBar, MessageBarType, Separator, Label, Icon, } from '@fluentui/react';
+/* eslint-disable max-lines */
 // Import all hooks from SPFx React Toolkit
-import { useSPFxProperties, useSPFxThemeInfo, useSPFxUserInfo, useSPFxEnvironmentInfo, useSPFxSiteInfo, useSPFxDisplayMode, useSPFxInstanceInfo, useSPFxPageContext, useSPFxTeams, useSPFxListInfo, useSPFxLocaleInfo, useSPFxHubSiteInfo, useSPFxCorrelationInfo, useSPFxPermissions, useSPFxCrossSitePermissions, useSPFxContainerSize, useSPFxContainerInfo, useSPFxSessionStorage, useSPFxLocalStorage, useSPFxLogger, useSPFxPageType, useSPFxServiceScope, useSPFxSPHttpClient, useSPFxMSGraphClient, useSPFxAadHttpClient, useSPFxPerformance, useSPFxFluent9ThemeInfo, useSPFxOneDriveAppData, useSPFxTenantProperty, useSPFxUserPhoto, useSPFxPnPContext, useSPFxPnP, useSPFxPnPList, useSPFxPnPSearch, SearchVerticals, } from '../../../hooks';
+import { useSPFxProperties, useSPFxThemeInfo, useSPFxUserInfo, useSPFxEnvironmentInfo, useSPFxSiteInfo, useSPFxDisplayMode, useSPFxInstanceInfo, useSPFxPageContext, useSPFxTeams, useSPFxListInfo, useSPFxLocaleInfo, useSPFxHubSiteInfo, useSPFxCorrelationInfo, useSPFxPermissions, useSPFxCrossSitePermissions, useSPFxContainerSize, useSPFxContainerInfo, useSPFxSessionStorage, useSPFxLocalStorage, useSPFxLogger, useSPFxPageType, useSPFxServiceScope, useSPFxSPHttpClient, useSPFxMSGraphClient, useSPFxAadHttpClient, useSPFxHttpClient, useSPFxPerformance, useSPFxFluent9ThemeInfo, useSPFxOneDriveAppData, useSPFxTenantProperty, useSPFxUserPhoto, useSPFxPnPContext, useSPFxPnP, useSPFxPnPList, useSPFxPnPSearch, SearchVerticals, } from '../../../hooks';
 import '@pnp/sp/webs';
 import '@pnp/sp/lists';
 import '@pnp/sp/items';
 import '@pnp/sp/site-users';
 import { SPPermission } from '@microsoft/sp-page-context';
+import { HttpClient } from '@microsoft/sp-http';
 // =============================================
 // Helper Components (Must be defined first)
 // =============================================
@@ -74,6 +76,98 @@ var StatusBadge = function (_a) {
         label));
 };
 // =============================================
+// HttpClient Example Component
+// =============================================
+/**
+ * Example: useSPFxHttpClient
+ * Demonstrates calling external public APIs using HttpClient
+ */
+var HttpClientExample = function () {
+    var _a = useSPFxHttpClient(), invoke = _a.invoke, isLoading = _a.isLoading, error = _a.error, clearError = _a.clearError;
+    var _b = React.useState([]), todos = _b[0], setTodos = _b[1];
+    var _c = React.useState(null), selectedTodo = _c[0], setSelectedTodo = _c[1];
+    var loadTodos = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var data, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, invoke(function (client) {
+                            return client.get('https://jsonplaceholder.typicode.com/todos?_limit=5', HttpClient.configurations.v1).then(function (res) { return res.json(); });
+                        })];
+                case 1:
+                    data = _a.sent();
+                    setTodos(data);
+                    setSelectedTodo(null);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _a.sent();
+                    console.error('Failed to load todos:', err_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [invoke]);
+    var loadTodoDetails = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
+        var data, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, invoke(function (client) {
+                            return client.get("https://jsonplaceholder.typicode.com/todos/".concat(id), HttpClient.configurations.v1).then(function (res) { return res.json(); });
+                        })];
+                case 1:
+                    data = _a.sent();
+                    setSelectedTodo(data);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_2 = _a.sent();
+                    console.error('Failed to load todo details:', err_2);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [invoke]);
+    return (React.createElement(Stack, { tokens: { childrenGap: 15 }, styles: { root: { padding: '16px', border: '1px solid #ddd', borderRadius: '4px' } } },
+        React.createElement("h3", null,
+            React.createElement(Icon, { iconName: "CloudDownload", style: { marginRight: '8px' } }),
+            "HttpClient Example - Public API Call"),
+        React.createElement(MessageBar, { messageBarType: MessageBarType.info },
+            "This example demonstrates calling a public REST API (JSONPlaceholder) using ",
+            React.createElement("strong", null, "useSPFxHttpClient"),
+            ". The hook provides automatic state management (loading/error) for external HTTP calls."),
+        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 10 } },
+            React.createElement(PrimaryButton, { text: "Load Todos", onClick: loadTodos, disabled: isLoading, iconProps: { iconName: 'Download' } }),
+            error && (React.createElement(DefaultButton, { text: "Clear Error", onClick: clearError, iconProps: { iconName: 'Clear' } }))),
+        isLoading && (React.createElement(MessageBar, { messageBarType: MessageBarType.info },
+            React.createElement(Icon, { iconName: "Sync", style: { marginRight: '8px' } }),
+            "Loading data from external API...")),
+        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
+            React.createElement("strong", null, "Error:"),
+            " ",
+            error.message)),
+        todos.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 10 } },
+            React.createElement(Label, null, "Todos from JSONPlaceholder API:"),
+            todos.map(function (todo) { return (React.createElement(Stack, { key: todo.id, horizontal: true, tokens: { childrenGap: 10 }, styles: {
+                    root: {
+                        padding: '8px',
+                        border: '1px solid #eee',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        ':hover': { backgroundColor: '#f5f5f5' }
+                    }
+                }, onClick: function () { return loadTodoDetails(todo.id); } },
+                React.createElement(Icon, { iconName: todo.completed ? 'CompletedSolid' : 'CircleRing' }),
+                React.createElement("span", null, todo.title))); }))),
+        selectedTodo && (React.createElement(Stack, { tokens: { childrenGap: 8 }, styles: { root: { padding: '12px', backgroundColor: '#f0f0f0', borderRadius: '4px' } } },
+            React.createElement(Label, null, "Selected Todo Details:"),
+            React.createElement(InfoRow, { label: "ID", value: String(selectedTodo.id), icon: "NumberField" }),
+            React.createElement(InfoRow, { label: "User ID", value: String(selectedTodo.userId), icon: "Contact" }),
+            React.createElement(InfoRow, { label: "Title", value: selectedTodo.title, icon: "TextDocument" }),
+            React.createElement(InfoRow, { label: "Completed", value: selectedTodo.completed ? 'Yes' : 'No', icon: selectedTodo.completed ? 'CompletedSolid' : 'CircleRing' })))));
+};
+// =============================================
 // PnPjs Example Components
 // =============================================
 /**
@@ -201,7 +295,7 @@ var PnPOperationsExample = function () {
     var _b = React.useState([]), lists = _b[0], setLists = _b[1];
     var _c = React.useState(null), batchData = _c[0], setBatchData = _c[1];
     var handleInvokeLists = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result, err_1;
+        var result, err_3;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -218,15 +312,15 @@ var PnPOperationsExample = function () {
                     setLists(result);
                     return [3 /*break*/, 3];
                 case 2:
-                    err_1 = _a.sent();
-                    console.error('Invoke error:', err_1);
+                    err_3 = _a.sent();
+                    console.error('Invoke error:', err_3);
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
         });
     }); }, [invoke, clearError]);
     var handleBatchOperations = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var results, listsResult, userResult, webResult, err_2;
+        var results, listsResult, userResult, webResult, err_4;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -252,8 +346,8 @@ var PnPOperationsExample = function () {
                     });
                     return [3 /*break*/, 3];
                 case 2:
-                    err_2 = _a.sent();
-                    console.error('Batch error:', err_2);
+                    err_4 = _a.sent();
+                    console.error('Batch error:', err_4);
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -298,7 +392,7 @@ var PnPSearchBasicExample = function () {
         pageSize: 10
     }), search = _b.search, results = _b.results, totalResults = _b.totalResults, loading = _b.loading, error = _b.error, clearError = _b.clearError;
     var handleSearch = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var searchResults, err_3;
+        var searchResults, err_5;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -317,8 +411,8 @@ var PnPSearchBasicExample = function () {
                     });
                     return [3 /*break*/, 4];
                 case 3:
-                    err_3 = _a.sent();
-                    console.error('Search error:', err_3);
+                    err_5 = _a.sent();
+                    console.error('Search error:', err_5);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -476,7 +570,7 @@ var PnPSearchSuggestionsExample = function () {
         };
     }, []);
     var handleSuggest = React.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var results, err_4;
+        var results, err_6;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -497,8 +591,8 @@ var PnPSearchSuggestionsExample = function () {
                     }
                     return [3 /*break*/, 4];
                 case 3:
-                    err_4 = _a.sent();
-                    console.error('[PnPSearchSuggestions] Error:', err_4);
+                    err_6 = _a.sent();
+                    console.error('[PnPSearchSuggestions] Error:', err_6);
                     if (mountedRef.current) {
                         setSuggestions([]);
                     }
@@ -566,7 +660,7 @@ var PnPListExample = function () {
         query(function (q) { return q.select('Id', 'Title').orderBy('Id', false); }).catch(function (err) { return console.error('Load error:', err); });
     }, [query]);
     var handleCreate = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var err_5;
+        var err_7;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -581,15 +675,15 @@ var PnPListExample = function () {
                     setNewTitle('');
                     return [3 /*break*/, 4];
                 case 3:
-                    err_5 = _a.sent();
-                    console.error('Create error:', err_5);
+                    err_7 = _a.sent();
+                    console.error('Create error:', err_7);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
         });
     }); }, [create, newTitle, listTitle]);
     var handleUpdate = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
-        var err_6;
+        var err_8;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -605,15 +699,15 @@ var PnPListExample = function () {
                     setEditTitle('');
                     return [3 /*break*/, 4];
                 case 3:
-                    err_6 = _a.sent();
-                    console.error('Update error:', err_6);
+                    err_8 = _a.sent();
+                    console.error('Update error:', err_8);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
         });
     }); }, [update, editTitle]);
     var handleDelete = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
-        var err_7;
+        var err_9;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -627,8 +721,8 @@ var PnPListExample = function () {
                     _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    err_7 = _a.sent();
-                    console.error('Delete error:', err_7);
+                    err_9 = _a.sent();
+                    console.error('Delete error:', err_9);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -811,30 +905,20 @@ var SpFxReactToolkitTest = function () {
         setLogMessages(function (prev) { return __spreadArray(__spreadArray([], prev.slice(-4), true), [{ level: level, message: message }], false); });
     }, [logger]);
     var handleLoadOneDrive = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var error_3;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, oneDriveData.load()];
+                case 0: return [4 /*yield*/, oneDriveData.load()];
                 case 1:
                     _a.sent();
-                    setMessageText('Data loaded from OneDrive successfully!');
+                    setMessageText('OneDrive load completed. Check status below (missing file sets isNotFound=true).');
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 3000);
-                    return [3 /*break*/, 3];
-                case 2:
-                    error_3 = _a.sent();
-                    setMessageText("Load failed: ".concat(error_3 instanceof Error ? error_3.message : 'Unknown error'));
-                    setShowMessage(true);
-                    setTimeout(function () { return setShowMessage(false); }, 5000);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+                    return [2 /*return*/];
             }
         });
     }); }, [oneDriveData]);
     var handleSaveOneDrive = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var newData, error_4;
+        var newData, error_3;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -854,8 +938,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 3];
                 case 2:
-                    error_4 = _c.sent();
-                    setMessageText("Save failed: ".concat(error_4 instanceof Error ? error_4.message : 'Unknown error'));
+                    error_3 = _c.sent();
+                    setMessageText("Save failed: ".concat(error_3 instanceof Error ? error_3.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 3];
@@ -864,7 +948,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [oneDriveMessage, oneDriveData]);
     var handleLoadTenantProperty = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var error_5;
+        var error_4;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -880,8 +964,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 3];
                 case 2:
-                    error_5 = _a.sent();
-                    setMessageText("Load failed: ".concat(error_5 instanceof Error ? error_5.message : 'Unknown error'));
+                    error_4 = _a.sent();
+                    setMessageText("Load failed: ".concat(error_4 instanceof Error ? error_4.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 3];
@@ -890,7 +974,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [tenantVersion, tenantCounter]);
     var handleSaveTenantVersion = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var error_6;
+        var error_5;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -912,8 +996,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_6 = _a.sent();
-                    setMessageText("Save failed: ".concat(error_6 instanceof Error ? error_6.message : 'Unknown error'));
+                    error_5 = _a.sent();
+                    setMessageText("Save failed: ".concat(error_5 instanceof Error ? error_5.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 4];
@@ -922,7 +1006,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [tenantVersionInput, tenantVersion]);
     var handleIncrementTenantCounter = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var newValue, error_7;
+        var newValue, error_6;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -945,8 +1029,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_7 = _b.sent();
-                    setMessageText("Increment failed: ".concat(error_7 instanceof Error ? error_7.message : 'Unknown error'));
+                    error_6 = _b.sent();
+                    setMessageText("Increment failed: ".concat(error_6 instanceof Error ? error_6.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 4];
@@ -955,7 +1039,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [tenantCounter]);
     var handleRemoveTenantProperty = React.useCallback(function (propertyName) { return __awaiter(void 0, void 0, void 0, function () {
-        var hook, error_8;
+        var hook, error_7;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -980,8 +1064,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_8 = _a.sent();
-                    setMessageText("Remove failed: ".concat(error_8 instanceof Error ? error_8.message : 'Unknown error'));
+                    error_7 = _a.sent();
+                    setMessageText("Remove failed: ".concat(error_7 instanceof Error ? error_7.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 4];
@@ -1175,11 +1259,15 @@ var SpFxReactToolkitTest = function () {
                         oneDriveData.writeError && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning },
                             "Write Error: ",
                             oneDriveData.writeError.message)),
+                        !oneDriveData.isLoading && oneDriveData.isNotFound && !oneDriveData.data && !oneDriveData.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "File not found in OneDrive yet (isNotFound=true). Click \"Save to OneDrive\" to create it.")),
                         oneDriveData.isLoading ? (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "Loading from OneDrive...")) : oneDriveData.data ? (React.createElement(Stack, { tokens: { childrenGap: 1 } },
                             React.createElement(InfoRow, { label: "Message", value: oneDriveData.data.message, icon: "Message" }),
                             React.createElement(InfoRow, { label: "Counter", value: String(oneDriveData.data.counter), icon: "NumberField" }),
                             React.createElement(InfoRow, { label: "Last Updated", value: new Date(oneDriveData.data.timestamp).toLocaleString(), icon: "DateTime" }),
-                            React.createElement(InfoRow, { label: "Is Ready", value: oneDriveData.isReady ? 'Yes' : 'No', icon: "CheckMark" }))) : (React.createElement(Label, null, "No data loaded yet. Click \"Load\" to fetch from OneDrive.")),
+                            React.createElement(InfoRow, { label: "Is Ready", value: oneDriveData.isReady ? 'Yes' : 'No', icon: "CheckMark" }),
+                            React.createElement(InfoRow, { label: "Is Not Found", value: oneDriveData.isNotFound ? 'Yes' : 'No', icon: "BlockedSiteSolid12" }))) : (React.createElement(Label, null, oneDriveData.isNotFound
+                            ? 'No file found yet. Click "Save to OneDrive" to create it.'
+                            : 'No data loaded yet. Click "Load" to fetch from OneDrive.')),
                         React.createElement(TextField, { label: "New Message", value: oneDriveMessage, onChange: function (_, newValue) { return setOneDriveMessage(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Enter a message to save...", disabled: oneDriveData.isWriting || oneDriveData.isLoading }),
                         React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 2 } },
                             React.createElement(PrimaryButton, { text: "Load from OneDrive", onClick: handleLoadOneDrive, disabled: oneDriveData.isLoading || oneDriveData.isWriting, iconProps: { iconName: 'CloudDownload' } }),
@@ -1331,6 +1419,15 @@ var SpFxReactToolkitTest = function () {
                         React.createElement("details", { className: styles.detailsSection },
                             React.createElement("summary", null, "Click to expand/collapse"),
                             React.createElement("pre", null, safeStringify(pageContext, 2)))))),
+            React.createElement(PivotItem, { headerText: "HttpClient", itemIcon: "Cloud" },
+                React.createElement(Stack, { tokens: { childrenGap: 20 }, styles: { root: { marginTop: '16px' } } },
+                    React.createElement(MessageBar, { messageBarType: MessageBarType.info },
+                        React.createElement("strong", null, "useSPFxHttpClient Hook Example"),
+                        React.createElement("br", null),
+                        "This hook provides access to the generic HttpClient for calling external APIs (non-SharePoint). For SharePoint REST API calls, use ",
+                        React.createElement("strong", null, "useSPFxSPHttpClient"),
+                        " instead."),
+                    React.createElement(HttpClientExample, null))),
             React.createElement(PivotItem, { headerText: "PnPjs", itemIcon: "CloudDownload" },
                 React.createElement(Stack, { tokens: { childrenGap: 20 }, styles: { root: { marginTop: '16px' } } },
                     React.createElement(PnPContextExample, null),