moving to vite as build system 🎉

2026-06-16 12:31:07 +00:00 · 2022-12-19 21:44:10 +01:00
parent e155e992d4
commit 4785cf797d
39 changed files with 289 additions and 1821 deletions
--- a/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx
+++ b/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+
+import { transform } from '../../../../../services/transformer/providerTransformer';
+import { Modal, Icon, Button, Dropdown, Input, Message } from 'semantic-ui-react';
+import { useSelector } from 'react-redux';
+
+import './ProviderMutator.less';
+
+const sortProvider = (a, b) => {
+  if (a.key < b.key) {
+    return -1;
+  }
+  if (a.key > b.key) {
+    return 1;
+  }
+  return 0;
+};
+
+export default function ProviderMutator({ onVisibilityChanged, visible = false, onData } = {}) {
+  const provider = useSelector((state) => state.provider);
+  const [selectedProvider, setSelectedProvider] = useState(null);
+  const [providerUrl, setProviderUrl] = useState(null);
+  const [validationMessage, setValidationMessage] = useState(null);
+  const validate = () => {
+    if (selectedProvider == null || selectedProvider.length === 0 || providerUrl == null || providerUrl.length === 0) {
+      return 'Please select a provider and copy the browser url into the textfield after configuring your search parameter.';
+    }
+    try {
+      const url = new URL(providerUrl);
+      if (selectedProvider.baseUrl.indexOf(url.origin) === -1) {
+        return 'The url you have copied is not valid.';
+      }
+    } catch (Exception) {
+      return 'The url you have copied is not valid.';
+    }
+    return null;
+  };
+
+  const onSubmit = (doStore) => {
+    if (doStore) {
+      const validationResult = validate();
+      if (validationResult == null) {
+        onData(
+          transform({
+            url: providerUrl,
+            id: selectedProvider.id,
+            name: selectedProvider.name,
+          })
+        );
+        setProviderUrl(null);
+        setSelectedProvider(null);
+        onVisibilityChanged(false);
+      } else {
+        setValidationMessage(validationResult);
+      }
+    } else {
+      setProviderUrl(null);
+      setSelectedProvider(null);
+      onVisibilityChanged(false);
+    }
+  };
+
+  return (
+    <Modal onClose={() => onVisibilityChanged(false)} onOpen={() => onVisibilityChanged(true)} open={visible}>
+      <Modal.Header>Adding a new Provider</Modal.Header>
+      <Modal.Content image>
+        <Modal.Description>
+          {validationMessage != null && (
+            <Message negative>
+              <Message.Header>Houston we have a problem...</Message.Header>
+              <p>{validationMessage}</p>
+            </Message>
+          )}
+
+          <p>
+            Provider are the <Icon name="heart" color="red" /> of Fredy. We're supporting multiple Provider such as
+            Immowelt, Kalaydo etc. Select a provider from the list below.
+            <br />
+            Fredy will then open the provider's url in a new tab.
+          </p>
+          <p>
+            You will need to configure your search parameter like you would do when you do a regular search on the
+            provider's website.
+            <br />
+            When the search results are shown on the website, copy the url and paste it into the textfield below.
+            <br />
+            <span style={{ color: '#ff0000' }}>
+              If you chose Immoscout as a provider, make sure to also add the scrapingAnt apiKey to the config.json.
+              (See readme)
+            </span>
+            <br />
+            <span style={{ color: '#ff0000' }}>
+              Do not forget to sort the results by date before copying the url to Fredy, so that Fredy always captures
+              the latest search results.
+            </span>
+          </p>
+          <Dropdown
+            placeholder="Select a provider"
+            className="providerMutator__fields"
+            selection
+            value={selectedProvider == null ? '' : selectedProvider.id}
+            options={provider
+              .map((pro) => {
+                return {
+                  key: pro.id,
+                  value: pro.id,
+                  text: pro.name,
+                };
+              })
+              .sort(sortProvider)}
+            onChange={(e, { value }) => {
+              const selectedProvider = provider.find((pro) => pro.id === value);
+              setSelectedProvider(selectedProvider);
+
+              window.open(selectedProvider.baseUrl);
+            }}
+          />
+          <br />
+          <br />
+          <Input
+            type="text"
+            placeholder="Provider Url"
+            width={10}
+            className="providerMutator__fields"
+            onBlur={(e) => {
+              setProviderUrl(e.target.value);
+            }}
+          />
+        </Modal.Description>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button color="black" onClick={() => onSubmit(false)}>
+          Cancel
+        </Button>
+        <Button content="Save" labelPosition="right" icon="checkmark" onClick={() => onSubmit(true)} positive />
+      </Modal.Actions>
+    </Modal>
+  );
+}