Add Page, Question, QuestionSet and widgets components

rdmo/projects/assets/js/interview/components/Page.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Question from '../components/Question'
+import QuestionSet from '../components/Question'
+
+const Page = ({ page }) => {
+  return (
+    <div className="interview-page">
+        <h2>
+            {page.title}
+        </h2>
+        {
+          page.elements.map((element, elementIndex) => {
+            if (element.model == 'questions.questionset') {
+              return <QuestionSet key={elementIndex} questionset={element}
+              />
+            } else {
+              return <Question key={elementIndex} question={element}
+              />
+            }
+          })
+        }
+    </div>
+  )
+}
+
+Page.propTypes = {
+  page: PropTypes.object.isRequired
+}
+
+export default Page

rdmo/projects/assets/js/interview/components/Question.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Widget from './Widget'
+
+const Question = ({ question }) => {
+  return (
+    <div className="interview-question">
+      <Widget question={question} />
+    </div>
+  )
+}
+
+Question.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Question

rdmo/projects/assets/js/interview/components/QuestionSet.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const QuestionSet = ({ questionset }) => {
+  console.log(questionset)
+
+  return (
+    <div className="interview-questionset">
+
+    </div>
+  )
+}
+
+QuestionSet.propTypes = {
+  questionset: PropTypes.object.isRequired
+}
+
+export default QuestionSet

rdmo/projects/assets/js/interview/components/Widget.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Autocomplete from './widgets/Autocomplete'
+import Checkbox from './widgets/Checkbox'
+import Date from './widgets/Date'
+import File from './widgets/File'
+import Radio from './widgets/Radio'
+import Range from './widgets/Range'
+import Select from './widgets/Select'
+import Text from './widgets/Text'
+import Textarea from './widgets/Textarea'
+import YesNo from './widgets/YesNo'
+
+const Widget = ({ question }) => {
+  switch (question.widget_type) {
+    case 'autocomplete':
+      return <Autocomplete question={question} />
+    case 'checkbox':
+      return <Checkbox question={question} />
+    case 'date':
+      return <Date question={question} />
+    case 'file':
+      return <File question={question} />
+    case 'radio':
+      return <Radio question={question} />
+    case 'range':
+      return <Range question={question} />
+    case 'select':
+      return <Select question={question} />
+    case 'text':
+      return <Text question={question} />
+    case 'textarea':
+      return <Textarea question={question} />
+    case 'yesno':
+      return <YesNo question={question} />
+  }
+}
+
+Widget.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Widget

rdmo/projects/assets/js/interview/components/widgets/Autocomplete.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Autocomplete = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+Autocomplete.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Autocomplete

rdmo/projects/assets/js/interview/components/widgets/Checkbox.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Checkbox = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+Checkbox.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Checkbox

rdmo/projects/assets/js/interview/components/widgets/Date.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Date = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+Date.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Date

rdmo/projects/assets/js/interview/components/widgets/File.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const File = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+File.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default File

rdmo/projects/assets/js/interview/components/widgets/Radio.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Radio = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+Radio.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Radio

rdmo/projects/assets/js/interview/components/widgets/Range.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Range = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+Range.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Range

rdmo/projects/assets/js/interview/components/widgets/Select.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Select = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+Select.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Select

rdmo/projects/assets/js/interview/components/widgets/Text.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Text = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+Text.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Text

rdmo/projects/assets/js/interview/components/widgets/Textarea.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Textarea = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+Textarea.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default Textarea

rdmo/projects/assets/js/interview/components/widgets/YesNo.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const YesNo = ({ question }) => {
+  console.log(question)
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+YesNo.propTypes = {
+  question: PropTypes.object.isRequired
+}
+
+export default YesNo

rdmo/projects/assets/js/interview/containers/Main.js

@@ -4,19 +4,19 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import Breadcrump from '../components/Breadcrump'
+import Page from '../components/Page'
 
 import * as configActions from '../actions/configActions'
 import * as interviewActions from '../actions/interviewActions'
 
 // eslint-disable-next-line no-unused-vars
 const Main = ({ config, interview, configActions, interviewActions }) => {
+
   if (interview.show) {
     return (
       <div>
         <Breadcrump overview={interview.overview} page={interview.page} onClick={interviewActions.fetchPage} />
-        <h2>
-            {interview.page.title}
-        </h2>
+        <Page page={interview.page} />
       </div>
     )
   }