From b77eb48677b75cfdacb002681ac2f52c8ee25b03 Mon Sep 17 00:00:00 2001 From: Douglas Hall Date: Thu, 10 Jan 2019 16:56:29 -0500 Subject: [PATCH] Adding header component. --- assets/edx-sm.png | Bin 0 -> 1180 bytes package-lock.json | 153 +++++++++++++++++----------- package.json | 2 + src/App.scss | 1 + src/containers/SiteHeader/index.jsx | 18 ++++ src/data/apiClient.js | 1 + src/data/reducers/index.js | 13 ++- src/data/store.js | 4 +- src/index.jsx | 83 +++++++++------ 9 files changed, 182 insertions(+), 93 deletions(-) create mode 100644 assets/edx-sm.png create mode 100644 src/containers/SiteHeader/index.jsx diff --git a/assets/edx-sm.png b/assets/edx-sm.png new file mode 100644 index 0000000000000000000000000000000000000000..d1858353c1631d52e91bd03c44465effaca545d1 GIT binary patch literal 1180 zcmV;N1Y`S&P))j{u`r-*-p zPK&6MBSwjZiF+V1eo0belPcqcPX8elU300202QchC-0RP|uHGuYiwGkATnLP|rZWfPg^XV%-Y>00Qty zL_t(|0qxfXmg6`OfZ+-{%*@O*J7lSuVVD{2e~NLWE=Mjq$-wgN_b5$&{G^KPhQAS? zTevry&F%&juv88b8vGbH6ZUs@cJ_1yENMCsg#YXR*K0llW6zI{j-Fw|qiJ&V{F>Hv z;dficcgye-n6Pj;Tw=t0OFuZthQkGLQ1SU{mb$mAqd441;CEbQuqpHdT*yT;pqLb^ zOh`{Ft2zYDRtSW+jx?acB8_6B6bMOoi7C83vkoncHN`rFbkqSN72rfJEUvrCh@n~c zdoULP0Kd5r2_OnFZZ`s$G6z_PvJzaql?R9ncN8tMjdf+jNqMW0_!e4O7{73cUN5e09KM|TE{WR!6&j@>VZY{YFBvD z234{|>i7}G4=vH)QkHD>D_Q>ytOmAvcT>Gi*F{Rck@Y)3RO!m#!aE*~xtoOvSj~?` z{FDRXCcE0y6)hn68oR=ot?skdBb)C>+}WY5pY!m>`dBBrzfYaa3*Fhx^$S^l$5U(S zKzEbVQ52Hud5rhk{Z zb3Tf@_^Wj&e1))}Cs*)Riu#Pfye1l$Jwq?Ja#`bWKgrBIR uLU;*md`lI4eLsKWwkF_zHbfcL`QJByDa!q^BWf)G0000 ({ + accountMenu: { + avatar: state.userProfile.userProfileImageUrl, + username: state.userProfile.username, + menuContent: ( +
+ +
+ ), + }, +}); + +export default connect(mapStateToProps)(SiteHeader); diff --git a/src/data/apiClient.js b/src/data/apiClient.js index 4d17535..055e5e9 100644 --- a/src/data/apiClient.js +++ b/src/data/apiClient.js @@ -4,6 +4,7 @@ import { configuration } from '../config'; const apiClient = getAuthenticatedAPIClient({ appBaseUrl: configuration.BASE_URL, + authBaseUrl: process.env.LMS_BASE_URL, loginUrl: configuration.LOGIN_URL, logoutUrl: configuration.LOGOUT_URL, csrfTokenApiPath: process.env.CSRF_TOKEN_API_PATH, diff --git a/src/data/reducers/index.js b/src/data/reducers/index.js index 45d0591..97a480b 100755 --- a/src/data/reducers/index.js +++ b/src/data/reducers/index.js @@ -1,5 +1,16 @@ import { combineReducers } from 'redux'; +import { userProfile } from '@edx/frontend-auth'; -const rootReducer = combineReducers({}); +const identityReducer = (state) => { + const newState = { ...state }; + return newState; +}; + +const rootReducer = combineReducers({ + // The authentication state is added as initialState when + // creating the store in data/store.js. + authentication: identityReducer, + userProfile, +}); export default rootReducer; diff --git a/src/data/store.js b/src/data/store.js index e48a079..d7b019b 100755 --- a/src/data/store.js +++ b/src/data/store.js @@ -3,12 +3,14 @@ import thunkMiddleware from 'redux-thunk'; import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction'; import { createLogger } from 'redux-logger'; +import apiClient from './apiClient'; import reducers from './reducers'; const loggerMiddleware = createLogger(); - +const initialState = apiClient.getAuthenticationState(); const store = createStore( reducers, + initialState, composeWithDevTools(applyMiddleware(thunkMiddleware, loggerMiddleware)), ); diff --git a/src/index.jsx b/src/index.jsx index e1d27cc..69d6b67 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,49 +1,66 @@ import 'babel-polyfill'; -import React from 'react'; +import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { Provider } from 'react-redux'; import SiteFooter from '@edx/frontend-component-footer'; +import { fetchUserProfile } from '@edx/frontend-auth'; import apiClient from './data/apiClient'; import { handleTrackEvents } from './analytics'; +import SiteHeader from './containers/SiteHeader'; import UserAccount from './components/UserAccount'; import store from './data/store'; +import HeaderLogo from '../assets/edx-sm.png'; import FooterLogo from '../assets/edx-footer.png'; import './App.scss'; -const App = () => ( - - -
-
- - - -
- -
- - -); +class App extends Component { + componentDidMount() { + const { username } = store.getState().authentication; + store.dispatch(fetchUserProfile(apiClient, username)); + } + + render() { + return ( + + +
+ +
+ + + +
+ +
+ + + ); + } +} if (apiClient.ensurePublicOrAuthencationAndCookies(window.location.pathname)) { ReactDOM.render(, document.getElementById('root'));