Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add react router for navigation testing #2275

Merged
merged 8 commits into from
May 25, 2024
+253 −173
Merged

Add react router for navigation testing #2275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
025bd2a
Add react router for navigation testing
alexneyman-MSFT Apr 17, 2024
eac9f3f
update app.tsx
alexneyman-MSFT May 20, 2024
4ee458d
Refactor import statements in App.tsx and TeamsTestApp.tsx
alexneyman-MSFT May 20, 2024
9abcc53
update spacing
alexneyman-MSFT May 20, 2024
209fa8f
Merge branch 'main' into alexneyman/add-second-page-new
alexneyman-MSFT May 21, 2024
7156ab0
Merge branch 'main' into alexneyman/add-second-page-new
alexneyman-MSFT May 23, 2024
d3ee804
refactor: Rename TeamsTestApp to TestApp and update import statements
alexneyman-MSFT May 24, 2024
4fc9fd6
update second route
alexneyman-MSFT May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/teams-test-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
"react-dom": "^17.0.1",
"react-router-dom": "^6.21.3"
},
"devDependencies": {
"@microsoft/teams-js": "workspace:*"
Expand Down
147 changes: 19 additions & 128 deletions apps/teams-test-app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,12 @@
import './App.css';

import { app, appInitialization, IAppWindow, initialize } from '@microsoft/teams-js';
import { app, appInitialization, initialize } from '@microsoft/teams-js';
import React, { ReactElement } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

import AppAPIs from './components/AppAPIs';
import AppEntityAPIs from './components/AppEntityAPIs';
import AppInitializationAPIs from './components/AppInitialization';
import AppInstallDialogAPIs from './components/AppInstallDialog';
import AuthenticationAPIs from './components/AuthenticationAPIs';
import BarCodeAPIs from './components/BarCodeAPIs';
import CalendarAPIs from './components/CalendarAPIs';
import CallAPIs from './components/CallAPIs';
import ClipboardAPIs from './components/Clipboard';
import CustomAPIs from './components/Custom';
import DialogAPIs from './components/DialogAPIs';
import DialogCardAPIs from './components/DialogCardAPIs';
import DialogCardBotAPIs from './components/DialogCardBotAPIs';
import DialogUpdateAPIs from './components/DialogUpdateAPIs';
import DialogUrlAPIs from './components/DialogUrlAPIs';
import DialogUrlBotAPIs from './components/DialogUrlBotAPIs';
import DialogUrlParentCommunicationAPIs from './components/DialogUrlParentCommunicationAPIs';
import GeoLocationAPIs from './components/GeoLocationAPIs';
import Links from './components/Links';
import LocationAPIs from './components/LocationAPIs';
import LogAPIs from './components/LogsAPIs';
import MailAPIs from './components/MailAPIs';
import MarketplaceAPIs from './components/MarketplaceAPIs';
import MediaAPIs from './components/MediaAPIs';
import MeetingAPIs from './components/MeetingAPIs';
import MenusAPIs from './components/MenusAPIs';
import NestedAppAuthAPIs from './components/NestedAppAuthAPIs';
import OtherAppStateChangedAPIs from './components/OtherAppStateChangeAPIs';
import PagesAPIs from './components/PagesAPIs';
import PagesAppButtonAPIs from './components/PagesAppButtonAPIs';
import PagesBackStackAPIs from './components/PagesBackStackAPIs';
import PagesConfigAPIs from './components/PagesConfigAPIs';
import PagesCurrentAppAPIs from './components/PagesCurrentAppAPIs';
import PagesTabsAPIs from './components/PagesTabsAPIs';
import PeopleAPIs from './components/PeopleAPIs';
import ChatAPIs from './components/privateApis/ChatAPIs';
import ExternalAppAuthenticationAPIs from './components/privateApis/ExternalAppAuthenticationAPIs';
import ExternalAppCardActionsAPIs from './components/privateApis/ExternalAppCardActionsAPIs';
import ExternalAppCommandsAPIs from './components/privateApis/ExternalAppCommandsAPIs';
import FilesAPIs from './components/privateApis/FilesAPIs';
import FullTrustAPIs from './components/privateApis/FullTrustAPIs';
import MeetingRoomAPIs from './components/privateApis/MeetingRoomAPIs';
import MessageChannelAPIs from './components/privateApis/MessageChannelAPIs';
import MonetizationAPIs from './components/privateApis/MonetizationAPIs';
import NotificationAPIs from './components/privateApis/NotificationAPIs';
import PrivateAPIs from './components/privateApis/PrivateAPIs';
import TeamsAPIs from './components/privateApis/TeamsAPIs';
import VideoExAPIs from './components/privateApis/VideoEffectsExAPIs';
import ProfileAPIs from './components/ProfileAPIs';
import RemoteCameraAPIs from './components/RemoteCameraAPIs';
import SearchAPIs from './components/SearchAPIs';
import SecondaryBrowserAPIs from './components/SecondaryBrowserAPIs';
import SharingAPIs from './components/SharingAPIs';
import StageViewAPIs from './components/StageViewAPIs';
import TeamsCoreAPIs from './components/TeamsCoreAPIs';
import ThirdPartyCloudStorageAPIs from './components/ThirdPartyCloudStorageAPIs';
import CookieAccessComponent from './components/ThirdPatryCookies';
import { isTestBackCompat } from './components/utils/isTestBackCompat';
import Version from './components/Version';
import VideoAPIs from './components/VideoEffectsApis';
import VisualMediaAPIs from './components/VisualMediaAPIs';
import WebStorageAPIs from './components/WebStorageAPIs';
import { SecondRoute } from './pages/SecondRoute';
import { TestApp } from './pages/TestApp';

const urlParams = new URLSearchParams(window.location.search);

Expand Down Expand Up @@ -134,74 +76,23 @@ export const generateRegistrationMsg = (changeCause: string): string => {
return `Registration attempt has been initiated. If successful, this message will change when ${changeCause}.`;
};

// button to route to the second route
export const SecondRouteButton = (): ReactElement => (
alexneyman-MSFT marked this conversation as resolved.
Show resolved Hide resolved
<a href="/second-route">
<button>Go to Second Route</button>
</a>
);

const App = (): ReactElement => {
const dialogWindowRef = React.useRef<IAppWindow | null>(null);
return (
<div>
<div className="App-container">
<AppAPIs />
<AppInitializationAPIs />
<AppInstallDialogAPIs />
<AuthenticationAPIs />
<AppEntityAPIs />
<BarCodeAPIs />
<CalendarAPIs />
<CallAPIs />
<ChatAPIs />
<ClipboardAPIs />
<CookieAccessComponent />
<CustomAPIs />
<DialogAPIs />
<DialogCardAPIs />
<DialogCardBotAPIs />
<DialogUpdateAPIs />
<DialogUrlAPIs childWindowRef={dialogWindowRef} />
<DialogUrlBotAPIs />
<DialogUrlParentCommunicationAPIs childWindowRef={dialogWindowRef} />
<ExternalAppAuthenticationAPIs />
<ExternalAppCardActionsAPIs />
<ExternalAppCommandsAPIs />
<FilesAPIs />
<FullTrustAPIs />
<GeoLocationAPIs />
<Links />
<LocationAPIs />
<LogAPIs />
<MailAPIs />
<MarketplaceAPIs />
<MediaAPIs />
<MeetingAPIs />
<MeetingRoomAPIs />
<MenusAPIs />
<MessageChannelAPIs />
<MonetizationAPIs />
<NestedAppAuthAPIs />
<NotificationAPIs />
<OtherAppStateChangedAPIs />
<PagesAPIs />
<PagesAppButtonAPIs />
<PagesBackStackAPIs />
<PagesConfigAPIs />
<PagesCurrentAppAPIs />
<PagesTabsAPIs />
<PeopleAPIs />
<PrivateAPIs />
<ProfileAPIs />
<RemoteCameraAPIs />
<SearchAPIs />
<SecondaryBrowserAPIs />
<SharingAPIs />
<WebStorageAPIs />
<StageViewAPIs />
<TeamsCoreAPIs />
<TeamsAPIs />
<ThirdPartyCloudStorageAPIs />
<VideoAPIs />
<VideoExAPIs />
<VisualMediaAPIs />
</div>
<Version />
</div>
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<TestApp />} />
<Route path="/second-route" element={<SecondRoute />} />
</Routes>
</BrowserRouter>
</>
);
};

Expand Down
11 changes: 9 additions & 2 deletions apps/teams-test-app/src/components/AppAPIs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
ResumeContext,
} from '@microsoft/teams-js';
import React, { ReactElement } from 'react';
import { useNavigate } from 'react-router-dom';

import { ApiWithoutInput, ApiWithTextInput } from './utils';
import { ModuleWrapper } from './utils/ModuleWrapper';
Expand Down Expand Up @@ -79,19 +80,25 @@ const RegisterOnThemeChangeHandler = (): ReactElement =>
},
});

const RegisterOnResumeHandler = (): React.ReactElement =>
ApiWithoutInput({
const RegisterOnResumeHandler = (): React.ReactElement => {
const navigate = useNavigate();
return ApiWithoutInput({
name: 'RegisterOnResumeHandler',
title: 'Register On Resume Handler',
onClick: async (setResult) => {
app.lifecycle.registerOnResumeHandler((context: ResumeContext): void => {
setResult('successfully called with context:' + JSON.stringify(context));
// get the route from the context
const route = new URL(context.contentUrl);
lakhveerk marked this conversation as resolved.
Show resolved Hide resolved
// navigate to the correct path based on URL
navigate(route.pathname);
app.notifySuccess();
});

return 'registered';
},
});
};

const RegisterBeforeSuspendOrTerminateHandler = (): React.ReactElement =>
ApiWithoutInput({
Expand Down
10 changes: 10 additions & 0 deletions apps/teams-test-app/src/pages/SecondRoute.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React, { ReactElement } from 'react';

import AppAPIs from '../components/AppAPIs';

export const SecondRoute = (): ReactElement => (
<div>
This is an additional route for testing purposes.
<AppAPIs />
</div>
);
136 changes: 136 additions & 0 deletions apps/teams-test-app/src/pages/TestApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import { IAppWindow } from '@microsoft/teams-js';
import React from 'react';

import AppAPIs from '../components/AppAPIs';
import AppEntityAPIs from '../components/AppEntityAPIs';
import AppInitializationAPIs from '../components/AppInitialization';
import AppInstallDialogAPIs from '../components/AppInstallDialog';
import AuthenticationAPIs from '../components/AuthenticationAPIs';
import BarCodeAPIs from '../components/BarCodeAPIs';
import CalendarAPIs from '../components/CalendarAPIs';
import CallAPIs from '../components/CallAPIs';
import ClipboardAPIs from '../components/Clipboard';
import CustomAPIs from '../components/Custom';
import DialogAPIs from '../components/DialogAPIs';
import DialogCardAPIs from '../components/DialogCardAPIs';
import DialogCardBotAPIs from '../components/DialogCardBotAPIs';
import DialogUpdateAPIs from '../components/DialogUpdateAPIs';
import DialogUrlAPIs from '../components/DialogUrlAPIs';
import DialogUrlBotAPIs from '../components/DialogUrlBotAPIs';
import DialogUrlParentCommunicationAPIs from '../components/DialogUrlParentCommunicationAPIs';
import GeoLocationAPIs from '../components/GeoLocationAPIs';
import Links from '../components/Links';
import LocationAPIs from '../components/LocationAPIs';
import LogAPIs from '../components/LogsAPIs';
import MailAPIs from '../components/MailAPIs';
import MarketplaceAPIs from '../components/MarketplaceAPIs';
import MediaAPIs from '../components/MediaAPIs';
import MeetingAPIs from '../components/MeetingAPIs';
import MenusAPIs from '../components/MenusAPIs';
import NestedAppAuthAPIs from '../components/NestedAppAuthAPIs';
import OtherAppStateChangedAPIs from '../components/OtherAppStateChangeAPIs';
import PagesAPIs from '../components/PagesAPIs';
import PagesAppButtonAPIs from '../components/PagesAppButtonAPIs';
import PagesBackStackAPIs from '../components/PagesBackStackAPIs';
import PagesConfigAPIs from '../components/PagesConfigAPIs';
import PagesCurrentAppAPIs from '../components/PagesCurrentAppAPIs';
import PagesTabsAPIs from '../components/PagesTabsAPIs';
import PeopleAPIs from '../components/PeopleAPIs';
import ChatAPIs from '../components/privateApis/ChatAPIs';
import ExternalAppAuthenticationAPIs from '../components/privateApis/ExternalAppAuthenticationAPIs';
import ExternalAppCardActionsAPIs from '../components/privateApis/ExternalAppCardActionsAPIs';
import ExternalAppCommandsAPIs from '../components/privateApis/ExternalAppCommandsAPIs';
import FilesAPIs from '../components/privateApis/FilesAPIs';
import FullTrustAPIs from '../components/privateApis/FullTrustAPIs';
import MeetingRoomAPIs from '../components/privateApis/MeetingRoomAPIs';
import MessageChannelAPIs from '../components/privateApis/MessageChannelAPIs';
import MonetizationAPIs from '../components/privateApis/MonetizationAPIs';
import NotificationAPIs from '../components/privateApis/NotificationAPIs';
import PrivateAPIs from '../components/privateApis/PrivateAPIs';
import TeamsAPIs from '../components/privateApis/TeamsAPIs';
import VideoExAPIs from '../components/privateApis/VideoEffectsExAPIs';
import ProfileAPIs from '../components/ProfileAPIs';
import RemoteCameraAPIs from '../components/RemoteCameraAPIs';
import SearchAPIs from '../components/SearchAPIs';
import SecondaryBrowserAPIs from '../components/SecondaryBrowserAPIs';
import SharingAPIs from '../components/SharingAPIs';
import StageViewAPIs from '../components/StageViewAPIs';
import TeamsCoreAPIs from '../components/TeamsCoreAPIs';
import ThirdPartyCloudStorageAPIs from '../components/ThirdPartyCloudStorageAPIs';
import CookieAccessComponent from '../components/ThirdPatryCookies';
import Version from '../components/Version';
import VideoAPIs from '../components/VideoEffectsApis';
import VisualMediaAPIs from '../components/VisualMediaAPIs';
import WebStorageAPIs from '../components/WebStorageAPIs';

export const TestApp: React.FC = () => {
const dialogWindowRef = React.useRef<IAppWindow | null>(null);

return (
<>
<div className="App-container">
<AppAPIs />
<AppInitializationAPIs />
<AppInstallDialogAPIs />
<AuthenticationAPIs />
<AppEntityAPIs />
<BarCodeAPIs />
<CalendarAPIs />
<CallAPIs />
<ChatAPIs />
<ClipboardAPIs />
<CookieAccessComponent />
<CustomAPIs />
<DialogAPIs />
<DialogCardAPIs />
<DialogCardBotAPIs />
<DialogUpdateAPIs />
<DialogUrlAPIs childWindowRef={dialogWindowRef} />
<DialogUrlBotAPIs />
<DialogUrlParentCommunicationAPIs childWindowRef={dialogWindowRef} />
<ExternalAppAuthenticationAPIs />
<ExternalAppCardActionsAPIs />
<ExternalAppCommandsAPIs />
<FilesAPIs />
<FullTrustAPIs />
<GeoLocationAPIs />
<Links />
<LocationAPIs />
<LogAPIs />
<MailAPIs />
<MarketplaceAPIs />
<MediaAPIs />
<MeetingAPIs />
<MeetingRoomAPIs />
<MenusAPIs />
<MessageChannelAPIs />
<MonetizationAPIs />
<NestedAppAuthAPIs />
<NotificationAPIs />
<OtherAppStateChangedAPIs />
<PagesAPIs />
<PagesAppButtonAPIs />
<PagesBackStackAPIs />
<PagesConfigAPIs />
<PagesCurrentAppAPIs />
<PagesTabsAPIs />
<PeopleAPIs />
<PrivateAPIs />
<ProfileAPIs />
<RemoteCameraAPIs />
<SearchAPIs />
<SecondaryBrowserAPIs />
<SharingAPIs />
<WebStorageAPIs />
<StageViewAPIs />
<TeamsCoreAPIs />
<TeamsAPIs />
<ThirdPartyCloudStorageAPIs />
<VideoAPIs />
<VideoExAPIs />
<VisualMediaAPIs />
</div>
<Version />
</>
);
};
1 change: 1 addition & 0 deletions apps/teams-test-app/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ module.exports = {
extensions: ['.tsx', '.ts', '.js'],
},
devServer: {
historyApiFallback: true, // enables react router
static: {
directory: path.join(__dirname, 'build'),
publicPath: '/',
Expand Down