@microsoft/teamsfx-react 2.0.0-beta.0 → 2.0.0-beta.1

package/build/index.d.ts

@@ -1,4 +1,4 @@
 export { useData } from "./useData";
-export { useTeamsFx } from "./useTeamsFx";
+export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
 export { useGraph } from "./useGraph";
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/build/useData.d.ts

@@ -1,18 +1,34 @@
+declare type State<T> = {
+    /**
+     * User data.
+     */
+    data?: T;
+    /**
+     * Status of data loading.
+     */
+    loading: boolean;
+    /**
+     * Error information.
+     */
+    error?: unknown;
+};
+export declare type Data<T> = State<T> & {
+    /**
+     * reload function.
+     */
+    reload: () => void;
+};
 /**
  * Helper function to fetch data with status and error.
  *
- * @param asyncFn - async function of how to fetch data
+ * @param fetchDataAsync - async function of how to fetch data
  * @param options - if autoLoad is true, reload data immediately
  * @returns data, loading status, error and reload function
  *
  * @beta
  */
-export declare function useData<T>(asyncFn: () => Promise<T>, options?: {
-    auto: boolean;
-}): {
-    data: T | undefined;
-    loading: boolean;
-    error: any;
-    reload: () => void;
-};
+export declare function useData<T>(fetchDataAsync: () => Promise<T>, options?: {
+    autoLoad: boolean;
+}): Data<T>;
+export {};
 //# sourceMappingURL=useData.d.ts.map

package/build/useData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useData.d.ts","sourceRoot":"","sources":["../src/useData.ts"],"names":[],"mappings":"AAsCA;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE;;;;;EAkBhF"}
+{"version":3,"file":"useData.d.ts","sourceRoot":"","sources":["../src/useData.ts"],"names":[],"mappings":"AAKA,aAAK,KAAK,CAAC,CAAC,IAAI;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAOF,oBAAY,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAeF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EACvB,cAAc,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAChC,OAAO,CAAC,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,GAC9B,IAAI,CAAC,CAAC,CAAC,CAeT"}

package/build/useData.js

@@ -17,24 +17,22 @@ const createReducer = () => (state, action) => {
 /**
  * Helper function to fetch data with status and error.
  *
- * @param asyncFn - async function of how to fetch data
+ * @param fetchDataAsync - async function of how to fetch data
  * @param options - if autoLoad is true, reload data immediately
  * @returns data, loading status, error and reload function
  *
  * @beta
  */
-function useData(asyncFn, options) {
-    const { auto } = Object.assign({ auto: true }, options);
+function useData(fetchDataAsync, options) {
+    var _a;
+    const auto = (_a = options === null || options === void 0 ? void 0 : options.autoLoad) !== null && _a !== void 0 ? _a : true;
     const [{ data, loading, error }, dispatch] = (0, react_1.useReducer)(createReducer(), {
-        loading: !!auto,
+        loading: auto,
     });
     function reload() {
         if (!loading)
             dispatch({ type: "loading" });
-        if (typeof asyncFn != "function") {
-            throw new Error("invalid argument to useData, a function is required");
-        }
-        asyncFn()
+        fetchDataAsync()
             .then((data) => dispatch({ type: "result", result: data }))
             .catch((error) => dispatch({ type: "error", error }));
     }

package/build/useGraph.d.ts

@@ -1,20 +1,19 @@
+import { Data } from "./useData";
 import { TeamsFx } from "@microsoft/teamsfx";
 import { Client } from "@microsoft/microsoft-graph-client";
+declare type GraphOption = {
+    scope?: string[];
+    teamsfx?: TeamsFx;
+};
 /**
  * Helper function to call Microsoft Graph API with authentication.
  *
- * @param asyncFunc - async function of how to call Graph API and fetch data.
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
  * @param options - teamsfx instance and OAuth resource scope.
  * @returns data, loading status, error and reload function
  *
  * @beta
  */
-export declare function useGraph<T>(asyncFunc: (graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, options?: {
-    scope: string[];
-}): {
-    data: T | undefined;
-    error: any;
-    loading: boolean;
-    reload: () => void;
-};
+export declare function useGraph<T>(fetchGraphDataAsync: (graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, options?: GraphOption): Data<T>;
+export {};
 //# sourceMappingURL=useGraph.d.ts.map

package/build/useGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../src/useGraph.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAEvE;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAC3E,OAAO,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE;;;;;EAgD9B"}
+{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAiCT"}

package/build/useGraph.js

@@ -6,60 +6,52 @@ exports.useGraph = void 0;
 const useData_1 = require("./useData");
 const teamsfx_1 = require("@microsoft/teamsfx");
 const microsoft_graph_client_1 = require("@microsoft/microsoft-graph-client");
+const react_1 = require("react");
 /**
  * Helper function to call Microsoft Graph API with authentication.
  *
- * @param asyncFunc - async function of how to call Graph API and fetch data.
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
  * @param options - teamsfx instance and OAuth resource scope.
  * @returns data, loading status, error and reload function
  *
  * @beta
  */
-function useGraph(asyncFunc, options) {
-    const { scope } = Object.assign({ scope: ["User.Read"] }, options);
-    const initial = (0, useData_1.useData)(async () => {
-        var _a;
-        try {
-            const teamsfx = new teamsfx_1.TeamsFx();
-            const graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
-            return await asyncFunc(graph, teamsfx, scope);
-        }
-        catch (err) {
-            if (err instanceof microsoft_graph_client_1.GraphError && ((_a = err.code) === null || _a === void 0 ? void 0 : _a.includes("UiRequiredError"))) {
-                // Silently fail for user didn't login error
+function useGraph(fetchGraphDataAsync, options) {
+    const { scope, teamsfx } = Object.assign({ scope: ["User.Read"], teamsfx: new teamsfx_1.TeamsFx() }, options);
+    const [needConsent, setNeedConsent] = (0, react_1.useState)(false);
+    const { data, error, loading, reload } = (0, useData_1.useData)(async () => {
+        var _a, _b;
+        if (needConsent) {
+            try {
+                await teamsfx.login(scope);
+                // Important: tokens are stored in sessionStorage, read more here: https://aka.ms/teamsfx-session-storage-notice
             }
-            else {
+            catch (err) {
+                if (err instanceof teamsfx_1.ErrorWithCode && ((_a = err.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
+                    const helpLink = "https://aka.ms/teamsfx-auth-code-flow";
+                    err.message +=
+                        '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
+                            "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
+                            `cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ${helpLink}`;
+                }
                 throw err;
             }
         }
-    });
-    const { data, error, loading, reload } = (0, useData_1.useData)(async () => {
-        var _a;
         try {
-            const teamsfx = new teamsfx_1.TeamsFx();
-            await teamsfx.login(scope);
-            // Important: tokens are stored in sessionStorage, read more here: https://aka.ms/teamsfx-session-storage-notice
             const graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
-            return await asyncFunc(graph, teamsfx, scope);
+            const graphData = await fetchGraphDataAsync(graph, teamsfx, scope);
+            return graphData;
         }
         catch (err) {
-            if (err instanceof teamsfx_1.ErrorWithCode && ((_a = err.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
-                const helpLink = "https://aka.ms/teamsfx-auth-code-flow";
-                err.message +=
-                    '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
-                        "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
-                        `cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ${helpLink}`;
+            if (err instanceof microsoft_graph_client_1.GraphError && ((_b = err.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
+                // Silently fail for user didn't consent error
+                setNeedConsent(true);
+            }
+            else {
+                throw err;
             }
-            throw err;
         }
-    }, { auto: false });
-    return data || error || loading
-        ? { data, error, loading, reload }
-        : {
-            data: initial.data,
-            error: initial.error,
-            loading: initial.loading,
-            reload,
-        };
+    });
+    return { data, error, loading, reload };
 }
 exports.useGraph = useGraph;

package/build/useTeamsFx.d.ts

@@ -1,11 +1,42 @@
-export declare function useTeamsFx(): {
-    inTeams?: boolean | undefined;
-    fullScreen?: boolean | undefined;
-    theme: import("@fluentui/styles").ThemePrepared<any>;
-    themeString: string;
-    context?: import("@microsoft/teams-js").app.Context | undefined;
-    error: any;
+import { TeamsFx } from "@microsoft/teamsfx";
+import { ThemePrepared } from "@fluentui/react-northstar";
+export declare type TeamsFxContext = {
+    /**
+     * Instance of TeamsFx.
+     */
+    teamsfx?: TeamsFx;
+    /**
+     * Status of data loading.
+     */
     loading: boolean;
-    isInTeams: boolean;
+    /**
+     * Error information.
+     */
+    error: unknown;
+    /**
+     * Indicates that current environment is in Teams
+     */
+    inTeams?: boolean;
+    /**
+     * Teams theme.
+     */
+    theme: ThemePrepared;
+    /**
+     * Teams theme string.
+     */
+    themeString: string;
+    /**
+     * Teams context object.
+     */
+    context?: any;
 };
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param teamsfxConfig - custom configuration to override default ones.
+ * @returns TeamsFxContext object
+ *
+ * @beta
+ */
+export declare function useTeamsFx(teamsfxConfig?: Record<string, string>): TeamsFxContext;
 //# sourceMappingURL=useTeamsFx.d.ts.map

package/build/useTeamsFx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTeamsFx.d.ts","sourceRoot":"","sources":["../src/useTeamsFx.ts"],"names":[],"mappings":"AAmBA,wBAAgB,UAAU;;;;;;;;;EAezB"}
+{"version":3,"file":"useTeamsFx.d.ts","sourceRoot":"","sources":["../src/useTeamsFx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,OAAO,EAAgB,MAAM,oBAAoB,CAAC;AAElG,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,oBAAY,cAAc,GAAG;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,cAAc,CAYjF"}

package/build/useTeamsFx.js

@@ -14,22 +14,17 @@ const useData_1 = require("./useData");
  *
  * @beta
  */
-// TODO: fix this when the SDK stops hiding global state!
-let initialized = false;
-function useTeamsFx() {
+function useTeamsFx(teamsfxConfig) {
     const [result] = (0, msteams_react_base_component_1.useTeams)({});
-    const { error, loading } = (0, useData_1.useData)(async () => {
-        if (!initialized) {
-            if (process.env.NODE_ENV === "development") {
-                (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
-                (0, teamsfx_1.setLogFunction)((leve, message) => {
-                    console.log(message);
-                });
-            }
-            initialized = true;
+    const { data, error, loading } = (0, useData_1.useData)(async () => {
+        if (process.env.NODE_ENV === "development") {
+            (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
+            (0, teamsfx_1.setLogFunction)((level, message) => {
+                console.log(message);
+            });
         }
+        return new teamsfx_1.TeamsFx(teamsfx_1.IdentityType.User, teamsfxConfig);
     });
-    const isInTeams = true;
-    return Object.assign({ error, loading, isInTeams }, result);
+    return Object.assign({ teamsfx: data, error, loading }, result);
 }
 exports.useTeamsFx = useTeamsFx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/teamsfx-react",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "React helper functions for Microsoft TeamsFx",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -60,7 +60,7 @@
     "@fluentui/react-northstar": "^0.62.0",
     "@microsoft/microsoft-graph-client": "^3.0.1",
     "@microsoft/teamsfx": "2.0.0-beta.0",
-    "msteams-react-base-component": "^4.0.1",
+    "msteams-react-base-component": "4.0.1",
     "react": "^16.8.6"
   },
   "publishConfig": {