Downgrade local-storage avoiding known issue (rehooks/local-storage#77)…

…, comment out x-user-key for templateInterviews, implements select template behavior and support copy interview by id,
Raymans · Aug 20, 2021 · 757e925 · 757e925
1 parent 6f763df
commit 757e925
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "@fortawesome/react-fontawesome": "0.1.8",
     "@mdx-js/mdx": "^1.5.9",
     "@mdx-js/react": "^1.5.9",
-    "@rehooks/local-storage": "^2.4.0",
+    "@rehooks/local-storage": "2.4.0",
     "@svgr/webpack": "^5.1.0",
     "antd": "^4.16.6",
     "aos": "^3.0.0-beta.6",

diff --git a/src/components/GetStarted/CreateAssessment.js b/src/components/GetStarted/CreateAssessment.js
@@ -14,6 +14,8 @@ const CreateAssessment = ({
   const intl = useIntl();
   const { getInterviews } = useApi();
   const [templateInterviews, setTemplateInterviews] = useState([]);
+  const [templateId, setTemplateId] = useState('');
+  const [templateSelected, setTemplateSelected] = useState(false);
   const [loading, setLoading] = useState(true);
   const [okButtonDisabled, setOkButtonDisabled] = useState(true);
   const handlePublished = (interview) => {
@@ -29,8 +31,13 @@ const CreateAssessment = ({
       });
   }, []);
 
-  const onTemplateSelect = (template) => {
+  const onTemplateSelect = (templateId) => {
     setOkButtonDisabled(false);
+    setTemplateId(templateId);
+  };
+
+  const handleSelectTemplate = () => {
+    setTemplateSelected(true);
   };
   return (
     <>
@@ -49,11 +56,14 @@ const CreateAssessment = ({
           maskClosable={false}
           cancelButtonHidden={true}
           okButtonDisabled={okButtonDisabled}
+          onOK={handleSelectTemplate}
         >
           <FormattedMessage id={'assessment.template.select.desc'}
-                            defaultMessage={'Please select a template to let us populate Assessment content quickly for you'}/>
+                            defaultMessage={'Please select a template to let us populate Assessment content quickly for you'}
+                            values={{ br: <br/> }}
+          />
           <Select
-            onChange={() => onTemplateSelect()}
+            onChange={(v) => onTemplateSelect(v)}
             style={{
               width: '100%',
               padding: '10px 0'
@@ -62,9 +72,9 @@ const CreateAssessment = ({
             {
               templateInterviews.map((templateInterview) => (
                 <Select.Option key={templateInterview.id}
-                               value={templateInterviews.id}
+                               value={templateInterview.id}
                 >
-                  {templateInterviews.title}
+                  {templateInterview.title}
                 </Select.Option>
               ))
             }
@@ -94,7 +104,9 @@ const CreateAssessment = ({
             </li>
           </ul>
         </GetStartedInformationBox>
-        <InterviewForm onPublished={handlePublished}/>
+        {
+          templateSelected && <InterviewForm id={templateId} onPublished={handlePublished} copy/>
+        }
       </Spin>
     </>
   );

diff --git a/src/components/Interviews/InterviewForm.js b/src/components/Interviews/InterviewForm.js
@@ -115,9 +115,10 @@ const defaultSectionTitle = 'default section';
 
 const InterviewForm = ({
   id,
-  onPublished
+  onPublished,
+  copy
 }) => {
-  const isEditForm = !!id;
+  const isEditForm = !!id && !copy;
   const intl = useIntl();
   const {
     createInterview,
@@ -141,6 +142,30 @@ const InterviewForm = ({
   const [selectedQuestionIds, setSelectedQuestionIds] = useState([]);
   const [publishedInterviewId, setPublishedInterviewId] = useState(null);
 
+  const populateInterviewById = () => {
+    getInterview(id)
+      .then((data = { sections: [] }) => {
+        data.visibility = data.visibility === 'PUBLIC';
+        form.setFieldsValue({
+          ...data,
+          // specializationId: data.specialization.id,
+          defaultDuration: data.defaultDuration === -1 ? '' : data.defaultDuration
+        });
+        setAnchorSections(data.sections.map((section, index) => ({
+          href: `#section_${index}`,
+          title: section.title,
+          subAnchors: section.questions?.map((question, qindex) =>
+            ({
+              href: `#section_${index}_question_${qindex}`,
+              title: `Q ${qindex + 1}`
+            }))
+        })));
+        if (!copy) {
+          setPublishedInterviewId(data.publishedInterviewId);
+        }
+        setLoading(false);
+      });
+  };
   useEffect(() => {
     const historyUnsubscribe = globalHistory.listen((listener) => {
     });
@@ -153,34 +178,21 @@ const InterviewForm = ({
       window.onbeforeunload = undefined;
     };
   }, []);
+
   useEffect(() => {
     // getSpecializations()
     //   .then(((data = []) => {
     //     setSpecializations(data);
     //   }));
     if (isEditForm) {
       setLoading(true);
-      getInterview(id)
-        .then((data = { sections: [] }) => {
-          data.visibility = data.visibility === 'PUBLIC';
-          form.setFieldsValue({
-            ...data,
-            // specializationId: data.specialization.id,
-            defaultDuration: data.defaultDuration === -1 ? '' : data.defaultDuration
-          });
-          setAnchorSections(data.sections.map((section, index) => ({
-            href: `#section_${index}`,
-            title: section.title,
-            subAnchors: section.questions?.map((question, qindex) =>
-              ({
-                href: `#section_${index}_question_${qindex}`,
-                title: `Q ${qindex + 1}`
-              }))
-          })));
-          setPublishedInterviewId(data.publishedInterviewId);
-          setLoading(false);
-        });
+      populateInterviewById();
+
     } else {
+      if (id && copy) {
+        populateInterviewById();
+        return;
+      }
       const formdata = {
         sections: [{
           title: defaultSectionTitle,
@@ -829,5 +841,6 @@ InterviewForm.propTypes = {
 
 InterviewForm.defaultProps = {
   onPublished: () => {
-  }
+  },
+  copy: false
 };
diff --git a/src/hooks/useGetStarted.js b/src/hooks/useGetStarted.js
@@ -8,6 +8,7 @@ let _useLocalStorage = () =>
   ];
 
 if (isBrowser) {
+  // cannot upgrade local-storage version because of waiting https://github.com/rehooks/local-storage/issues/77 been fixed.
   const { useLocalStorage } = require('@rehooks/local-storage');
   _useLocalStorage = useLocalStorage;
 }
@@ -22,47 +23,27 @@ const useGetStarted = () => {
     gsTokens: tokens,
     isTokenValid: !!tokens,
     setTokens: (tokens) => {
-      try {
-        setTokens(tokens);
-      } catch (e) {
-        // waiting https://github.com/rehooks/local-storage/issues/77 been fixed.
-        console.log(e);
-      }
+      setTokens(tokens);
     },
     removeTokens,
     step: step ?? 0,
     setStep: (step) => {
-      try {
-        setStep(step);
-      } catch (e) {
-        // waiting https://github.com/rehooks/local-storage/issues/77 been fixed.
-        console.log(e);
-      }
+      setStep(step);
     },
     removeStep,
     assessmentId,
     setAssessmentId: (id) => {
-      try {
-        setAssessmentId(id);
-      } catch (e) {
-        // waiting https://github.com/rehooks/local-storage/issues/77 been fixed.
-        console.log(e);
-      }
+      setAssessmentId(id);
     },
     removeAssessmentId,
     assessmentSessionId,
     setAssessmentSessionId: (id) => {
-      try {
-        setAssessmentSessionId(id);
-      } catch (e) {
-        // waiting https://github.com/rehooks/local-storage/issues/77 been fixed.
-        console.log(e);
-      }
+      setAssessmentSessionId(id);
     },
     removeAssessmentSessionId,
     isGetStarted: isBrowser && location?.pathname.indexOf('/get-started') !== -1,
     clearGSTokens: () => {
-      setStep(0);
+      removeStep();
       removeTokens();
       removeAssessmentId();
       removeAssessmentSessionId();

diff --git a/src/intl/zh-tw.json b/src/intl/zh-tw.json
@@ -162,7 +162,7 @@
   "ZpQ6us": "結果",
   "a3gsXn": "超棒的工作機會等著你",
   "aY1msd": "取消邀請用戶",
-  "assessment.template.select.desc": "樣板可以讓您快速的套用教學流程所需的試卷內容，您可以在之後任意的編輯試卷，請選擇一個樣板以繼續:",
+  "assessment.template.select.desc": "樣板可以讓您快速的套用教學流程所需的試卷內容，您可以在之後任意的編輯試卷{br}{br}請選擇一個樣板以繼續:",
   "assessment.template.select.title": "選擇GeekHub試卷樣板",
   "b8HPHS": "您確定要從 {orgName} 刪除 {removedUser} 嗎？",
   "bb1zZ+": "關於",
@@ -308,4 +308,4 @@
   "yf3wDQ": "通過拖放排序您的問題",
   "ykkJo4": "為您的試卷設定試卷測試的時間。",
   "yr5zsS": "簡答題"
-}
+}
diff --git a/src/utils/request.js b/src/utils/request.js
@@ -10,7 +10,7 @@ function checkStatus(error, request) {
   const { response } = error;
   if (!response) {
     message.error({
-      content: errorMsg,
+      content: errorMsg
     });
     return;
   }
@@ -39,15 +39,16 @@ export default function request(getAccessTokenSilently, tokens = {
     };
     if (tokens?.accessToken) {
       if (ignoreCache) {
+        console.log('GS token expired, trying to get new one.');
         clearGSTokens();
-        return Promise.reject('token expired!');
+        return;
       }
       options = {
         ...options,
         headers: {
           ...options.headers,
-          Authorization: `Bearer ${tokens.accessToken}`,
-          'x-user-key': tokens.userKey
+          Authorization: `Bearer ${tokens.accessToken}`
+          //'x-user-key': tokens.userKey
         }
       };
     } else {
@@ -63,6 +64,8 @@ export default function request(getAccessTokenSilently, tokens = {
       } catch {
         if (ignoreCache) {
           return Promise.reject('token expired! Cannot renew token.');
+        } else {
+          console.log('Token expired, trying to get new one.');
         }
       }
     }