feat(ui) - funnels - issues filters

frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx

@@ -0,0 +1,21 @@
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+import React from 'react';
+import FunnelIssuesListItem from '../FunnelIssuesListItem';
+
+function FunnelIssuesList(props) {
+    const { funnelStore } = useStore();
+    const issues = useObserver(() => funnelStore.issues);
+
+    return (
+        <div>
+            {issues.map((issue, index) => (
+                <div key={index}>
+                    <FunnelIssuesListItem issue={issue} />
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default FunnelIssuesList;

frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/index.ts

@@ -0,0 +1 @@
+export { default } from './FunnelIssuesList';

frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface Props {
+    issue: any;
+}
+function FunnelIssuesListItem(props) {
+    return (
+        <div>
+            list item
+        </div>
+    );
+}
+
+export default FunnelIssuesListItem;

frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/index.ts

@@ -0,0 +1 @@
+export { default } from './FunnelIssuesListItem';

frontend/app/components/Dashboard/components/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx

@@ -1,8 +1,9 @@
-import React, { Component, ReactNode, FunctionComponent } from 'react';
+import React, { Component, ReactNode, FunctionComponent, useEffect } from 'react';
 import Select from 'Shared/Select'
 import { components } from 'react-select';
 import { Icon } from 'UI';
 import FunnelIssuesSelectedFilters from '../FunnelIssuesSelectedFilters';
+import { useStore } from 'App/mstore';
 
 const options = [
       { value: "click_rage", label: "Click Rage" },
@@ -20,15 +21,21 @@ const options = [
 ]
 
 function FunnelIssuesDropdown(props) {
+    const { funnelStore } = useStore();
     const [isOpen, setIsOpen] = React.useState(false);
-    const [selectedValues, setSelectedValues] = React.useState<any>(options.map(option => option.value));
+    const [selectedValues, setSelectedValues] = React.useState<any>([]);
     const filteredOptions = options.filter((option: any) => {
         return !selectedValues.includes(option.value);
     });
+
     const selectedOptions = options.filter((option: any) => {
         return selectedValues.includes(option.value);
     });
 
+    useEffect(() => {
+        funnelStore.updateKey('issuesFilter', selectedOptions);
+    }, [selectedOptions]);
+
     const handleChange = ({ value }: any) => {
         toggleSelectedValue(value);
     }
@@ -81,7 +88,7 @@ function FunnelIssuesDropdown(props) {
                     SingleValue: () => null,
                 }}
             />
-            <FunnelIssuesSelectedFilters options={selectedOptions} removeSelectedValue={toggleSelectedValue} />
+            <FunnelIssuesSelectedFilters removeSelectedValue={toggleSelectedValue} />
         </div>
     );
 }

frontend/app/components/Dashboard/components/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
 import { Icon } from 'UI';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
 
 interface Props {
-    options: any[];
     removeSelectedValue: (value: string) => void;
 }
 function FunnelIssuesSelectedFilters(props: Props) {
-    const { options, removeSelectedValue } = props;
+    const { funnelStore } = useStore();
+    const issuesFilter = useObserver(() => funnelStore.issuesFilter);
+    const { removeSelectedValue } = props;
+
     return (
         <div className="flex items-center flex-wrap">
-            {options.map((option, index) => (
+            {issuesFilter.map((option, index) => (
                 <div key={index} className="transition-all ml-2 mb-2 flex items-center border rounded-2xl bg-white select-none overflow-hidden">
                     <span className="pl-3 color-gray-dark">{option.label}</span>
                     <button className="ml-1 hover:bg-active-blue px-2 py-2" onClick={() => removeSelectedValue(option.value)}>

frontend/app/mstore/funnelStore.ts

@@ -17,6 +17,7 @@ export default class FunnelStore {
 
     issues: any[] = []
     isLoadingIssues: boolean = false
+    issuesFilter: any = []
     
     constructor() {
         makeAutoObservable(this, {