Skip to content

Commit 442bc72

Browse files
martenpaynemartenpayne
committed
Migrated from npm to yarn
- updated layout of the call dialog - removed usage of hand styled material-ui components
1 parent 90da02d commit 442bc72

File tree

8 files changed

+572
-702
lines changed

8 files changed

+572
-702
lines changed

‎Website/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ package. This will point your locally running UI resources in the sandbox stack.
1818

1919
### Start the local dev server
2020

21-
#### `npm run start`
21+
#### `yarn start`
2222

2323
Runs the app in the development mode.<br />
2424
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -40,7 +40,7 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
4040

4141
### Eject from `create-react-app`
4242

43-
#### `npm run eject`
43+
#### `yarn eject`
4444

4545
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
4646

‎Website/package.json‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,24 @@
3737
"browserslist": "^4.16.6"
3838
},
3939
"resolutions": {
40-
"ssri": "^8.0.1",
41-
"is-svg": "^4.2.2",
42-
"glob-parent": "^5.1.2",
43-
"normalize-url": "^4.5.1",
44-
"css-what": "^5.0.1",
45-
"immer": "^9.0.6",
46-
"tar": "^6.1.9",
47-
"prismjs": "^1.25.0",
48-
"node-forge": "^1.0.0",
49-
"nth-check": "^2.0.1",
5040
"axios": "^0.21.2",
5141
"ansi-regex": "^5.0.1",
42+
"node-forge": "^1.0.0",
43+
"nth-check": "^2.0.1",
44+
"glob-parent": "^5.1.2",
5245
"browserslist": "^4.16.5",
53-
"postcss": "^8.2.1"
46+
"immer": "^9.0.6"
5447
},
5548
"scripts": {
5649
"start": "react-scripts start",
5750
"build": "react-scripts build",
5851
"eject": "react-scripts eject"
5952
},
6053
"eslintConfig": {
61-
"extends": "react-app"
54+
"extends": [
55+
"react-app",
56+
"react-app/jest"
57+
]
6258
},
6359
"browserslist": {
6460
"production": [

‎Website/src/api/ChimeCallServiceClient.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@ const {
1313
* for further interaction from the diagnostic and contact card
1414
*/
1515
export class ChimeCallServiceClient {
16-
public createChimeSession = async (): Promise<string | undefined> => {
16+
async createChimeSession(): Promise<string | undefined> {
1717
try {
1818
const response = await sigv4SignedGet(`${apiUrl}call-create`);
1919
return await response.json();
2020
} catch (e) {
2121
console.error(e);
22+
return undefined;
2223
}
23-
};
24-
}
24+
}
25+
};

‎Website/src/components/Controls/ModalChimeDialog.tsx‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,13 @@ import {
1313

1414
import {
1515
Box,
16+
Button,
1617
Grid,
17-
Modal
18+
Modal,
19+
Toggle
1820
} from "aws-northstar";
1921

20-
import {
21-
Button,
22-
ButtonGroup,
23-
Typography
24-
} from "@material-ui/core";
22+
import Text from 'aws-northstar/components/Text';
2523

2624
interface ModalChimeDialogProperties {
2725
onEndCall: any;
@@ -44,30 +42,38 @@ const ModalChimeDialog: React.FC<ModalChimeDialogProperties> = ({ onEndCall, inf
4442
<RemoteVideo tileId={tileId} />
4543
</div>
4644
));
47-
45+
4846
return (
4947
<Modal title="Chime SDK Video Call" visible={true} onClose={onEndCall}>
5048
<Grid container alignContent="center" spacing={1}>
5149
<Grid item xs={12}>
5250
<div className={`grid grid--size-${tiles.length}`}>
5351
{tiles.length ? videos :
54-
<Box style={{ height: "15rem", width: '100%', margin: '2rem auto' }}>
55-
<Typography align='center'>No remote videos available</Typography>
52+
<Box style={{ height: "15rem", width: '100%', margin: '2rem auto' }} borderColor='black' border={'1px dashed grey'}>
53+
<Text>No remote videos available</Text>
5654
</Box>}
5755
</div>
5856
<div style={{ height: "5rem", width: '9rem', margin: '2rem auto' }}>
5957
{isVideoEnabled ? <PreviewVideo /> :
6058
<Box height={'100%'} borderColor='black' border={'1px dashed grey'}>
61-
<Typography align='center'>Video disabled</Typography>
59+
<Text>Video disabled</Text>
6260
</Box>}
6361
</div>
6462
</Grid>
6563
<Grid item xs={12} style={{ textAlign: 'center' }}>
66-
<ButtonGroup color='primary'>
67-
<Button style={{ minWidth: '140px', width: '140px' }} onClick={toggleVideo}>{isVideoEnabled ? 'Tun Video Off' : 'Turn Video On'}</Button>
68-
<Button style={{ minWidth: '140px', width: '140px' }} onClick={toggleMute}>{muted ? 'Unmute' : 'Mute'}</Button>
69-
<Button style={{ minWidth: '140px', width: '140px' }} onClick={onEndCall}>Finish</Button>
70-
</ButtonGroup>
64+
<Grid container alignContent="center" spacing={1}>
65+
<Grid item xs={3}>
66+
<Toggle label={isVideoEnabled ? "Video Enabled" : "Video Disabled"} onChange={toggleVideo}/>
67+
</Grid>
68+
<Grid item xs={3}>
69+
<Toggle label={muted ? "Microphone Muted" : "Microphone Unmuted"} onChange={toggleMute}/>
70+
</Grid>
71+
<Grid item xs={3}>
72+
</Grid>
73+
<Grid item xs={3}>
74+
<Button variant={"primary"} onClick={onEndCall}>Finish</Button>
75+
</Grid>
76+
</Grid>
7177
</Grid>
7278
</Grid>
7379
{ infoPanel ? <Grid item xs={12}><div style={{ height: 20 }}></div></Grid> : null}
@@ -76,4 +82,4 @@ const ModalChimeDialog: React.FC<ModalChimeDialogProperties> = ({ onEndCall, inf
7682
)
7783
}
7884

79-
export default ModalChimeDialog;
85+
export default ModalChimeDialog;

‎Website/src/containers/App/index.tsx‎

Lines changed: 53 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: MIT-0
33

4-
import React, { useState, useEffect } from "react";
5-
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
6-
import AppLayout from "aws-northstar/layouts/AppLayout";
7-
import NorthStarThemeProvider from "aws-northstar/components/NorthStarThemeProvider";
4+
import React, { useState } from "react";
85
import HomeContainer from "../Home/HomeContainer";
9-
import { Amplify } from "aws-amplify";
10-
import { Auth } from "aws-amplify";
116
import { withAuthenticator } from "@aws-amplify/ui-react";
12-
import Header from "aws-northstar/components/Header";
13-
import ButtonDropdown from "aws-northstar/components/ButtonDropdown";
147
import { ThemeProvider } from "styled-components";
15-
import { lightTheme, MeetingProvider } from "amazon-chime-sdk-component-library-react";
8+
import { darkTheme, MeetingProvider } from "amazon-chime-sdk-component-library-react";
9+
import { AmplifyAuthenticator, AmplifySignIn } from '@aws-amplify/ui-react';
10+
import {
11+
AppLayout,
12+
ButtonDropdown,
13+
Header,
14+
NorthStarThemeProvider,
15+
} from 'aws-northstar';
16+
import Amplify, { Auth } from 'aws-amplify';
17+
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
1618

1719
const menuItems = [
1820
{
@@ -48,37 +50,52 @@ const awsConfig = {
4850
Amplify.configure(awsConfig);
4951

5052
const App: React.FC = () => {
51-
const [username, setUsername] = useState<string>();
52-
useEffect(() => {
53-
(async () => {
54-
try {
55-
const user = await Auth.currentAuthenticatedUser();
56-
setUsername(user.username);
57-
} catch (e) {
58-
// No user currently logged in
59-
}
60-
})();
61-
}, []);
53+
const [user, setUser] = useState<any>();
6254

63-
const rightContent = <ButtonDropdown content={username} items={menuItems} variant="primary" />;
55+
const rightContent = <ButtonDropdown darkTheme content={user?.attributes?.given_name || user?.username} items={menuItems} />;
6456

6557
return (
66-
<NorthStarThemeProvider>
67-
<ThemeProvider theme={lightTheme}>
68-
<Router>
69-
<Header title="Cross Talk" rightContent={rightContent} />
70-
<MeetingProvider>
71-
<AppLayout header={<div></div>}>
72-
<Switch>
73-
<Route exact path="/" component={HomeContainer} />
74-
</Switch>
75-
</AppLayout>
76-
</MeetingProvider>
77-
</Router>
78-
</ThemeProvider>
79-
</NorthStarThemeProvider>
58+
<AmplifyAuthenticator
59+
handleAuthStateChange={async () => {
60+
try {
61+
setUser(await Auth.currentAuthenticatedUser());
62+
} catch (err) {
63+
setUser(undefined);
64+
}
65+
}}
66+
>
67+
<AmplifySignIn slot="sign-in">
68+
<div slot="secondary-footer-content"></div>
69+
<div slot="federated-buttons"></div>
70+
</AmplifySignIn>
71+
72+
{user ? (
73+
<NorthStarThemeProvider>
74+
<ThemeProvider theme={darkTheme}>
75+
<Router>
76+
<MeetingProvider>
77+
<AppLayout
78+
header={
79+
<Header
80+
title="Cross Talk"
81+
rightContent={rightContent}
82+
/>
83+
}
84+
>
85+
<Switch>
86+
<Route exact path="/" component={HomeContainer} />
87+
</Switch>
88+
</AppLayout>
89+
</MeetingProvider>
90+
</Router>
91+
</ThemeProvider>
92+
</NorthStarThemeProvider>
93+
) : (
94+
<></>
95+
)}
96+
</AmplifyAuthenticator>
8097
);
81-
};
98+
};
8299

83100
// Temporarily restrict access via a login page. For unauthenticated
84101
// access, replace with the commented line below

‎Website/src/containers/Home/HomeContainer.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
// SPDX-License-Identifier: MIT-0
33

44
import React, { useEffect, useMemo, useState } from "react";
5-
import { Alert, Button, ColumnLayout, Inline, Stack } from "aws-northstar";
6-
import { Card } from "@material-ui/core";
5+
import { Alert, Button, Card, ColumnLayout, Inline, Stack } from "aws-northstar";
76
import { Auth } from "aws-amplify";
87
import { ChimeCallServiceClient } from "../../api/ChimeCallServiceClient";
9-
import Heading from "aws-northstar/components/Heading";
108
import { useMeetingManager } from "amazon-chime-sdk-component-library-react";
119
import ModalChimeDialog from "../../components/Controls/ModalChimeDialog";
1210
import AWSAppSyncClient from "aws-appsync";
@@ -217,7 +215,7 @@ const HomeContainer: React.FC = () => {
217215
if (meetingSubscription) meetingSubscription.unsubscribe();
218216
}
219217
// don't want to do updates for 'claimedSubscription', 'meetingSubscription', and 'username'
220-
// eslint-disable-next-line react-hooks/exhaustive-deps
218+
// eslint-disable-next-line
221219
}, [callStarting, showChimeChat]);
222220

223221
return (
@@ -236,23 +234,20 @@ const HomeContainer: React.FC = () => {
236234
</Alert>
237235
) : null}
238236
</Stack>
239-
<Card style={{ padding: 20 }}>
240-
<div
241-
style={{
242-
display: "flex",
243-
justifyContent: "space-between",
244-
}}
245-
>
246-
<Heading variant="h2">Start a call</Heading>
247-
</div>
248-
<Heading variant="h5">press the button to start a Chime call</Heading>
249-
<div style={{ marginTop: 20 }}>
250-
<Inline>
251-
<Button onClick={startChimeCall} icon={VideoCallOutlined} iconAlign="right" loading={callStarting}>
252-
Start Call
253-
</Button>
254-
</Inline>
255-
</div>
237+
<Card
238+
title="Start a call"
239+
titleTypographyProps={{ variant: 'h2', gutterBottom: true }}
240+
subtitle="press the button to initiate a Chime call"
241+
>
242+
<Inline>
243+
<Button
244+
onClick={startChimeCall}
245+
icon={VideoCallOutlined}
246+
iconAlign="right" loading={callStarting}
247+
>
248+
Start Call
249+
</Button>
250+
</Inline>
256251
{showChimeChat ? <ModalChimeDialog onEndCall={finishChimeCall} /> : null}
257252
</Card>
258253
</Stack>

‎Website/src/index.tsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,27 @@ import "./index.css";
77
import App from "./containers/App";
88
import * as serviceWorker from "./serviceWorker";
99

10+
11+
import Amplify from 'aws-amplify';
12+
13+
const { region, userPoolId, userPoolWebClientId, identityPoolId } =
14+
// @ts-ignore
15+
window['runConfig'];
16+
17+
Amplify.configure({
18+
Auth: {
19+
region: region,
20+
userPoolId: userPoolId,
21+
userPoolWebClientId: userPoolWebClientId,
22+
identityPoolId: identityPoolId,
23+
}
24+
});
25+
1026
ReactDOM.render(
11-
<React.StrictMode>
12-
<App />
13-
</React.StrictMode>,
14-
document.getElementById("root")
27+
<React.StrictMode>
28+
<App />
29+
</React.StrictMode>,
30+
document.getElementById("root")
1531
);
1632

1733
// If you want your app to work offline and load faster, you can change

0 commit comments

Comments
 (0)