diff --git a/src/components/helpers/LocalizedTexts/LocalizedTexts.js b/src/components/helpers/LocalizedTexts/LocalizedTexts.js index c0c066c88..153c4b060 100644 --- a/src/components/helpers/LocalizedTexts/LocalizedTexts.js +++ b/src/components/helpers/LocalizedTexts/LocalizedTexts.js @@ -7,10 +7,11 @@ import ExternalLinkPreview from '../ExternalLinkPreview'; import Icon from '../../icons'; import Markdown from '../../widgets/Markdown'; import { knownLocales } from '../../../helpers/localizedData'; +import { UrlContext } from '../../../helpers/contexts'; import './LocalizedTexts.css'; -const LocalizedTexts = ({ locales = [], noLocalesMessage = null }, { lang = 'en' }) => { +const LocalizedTexts = ({ locales = [], noLocalesMessage = null }) => { const localeTabs = knownLocales .map(locale => locales.find(l => l.locale === locale)) .filter(tabData => tabData && (tabData.text || tabData.link || tabData.studentHint)); @@ -20,62 +21,62 @@ const LocalizedTexts = ({ locales = [], noLocalesMessage = null }, { lang = 'en' } return ( - locale === lang) || localeTabs.length === 0 ? lang : localeTabs[0].locale - } - className="nav-tabs-custom" - id="localized-texts"> - {localeTabs.map(({ locale, text, link = '', studentHint = null }, i) => ( - - {link && link !== '' && ( -
- -

- -

- - - {link} - -
- -
- )} + + {({ lang = 'en' }) => ( + locale === lang) || localeTabs.length === 0 ? lang : localeTabs[0].locale + } + className="nav-tabs-custom" + id="localized-texts"> + {localeTabs.map(({ locale, text, link = '', studentHint = null }, i) => ( + + {link && link !== '' && ( +
+ +

+ +

+ + + {link} + +
+ +
+ )} - {text.trim() !== '' && } + {text.trim() !== '' && } - {!text.trim() && !link && ( -
- -
- )} + {!text.trim() && !link && ( +
+ +
+ )} - {studentHint && studentHint !== '' && ( -
-
-

- -

- -
- )} -
- ))} -
+ {studentHint && studentHint !== '' && ( +
+
+

+ +

+ +
+ )} +
+ ))} +
+ )} + ); }; -LocalizedTexts.contextTypes = { - lang: PropTypes.string, -}; - LocalizedTexts.propTypes = { locales: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/components/layout/Sidebar/Sidebar.js b/src/components/layout/Sidebar/Sidebar.js index aff04af17..8e69db795 100644 --- a/src/components/layout/Sidebar/Sidebar.js +++ b/src/components/layout/Sidebar/Sidebar.js @@ -16,6 +16,7 @@ import { isSupervisorRole, isEmpoweredSupervisorRole, isSuperadminRole } from '. import withLinks from '../../../helpers/withLinks'; import { getExternalIdForCAS } from '../../../helpers/cas'; import { safeGet, EMPTY_OBJ } from '../../../helpers/common'; +import { UrlContext } from '../../../helpers/contexts'; import styles from './sidebar.less'; @@ -112,31 +113,44 @@ const Sidebar = ( ))} {studentOfItems && ( - } - items={studentOfItems} - notifications={EMPTY_OBJ} - icon={'user-circle'} - currentPath={currentUrl} - createLink={createLink} - forceOpen={false} - isActive={studentOfItems.find(item => isActive(createLink(item))) !== undefined} - /> + + {({ isActive }) => ( + + } + items={studentOfItems} + notifications={EMPTY_OBJ} + icon={'user-circle'} + currentPath={currentUrl} + createLink={createLink} + forceOpen={false} + isActive={studentOfItems.find(item => isActive(createLink(item))) !== undefined} + /> + )} + )} {isSupervisorRole(role) && supervisorOfItems && ( - - } - notifications={EMPTY_OBJ} - items={supervisorOfItems} - icon="graduation-cap" - currentPath={currentUrl} - createLink={createLink} - forceOpen={false} - isActive={supervisorOfItems.find(item => isActive(createLink(item))) !== undefined} - /> + + {({ isActive }) => ( + + } + notifications={EMPTY_OBJ} + items={supervisorOfItems} + icon="graduation-cap" + currentPath={currentUrl} + createLink={createLink} + forceOpen={false} + isActive={supervisorOfItems.find(item => isActive(createLink(item))) !== undefined} + /> + )} + )} {isSupervisorRole(role) && ( @@ -200,8 +214,4 @@ Sidebar.propTypes = { intl: intlShape, }; -Sidebar.contextTypes = { - isActive: PropTypes.func, -}; - export default withLinks(injectIntl(Sidebar)); diff --git a/src/components/widgets/Sidebar/MenuItem/MenuItem.js b/src/components/widgets/Sidebar/MenuItem/MenuItem.js index e56f59c10..4da27b9fb 100644 --- a/src/components/widgets/Sidebar/MenuItem/MenuItem.js +++ b/src/components/widgets/Sidebar/MenuItem/MenuItem.js @@ -2,39 +2,42 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { Link } from 'react-router'; + import Icon from '../../../icons'; +import { UrlContext } from '../../../../helpers/contexts'; -const MenuItem = ( - { - title, - icon = 'circle', - link, - currentPath, - notificationsCount = 0, - inNewTab = false, - small = false, - onIsActive = isActive => isActive, - }, - { isActive } -) => ( -
  • - - - - {title} - - {notificationsCount > 0 && {notificationsCount}} - -
  • +const MenuItem = ({ + title, + icon = 'circle', + link, + currentPath, + notificationsCount = 0, + inNewTab = false, + small = false, + onIsActive = isActive => isActive, +}) => ( + + {({ isActive }) => ( +
  • + + + + {title} + + {notificationsCount > 0 && {notificationsCount}} + +
  • + )} +
    ); MenuItem.propTypes = { @@ -48,8 +51,4 @@ MenuItem.propTypes = { onIsActive: PropTypes.func, }; -MenuItem.contextTypes = { - isActive: PropTypes.func, -}; - export default MenuItem; diff --git a/src/containers/LayoutContainer/LayoutContainer.js b/src/containers/LayoutContainer/LayoutContainer.js index 40cf63489..0c52a9bfb 100644 --- a/src/containers/LayoutContainer/LayoutContainer.js +++ b/src/containers/LayoutContainer/LayoutContainer.js @@ -12,7 +12,7 @@ import { isLoggedIn } from '../../redux/selectors/auth'; import { getLoggedInUserSettings } from '../../redux/selectors/users'; import { messages, localeData, defaultLanguage } from '../../locales'; import { linksFactory, isAbsolute } from '../../links'; -import { UserSettingsContext } from '../../helpers/contexts'; +import { UserSettingsContext, LinksContext, UrlContext } from '../../helpers/contexts'; import 'admin-lte/dist/css/AdminLTE.min.css'; import 'admin-lte/dist/css/skins/_all-skins.min.css'; @@ -80,16 +80,6 @@ class LayoutContainer extends Component { this.forceUpdate(); }; - /** - * Child components should be able to access current language settings - * and up-to-date links (with respect to the given language). - */ - getChildContext = () => ({ - links: this.state.links, - lang: this.state.lang, - isActive: link => !isAbsolute(link) && this.context.router.isActive(link, true), - }); - maybeHideSidebar = e => { const { sidebarIsOpen, toggleVisibility } = this.props; if (sidebarIsOpen) { @@ -122,37 +112,47 @@ class LayoutContainer extends Component { userSettings, } = this.props; - const { lang } = this.state; + const { lang, links } = this.state; addLocaleData([...this.getLocaleData(lang)]); moment.locale(lang); return ( - - {children} - + + !isAbsolute(link) && this.context.router.isActive(link, true), + }}> + + {children} + + + ); } } +/* LayoutContainer.childContextTypes = { lang: PropTypes.string, links: PropTypes.object, isActive: PropTypes.func, }; +*/ LayoutContainer.contextTypes = { router: PropTypes.object, diff --git a/src/helpers/contexts.js b/src/helpers/contexts.js index 613d7cf4e..ce6b03d28 100644 --- a/src/helpers/contexts.js +++ b/src/helpers/contexts.js @@ -1,3 +1,5 @@ import React from 'react'; export const UserSettingsContext = React.createContext({}); +export const LinksContext = React.createContext({}); +export const UrlContext = React.createContext({}); diff --git a/src/helpers/withLinks.js b/src/helpers/withLinks.js index 9fc6a10f6..7f500f7e4 100644 --- a/src/helpers/withLinks.js +++ b/src/helpers/withLinks.js @@ -1,13 +1,12 @@ // @flow import React from 'react'; -import PropTypes from 'prop-types'; +import { LinksContext } from '../helpers/contexts'; const withLinks = (Inner: *) => { - const ComponentWithLinks = (props: any, { links }: { links: any }) => ; + const ComponentWithLinks = (props: any) => ( + {links => } + ); ComponentWithLinks.displayName = `withLinks(${Inner.displayName || Inner.name || 'Component'})`; - ComponentWithLinks.contextTypes = { - links: PropTypes.object, - }; ComponentWithLinks.WrappedComponent = Inner; // use the same name as react-redux return ComponentWithLinks; }; diff --git a/src/pages/Exercise/Exercise.js b/src/pages/Exercise/Exercise.js index 59d68742f..99ce94a5b 100644 --- a/src/pages/Exercise/Exercise.js +++ b/src/pages/Exercise/Exercise.js @@ -284,10 +284,6 @@ class Exercise extends Component { } } -Exercise.contextTypes = { - links: PropTypes.object, -}; - Exercise.propTypes = { userId: PropTypes.string.isRequired, instance: ImmutablePropTypes.map, diff --git a/src/pages/ExerciseAssignments/ExerciseAssignments.js b/src/pages/ExerciseAssignments/ExerciseAssignments.js index c37402d36..d30157bc7 100644 --- a/src/pages/ExerciseAssignments/ExerciseAssignments.js +++ b/src/pages/ExerciseAssignments/ExerciseAssignments.js @@ -247,10 +247,6 @@ class ExerciseAssignments extends Component { } } -ExerciseAssignments.contextTypes = { - links: PropTypes.object, -}; - ExerciseAssignments.propTypes = { userId: PropTypes.string.isRequired, params: PropTypes.shape({