From c372bd3cc53e68812f9420900b840671b86fdead Mon Sep 17 00:00:00 2001 From: Berkeley Martinez Date: Mon, 8 Jan 2018 16:19:17 -0800 Subject: [PATCH] fix(Challenges): Add child container for challenges Add a central point for the completion modal to open --- .../app/routes/Challenges/Child-Container.jsx | 20 +++++++++++++++++++ common/app/routes/Challenges/Show.jsx | 8 +------- .../routes/Challenges/views/Modern/Show.jsx | 2 +- .../routes/Challenges/views/backend/Show.jsx | 2 +- .../routes/Challenges/views/classic/Show.jsx | 2 +- .../routes/Challenges/views/project/Show.jsx | 2 +- .../app/routes/Challenges/views/quiz/Show.jsx | 2 +- .../app/routes/Challenges/views/step/Show.jsx | 2 +- 8 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 common/app/routes/Challenges/Child-Container.jsx diff --git a/common/app/routes/Challenges/Child-Container.jsx b/common/app/routes/Challenges/Child-Container.jsx new file mode 100644 index 0000000000..d13a0b6428 --- /dev/null +++ b/common/app/routes/Challenges/Child-Container.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import CompletionModal from './Completion-Modal.jsx'; +import AppChildContainer from '../../Child-Container.jsx'; + +const propTypes = { + children: PropTypes.node +}; + +export default function ChildContainer({ children, ...props }) { + return ( + + { children } + + + ); +} + +ChildContainer.propTypes = propTypes; diff --git a/common/app/routes/Challenges/Show.jsx b/common/app/routes/Challenges/Show.jsx index 546a47385e..2f085c2a79 100644 --- a/common/app/routes/Challenges/Show.jsx +++ b/common/app/routes/Challenges/Show.jsx @@ -5,7 +5,6 @@ import { createSelector } from 'reselect'; import { challengeMetaSelector } from './redux'; -import CompletionModal from './Completion-Modal.jsx'; import Classic from './views/classic'; import Step from './views/step'; import Project from './views/project'; @@ -108,12 +107,7 @@ export class Show extends PureComponent { render() { const { viewType } = this.props; const View = views[viewType] || Classic; - return ( -
- - -
- ); + return ; } } diff --git a/common/app/routes/Challenges/views/Modern/Show.jsx b/common/app/routes/Challenges/views/Modern/Show.jsx index ad8c55cdfe..839a3baa2f 100644 --- a/common/app/routes/Challenges/views/Modern/Show.jsx +++ b/common/app/routes/Challenges/views/Modern/Show.jsx @@ -7,12 +7,12 @@ import { addNS } from 'berkeleys-redux-utils'; import ns from './ns.json'; import Editor from './Editor.jsx'; +import ChildContainer from '../../Child-Container.jsx'; import { showPreviewSelector, types } from '../../redux'; import SidePanel from '../../Side-Panel.jsx'; import Preview from '../../Preview.jsx'; import _Map from '../../../../Map'; import Panes from '../../../../Panes'; -import ChildContainer from '../../../../Child-Container.jsx'; import { filesSelector } from '../../../../files'; const createModernEditorToggleType = fileKey => diff --git a/common/app/routes/Challenges/views/backend/Show.jsx b/common/app/routes/Challenges/views/backend/Show.jsx index d90c32643c..e69702c750 100644 --- a/common/app/routes/Challenges/views/backend/Show.jsx +++ b/common/app/routes/Challenges/views/backend/Show.jsx @@ -1,11 +1,11 @@ import React from 'react'; import { addNS } from 'berkeleys-redux-utils'; +import ChildContainer from '../../Child-Container.jsx'; import BackEnd from './Back-End.jsx'; import { types } from '../../redux'; import Panes from '../../../../Panes'; import _Map from '../../../../Map'; -import ChildContainer from '../../../../Child-Container.jsx'; const propTypes = {}; diff --git a/common/app/routes/Challenges/views/classic/Show.jsx b/common/app/routes/Challenges/views/classic/Show.jsx index 3ede7ad8f2..b82d361c6d 100644 --- a/common/app/routes/Challenges/views/classic/Show.jsx +++ b/common/app/routes/Challenges/views/classic/Show.jsx @@ -2,12 +2,12 @@ import React from 'react'; import { addNS } from 'berkeleys-redux-utils'; import Editor from './Editor.jsx'; +import ChildContainer from '../../Child-Container.jsx'; import { types, showPreviewSelector } from '../../redux'; import Preview from '../../Preview.jsx'; import SidePanel from '../../Side-Panel.jsx'; import Panes from '../../../../Panes'; import _Map from '../../../../Map'; -import ChildContainer from '../../../../Child-Container.jsx'; const propTypes = {}; diff --git a/common/app/routes/Challenges/views/project/Show.jsx b/common/app/routes/Challenges/views/project/Show.jsx index 084111449c..9f7de7e7e0 100644 --- a/common/app/routes/Challenges/views/project/Show.jsx +++ b/common/app/routes/Challenges/views/project/Show.jsx @@ -3,10 +3,10 @@ import { addNS } from 'berkeleys-redux-utils'; import ns from './ns.json'; import Main from './Project.jsx'; +import ChildContainer from '../../Child-Container.jsx'; import { types } from '../../redux'; import Panes from '../../../../Panes'; import _Map from '../../../../Map'; -import ChildContainer from '../../../../Child-Container.jsx'; const propTypes = {}; export const mapStateToPanes = addNS( diff --git a/common/app/routes/Challenges/views/quiz/Show.jsx b/common/app/routes/Challenges/views/quiz/Show.jsx index e9aa929de5..7937804521 100644 --- a/common/app/routes/Challenges/views/quiz/Show.jsx +++ b/common/app/routes/Challenges/views/quiz/Show.jsx @@ -3,10 +3,10 @@ import { addNS } from 'berkeleys-redux-utils'; import ns from './ns.json'; import Main from './Quiz.jsx'; +import ChildContainer from '../../Child-Container.jsx'; import { types } from '../../redux'; import Panes from '../../../../Panes'; import _Map from '../../../../Map'; -import ChildContainer from '../../../../Child-Container.jsx'; const propTypes = {}; export const mapStateToPanes = addNS( diff --git a/common/app/routes/Challenges/views/step/Show.jsx b/common/app/routes/Challenges/views/step/Show.jsx index 49b43e4a4c..31c4370454 100644 --- a/common/app/routes/Challenges/views/step/Show.jsx +++ b/common/app/routes/Challenges/views/step/Show.jsx @@ -3,10 +3,10 @@ import { addNS } from 'berkeleys-redux-utils'; import ns from './ns.json'; import Step from './Step.jsx'; +import ChildContainer from '../../Child-Container.jsx'; import { types } from '../../redux'; import Panes from '../../../../Panes'; import _Map from '../../../../Map'; -import ChildContainer from '../../../../Child-Container.jsx'; const propTypes = {}; export const mapStateToPanes = addNS(