fix: condition re-thinked

RedTurtle · Oct 28, 2024 · 6bdaeb1 · 6bdaeb1
1 parent 6f41f35
commit 6bdaeb1
Show file tree

Hide file tree

Showing 5 changed files with 239 additions and 182 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Alert/AlertWrapper.jsx b/src/components/ItaliaTheme/Blocks/Alert/AlertWrapper.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Row, Container } from 'design-react-kit/dist/design-react-kit';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  expiredDate: {
+    id: 'expiredDate',
+    defaultMessage: 'Pubblicazione scaduta',
+  },
+  activeDate: {
+    id: 'activeDate',
+    defaultMessage: 'Pubblicazione attiva',
+  },
+  futureDate: {
+    id: 'futureDate',
+    defaultMessage: 'Pubblicazione futura',
+  },
+  startTitle: {
+    id: 'startTitle',
+    defaultMessage: 'Data inizio pubblicazione:',
+  },
+  endTitle: {
+    id: 'endTitle',
+    defaultMessage: 'Data fine pubblicazione:',
+  },
+  errorDate: {
+    id: 'errorDate',
+    defaultMessage: "Data di scadenza anteriore a data d'inizio",
+  },
+});
+
+const AlertWrapper = ({ data, children }) => {
+  const intl = useIntl();
+  const userLogged = useSelector((state) => state.userSession.token);
+
+  const isActive = () => {
+    const today = new Date().getTime();
+    const start = data.startDate ? new Date(data.startDate).getTime() : 0;
+    const end = data.endDate
+      ? new Date(data.endDate).getTime()
+      : Number.MAX_SAFE_INTEGER;
+
+    const returnValue = { active: false, message: null };
+
+    if (end < start) {
+      returnValue.message = intl.formatMessage(messages.errorDate);
+      returnValue.active = false;
+    } else if (today < start) {
+      returnValue.message = intl.formatMessage(messages.futureDate);
+      returnValue.active = false;
+    } else if (today < end) {
+      returnValue.message = intl.formatMessage(messages.activeDate);
+      returnValue.active = true;
+    } else {
+      returnValue.message = intl.formatMessage(messages.expiredDate);
+      returnValue.active = false;
+    }
+    return returnValue;
+  };
+
+  const activeStatus = isActive();
+
+  return (
+    <>
+      {(userLogged || activeStatus.active) && (
+        <>
+          {userLogged && (
+            <Container className="alert-info-dates">
+              <Row>
+                <p>{activeStatus.message}</p>
+              </Row>
+              <Row>
+                <ul>
+                  {data.startDate && (
+                    <li>
+                      <p>
+                        {intl.formatMessage(messages.startTitle)}{' '}
+                        {new Date(data.startDate).toLocaleString()}
+                      </p>
+                    </li>
+                  )}
+                  {data.endDate && (
+                    <li>
+                      <p>
+                        {intl.formatMessage(messages.endTitle)}{' '}
+                        {new Date(data.endDate).toLocaleString()}
+                      </p>
+                    </li>
+                  )}
+                </ul>
+              </Row>
+            </Container>
+          )}
+          {children}
+        </>
+      )}
+    </>
+  );
+};
+
+export default AlertWrapper;
diff --git a/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx b/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx
@@ -3,21 +3,21 @@
  * @module components/manage/Blocks/Image/Edit
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
 import cx from 'classnames';
 import { Container, Row, Col } from 'design-react-kit/dist/design-react-kit';
 
 import { EditTextBlock } from '@plone/volto/components';
-import Dates from './dateUtils';
+import AlertWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Alert/AlertWrapper.jsx';
 
 import { SidebarPortal } from '@plone/volto/components';
 import { AlertSidebar } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const Edit = (props) => {
   const {
     data,
+    block,
     selected,
     index,
     onChangeBlock,
@@ -28,52 +28,58 @@ const Edit = (props) => {
     onAddBlock,
   } = props;
 
-  if (!data.color) {
-    data.color = 'warning';
-  }
+  useEffect(() => {
+    if (!data.bg_color) {
+      onChangeBlock(block, {
+        ...data,
+        bg_color: data.color ?? 'warning',
+      });
+    }
+  }, [data, onChangeBlock, block]);
 
   return (
-    <div className="public-ui">
-      <div className={cx('alertblock', { selected })}>
-        <Dates startDate={data.startDate} endDate={data.endDate} {...props} />
-        <Row className={cx('row-full-width p-5', 'bg-alert-' + data.color)}>
-          <Container className="ui">
-            <Row className="align-items-start">
-              {data.image?.data && (
-                <Col sm={2} className="pb-3 image-col">
-                  <img
-                    src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
-                    alt=""
-                    className={cx('left-image', [
-                      data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
-                    ])}
+    <AlertWrapper data={data} {...props}>
+      <div className="public-ui">
+        <div className={cx('alertblock', { selected })}>
+          <Row className={cx('row-full-width p-5', 'bg-alert-' + data.color)}>
+            <Container className="ui">
+              <Row className="align-items-start">
+                {data.image?.data && (
+                  <Col sm={2} className="pb-3 image-col">
+                    <img
+                      src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
+                      alt=""
+                      className={cx('left-image', [
+                        data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
+                      ])}
+                    />
+                  </Col>
+                )}
+                <Col>
+                  <EditTextBlock
+                    data={data}
+                    detached={true}
+                    index={index}
+                    selected={selected}
+                    block={props.block}
+                    onAddBlock={onAddBlock}
+                    onChangeBlock={onChangeBlock}
+                    onDeleteBlock={onDeleteBlock}
+                    onMutateBlock={props.onMutateBlock}
+                    onFocusPreviousBlock={onFocusPreviousBlock}
+                    onFocusNextBlock={onFocusNextBlock}
+                    onSelectBlock={onSelectBlock}
                   />
                 </Col>
-              )}
-              <Col>
-                <EditTextBlock
-                  data={data}
-                  detached={true}
-                  index={index}
-                  selected={selected}
-                  block={props.block}
-                  onAddBlock={onAddBlock}
-                  onChangeBlock={onChangeBlock}
-                  onDeleteBlock={onDeleteBlock}
-                  onMutateBlock={props.onMutateBlock}
-                  onFocusPreviousBlock={onFocusPreviousBlock}
-                  onFocusNextBlock={onFocusNextBlock}
-                  onSelectBlock={onSelectBlock}
-                />
-              </Col>
-            </Row>
-          </Container>
-        </Row>
+              </Row>
+            </Container>
+          </Row>
+        </div>
+        <SidebarPortal selected={selected}>
+          <AlertSidebar {...props} />
+        </SidebarPortal>
       </div>
-      <SidebarPortal selected={selected}>
-        <AlertSidebar {...props} />
-      </SidebarPortal>
-    </div>
+    </AlertWrapper>
   );
 };
 
@@ -100,5 +106,4 @@ Edit.propTypes = {
   handleKeyDown: PropTypes.func.isRequired,
   createContent: PropTypes.func.isRequired,
 };
-
-export default injectIntl(Edit);
+export default Edit;
diff --git a/src/components/ItaliaTheme/Blocks/Alert/View.jsx b/src/components/ItaliaTheme/Blocks/Alert/View.jsx
@@ -1,17 +1,12 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import redraft from 'redraft';
 import { Container, Row, Col } from 'design-react-kit/dist/design-react-kit';
 import config from '@plone/volto/registry';
-import Dates from './dateUtils';
-import { isActive } from './dateUtils';
+import AlertWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Alert/AlertWrapper.jsx';
 
 const View = ({ data }) => {
-  const { startDate, endDate } = data;
-  const userLogged = useSelector((state) => state.userSession.token);
-
   const content = data.text
     ? redraft(
         data.text,
@@ -20,32 +15,31 @@ const View = ({ data }) => {
       )
     : '';
 
-  return content && (userLogged || isActive(startDate, endDate)) ? (
-    <section role="alert" className="block alertblock">
-      {userLogged && (
-        <Dates startDate={data.startDate} endDate={data.endDate} />
-      )}
-      <Row className={cx('row-full-width', 'bg-alert-' + data.color)}>
-        <Container className="p-4 pt-5 pb-5">
-          <Row className="align-items-start">
-            {data.image?.data && (
-              <Col sm={2} className="pb-3 image-col">
-                <img
-                  src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
-                  alt=""
-                  aria-hidden="true"
-                  className={cx('left-image', [
-                    data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
-                  ])}
-                  loading="lazy"
-                />
-              </Col>
-            )}
-            <Col>{content}</Col>
-          </Row>
-        </Container>
-      </Row>
-    </section>
+  return content ? (
+    <AlertWrapper data={data}>
+      <section role="alert" className="block alertblock">
+        <Row className={cx('row-full-width', 'bg-alert-' + data.color)}>
+          <Container className="p-4 pt-5 pb-5">
+            <Row className="align-items-start">
+              {data.image?.data && (
+                <Col sm={2} className="pb-3 image-col">
+                  <img
+                    src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
+                    alt=""
+                    aria-hidden="true"
+                    className={cx('left-image', [
+                      data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
+                    ])}
+                    loading="lazy"
+                  />
+                </Col>
+              )}
+              <Col>{content}</Col>
+            </Row>
+          </Container>
+        </Row>
+      </section>
+    </AlertWrapper>
   ) : null;
 };