Merge commit '9273c6a783233c65ee31cbf721e2f00548918734' into e2e_test…

…_mika

.github/workflows/cypress_tests.yml

@@ -1,9 +1,10 @@
 name: Run cypress happy path test
 
 on:
-  pull_request:
-    branches:
-      - integration
+  workflow_dispatch:
+  # pull_request:
+  #   branches:
+  #     - integration
 
 jobs:
   build:

packages/webapp/src/components/Finances/DateRangeSelector/index.jsx

@@ -1,106 +1,98 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
+/*
+ *  Copyright 2019, 2020, 2021, 2022, 2023 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import styles from './styles.module.scss';
 import { FromToDateContainer } from '../../../components/Inputs/DateContainer';
 import { setDateRange } from '../../../containers/Finances/actions';
 import moment from 'moment';
 import InfoBoxComponent from '../../InfoBoxComponent';
 import { dateRangeSelector } from '../../../containers/Finances/selectors';
 import { Semibold } from '../../Typography';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-class DateRangeSelector extends Component {
-  constructor(props) {
-    super(props);
-    let startDate, endDate, validRange;
-    const { dateRange } = this.props;
-    if (dateRange && dateRange.startDate && dateRange.endDate) {
-      startDate = moment(dateRange.startDate);
-      endDate = moment(dateRange.endDate);
-    } else {
-      startDate = moment().startOf('year');
-      endDate = moment().endOf('year');
-    }
-    startDate <= endDate ? (validRange = true) : (validRange = false);
+const DateRangeSelector = ({ changeDateMethod, hideTooltip }) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const dateRange = useSelector(dateRangeSelector);
 
-    this.state = {
-      startDate,
-      endDate,
-      validRange,
-    };
-    this.changeStartDate.bind(this);
-    this.changeEndDate.bind(this);
+  let initialStartDate, initialEndDate;
+  if (dateRange && dateRange.startDate && dateRange.endDate) {
+    initialStartDate = moment(dateRange.startDate);
+    initialEndDate = moment(dateRange.endDate);
+  } else {
+    initialStartDate = moment().startOf('year');
+    initialEndDate = moment().endOf('year');
   }
 
-  changeStartDate = (date) => {
-    if (date > this.state.endDate) {
-      this.setState({ validRange: false });
+  const [startDate, setStartDate] = useState(initialStartDate);
+  const [endDate, setEndDate] = useState(initialEndDate);
+  const [validRange, setValidRange] = useState(initialStartDate <= initialEndDate);
+
+  const changeStartDate = (date) => {
+    if (date > endDate) {
+      setValidRange(false);
       return;
     }
-    this.setState({ validRange: true });
-    this.setState({ startDate: date });
-    const endDate = this.state.endDate;
-    this.props.dispatch(setDateRange({ startDate: date, endDate }));
-    this.props.changeDateMethod('start', date);
+    setValidRange(true);
+    setStartDate(date);
+    dispatch(setDateRange({ startDate: date, endDate }));
+    changeDateMethod('start', date);
   };
 
-  changeEndDate = (date) => {
-    if (date < this.state.startDate) {
-      this.setState({ validRange: false });
+  const changeEndDate = (date) => {
+    if (date < startDate) {
+      setValidRange(false);
       return;
     }
-    this.setState({ validRange: true });
-    this.setState({ endDate: date });
-    const startDate = this.state.startDate;
-    this.props.dispatch(setDateRange({ startDate, endDate: date }));
-    this.props.changeDateMethod('end', date);
+    setValidRange(true);
+    setEndDate(date);
+    dispatch(setDateRange({ startDate, endDate: date }));
+    changeDateMethod('end', date);
   };
 
-  render() {
-    const { hideTooltip } = this.props;
-    const changeDateToParent = this.props.changeDateMethod;
-
-    return (
-      <div className={styles.rangeContainer}>
-        <div className={styles.titleContainer}>
-          <Semibold style={{ textAlign: 'left', marginBottom: '20px' }}>
-            {this.props.t('DATE_RANGE.TITLE')}
-          </Semibold>
-          {!hideTooltip && (
-            <InfoBoxComponent
-              customStyle={{ float: 'right' }}
-              title={this.props.t('DATE_RANGE.HELP_TITLE')}
-              body={this.props.t('DATE_RANGE.HELP_BODY')}
-            />
-          )}
-        </div>
-
-        <FromToDateContainer
-          onStartDateChange={this.changeStartDate}
-          onEndDateChange={this.changeEndDate}
-          endDate={this.state.endDate}
-          startDate={this.state.startDate}
-        />
-        {!this.state.validRange && (
-          <Semibold style={{ textAlign: 'center', color: 'red' }}>
-            {this.props.t('DATE_RANGE.INVALID_RANGE_MESSAGE')}
-          </Semibold>
+  return (
+    <div className={styles.rangeContainer}>
+      <div className={styles.titleContainer}>
+        <Semibold style={{ textAlign: 'left', marginBottom: '20px' }}>
+          {t('DATE_RANGE.TITLE')}
+        </Semibold>
+        {!hideTooltip && (
+          <InfoBoxComponent
+            customStyle={{ float: 'right' }}
+            title={t('DATE_RANGE.HELP_TITLE')}
+            body={t('DATE_RANGE.HELP_BODY')}
+          />
         )}
       </div>
-    );
-  }
-}
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    dispatch,
-  };
-};
-
-const mapStateToProps = (state) => {
-  return {
-    dateRange: dateRangeSelector(state),
-  };
+      <FromToDateContainer
+        onStartDateChange={changeStartDate}
+        onEndDateChange={changeEndDate}
+        endDate={endDate}
+        startDate={startDate}
+      />
+      {!validRange && (
+        <Semibold style={{ textAlign: 'center', color: 'red' }}>
+          {t('DATE_RANGE.INVALID_RANGE_MESSAGE')}
+        </Semibold>
+      )}
+    </div>
+  );
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(DateRangeSelector));
+export default DateRangeSelector;