at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,111 @@
+/* eslint-disable react/jsx-no-bind */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import LocationsTabList from './LocationsTabList';
+import { Button, Col, Row } from 'reactstrap';
+
+export class LocationsTab extends React.Component {
+  static propTypes = {
+    locations: PropTypes.array.isRequired,
+    locationsToInclude: PropTypes.array.isRequired,
+    locationsToExclude: PropTypes.array.isRequired,
+    chosenLocationsType: PropTypes.string.isRequired,
+    changeLocationsType: PropTypes.func.isRequired,
+    moveLocation: PropTypes.func.isRequired,
+    clearLocations: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dropdownOpen: false,
+      dropDownValue: 'country'
+    };
+  }
+
+  onClearLocations = () => {
+    this.props.clearLocations();
+    this.props.changeLocationsType('country');
+    this.setState({ dropDownValue: 'country' });
+  };
+
+  selectLocation = (value) => {
+    this.props.changeLocationsType(value);
+    this.setState({ dropDownValue: value });
+  };
+
+  render() {
+    const {
+      locations,
+      chosenLocationsType,
+      locationsToInclude,
+      locationsToExclude
+    } = this.props;
+    const { t } = this.props;
+    const locationsMainList = locations.filter((loc) => {
+      return loc.type === chosenLocationsType;
+    });
+    const includeList = locationsToInclude.filter((loc) => {
+      return loc.type === chosenLocationsType;
+    });
+    const excludeList = locationsToExclude.filter((loc) => {
+      return loc.type === chosenLocationsType;
+    });
+
+    const { dropDownValue } = this.state;
+    return (
+      <Col sm={12}>
+        <Button
+          outline
+          active={dropDownValue === 'country'}
+          color="secondary"
+          className="mr-2 mb-3"
+          onClick={() => this.selectLocation('country')}
+        >
+          {t('searchTab.searchBySection.locations.countriesSelect')}
+        </Button>
+        <Button
+          outline
+          active={dropDownValue === 'state'}
+          color="secondary"
+          className="mb-3"
+          onClick={() => this.selectLocation('state')}
+        >
+          {t('searchTab.searchBySection.locations.statesSelect')}
+        </Button>
+
+        <Row className="draggable">
+          <Col md={4}>
+            <LocationsTabList
+              locations={locationsMainList}
+              chosenLocationsType={chosenLocationsType}
+              dropTargetType="locations"
+              moveLocation={this.props.moveLocation}
+            />
+          </Col>
+          <Col md={4}>
+            <LocationsTabList
+              locations={includeList}
+              chosenLocationsType={chosenLocationsType}
+              dropTargetType="locationsToInclude"
+              moveLocation={this.props.moveLocation}
+            />
+          </Col>
+          <Col md={4}>
+            <LocationsTabList
+              locations={excludeList}
+              chosenLocationsType={chosenLocationsType}
+              dropTargetType="locationsToExclude"
+              moveLocation={this.props.moveLocation}
+            />
+          </Col>
+        </Row>
+      </Col>
+    );
+  }
+}
+
+export default translate(['tabsContent'], { wait: true })(LocationsTab);