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 }, []);