Skip to content

Commit

Permalink
fix: upgrading to frontend-base 2.0.0 (#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
davidjoy authored Sep 19, 2019
1 parent d36115f commit f9d1734
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 72 deletions.
56 changes: 33 additions & 23 deletions example/index.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,45 @@
import React from 'react';
import { render } from 'react-dom';
import { IntlProvider } from '@edx/frontend-i18n';
import { AuthenticationContext } from '@edx/frontend-base';
import 'babel-polyfill';

import React from 'react';
import ReactDOM from 'react-dom';
import { App, AppContext, APP_READY, AppProvider } from '@edx/frontend-base';
import { NewRelicLoggingService } from '@edx/frontend-logging';
import './index.scss';
import SiteHeader from '../src/';

const App = () => (
<div>
<IntlProvider locale="en">
<>
<AuthenticationContext.Provider value={{
App.subscribe(APP_READY, () => {
ReactDOM.render(
<AppProvider>
{/* We can fake out authentication by including another provider here with the data we want */}
<AppContext.Provider value={{
authenticatedUser: {
userId: null,
username: null,
roles: [],
administrator: false,
}}>
<SiteHeader />
</AuthenticationContext.Provider>
<h5 className="mt-2 mb-5">Logged out state</h5>
},
config: App.config
}}>
<SiteHeader />
</AppContext.Provider>
<h5 className="mt-2 mb-5">Logged out state</h5>

<AuthenticationContext.Provider value={{
{/* We can fake out authentication by including another provider here with the data we want */}
<AppContext.Provider value={{
authenticatedUser: {
userId: null,
username: 'testuser',
roles: [],
administrator: false,
}}>
<SiteHeader />
</AuthenticationContext.Provider>
<h5 className="mt-2">Logged in state</h5>
</>
</IntlProvider>
</div>
);
},
config: App.config
}}>
<SiteHeader />
</AppContext.Provider>
<h5 className="mt-2">Logged in state</h5>
</AppProvider>,
document.getElementById('root'),
);
});

render(<App />, document.getElementById('root'));
App.initialize({ messages: [], loggingService: NewRelicLoggingService });
74 changes: 63 additions & 11 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,15 @@
"@babel/preset-react": "^7.0.0",
"@edx/frontend-analytics": "^2.0.0",
"@edx/frontend-auth": "^6.0.1",
"@edx/frontend-base": "^1.1.1",
"@edx/frontend-base": "^2.0.0",
"@edx/frontend-i18n": "^3.0.2",
"@edx/frontend-logging": "^3.0.1",
"@edx/paragon": "^7.1.2",
"babel-eslint": "^10.0.3",
"babel-plugin-react-intl": "^4.1.18",
"dotenv": "^8.1.0",
"enzyme": "^3.10.0",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"eslint": "^6.3.0",
"eslint-config-edx": "^4.0.4",
"jest": "^24.9.0",
Expand All @@ -63,12 +64,13 @@
},
"peerDependencies": {
"@edx/frontend-analytics": "^2.0.0",
"@edx/frontend-base": "^1.1.1",
"@edx/frontend-base": "^2.0.0",
"@edx/frontend-i18n": "^3.0.2",
"prop-types": "^15.7.2",
"react": "^16.9.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"react-responsive": "^8.0.1",
"react-transition-group": "^4.3.0"
},
Expand All @@ -88,6 +90,7 @@
"/node_modules/(?!@edx)"
],
"setupFiles": [
"./src/setupTest.js",
"dotenv/config"
]
}
Expand Down
51 changes: 23 additions & 28 deletions src/SiteHeader.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import Responsive from 'react-responsive';
import { injectIntl, intlShape } from '@edx/frontend-i18n';
import { App, AuthenticationContext } from '@edx/frontend-base';
import { App, AppContext, APP_CONFIGURED } from '@edx/frontend-base';

import DesktopHeader from './DesktopHeader';
import MobileHeader from './MobileHeader';
Expand All @@ -10,75 +10,70 @@ import LogoSVG from './logo.svg';

import messages from './SiteHeader.messages';

App.requireConfig([
'LMS_BASE_URL',
'LOGOUT_URL',
'LOGIN_URL',
'SITE_NAME',
], 'Header component');

const {
LMS_BASE_URL,
LOGOUT_URL,
LOGIN_URL,
SITE_NAME,
} = App.config;
App.subscribe(APP_CONFIGURED, () => {
App.requireConfig([
'LMS_BASE_URL',
'LOGOUT_URL',
'LOGIN_URL',
'SITE_NAME',
], 'Header component');
});

function SiteHeader({ intl }) {
const { username, avatar } = useContext(AuthenticationContext);
const { authenticatedUser, config } = useContext(AppContext);

const mainMenu = [
{
type: 'item',
href: `${LMS_BASE_URL}/dashboard`,
href: `${config.LMS_BASE_URL}/dashboard`,
content: intl.formatMessage(messages['header.links.courses']),
},
];

const userMenu = [
{
type: 'item',
href: `${LMS_BASE_URL}/dashboard`,
href: `${config.LMS_BASE_URL}/dashboard`,
content: intl.formatMessage(messages['header.user.menu.dashboard']),
},
{
type: 'item',
href: `${LMS_BASE_URL}/u/${username}`,
href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
content: intl.formatMessage(messages['header.user.menu.profile']),
},
{
type: 'item',
href: `${LMS_BASE_URL}/account/settings`,
href: `${config.LMS_BASE_URL}/account/settings`,
content: intl.formatMessage(messages['header.user.menu.account.settings']),
},
{
type: 'item',
href: LOGOUT_URL,
href: config.LOGOUT_URL,
content: intl.formatMessage(messages['header.user.menu.logout']),
},
];

const loggedOutItems = [
{
type: 'item',
href: LOGIN_URL,
href: config.LOGIN_URL,
content: intl.formatMessage(messages['header.user.menu.login']),
},
{
type: 'item',
href: `${LMS_BASE_URL}/register`,
href: `${config.LMS_BASE_URL}/register`,
content: intl.formatMessage(messages['header.user.menu.register']),
},
];

const props = {
logo: LogoSVG,
logoAltText: SITE_NAME,
siteName: SITE_NAME,
logoDestination: `${LMS_BASE_URL}/dashboard`,
loggedIn: !!username,
username,
avatar,
logoAltText: config.SITE_NAME,
siteName: config.SITE_NAME,
logoDestination: `${config.LMS_BASE_URL}/dashboard`,
loggedIn: !!authenticatedUser.username,
username: authenticatedUser.username,
avatar: authenticatedUser.avatar,
mainMenu,
userMenu,
loggedOutItems,
Expand Down
Loading

0 comments on commit f9d1734

Please sign in to comment.