feat: add a useIsSignedIn custom hook for react (#3093)

Add signed in state core functionality
Add a hook to check the signed in state
Add documentation of custom hooks on read me
Add tests for isSignedIn
Update the react-contoso sample to use the mgt-react hook
Add sample stories for HTML and React usages

Author: musale

packages/mgt-element/src/index.ts

@@ -39,6 +39,7 @@ export * from './utils/LocalizationHelper';
 export * from './utils/mgtHtml';
 export * from './utils/CustomElement';
 export * from './utils/registerComponent';
+export * from './utils/isSignedIn';
 
 export { PACKAGE_VERSION } from './utils/version';
 

packages/mgt-element/src/utils/isSignedIn.tests.ts

@@ -0,0 +1,22 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { expect } from '@open-wc/testing';
+import { MockProvider } from '../mock/MockProvider';
+import { ProviderState } from '../providers/IProvider';
+import { Providers } from '../providers/Providers';
+import { isSignedIn } from './isSignedIn';
+
+describe('signedInState', () => {
+  it('should change', () => {
+    /* eslint-disable @typescript-eslint/no-unused-expressions */
+    Providers.globalProvider = new MockProvider(false);
+    expect(isSignedIn()).to.be.false;
+    Providers.globalProvider.setState(ProviderState.SignedIn);
+    expect(isSignedIn()).to.be.true;
+  });
+});

packages/mgt-element/src/utils/isSignedIn.ts

@@ -0,0 +1,19 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { ProviderState } from '../providers/IProvider';
+import { Providers } from '../providers/Providers';
+
+/**
+ * Checks the provider state if it's in signed in.
+ *
+ * @returns true if signed in, otherwise false.
+ */
+export const isSignedIn = (): boolean => {
+  const provider = Providers.globalProvider;
+  return provider && provider.state === ProviderState.SignedIn;
+};

packages/mgt-react/readme.md

@@ -93,6 +93,24 @@ const App = (props) => {
 
 The `template` prop allows you to specify which template to overwrite. In this case, the `MyEvent` component will be repeated for every event, and the `event` object will be passed as part of the `dataContext` prop.
 
+## Custom hooks
+
+`mgt-react` exposes some custom hooks that you can use in your app:
+
+### `useIsSignedIn`
+
+You can use this hook to check the signed in state:
+
+```tsx
+import { Agenda, useIsSignedIn } from '@microsoft/mgt-react';
+
+const App = (props) => {
+  const [isSignedIn] = useIsSignedIn();
+
+  return {isSignedIn && <Agenda></Agenda>}
+}
+```
+
 ## Why
 
 If you've used web components in React, you know that proper interop between web components and React components requires a bit of extra work.

packages/mgt-react/src/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export * from './useIsSignedIn';

packages/mgt-react/src/hooks/useIsSignedIn.ts

@@ -0,0 +1,31 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { isSignedIn, Providers } from '@microsoft/mgt-element';
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to check if a user is signed in.
+ *
+ * @returns true if a user is signed on, otherwise false.
+ */
+export const useIsSignedIn = (): [boolean] => {
+  const [signedIn, setIsSignedIn] = useState(false);
+  useEffect(() => {
+    const updateState = () => {
+      setIsSignedIn(isSignedIn());
+    };
+
+    Providers.onProviderUpdated(updateState);
+    updateState();
+
+    return () => {
+      Providers.removeProviderUpdatedListener(updateState);
+    };
+  }, [setIsSignedIn]);
+  return [signedIn];
+};

packages/mgt-react/src/index.ts

@@ -8,5 +8,6 @@
 export * from './Mgt';
 export * from './MgtTemplateProps';
 export * from './generated/react';
+export * from './hooks';
 export * from '@microsoft/mgt-components/dist/es6/exports';
 export * from '@microsoft/mgt-element';

samples/react-contoso/src/Layout.tsx

@@ -2,7 +2,7 @@ import React, { Suspense, lazy } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Header } from './components/Header';
 import { SideNavigation } from './components/SideNavigation';
-import { useIsSignedIn } from './hooks/useIsSignedIn';
+import { useIsSignedIn } from '@microsoft/mgt-react';
 import { NavigationItem } from './models/NavigationItem';
 import { getNavigation } from './services/Navigation';
 import { FluentProvider, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';

samples/react-contoso/src/components/Header.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { Login, SearchBox } from '@microsoft/mgt-react';
+import { Login, SearchBox, useIsSignedIn } from '@microsoft/mgt-react';
 import { PACKAGE_VERSION } from '@microsoft/mgt-element';
-import { InfoButton } from '@fluentui/react-components/unstable';
 import { SimpleLogin } from './SimpleLogin';
-import { useIsSignedIn } from '../hooks/useIsSignedIn';
 import { useNavigate } from 'react-router-dom';
 import { ThemeSwitcher } from './ThemeSwitcher';
 import { useAppContext } from '../AppContext';
-import { Label, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
+import { Label, makeStyles, mergeClasses, shorthands, tokens, InfoLabel } from '@fluentui/react-components';
 import { GridDotsRegular } from '@fluentui/react-icons';
 import { useLocation } from 'react-router-dom';
 
@@ -149,11 +147,7 @@ const HeaderComponent: React.FunctionComponent = () => {
 
         <div className={styles.waffleTitle}>
           <Label className={styles.name}>{import.meta.env.VITE_SITE_NAME} </Label>
-          <InfoButton
-            className={styles.infoIcon}
-            size="medium"
-            info={<>Using the Graph Toolkit v{PACKAGE_VERSION}</>}
-          />
+          <InfoLabel className={styles.infoIcon} size="medium" info={<>Using the Graph Toolkit v{PACKAGE_VERSION}</>} />
         </div>
       </div>
       <div className={styles.search}>