feat(ui) - funnels - path changes

frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/FunnelIssueDetails.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+import { Loader } from 'UI';
+
+interface Props {
+    funnelId: string;
+    issueId: string;
+}
+function FunnelIssueDetails(props: Props) {
+    const { funnelStore } = useStore();
+    const { funnelId, issueId } = props;
+    const funnel = useObserver(() => funnelStore.instance);
+    const funnelIssue = useObserver(() => funnelStore.issueInstance);
+    const loading = useObserver(() => funnelStore.isLoadingIssues);
+
+    useEffect(() => {
+        if (!funnel || !funnel.exists()) { 
+            funnelStore.fetchFunnel(props.funnelId);
+        }
+
+        funnelStore.fetchIssue(funnelId, issueId);
+    }, []);
+
+    return (
+        <Loader loading={loading}>
+            
+        </Loader>
+    );
+}
+
+export default FunnelIssueDetails;

frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/index.ts

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

frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx

@@ -3,6 +3,8 @@ import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import { withSiteId } from 'App/routes';
+import { Loader } from 'UI';
+// import FunnelSubDetailsView from './FunnelSubDetailsView';
 
 interface Props {
     history: any;
@@ -14,6 +16,7 @@ function WidgetSubDetailsView(props: Props) {
     const { metricStore } = useStore();
     const widget = useObserver(() => metricStore.instance);
     const loadingWidget = useObserver(() => metricStore.isLoading);
+    const isFunnel = widget.metricType === 'funnel';
 
     useEffect(() => {
         if (!widget || !widget.exists()) {
@@ -30,6 +33,10 @@ function WidgetSubDetailsView(props: Props) {
                     { label: 'Sub Details' }
                 ]}
             />
+
+            <Loader loading={loadingWidget}>
+                {/* {isFunnel && <FunnelSubDetailsView widget={widget} />} */}
+            </Loader>
         </div>
     );
 }

frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx

@@ -7,7 +7,7 @@ import { Icon, BackLink, Loader } from 'UI';
 import { useObserver } from 'mobx-react-lite';
 import { withSiteId } from 'App/routes';
 import WidgetName from '../WidgetName';
-import FunnelIssues from '../FunnelIssues/FunnelIssues';
+import FunnelIssues from '../Funnels/FunnelIssues/FunnelIssues';
 import Breadcrumb from 'Shared/Breadcrumb';
 interface Props {
     history: any;

frontend/app/mstore/funnelStore.ts

@@ -18,6 +18,8 @@ export default class FunnelStore {
     issues: any[] = []
     isLoadingIssues: boolean = false
     issuesFilter: any = []
+
+    issueInstance: FunnelIssue | null = null
     
     constructor() {
         makeAutoObservable(this, {
@@ -118,6 +120,22 @@ export default class FunnelStore {
             })
         })
     }
+
+    fetchIssue(funnelId: string, issueId: string): Promise<any> {
+        this.isLoadingIssues = true
+        return new Promise((resolve, reject) => {
+            funnelService.fetchIssue(funnelId, issueId)
+                .then(response => {
+                    this.issueInstance = new FunnelIssue().fromJSON(response)
+                    resolve(this.issueInstance)
+                }).catch(error => {
+                    reject(error)
+                }
+            ).finally(() => {
+                this.isLoadingIssues = false
+            })
+        })
+    }
 }
 
 

frontend/app/mstore/types/funnel.ts

@@ -11,6 +11,7 @@ export interface IFunnel {
     isPublic: boolean
     fromJSON: (json: any) => void
     toJSON: () => any
+    exists: () => boolean
 }
 
 export default class Funnel implements IFunnel {
@@ -44,4 +45,8 @@ export default class Funnel implements IFunnel {
             conversionRate: this.conversionRate,
         }
     }
+
+    exists(): boolean {
+        return this.funnelId !== ''
+    }
 }