From db0a55b746fc225087aef0114ace7d177711d55a Mon Sep 17 00:00:00 2001
From: sballesteros <sebastien.ballesteros@gmail.com>
Date: Wed, 6 Nov 2019 15:56:37 -0800
Subject: [PATCH] required and layout fixes

---
 deploy-app.sh                         |  8 +++++-
 src/components/extension-splash.css   |  2 +-
 src/components/header-bar.js          |  6 +++-
 src/components/home.js                |  2 +-
 src/components/icon-button.css        |  2 +-
 src/components/left-side-panel.js     |  7 +++--
 src/components/profile.css            |  2 +-
 src/components/rapid-form-fragment.js | 12 ++++++--
 src/components/settings.css           |  5 ++--
 src/constants.js                      | 40 ++++++++++++++++++---------
 src/utils/actions.js                  |  4 ++-
 11 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/deploy-app.sh b/deploy-app.sh
index 02f7260..fee551f 100755
--- a/deploy-app.sh
+++ b/deploy-app.sh
@@ -12,7 +12,13 @@ zip -r app.zip *.json *.js dist/* src/* public/* views/* scripts/* test/*
 
 az webapp config appsettings set --resource-group "rapid-prereview" --name "rapid-prereview" --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true
 
-az webapp config set --resource-group "rapid-prereview" --name "rapid-prereview" --startup-file "npm run start:prod"
+
+## https://docs.microsoft.com/en-us/azure/app-service/containers/configure-language-nodejs#run-with-pm2
+
+# az webapp config set --resource-group "rapid-prereview" --name "rapid-prereview" --startup-file "npm run start:prod"
+
+# Azure App service will start the file with pm2
+az webapp config set --resource-group "rapid-prereview" --name "rapid-prereview" --startup-file "./dist/server.js"
 
 az webapp deployment source config-zip --resource-group "rapid-prereview" --name "rapid-prereview" --src app.zip
 
diff --git a/src/components/extension-splash.css b/src/components/extension-splash.css
index 8b74b5a..d8025be 100644
--- a/src/components/extension-splash.css
+++ b/src/components/extension-splash.css
@@ -14,7 +14,7 @@
     margin: 0 auto;
     background-color: white;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
-    min-height: 100vh;
+    min-height: calc(100vh - var(--header-bar-height) - 2*var(--lgrd));
     padding: var(--mgrd) var(--xlgrd);
     box-sizing: border-box;
     position: relative;
diff --git a/src/components/header-bar.js b/src/components/header-bar.js
index 92a79d1..686fc7c 100644
--- a/src/components/header-bar.js
+++ b/src/components/header-bar.js
@@ -17,10 +17,14 @@ export default function HeaderBar({ onClickMenuButton }) {
       <div className="header-bar__left">
         {!!onClickMenuButton && (
           <IconButton
+            data-noclickoutside="true"
             onClick={onClickMenuButton}
             className="header-bar__menu-button"
           >
-            <MdMenu className="header-bar__menu-button-icon" />
+            <MdMenu
+              className="header-bar__menu-button-icon"
+              data-noclickoutside="true"
+            />
           </IconButton>
         )}
         <RapidPreReviewLogo />
diff --git a/src/components/home.js b/src/components/home.js
index a85547f..5110329 100644
--- a/src/components/home.js
+++ b/src/components/home.js
@@ -61,7 +61,7 @@ export default function Home() {
         />
       )}
       <HeaderBar
-        onClickMenuButton={() => {
+        onClickMenuButton={e => {
           setShowLeftPanel(!showLeftPanel);
         }}
       />
diff --git a/src/components/icon-button.css b/src/components/icon-button.css
index ca38f95..3b2ff88 100644
--- a/src/components/icon-button.css
+++ b/src/components/icon-button.css
@@ -6,7 +6,7 @@
   height: var(--lgrd);
   width: var(--lgrd);
   cursor: pointer;
-  flex: 0 0 var(--lgrd);
+  /*flex: 0 0 var(--lgrd);*/
 
   &:focus {
     outline: none;
diff --git a/src/components/left-side-panel.js b/src/components/left-side-panel.js
index b494c63..35ae06f 100644
--- a/src/components/left-side-panel.js
+++ b/src/components/left-side-panel.js
@@ -15,8 +15,11 @@ export default function LeftSidePanel({
         // inside click
         return;
       }
-      // outside click
-      onClickOutside();
+
+      if (!e.target.hasAttribute('data-noclickoutside')) {
+        // outside click
+        onClickOutside();
+      }
     }
 
     if (visible) {
diff --git a/src/components/profile.css b/src/components/profile.css
index 99887f8..f5e9677 100644
--- a/src/components/profile.css
+++ b/src/components/profile.css
@@ -14,7 +14,7 @@
     margin: 0 auto;
     background-color: white;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
-    min-height: 100vh;
+    min-height: calc(100vh - var(--header-bar-height) - 2*var(--lgrd));
   }
 
   & .profile__header {
diff --git a/src/components/rapid-form-fragment.js b/src/components/rapid-form-fragment.js
index ebe1369..6081d0e 100644
--- a/src/components/rapid-form-fragment.js
+++ b/src/components/rapid-form-fragment.js
@@ -17,7 +17,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
   );
 
   const [isOpenedMap, setIsOpenedMap] = useState(
-    yesNoQuestions.map((map, q) => {
+    yesNoQuestions.reduce((map, q) => {
       map[q.identifier] = false;
       return map;
     }, {})
@@ -28,7 +28,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
   return (
     <div className="rapid-form-fragment">
       <fieldset className="rapid-form-fragment__multi-choice-questions">
-        {yesNoQuestions.map(({ identifier, question, help }, i) => {
+        {yesNoQuestions.map(({ identifier, question, help, required }, i) => {
           const answer = answerMap[identifier];
 
           return (
@@ -41,6 +41,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
                     <IconButton
                       className="radid-form-fragment__help"
                       onClick={e => {
+                        e.preventDefault();
                         setIsOpenedMap(
                           Object.assign({}, isOpenedMap, {
                             [identifier]: !isOpenedMap[identifier]
@@ -55,6 +56,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
 
                 <div className="rapid-form-fragment__radio-group">
                   <RadioButton
+                    required={required}
                     inputId={`question-${identifier}-yes`}
                     name={identifier}
                     value="yes"
@@ -66,6 +68,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
                   />
 
                   <RadioButton
+                    required={required}
                     inputId={`question-${identifier}-no`}
                     name={identifier}
                     value="no"
@@ -77,6 +80,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
                   />
 
                   <RadioButton
+                    required={required}
                     inputId={`question-${identifier}-na`}
                     name={identifier}
                     value="n.a."
@@ -88,6 +92,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
                   />
 
                   <RadioButton
+                    required={required}
                     inputId={`question-${identifier}-unsure`}
                     name={identifier}
                     value="unsure"
@@ -118,7 +123,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
       <hr className="rapid-form-fragment__divider" />
 
       <fieldset className="rapid-form-fragment__text-response-questions">
-        {freeFormQuestions.map(({ identifier, question }) => {
+        {freeFormQuestions.map(({ identifier, question, required }) => {
           const answer = answerMap[identifier];
 
           return (
@@ -135,6 +140,7 @@ export default function RapidFormFragment({ answerMap = {}, onChange }) {
               </Value>
 
               <textarea
+                required={required}
                 className="radid-form-fragment__text-answer"
                 id={`question-${identifier}`}
                 name={identifier}
diff --git a/src/components/settings.css b/src/components/settings.css
index 7b61488..4a7a00f 100644
--- a/src/components/settings.css
+++ b/src/components/settings.css
@@ -5,7 +5,7 @@
   box-sizing: border-box;
   font: var(--ui-basic-font);
   margin: 0;
-  min-height: 100vh;
+  min-height: calc(100vh);
   padding: calc(var(--header-bar-height) + var(--lgrd)) 0 var(--lgrd);
   box-sizing: border-box;
 
@@ -14,8 +14,9 @@
     margin: 0 auto;
     background-color: white;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
-    min-height: 100vh;
+    min-height: calc(100vh - var(--header-bar-height) - 2*var(--lgrd));
   }
+
   & .settings__title {
     margin: 0 0 var(--mgrd) 0;
     font: var(--ui-header-1-font);
diff --git a/src/constants.js b/src/constants.js
index 9548bb3..2221576 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,11 +1,13 @@
 // See https://github.com/PREreview/rapid-prereview/issues/6
+// When possible questions are written so that yes means "the preprint is good"
 export const QUESTIONS = [
   {
     identifier: 'ynNovel',
     question: 'Are the findings novel?',
     help:
       'In your judgement, does the manuscript have information that has not been previously known or published?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   {
@@ -14,7 +16,8 @@ export const QUESTIONS = [
       'Are the principal conclusions supported by the data and analysis?',
     help:
       'Is there sufficient evidence to support the key findings of the manuscript?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   {
@@ -22,7 +25,8 @@ export const QUESTIONS = [
     question: 'Are the results likely to lead to future research?',
     help:
       'Do the data, findings, or analysis point to clear directions for additional research?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   {
@@ -30,21 +34,24 @@ export const QUESTIONS = [
     question: 'Have the authors adequately discussed ethical concerns',
     help:
       'For example, if a human study, is Institutional Review Board (IRB) approval presented?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   {
     identifier: 'ynLimitations',
     question: 'Does the manuscript discuss limitations?',
     help: 'Are the most important limitations clearly presented?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   {
     identifier: 'ynNewData',
     question: 'Does the manuscript include new data?',
     help: 'Were data collected or made available specifically for this study?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   //
@@ -54,7 +61,8 @@ export const QUESTIONS = [
     question: 'Are the data used in the manuscript available?',
     help:
       'In the paper, supplement, on a public repository, or from a cited source?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
   {
     identifier: 'ynAvailableCode', // DO NOT CHANGE THIS IS USED IN THE INDEX (or update everywhere)
@@ -62,20 +70,24 @@ export const QUESTIONS = [
     question: 'Is the code used in the manuscript available?',
     help:
       'In the paper, supplement, on a public repository, or from a cited source?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   //
   {
     identifier: 'ynReproducibility',
-    question: 'Is sufficient detail provided allow reproduction of the study?',
-    type: 'YesNoQuestion'
+    question:
+      'Is sufficient detail provided to allow reproduction of the study?',
+    type: 'YesNoQuestion',
+    required: true
   },
 
   {
     identifier: 'ynMethods',
     question: 'Are the methods and statistics appropriate for the analysis?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   {
@@ -83,7 +95,8 @@ export const QUESTIONS = [
     question: 'Would you recommend this manuscript to others?',
     help:
       'Consider any possible audience: scientists in the same field or others, policy makers, the public, etc.',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   {
@@ -91,7 +104,8 @@ export const QUESTIONS = [
     question: 'Do you recommend this manuscript for peer review?',
     help:
       'Would you recommend this manuscript to a journal editor for formal peer review?',
-    type: 'YesNoQuestion'
+    type: 'YesNoQuestion',
+    required: true
   },
 
   //
diff --git a/src/utils/actions.js b/src/utils/actions.js
index df162e8..a057b02 100644
--- a/src/utils/actions.js
+++ b/src/utils/actions.js
@@ -35,7 +35,9 @@ export function getReviewAnswers(answerMap = {}) {
 }
 
 export function checkIfAllAnswered(answerMap = {}) {
-  return QUESTIONS.every(({ identifier }) => answerMap[identifier]);
+  return QUESTIONS.every(
+    ({ identifier, required }) => !required || answerMap[identifier]
+  );
 }
 
 export function checkIfHasReviewed(