From f40403f4e9adc6fce884cca392cbb1a9987fdebb Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 12 May 2022 14:31:44 +0200
Subject: [PATCH] feat(ui) - funnels - issues filters

---
 .../FunnelIssuesList/FunnelIssuesList.tsx     | 21 +++++++++++++++++++
 .../components/FunnelIssuesList/index.ts      |  1 +
 .../FunnelIssuesListItem.tsx                  | 14 +++++++++++++
 .../components/FunnelIssuesListItem/index.ts  |  1 +
 .../FunnelIssuesDropdown.tsx                  | 13 +++++++++---
 .../FunnelIssuesSelectedFilters.tsx           | 10 ++++++---
 frontend/app/mstore/funnelStore.ts            |  1 +
 7 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx
 create mode 100644 frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/index.ts
 create mode 100644 frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx
 create mode 100644 frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/index.ts

diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx b/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx
new file mode 100644
index 000000000..8a6f05c6d
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/index.ts b/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/index.ts
new file mode 100644
index 000000000..8bab257bb
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/index.ts
@@ -0,0 +1 @@
+export { default } from './FunnelIssuesList';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx b/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx
new file mode 100644
index 000000000..6e5bb65c0
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/index.ts b/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/index.ts
new file mode 100644
index 000000000..f8237e361
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/index.ts
@@ -0,0 +1 @@
+export { default } from './FunnelIssuesListItem';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx b/frontend/app/components/Dashboard/components/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx
index 7ca5757cd..7bf620cd1 100644
--- a/frontend/app/components/Dashboard/components/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx
+++ b/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>
     );
 }
diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx b/frontend/app/components/Dashboard/components/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx
index c36ad5044..a4bb3909e 100644
--- a/frontend/app/components/Dashboard/components/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx
+++ b/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)}>
diff --git a/frontend/app/mstore/funnelStore.ts b/frontend/app/mstore/funnelStore.ts
index 87ac2e735..c339de92f 100644
--- a/frontend/app/mstore/funnelStore.ts
+++ b/frontend/app/mstore/funnelStore.ts
@@ -17,6 +17,7 @@ export default class FunnelStore {
 
     issues: any[] = []
     isLoadingIssues: boolean = false
+    issuesFilter: any = []
     
     constructor() {
         makeAutoObservable(this, {