diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6decd4..aafe37a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).
+## [*4.0.1*] - <*2022-06-28*>
+
+### Fixes
+
+* Fixed an issue when the `useTeams` hook did not get the context properly
+
## [*4.0.0*] - <*2022-06-23*>
### Changes
diff --git a/package.json b/package.json
index b803da2..555ccbd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "msteams-react-base-component",
- "version": "4.0.0",
+ "version": "4.0.1-preview",
"description": "React helper components for Microsoft 365 Teams, Office and Outlook apps",
"main": "lib/cjs/index.js",
"module": "lib/esm/index.js",
diff --git a/src/useTeams.spec.tsx b/src/useTeams.spec.tsx
index adbaf9a..4298a35 100644
--- a/src/useTeams.spec.tsx
+++ b/src/useTeams.spec.tsx
@@ -24,7 +24,6 @@ describe("useTeams", () => {
jest.resetAllMocks();
jest.clearAllMocks();
- window["microsoftTeams"] = {};
window.history.pushState({}, "", "/");
spyInitialize = jest.spyOn(app, "initialize");
@@ -46,23 +45,6 @@ describe("useTeams", () => {
});
});
- it("Should create the useTeams hook - empty by default", async () => {
- const App = () => {
- const [{ inTeams }] = useTeams.useTeams({});
- return (
-
{"" + inTeams}
- );
- };
-
- window["microsoftTeams"] = undefined;
-
- const { container } = render();
- await waitFor(() => {
- expect(spyInitialize).toBeCalledTimes(0);
- expect(container.textContent).toBe("false");
- });
- });
-
it("Should return not in teams - app.initialize rejects", async () => {
spyInitialize.mockImplementation(() => {
return Promise.reject(new Error(""));
@@ -118,25 +100,6 @@ describe("useTeams", () => {
expect(container.textContent).toBe("true, default");
});
- it("Should create the useTeams hook - not in teams", async () => {
- const App = () => {
- const [{ inTeams, themeString }] = useTeams.useTeams({});
- return (
- {inTeams ? "true" : "false"}
,
{themeString}
- );
- };
-
- window["microsoftTeams"] = undefined;
-
- const { container } = render();
-
- await waitFor(() => {
- expect(spyInitialize).toBeCalledTimes(0);
- });
-
- expect(container.textContent).toBe("false, default");
- });
-
it("Should create the useTeams hook with dark theme", async () => {
const App = () => {
const [{ inTeams, themeString }] = useTeams.useTeams({ initialTheme: "dark" });
diff --git a/src/useTeams.ts b/src/useTeams.ts
index f3d4e22..ef1faa9 100644
--- a/src/useTeams.ts
+++ b/src/useTeams.ts
@@ -7,16 +7,6 @@ import { unstable_batchedUpdates as batchedUpdates } from "react-dom";
import { app, pages } from "@microsoft/teams-js";
import { teamsDarkTheme, teamsHighContrastTheme, teamsTheme, ThemePrepared } from "@fluentui/react-northstar";
-const isTeamsLibraryLoaded = (): boolean => {
- // eslint-disable-next-line dot-notation
- const microsoftTeamsLib = window["microsoftTeams"];
-
- if (!microsoftTeamsLib) {
- return false; // the Microsoft Teams library is for some reason not loaded
- }
- return true;
-};
-
const getTheme = (): string | undefined => {
const urlParams = new URLSearchParams(window.location.search);
const theme = urlParams.get("theme");
@@ -74,28 +64,25 @@ export function useTeams(options?: { initialTheme?: string, setThemeHandler?: (t
// set initial theme based on options or query string
overrideThemeHandler(initialTheme);
- if (isTeamsLibraryLoaded()) {
- app.initialize().then(() => {
- app.getContext().then(context => {
- batchedUpdates(() => {
- setInTeams(true);
- setContext(context);
- setFullScreen(context.page.isFullScreen);
- });
- overrideThemeHandler(context.app.theme);
- app.registerOnThemeChangeHandler(overrideThemeHandler);
- pages.registerFullScreenHandler((isFullScreen) => {
- setFullScreen(isFullScreen);
- });
- }).catch(() => {
- setInTeams(false);
+ app.initialize().then(() => {
+ app.getContext().then(context => {
+ batchedUpdates(() => {
+ setInTeams(true);
+ setContext(context);
+ setFullScreen(context.page.isFullScreen);
+ });
+ overrideThemeHandler(context.app.theme);
+ app.registerOnThemeChangeHandler(overrideThemeHandler);
+ pages.registerFullScreenHandler((isFullScreen) => {
+ setFullScreen(isFullScreen);
});
}).catch(() => {
setInTeams(false);
});
- } else {
+ }).catch(() => {
setInTeams(false);
- }
+ });
+
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);