Add location handling and refactor

rdmo/projects/assets/js/interview/actions/interviewActions.js

@@ -0,0 +1,80 @@
+import isNil from 'lodash/isNil'
+
+import PageApi from '../api/PageApi'
+import ProjectApi from '../api/ProjectApi'
+
+import { updateLocation } from '../utils/location'
+import projectId from '../utils/projectId'
+
+import {
+  FETCH_NAVIGATION_ERROR,
+  FETCH_NAVIGATION_SUCCESS,
+  FETCH_OVERVIEW_ERROR,
+  FETCH_OVERVIEW_SUCCESS,
+  FETCH_PAGE_ERROR,
+  FETCH_PAGE_SUCCESS,
+  FETCH_PROGRESS_ERROR,
+  FETCH_PROGRESS_SUCCESS,
+} from './types'
+
+export function fetchOverview() {
+  return (dispatch) => ProjectApi.fetchOverview(projectId)
+    .then((overview) => dispatch(fetchOverviewSuccess(overview)))
+    .catch((errors) => dispatch(fetchOverviewError(errors)))
+}
+
+export function fetchOverviewSuccess(overview) {
+  return {type: FETCH_OVERVIEW_SUCCESS, overview}
+}
+
+export function fetchOverviewError(errors) {
+  return {type: FETCH_OVERVIEW_ERROR, errors}
+}
+
+export function fetchProgress() {
+  return (dispatch) => ProjectApi.fetchProgress(projectId)
+    .then((progress) => dispatch(fetchProgressSuccess(progress)))
+    .catch((errors) => dispatch(fetchProgressError(errors)))
+}
+
+export function fetchProgressSuccess(progress) {
+  return {type: FETCH_PROGRESS_SUCCESS, progress}
+}
+
+export function fetchProgressError(errors) {
+  return {type: FETCH_PROGRESS_ERROR, errors}
+}
+
+export function fetchNavigation(sectionId) {
+  return (dispatch) => ProjectApi.fetchNavigation(projectId, sectionId)
+    .then((navigation) => dispatch(fetchNavigationSuccess(navigation)))
+    .catch((errors) => dispatch(fetchNavigationError(errors)))
+}
+
+export function fetchNavigationSuccess(navigation) {
+  return {type: FETCH_NAVIGATION_SUCCESS, navigation}
+}
+
+export function fetchNavigationError(errors) {
+  return {type: FETCH_NAVIGATION_ERROR, errors}
+}
+
+export function fetchPage(pageId) {
+  return (dispatch) => {
+    const promise = isNil(pageId) ? PageApi.fetchContinue(projectId)
+                                  : PageApi.fetchPage(projectId, pageId)
+    return promise.then((page) => {
+      updateLocation(page.id)
+      dispatch(fetchNavigation(page.section.id))
+      dispatch(fetchPageSuccess(page))
+    })
+  }
+}
+
+export function fetchPageSuccess(page) {
+  return {type: FETCH_PAGE_SUCCESS, page}
+}
+
+export function fetchPageError(errors) {
+  return {type: FETCH_PAGE_ERROR, errors}
+}

rdmo/projects/assets/js/interview/actions/types.js

@@ -2,12 +2,11 @@ export const FETCH_CONFIG_SUCCESS = 'config/fetchConfigSuccess'
 export const FETCH_CONFIG_ERROR = 'config/fetchConfigError'
 export const UPDATE_CONFIG = 'config/updateConfig'
 
-export const FETCH_PAGE_SUCCESS = 'page/fetchPageSuccess'
-export const FETCH_PAGE_ERROR = 'page/fetchPageError'
-
-export const UPLOAD_FILE_SUCCESS = 'page/uploadFileSuccess'
-export const UPLOAD_FILE_ERROR = 'page/uploadFileError'
-
-export const JUMP  = 'page/jump'
-export const NEXT  = 'page/next'
-export const PREV  = 'page/prev'
+export const FETCH_NAVIGATION_ERROR = 'interview/fetchNavigationSuccess'
+export const FETCH_NAVIGATION_SUCCESS = 'interview/fetchNavigationSuccess'
+export const FETCH_OVERVIEW_ERROR = 'interview/fetchOverviewSuccess'
+export const FETCH_OVERVIEW_SUCCESS = 'interview/fetchOverviewSuccess'
+export const FETCH_PAGE_ERROR = 'interview/fetchPageError'
+export const FETCH_PAGE_SUCCESS = 'interview/fetchPageSuccess'
+export const FETCH_PROGRESS_ERROR = 'interview/fetchProgressSuccess'
+export const FETCH_PROGRESS_SUCCESS = 'interview/fetchProgressSuccess'

rdmo/projects/assets/js/interview/api/PagesApi.js → rdmo/projects/assets/js/interview/api/PageApi.js

@@ -2,8 +2,8 @@ import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
 
 class ProjectsApi extends BaseApi {
 
-  static fetchPage(projectId, page_id) {
-    return this.get(`/api/v1/projects/projects/${projectId}/pages/${page_id}`)
+  static fetchPage(projectId, pageId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/pages/${pageId}`)
   }
 
   static fetchContinue(projectId) {

rdmo/projects/assets/js/interview/api/ProjectsApi.js → rdmo/projects/assets/js/interview/api/ProjectApi.js

@@ -2,10 +2,6 @@ import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
 
 class ProjectsApi extends BaseApi {
 
-  static fetchProject(projectId) {
-    return this.get(`/api/v1/projects/projects/${projectId}/`)
-  }
-
   static fetchOverview(projectId) {
     return this.get(`/api/v1/projects/projects/${projectId}/overview/`)
   }

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

@@ -1,19 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Breadcrump = ({ project, page, onJump }) => {
+import baseUrl from 'rdmo/core/assets/js/utils/baseUrl'
+
+const Breadcrump = ({ overview, page, onClick }) => {
+
+  const handleClick = (event) => {
+    event.preventDefault()
+    onClick(page.section.first)
+  }
+
   return (
     <ul className="interview-breadcrumb breadcrumb">
       <li>
-        <a href="">{gettext('My Projects')}</a>
+        <a href={`${baseUrl}/projects/`}>
+          {gettext('My Projects')}
+        </a>
       </li>
       <li>
-        <a href="">
-          {project.title}
+        <a href={`${baseUrl}/projects/${overview.id}/`}>
+          {overview.title}
         </a>
       </li>
       <li>
-        <a href="" onClick={() => onJump(page.section.id)}>
+        <a href={`${baseUrl}/projects/${overview.id}/interview/${page.section.first}/`} onClick={handleClick}>
           {page.section.title}
         </a>
       </li>
@@ -22,9 +32,9 @@ const Breadcrump = ({ project, page, onJump }) => {
 }
 
 Breadcrump.propTypes = {
-  project: PropTypes.object.isRequired,
+  overview: PropTypes.object.isRequired,
   page: PropTypes.object.isRequired,
-  onJump: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired
 }
 
 export default Breadcrump

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

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Buttons = ({ currentPage, onPrev, onNext }) => {
+const Buttons = ({ page, onClick }) => {
   return (
     <>
       <div className="interview-buttons">
         <div className="pull-right">
-          <button type="button" onClick={onNext} disabled={!currentPage.next_page}
+          <button type="button" onClick={() => onClick(page.next_page)} disabled={!page.next_page}
                   className="btn btn-default btn-xs">
             {gettext('Proceed')}
             {/* TODO: handle */}
@@ -15,7 +15,7 @@ const Buttons = ({ currentPage, onPrev, onNext }) => {
         </div>
 
         <div>
-          <button type="button" onClick={onPrev} disabled={!currentPage.prev_page}
+          <button type="button" onClick={() => onClick(page.prev_page)} disabled={!page.prev_page}
                   className="btn btn-default btn-xs">
             {gettext('Skip')}
           </button>
@@ -26,9 +26,8 @@ const Buttons = ({ currentPage, onPrev, onNext }) => {
 }
 
 Buttons.propTypes = {
-  currentPage: PropTypes.object.isRequired,
-  onPrev: PropTypes.func.isRequired,
-  onNext: PropTypes.func.isRequired
+  page: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
 }
 
 export default Buttons

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

@@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-const Navigation = ({ currentPage, navigation, onJump }) => {
+const Navigation = ({ page, navigation, onClick }) => {
 
-  const handleJump = (event, section, page) => {
+  const handleClick = (event, pageId) => {
     event.preventDefault()
-    onJump(section, page)
+    onClick(pageId)
   }
 
   return (
@@ -15,37 +15,37 @@ const Navigation = ({ currentPage, navigation, onJump }) => {
 
       <ul className="list-unstyled interview-navigation">
         {
-          navigation.map((section, sectionIndex) => (
-            <li key={sectionIndex}>
-              <a href="" onClick={event => handleJump(event, section)}>
-                {section.title}
+          navigation.map((s, sIndex) => (
+            <li key={sIndex}>
+              <a href={`/projects/12/interview/${s.first}/`} onClick={event => handleClick(event, s.first)}>
+                {s.title}
               </a>
               {
-                section.pages && (
+                s.pages && (
                   <ul className="list-unstyled">
                     {
-                      section.pages.map((page, pageIndex) => (
-                        <li key={pageIndex} className={classNames({'active': page.id == currentPage.id})}>
+                      s.pages.map((p, pIndex) => (
+                        <li key={pIndex} className={classNames({'active': p.id == page.id})}>
                           {
-                            page.show ? (
-                              <a href="" onClick={event => handleJump(event, section, page)}>
-                                <span>{page.title}</span>
+                            p.show ? (
+                              <a href={`/projects/12/interview/${page.id}/`} onClick={event => handleClick(event, p.id)}>
+                                <span>{p.title}</span>
                                 {
-                                  page.count > 0 && page.count == page.total && (
+                                  p.count > 0 && p.count == p.total && (
                                     <span>
                                       <i className="fa fa-check" aria-hidden="true"></i>
                                     </span>
                                   )
                                 }
                                 {
-                                  page.count > 0 && page.count != page.total && (
+                                  p.count > 0 && p.count != p.total && (
                                     <span dangerouslySetInnerHTML={{
-                                      __html: interpolate(gettext('(%s of %s)'), [page.count, page.total])}} />
+                                      __html: interpolate(gettext('(%s of %s)'), [p.count, p.total])}} />
                                   )
                                 }
                               </a>
                             ) : (
-                              <span className="text-muted">{page.title}</span>
+                              <span className="text-muted">{p.title}</span>
                             )
                           }
                         </li>
@@ -63,9 +63,9 @@ const Navigation = ({ currentPage, navigation, onJump }) => {
 }
 
 Navigation.propTypes = {
-  currentPage: PropTypes.object.isRequired,
+  page: PropTypes.object.isRequired,
   navigation: PropTypes.array.isRequired,
-  onJump: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired
 }
 
 export default Navigation