Filling questionnaire process for client now works like a charm

assets/css/custom/loading.css

@@ -0,0 +1,32 @@
+.signal {
+    border: 3px solid #333;
+    border-radius: 50px;
+    height: 50px;
+    left: 50%;
+    margin: -25px 0 0 -25px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    width: 50px;
+
+    animation: pulsate 1.2s ease-out;
+    animation-iteration-count: infinite;
+}
+
+.late {
+  animation-delay: .25s;
+}
+
+@keyframes pulsate {
+    0% {
+      transform: scale(.1);
+      opacity: 0.0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+}

assets/js/components/client/questionnaire.js

@@ -1,23 +1,20 @@
 import m from "mithril"
-import { Card, RaisedButton } from "polythene-mithril"
+import { Card, Button } from "polythene-mithril"
 import Questionnaire from "../../models/Questionnaire"
 import QuestionnaireSection from "../../models/QuestionnaireSection"
 
 export const questionnaire = {
     oninit: function(vnode) {
-        window.scrollTo(0, 0)
+        Questionnaire.fetch(vnode.attrs.id)
-        if (
+        QuestionnaireSection.fetch(vnode.attrs.id)
-            _.isEmpty(QuestionnaireSection.current)
-            || _.isNil(QuestionnaireSection.current)
-            || _.isEmpty(Questionnaire.current)
-            || _.isNil(Qustionnaire.current)
-        ) {
-            Questionnaire.fetch(vnode.attrs.id)
-            QuestionnaireSection.fetch(vnode.attrs.id)
-        }
     },
-    view: function() {
+    oncreate: function(vnode) {
-        return [
+        window.scrollTo(0, 0)
+    },
+    view: function(vnode) {
+        return _.isEmpty(Questionnaire.current)
+            || _.isEmpty(QuestionnaireSection.current) ?
+            [m(".signal"), m(".signal.late")] : [
             m(".header-img", {
                 style: {
                     backgroundImage: "url('img/head1.jpg')"

assets/js/index.js

@@ -11,6 +11,7 @@ import { section } from "./components/section"
 import { editSection } from "./components/editSection"
 import { question } from "./components/question"
 import clientQuestion from "./components/client/question"
+import clientQuestionRedirect from "./components/client/questionRedirect"
 import { editQuestion } from "./components/editQuestion"
 import signup from "./components/hello"
 import {userList, userAll} from "./components/beta/userList"
@@ -24,7 +25,8 @@ m.route(document.body, "/", {
     "/login": loginUser,
     "/questionnaires": clientQuestionnaireList,
     "/questionnaires/:id": clientQuestionnaire,
-    "/sections/:id": clientQuestion,
+    "/sections/:sectionId": clientQuestion,
+    "/sections/:sectionId/questions/:questionId": clientQuestion,
     "/questions/:id": clientQuestion,
     "/questions/:id/edit": editQuestion,
     "/user/questionnaires": questionnaireList,

assets/js/models/QuestionAnswer.js

@@ -11,12 +11,14 @@ const QuestionAnswer = {
             method: "GET"
         })
         .then(function(res) {
+            res.data = res.data[0]
+            QuestionAnswer.current = res
             QuestionAnswer.loading = false
-            console.log("response: ", res);
         })
     },
     upload: function(questionId) {
         QuestionAnswer.loading = true
+        questionId = questionId || QuestionAnswer.current.questionId
         m.request({
             url: "http://api.questionnaire.dev/v1/questions/" + questionId + "/answers",
             method: "POST",
@@ -24,7 +26,6 @@ const QuestionAnswer = {
         })
         .then(function(res) {
             QuestionAnswer.loading = false
-            console.log("response: ", res);
         })
     }
 }

assets/js/models/SectionQuestion.js

@@ -4,15 +4,14 @@ const SectionQuestion = {
     current: {},
     list: [],
     loading: false,
-    fetch: function(sectionId) {
+    loadList: function(sectionId) {
         SectionQuestion.loading = true
         m.request({
             url: "http://api.questionnaire.dev/v1/sections/" + sectionId + "/questions",
             method: "GET"
         })
         .then(function(res) {
-            res.data = res.data[0]
+            SectionQuestion.list = res
-            SectionQuestion.current = res
             SectionQuestion.loading = false
         })
     },

public/css/loading.css

@@ -0,0 +1,32 @@
+.signal {
+    border: 3px solid #333;
+    border-radius: 50px;
+    height: 50px;
+    left: 50%;
+    margin: -25px 0 0 -25px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    width: 50px;
+
+    animation: pulsate 1.2s ease-out;
+    animation-iteration-count: infinite;
+}
+
+.late {
+  animation-delay: .25s;
+}
+
+@keyframes pulsate {
+    0% {
+      transform: scale(.1);
+      opacity: 0.0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+}

public/index.html

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="css/index.css">
         <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
         <link rel="stylesheet" href="css/patua-one-font.css">
+        <link rel="stylesheet" href="css/loading.css">
     </head>
     <body>
         <script src="js/index.js"></script>

webpack.config.js

@@ -17,6 +17,7 @@ module.exports = {
             { from: 'assets/css/vendor/font-awesome', to: '../css/font-awesome' },
             { from: 'assets/css/index.css', to: '../css' },
             { from: 'assets/css/custom/patua-one-font.css', to: '../css' },
+            { from: 'assets/css/custom/loading.css', to: '../css' },
             { from: 'assets/img', to: '../img' }
         ])
     ],