Refactored funnel report. Made BarChart more generic.

components/pages/reports/funnel/FunnelParameters.js

@@ -1,5 +1,6 @@
 import { useMessages } from 'hooks';
 import {
+  Button,
   Icon,
   Form,
   FormButtons,
@@ -8,29 +9,38 @@ import {
   PopupTrigger,
   Popup,
   SubmitButton,
+  Text,
   TextField,
 } from 'react-basics';
 import Icons from 'components/icons';
 import { updateReport } from 'store/reports';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import styles from './FunnelParameters.module.css';
 
 export function FunnelParameters({ report }) {
   const { formatMessage, labels } = useMessages();
   const ref = useRef(null);
   const { id, websiteId, parameters, isLoading } = report || {};
+  const queryDisabled = !websiteId || parameters?.urls?.length < 2;
 
   const handleSubmit = values => {
-    console.log({ values });
-    updateReport(id, { parameters: values, isLoading: false });
+    updateReport(id, { parameters: values, isLoading: false, update: Date.now() });
   };
 
-  console.log('PARAMETERS', parameters);
+  const handleAdd = url => {
+    updateReport(id, { parameters: { ...parameters, urls: parameters.urls.concat(url) } });
+  };
+
+  const handleRemove = index => {
+    const urls = [...parameters.urls];
+    urls.splice(index, 1);
+    updateReport(id, { parameters: { ...parameters, urls } });
+  };
 
   return (
     <>
       <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
-        <FormRow label="Window (minutes)">
+        <FormRow label={formatMessage(labels.window)}>
           <FormInput
             name="window"
             rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
@@ -38,11 +48,22 @@ export function FunnelParameters({ report }) {
             <TextField autoComplete="off" />
           </FormInput>
         </FormRow>
-        <FormRow label={formatMessage(labels.urls)} action={<AddURLButton />}>
-          hi
+        <FormRow label={formatMessage(labels.urls)} action={<AddURLButton onAdd={handleAdd} />}>
+          <div className={styles.urls}>
+            {parameters?.urls.map((url, index) => {
+              return (
+                <div key={index} className={styles.url}>
+                  <Text>{url}</Text>
+                  <Icon onClick={() => handleRemove(index)}>
+                    <Icons.Close />
+                  </Icon>
+                </div>
+              );
+            })}
+          </div>
         </FormRow>
         <FormButtons>
-          <SubmitButton variant="primary" disabled={!websiteId} loading={isLoading}>
+          <SubmitButton variant="primary" disabled={queryDisabled} loading={isLoading}>
             {formatMessage(labels.query)}
           </SubmitButton>
         </FormButtons>
@@ -51,14 +72,40 @@ export function FunnelParameters({ report }) {
   );
 }
 
-function AddURLButton() {
+function AddURLButton({ onAdd }) {
+  const [url, setUrl] = useState('');
+  const { formatMessage, labels } = useMessages();
+
+  const handleAdd = close => {
+    onAdd?.(url);
+    setUrl('');
+    close();
+  };
+
+  const handleChange = e => {
+    setUrl(e.target.value);
+  };
+
   return (
     <PopupTrigger>
       <Icon>
         <Icons.Plus />
       </Icon>
       <Popup className={styles.popup} position="right" alignment="start">
-        HALLO
+        {close => {
+          return (
+            <Form>
+              <FormRow label={formatMessage(labels.url)}>
+                <TextField name="url" value={url} onChange={handleChange} autoComplete="off" />
+              </FormRow>
+              <FormButtons>
+                <Button variant="primary" onClick={() => handleAdd(close)}>
+                  {formatMessage(labels.add)}
+                </Button>
+              </FormButtons>
+            </Form>
+          );
+        }}
       </Popup>
     </PopupTrigger>
   );