Merge pull request #55 from InseeFr/fix/bouton_open_close

call isSurveyOnline in Main and use response in menus/responseButton
InseeFr · May 24, 2024 · 18911f3 · 18911f3
2 parents af167f3 + bcf55c8
commit 18911f3
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 53 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginx
+FROM nginx:stable-alpine
 COPY build /usr/share/nginx/html
 RUN rm etc/nginx/conf.d/default.conf
 COPY nginx-coleman-promotion.conf etc/nginx/conf.d/

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "colempub",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "dependencies": {
     "axios": "^0.19.2",
     "bootstrap": "^3.3.7",

diff --git a/src/components/main.js b/src/components/main.js
@@ -18,7 +18,7 @@ import AssistanceForm from 'components/forms/assistance-form';
 import AssistanceRouter from 'components/forms/assistance-router';
 import ControlEmailForm from 'components/forms/mail-modif';
 import DonneesPersonnelles from './content/donnees-personnelles';
-
+import { isSurveyOnLine } from 'utils/api';
 import {
   idExists,
   getSurveyTitleById,
@@ -40,6 +40,9 @@ class Main extends React.Component {
       showResponseButton: true,
       showMinimalFooter: false,
       id: match.params.id,
+      isSurveyOnLine: undefined,
+      messageSurveyOffline: "",
+      messageInfoSurveyOffline: ""
     };
   }
 
@@ -70,10 +73,31 @@ class Main extends React.Component {
     }
   };
 
+  fetchData = async () => {
+    try {
+      const response = await isSurveyOnLine(this.props.urlBackEnd)(this.state.id);
+      if (response.data && response.data.opened === false) {
+        this.setState({isSurveyOnLine: false})
+        this.setState({messageSurveyOffline: response.data.messageSurveyOffline})
+        this.setState({messageInfoSurveyOffline: response.data.messageInfoSurveyOffline})
+      } else {
+        this.setState({isSurveyOnLine: true})
+      }
+    } catch (error) {
+      console.error('Error checking survey online:', error);
+      this.setState({isSurveyOnLine: false})
+    }
+  };
+
+  componentDidMount = () => {
+    this.fetchData();
+  }
+
+
   /* return */ render() {
     const { urlBackEnd, match, urlMySurveys, keycloakAuth } = this.props;
 
-    const { id, showMenu, showResponseButton, showMinimalFooter } = this.state;
+    const { id, showMenu, showResponseButton, showMinimalFooter , isSurveyOnLine, messageSurveyOffline,  messageInfoSurveyOffline} = this.state;
 
     return (
       <>
@@ -105,7 +129,7 @@ class Main extends React.Component {
               )}
             />
 
-            {showMenu && <Menu id={id} link={urlBackEnd} />}
+            {showMenu && <Menu id={id} link={urlBackEnd} isSurveyOnLine={isSurveyOnLine} />}
             <div className="row">
               <div className="col-md-8 text-justify">
                 {/* <Route
@@ -215,14 +239,21 @@ render={routeProps => <ChangePasswordForm {...routeProps} urlBackEnd={urlBackEnd
                     component={routeProps => <Faq {...routeProps} enquete={id} />}
                   />
                   {!showMinimalFooter ? (
-                    <FooterMenu home={false} path={match.url} id={id} />
+                    <FooterMenu home={false} path={match.url} id={id} isSurveyOnLine={isSurveyOnLine} />
                   ) : (
-                    <FooterMenu home path={match.url} id={id} />
+                    <FooterMenu home path={match.url} id={id} isSurveyOnLine={isSurveyOnLine}/>
                   )}
                 </div>
               </div>
               <div className="col-md-4">
-                {showResponseButton && <ResponseButton id={id} urlBackEnd={urlBackEnd} />}
+                {showResponseButton && 
+                  <ResponseButton 
+                    id={id} 
+                    isSurveyOnLine={isSurveyOnLine} 
+                    messageSurveyOffline={messageSurveyOffline} 
+                    messageInfoSurveyOffline={messageInfoSurveyOffline} 
+                  />
+                }
               </div>
             </div>
           </>

diff --git a/src/components/template/footer-menu.js b/src/components/template/footer-menu.js
@@ -4,9 +4,8 @@ import { Navbar, Nav, NavItem } from 'react-bootstrap';
 import { LinkContainer } from 'react-router-bootstrap';
 import logoTwitter from 'img/common/logo-twitter.png';
 import { urlInseeFr } from 'utils/properties';
-import { isSurveyOnLine } from 'utils/api';
 
-function FooterMenu({ path, home, id }) {
+function FooterMenu({ path, home, id, isSurveyOnLine }) {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth > 767);
   const updateFooterMenu = () => {
     if (window.innerWidth <= 767) {
@@ -44,7 +43,7 @@ function FooterMenu({ path, home, id }) {
               <LinkContainer to={`/${id}/faq`}>
                 <NavItem eventKey={1}>{`Questions/réponses`}</NavItem>
               </LinkContainer>
-              {isSurveyOnLine(id) && (
+              {isSurveyOnLine && (
                 <LinkContainer to={`/${id}/contacter-assistance`}>
                   <NavItem eventKey={2}>{`Contacter l'assistance`}</NavItem>
                 </LinkContainer>

diff --git a/src/components/template/menu.js b/src/components/template/menu.js
@@ -6,9 +6,9 @@ import { Link } from 'react-router-dom';
 import { urlInseeFr } from 'utils/properties';
 import logoTwitter from 'img/common/logo-twitter.png';
 import { getResultsMenuTitle, getSurveyDetailLink } from 'utils/read-content';
-import { isSurveyOnLine } from 'utils/api';
+import ReactLoading from 'react-loading';
 
-function Menu({ id }) {
+function Menu({ id, isSurveyOnLine }) {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth > 767);
   const updateFooterMenu = () => {
     if (window.innerWidth <= 767) {
@@ -35,16 +35,21 @@ function Menu({ id }) {
           </Navbar.Header>
           <Navbar.Collapse>
             <Nav>
-              <NavItem
-                href={`/${id}/login`}
-                to={`/${id}/login`}
-                eventKey={1}
-                id="menuItemRepondre"
-                disabled={!isSurveyOnLine(id)}
-              >
-                {`Accéder au questionnaire`}
-              </NavItem>
-
+              {isSurveyOnLine === undefined ? 
+                <NavItem style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
+                  <ReactLoading type="spin" color={`#0f417a`} width={"30px"} />
+                </NavItem>
+                : 
+                <NavItem
+                  href={`/${id}/login`}
+                  to={`/${id}/login`}
+                  eventKey={1}
+                  id="menuItemRepondre"
+                  disabled={!isSurveyOnLine}
+                >
+                  {`Accéder au questionnaire`}
+                </NavItem>
+              }
               <LinkContainer to={`/${id}/donnees-personnelles`}>
                 <NavItem eventKey={2}>{`Données personnelles`}</NavItem>
               </LinkContainer>
@@ -66,7 +71,7 @@ function Menu({ id }) {
                   <NavItem eventKey={7} href={`/${id}/faq`}>
                     {`Questions/réponses`}
                   </NavItem>
-                  {isSurveyOnLine(id) && (
+                  {isSurveyOnLine && (
                     <NavItem eventKey={8} href={`/${id}/contacter-assistance`}>
                       {`Contacter l'assistance`}
                     </NavItem>

diff --git a/src/components/template/response-button.js b/src/components/template/response-button.js
@@ -1,34 +1,10 @@
-import React, {useState, useEffect} from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import ReactLoading from 'react-loading';
-import { isSurveyOnLine } from 'utils/api';
 
-const ResponseButton = ({ id,  urlBackEnd}) => {
-  const [surveyOnLine, setSurveyOnLine] = useState(undefined);
-  const [messageSurveyOffline, setMessageSurveyOffline] = useState("");
-  const [messageInfoSurveyOffline, setMessageInfoSurveyOffline] = useState("");
-
-    useEffect(() => {
-      const fetchData = async () => {
-        try {
-          const response = await isSurveyOnLine(urlBackEnd)(id);
-          if (response.data && response.data.opened === false) {
-            setSurveyOnLine(false);
-            setMessageSurveyOffline(response.data.messageSurveyOffline);
-            setMessageInfoSurveyOffline(response.data.messageInfoSurveyOffline);
-          } else {
-            setSurveyOnLine(true);
-          }
-        } catch (error) {
-          console.error('Error checking survey online:', error);
-          setSurveyOnLine(false);
-        }
-      };
-
-      fetchData();
-    }, [id, urlBackEnd]);
+const ResponseButton = ({ id, isSurveyOnLine, messageSurveyOffline,messageInfoSurveyOffline}) => {
 
-  if(surveyOnLine === undefined) {
+  if(isSurveyOnLine === undefined) {
     return  (
       <div className="center-block text-center">
         <section style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
@@ -44,12 +20,12 @@ const ResponseButton = ({ id,  urlBackEnd}) => {
       <section>
         <h2>{`Répondre à l'enquête`}</h2>
         <Link to={`/${id}/login`} tabIndex="-1">
-          <button type="button" className="btn btn-lg" id="accessButton" disabled={!surveyOnLine}>
+          <button type="button" className="btn btn-lg" id="accessButton" disabled={!isSurveyOnLine}>
             {'Accéder au questionnaire'}
           </button>
         </Link>
         <p />
-        {!surveyOnLine && (
+        {!isSurveyOnLine && (
           <>
             {messageSurveyOffline && <div className="surveyOver">{messageSurveyOffline}</div>}
             {messageInfoSurveyOffline && <p>{messageInfoSurveyOffline}</p>}