refactor

Author: prd-duy-huynh

public/index.js

@@ -242,7 +242,7 @@ function createElement(options = {}) {
 }
 
 function createGenericAssessment() {
-  Traitify.http.authKey = "admin-secret";
+  Traitify.http.authKey = "ca7bae5a3e0840dc8e148ab22eac6e01";
   const query = Traitify.GraphQL.generic.create;
   const variables = {
     surveyID: cache.get("surveyID"),
@@ -389,9 +389,9 @@ function setupDom() {
     options: [
       {text: "Benchmark", value: "benchmark"},
       {text: "Cognitive", value: "cognitive"},
+      {text: "Generic", value: "generic"},
       {text: "Order", value: "order"},
-      {text: "Personality", value: "personality"},
-      {text: "Generic", value: "generic"}
+      {text: "Personality", value: "personality"}
     ],
     text: "Survey Type:"
   }));
@@ -452,7 +452,7 @@ function setupCognitive() {
 }
 
 function setupGeneric() {
-  Traitify.http.authKey = "admin-secret";
+  Traitify.http.authKey = "ca7bae5a3e0840dc8e148ab22eac6e01";
   const query = Traitify.GraphQL.generic.surveys;
   const variables = {localeKey: cache.get("locale")};
 
@@ -479,8 +479,8 @@ function setupTraitify() {
   const environment = cache.get("environment");
 
   if(environment === "staging") {
-    // Traitify.http.host = "https://api.stag.awse.traitify.com";
-    Traitify.http.host = "http://localhost:4000/";
+    Traitify.http.host = "https://api.stag.awse.traitify.com";
+    // Traitify.http.host = "http://localhost:4000/";
   } else {
     Traitify.http.host = "https://api.traitify.com";
   }
@@ -516,6 +516,6 @@ function onSurveyTypeChange(e) {
 
 setupTraitify();
 setupDom();
-// setupCognitive();
+setupCognitive();
 setupGeneric();
 createWidget();

src/components/common/modal/index.js

@@ -4,9 +4,9 @@ import Icon from "components/common/icon";
 import useTranslate from "lib/hooks/use-translate";
 import style from "./style.scss";
 
-export default function Modal({children, onClose, title, containerClass = ""}) {
+export default function Modal({children, containerClass = null, onClose, title}) {
   const translate = useTranslate();
-  const sectionClass = [style.modalContainer, containerClass].join(" ");
+  const sectionClass = [style.modalContainer, containerClass].filter(Boolean).join(" ");
   return (
     <div className={`${style.modal} ${style.container}`}>
       <section className={sectionClass}>
@@ -35,7 +35,7 @@ export default function Modal({children, onClose, title, containerClass = ""}) {
 
 Modal.propTypes = {
   children: PropTypes.node.isRequired,
+  containerClass: PropTypes.string,
   onClose: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  containerClass: PropTypes.string
+  title: PropTypes.string.isRequired
 };

src/components/survey/generic/container.js

@@ -3,13 +3,12 @@ import style from "./style.scss";
 
 export default function Container({children, progress}) {
   return (
-    <div className={`${style.container}`}>
-      {progress < 100
-        && (
+    <div className={style.container}>
+      {progress < 100 && (
         <div className={style.progressBar}>
           <div className={style.progress} style={{width: `${progress}%`}} />
         </div>
-        )}
+      )}
       {children}
     </div>
   );

src/components/survey/generic/index.js

@@ -78,15 +78,14 @@ export default function Generic() {
 
   return (
     <Container {...props}>
-      {currentQuestionSet
-        && (
+      {currentQuestionSet && (
         <QuestionSet
           key={questionSetIndex}
           questionSet={currentQuestionSet}
           updateAnswer={updateAnswer}
           next={next}
         />
-        )}
+      )}
 
       {questionSetIndex > 0 && (
         <button onClick={back} type="button" className={style.back}>

src/components/survey/generic/question-set.js

@@ -3,7 +3,7 @@ import {useEffect, useState} from "react";
 import Responses from "./responses";
 import style from "./style.scss";
 
-export default function QuestionSet({questionSet, updateAnswer = null, next = null}) {
+export default function QuestionSet({questionSet, next, updateAnswer}) {
   const questionSetClass = [style.questionSet].join(" ");
   const [selectedOptions, setSelectedOptions] = useState([]);
   const setFinished = questionSet.questions.length === selectedOptions.length;
@@ -43,6 +43,6 @@ QuestionSet.propTypes = {
     })).isRequired,
     setImage: PropTypes.string.isRequired
   }).isRequired,
-  updateAnswer: PropTypes.func,
-  next: PropTypes.func
+  next: PropTypes.func.isRequired,
+  updateAnswer: PropTypes.func.isRequired
 };

src/components/survey/generic/responses.js

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import {useState} from "react";
 import style from "./style.scss";
 
-export default function Responses({responseOptions = [], updateAnswer = null}) {
+export default function Responses({responseOptions = [], updateAnswer}) {
   const buttonClass = ["traitify--response-button", style.response].join(" ");
   const buttonWidth = (text) => (text.length > 20 ? "100%" : "auto");
   const [activeButton, setActiveButton] = useState(null);
@@ -35,5 +35,5 @@ Responses.propTypes = {
       text: PropTypes.string.isRequired
     })
   ).isRequired,
-  updateAnswer: PropTypes.func
+  updateAnswer: PropTypes.func.isRequired
 };

src/components/survey/index.js

@@ -10,8 +10,8 @@ export default function Survey() {
   if(!active) { return <Status />; }
   if(active.surveyType === "cognitive") { return <Cognitive />; }
   if(active.surveyType === "external") { return <Status />; }
-  if(active.surveyType === "personality") { return <Personality />; }
   if(active.surveyType === "generic") { return <Generic />; }
+  if(active.surveyType === "personality") { return <Personality />; }
 
   return null;
 }

src/lib/recoil/assessment.js

@@ -138,8 +138,8 @@ export const assessmentQuery = selectorFamily({
   get: ({id, surveyType}) => async({get}) => {
     if(surveyType === "cognitive") { return get(cognitiveAssessmentQuery(id)); }
     if(surveyType === "external") { return get(externalAssessmentQuery(id)); }
-    if(surveyType === "personality") { return get(personalityAssessmentQuery(id)); }
     if(surveyType === "generic") { return get(genericAssessmentQuery(id)); }
+    if(surveyType === "personality") { return get(personalityAssessmentQuery(id)); }
 
     return null;
   },