Merge pull request #56 from InseeFr/fix_develop

Fix develop
InseeFr · Jun 5, 2024 · 39b25ce · 39b25ce
2 parents 18911f3 + 22dfbfc
commit 39b25ce
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 271 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginx:stable-alpine
+FROM nginx
 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.2",
+  "version": "1.0.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,9 +40,6 @@ class Main extends React.Component {
       showResponseButton: true,
       showMinimalFooter: false,
       id: match.params.id,
-      isSurveyOnLine: undefined,
-      messageSurveyOffline: "",
-      messageInfoSurveyOffline: ""
     };
   }
 
@@ -73,31 +70,10 @@ 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 , isSurveyOnLine, messageSurveyOffline,  messageInfoSurveyOffline} = this.state;
+    const { id, showMenu, showResponseButton, showMinimalFooter } = this.state;
 
     return (
       <>
@@ -129,7 +105,7 @@ class Main extends React.Component {
               )}
             />
 
-            {showMenu && <Menu id={id} link={urlBackEnd} isSurveyOnLine={isSurveyOnLine} />}
+            {showMenu && <Menu id={id} link={urlBackEnd} />}
             <div className="row">
               <div className="col-md-8 text-justify">
                 {/* <Route
@@ -239,22 +215,13 @@ render={routeProps => <ChangePasswordForm {...routeProps} urlBackEnd={urlBackEnd
                     component={routeProps => <Faq {...routeProps} enquete={id} />}
                   />
                   {!showMinimalFooter ? (
-                    <FooterMenu home={false} path={match.url} id={id} isSurveyOnLine={isSurveyOnLine} />
+                    <FooterMenu home={false} path={match.url} id={id} />
                   ) : (
-                    <FooterMenu home path={match.url} id={id} isSurveyOnLine={isSurveyOnLine}/>
+                    <FooterMenu home path={match.url} id={id} />
                   )}
                 </div>
               </div>
-              <div className="col-md-4">
-                {showResponseButton && 
-                  <ResponseButton 
-                    id={id} 
-                    isSurveyOnLine={isSurveyOnLine} 
-                    messageSurveyOffline={messageSurveyOffline} 
-                    messageInfoSurveyOffline={messageInfoSurveyOffline} 
-                  />
-                }
-              </div>
+              <div className="col-md-4">{showResponseButton && <ResponseButton id={id} />}</div>
             </div>
           </>
         )}

diff --git a/src/components/template/footer-menu.js b/src/components/template/footer-menu.js
@@ -4,8 +4,9 @@ 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 { getIsSurveyOnlineById } from 'utils/read-content';
 
-function FooterMenu({ path, home, id, isSurveyOnLine }) {
+function FooterMenu({ path, home, id }) {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth > 767);
   const updateFooterMenu = () => {
     if (window.innerWidth <= 767) {
@@ -43,7 +44,7 @@ function FooterMenu({ path, home, id, isSurveyOnLine }) {
               <LinkContainer to={`/${id}/faq`}>
                 <NavItem eventKey={1}>{`Questions/réponses`}</NavItem>
               </LinkContainer>
-              {isSurveyOnLine && (
+              {getIsSurveyOnlineById(id) && (
                 <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 ReactLoading from 'react-loading';
+import { getIsSurveyOnlineById } from '../../utils/read-content';
 
-function Menu({ id, isSurveyOnLine }) {
+function Menu({ id }) {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth > 767);
   const updateFooterMenu = () => {
     if (window.innerWidth <= 767) {
@@ -35,21 +35,16 @@ function Menu({ id, isSurveyOnLine }) {
           </Navbar.Header>
           <Navbar.Collapse>
             <Nav>
-              {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>
-              }
+              <NavItem
+                href={`/${id}/login`}
+                to={`/${id}/login`}
+                eventKey={1}
+                id="menuItemRepondre"
+                disabled={!getIsSurveyOnlineById(id)}
+              >
+                {`Accéder au questionnaire`}
+              </NavItem>
+
               <LinkContainer to={`/${id}/donnees-personnelles`}>
                 <NavItem eventKey={2}>{`Données personnelles`}</NavItem>
               </LinkContainer>
@@ -71,7 +66,7 @@ function Menu({ id, isSurveyOnLine }) {
                   <NavItem eventKey={7} href={`/${id}/faq`}>
                     {`Questions/réponses`}
                   </NavItem>
-                  {isSurveyOnLine && (
+                  {getIsSurveyOnlineById(id) && (
                     <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,39 +1,34 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import ReactLoading from 'react-loading';
+import {
+  getIsSurveyOnlineById,
+  getSurveyOfflineMessageById,
+  getSurveyOfflineMessageInfoById,
+} from '../../utils/read-content';
 
-const ResponseButton = ({ id, isSurveyOnLine, messageSurveyOffline,messageInfoSurveyOffline}) => {
-
-  if(isSurveyOnLine === undefined) {
-    return  (
-      <div className="center-block text-center">
-        <section style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
-          <h3>{`Veuillez patienter`}</h3>
-          <ReactLoading type="spin" color={`#0f417a`} width="50px"  />
-        </section>
-      </div>
-    )
-  } 
-
-  return (
-    <div className="center-block text-center">
-      <section>
-        <h2>{`Répondre à l'enquête`}</h2>
-        <Link to={`/${id}/login`} tabIndex="-1">
-          <button type="button" className="btn btn-lg" id="accessButton" disabled={!isSurveyOnLine}>
-            {'Accéder au questionnaire'}
-          </button>
-        </Link>
-        <p />
-        {!isSurveyOnLine && (
-          <>
-            {messageSurveyOffline && <div className="surveyOver">{messageSurveyOffline}</div>}
-            {messageInfoSurveyOffline && <p>{messageInfoSurveyOffline}</p>}
-          </>
-        )}
-      </section>
-    </div>
-  );
-};
+const ResponseButton = ({ id }) => (
+  <div className="center-block text-center">
+    <section>
+      <h2>{`Répondre à l'enquête`}</h2>
+      <Link to={`/${id}/login`} tabIndex="-1">
+        <button
+          type="button"
+          className="btn btn-lg"
+          id="boutonRepondre"
+          disabled={!getIsSurveyOnlineById(id)}
+        >
+          {'Accéder au questionnaire'}
+        </button>
+      </Link>
+      <p />
+      {!getIsSurveyOnlineById(id) && (
+        <>
+          <div className="surveyOver">{getSurveyOfflineMessageById(id)}</div>
+          <p>{getSurveyOfflineMessageInfoById(id)}</p>
+        </>
+      )}
+    </section>
+  </div>
+);
 
 export default ResponseButton;
diff --git a/src/components/template/survey-item.js b/src/components/template/survey-item.js
@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom';
 
 const SurveyItem = ({ survey }) => (
   <div className="survey-item">
-    <Link to={`/${survey.id}`} tabIndex="-1" className='survey-item-link'>
-      <button type="button" className="btn " id="boutonRepondre">
+    <Link to={`/${survey.id}`} tabIndex="-1">
+      <button type="button" className="btn btn-lg" id="boutonRepondre">
         <span>{survey.titleShort}</span>
         <br />
         {`${window.location.host}/${survey.id}`}

diff --git a/src/index.scss b/src/index.scss
@@ -94,26 +94,8 @@ h2 {
 .btn-md {
   margin-right: 10px;
 }
-
-#survey-item-link {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-
-#boutonRepondre {
-  display: flex;
-  flex-direction: column;
-  white-space: inherit;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  word-wrap: break-word;
-}
 #menuItemRepondre,
 #boutonRepondre,
-#accessButton,
 #boutonMailConfirm,
 #boutonMailModif,
 #formSend,
@@ -123,11 +105,9 @@ h2 {
 }
 #menuItemRepondre:hover,
 #boutonRepondre:hover,
-#accessButton:hover,
 #boutonMailConfirm:hover,
 #boutonMailModif:hover,
 #menuItemRepondre:focus,
-#accessButton:focus,
 #boutonRepondre:focus,
 #boutonMailConfirm:focus,
 #boutonMailModif:focus,
@@ -341,17 +321,14 @@ div.banner-top h1 {
 
 /* survey item */
 .surveys-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
-  margin-top:2rem;
+  text-align: center;
 }
 .survey-item {
-  width: 30%;
-  min-width: 300px;
+  text-align: center;
+  margin: 5px;
+  display: inline-block;
   border-radius: 7px;
+  width: auto;
   background-color: $blue-insee;
   color: $yellow-insee;
 
@@ -363,7 +340,7 @@ div.banner-top h1 {
     text-decoration: none;
   }
   span {
-    font-size: 1.5em;
+    font-size: 2em;
   }
 }