Skip to content

Commit f9d1734

Browse files
davidjoydavidjoy
authored
fix: upgrading to frontend-base 2.0.0 (#3)
1 parent d36115f commit f9d1734

File tree

6 files changed

+174
-72
lines changed

6 files changed

+174
-72
lines changed

‎example/index.js‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,45 @@
1-
import React from 'react';
2-
import { render } from 'react-dom';
3-
import { IntlProvider } from '@edx/frontend-i18n';
4-
import { AuthenticationContext } from '@edx/frontend-base';
1+
import 'babel-polyfill';
52

3+
import React from 'react';
4+
import ReactDOM from 'react-dom';
5+
import { App, AppContext, APP_READY, AppProvider } from '@edx/frontend-base';
6+
import { NewRelicLoggingService } from '@edx/frontend-logging';
67
import './index.scss';
78
import SiteHeader from '../src/';
89

9-
const App = () => (
10-
<div>
11-
<IntlProvider locale="en">
12-
<>
13-
<AuthenticationContext.Provider value={{
10+
App.subscribe(APP_READY, () => {
11+
ReactDOM.render(
12+
<AppProvider>
13+
{/* We can fake out authentication by including another provider here with the data we want */}
14+
<AppContext.Provider value={{
15+
authenticatedUser: {
1416
userId: null,
1517
username: null,
18+
roles: [],
1619
administrator: false,
17-
}}>
18-
<SiteHeader />
19-
</AuthenticationContext.Provider>
20-
<h5 className="mt-2 mb-5">Logged out state</h5>
20+
},
21+
config: App.config
22+
}}>
23+
<SiteHeader />
24+
</AppContext.Provider>
25+
<h5 className="mt-2 mb-5">Logged out state</h5>
2126

22-
<AuthenticationContext.Provider value={{
27+
{/* We can fake out authentication by including another provider here with the data we want */}
28+
<AppContext.Provider value={{
29+
authenticatedUser: {
2330
userId: null,
2431
username: 'testuser',
32+
roles: [],
2533
administrator: false,
26-
}}>
27-
<SiteHeader />
28-
</AuthenticationContext.Provider>
29-
<h5 className="mt-2">Logged in state</h5>
30-
</>
31-
</IntlProvider>
32-
</div>
33-
);
34+
},
35+
config: App.config
36+
}}>
37+
<SiteHeader />
38+
</AppContext.Provider>
39+
<h5 className="mt-2">Logged in state</h5>
40+
</AppProvider>,
41+
document.getElementById('root'),
42+
);
43+
});
3444

35-
render(<App />, document.getElementById('root'));
45+
App.initialize({ messages: [], loggingService: NewRelicLoggingService });

‎package-lock.json‎

Lines changed: 63 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,15 @@
3737
"@babel/preset-react": "^7.0.0",
3838
"@edx/frontend-analytics": "^2.0.0",
3939
"@edx/frontend-auth": "^6.0.1",
40-
"@edx/frontend-base": "^1.1.1",
40+
"@edx/frontend-base": "^2.0.0",
4141
"@edx/frontend-i18n": "^3.0.2",
4242
"@edx/frontend-logging": "^3.0.1",
4343
"@edx/paragon": "^7.1.2",
4444
"babel-eslint": "^10.0.3",
4545
"babel-plugin-react-intl": "^4.1.18",
4646
"dotenv": "^8.1.0",
47-
"enzyme": "^3.10.0",
47+
"enzyme": "3.10.0",
48+
"enzyme-adapter-react-16": "1.14.0",
4849
"eslint": "^6.3.0",
4950
"eslint-config-edx": "^4.0.4",
5051
"jest": "^24.9.0",
@@ -63,12 +64,13 @@
6364
},
6465
"peerDependencies": {
6566
"@edx/frontend-analytics": "^2.0.0",
66-
"@edx/frontend-base": "^1.1.1",
67+
"@edx/frontend-base": "^2.0.0",
6768
"@edx/frontend-i18n": "^3.0.2",
6869
"prop-types": "^15.7.2",
6970
"react": "^16.9.0"
7071
},
7172
"dependencies": {
73+
"babel-polyfill": "^6.26.0",
7274
"react-responsive": "^8.0.1",
7375
"react-transition-group": "^4.3.0"
7476
},
@@ -88,6 +90,7 @@
8890
"/node_modules/(?!@edx)"
8991
],
9092
"setupFiles": [
93+
"./src/setupTest.js",
9194
"dotenv/config"
9295
]
9396
}

‎src/SiteHeader.jsx‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext } from 'react';
22
import Responsive from 'react-responsive';
33
import { injectIntl, intlShape } from '@edx/frontend-i18n';
4-
import { App, AuthenticationContext } from '@edx/frontend-base';
4+
import { App, AppContext, APP_CONFIGURED } from '@edx/frontend-base';
55

66
import DesktopHeader from './DesktopHeader';
77
import MobileHeader from './MobileHeader';
@@ -10,75 +10,70 @@ import LogoSVG from './logo.svg';
1010

1111
import messages from './SiteHeader.messages';
1212

13-
App.requireConfig([
14-
'LMS_BASE_URL',
15-
'LOGOUT_URL',
16-
'LOGIN_URL',
17-
'SITE_NAME',
18-
], 'Header component');
19-
20-
const {
21-
LMS_BASE_URL,
22-
LOGOUT_URL,
23-
LOGIN_URL,
24-
SITE_NAME,
25-
} = App.config;
13+
App.subscribe(APP_CONFIGURED, () => {
14+
App.requireConfig([
15+
'LMS_BASE_URL',
16+
'LOGOUT_URL',
17+
'LOGIN_URL',
18+
'SITE_NAME',
19+
], 'Header component');
20+
});
2621

2722
function SiteHeader({ intl }) {
28-
const { username, avatar } = useContext(AuthenticationContext);
23+
const { authenticatedUser, config } = useContext(AppContext);
2924

3025
const mainMenu = [
3126
{
3227
type: 'item',
33-
href: `${LMS_BASE_URL}/dashboard`,
28+
href: `${config.LMS_BASE_URL}/dashboard`,
3429
content: intl.formatMessage(messages['header.links.courses']),
3530
},
3631
];
3732

3833
const userMenu = [
3934
{
4035
type: 'item',
41-
href: `${LMS_BASE_URL}/dashboard`,
36+
href: `${config.LMS_BASE_URL}/dashboard`,
4237
content: intl.formatMessage(messages['header.user.menu.dashboard']),
4338
},
4439
{
4540
type: 'item',
46-
href: `${LMS_BASE_URL}/u/${username}`,
41+
href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
4742
content: intl.formatMessage(messages['header.user.menu.profile']),
4843
},
4944
{
5045
type: 'item',
51-
href: `${LMS_BASE_URL}/account/settings`,
46+
href: `${config.LMS_BASE_URL}/account/settings`,
5247
content: intl.formatMessage(messages['header.user.menu.account.settings']),
5348
},
5449
{
5550
type: 'item',
56-
href: LOGOUT_URL,
51+
href: config.LOGOUT_URL,
5752
content: intl.formatMessage(messages['header.user.menu.logout']),
5853
},
5954
];
6055

6156
const loggedOutItems = [
6257
{
6358
type: 'item',
64-
href: LOGIN_URL,
59+
href: config.LOGIN_URL,
6560
content: intl.formatMessage(messages['header.user.menu.login']),
6661
},
6762
{
6863
type: 'item',
69-
href: `${LMS_BASE_URL}/register`,
64+
href: `${config.LMS_BASE_URL}/register`,
7065
content: intl.formatMessage(messages['header.user.menu.register']),
7166
},
7267
];
7368

7469
const props = {
7570
logo: LogoSVG,
76-
logoAltText: SITE_NAME,
77-
siteName: SITE_NAME,
78-
logoDestination: `${LMS_BASE_URL}/dashboard`,
79-
loggedIn: !!username,
80-
username,
81-
avatar,
71+
logoAltText: config.SITE_NAME,
72+
siteName: config.SITE_NAME,
73+
logoDestination: `${config.LMS_BASE_URL}/dashboard`,
74+
loggedIn: !!authenticatedUser.username,
75+
username: authenticatedUser.username,
76+
avatar: authenticatedUser.avatar,
8277
mainMenu,
8378
userMenu,
8479
loggedOutItems,

0 commit comments

Comments
 (0)