From b26f2e87bfcb92424312be87185ab26638f1c1d4 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 13 Jun 2022 14:04:16 +0200 Subject: [PATCH] feat(ui) - funnels - issue details --- .../FunnelIssueDetails/FunnelIssueDetails.tsx | 30 ++++++------ .../FunnelIssueModal/FunnelIssueModal.tsx | 5 +- .../FunnelIssuesListItem.tsx | 48 +++++++++---------- frontend/app/mstore/types/widget.ts | 13 +++++ frontend/app/services/MetricService.ts | 6 +++ 5 files changed, 63 insertions(+), 39 deletions(-) diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx index 3bde57674..6a0a02897 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useStore } from 'App/mstore'; import { useObserver } from 'mobx-react-lite'; import { Loader } from 'UI'; @@ -6,23 +6,25 @@ import FunnelIssuesListItem from '../FunnelIssuesListItem'; import SessionItem from 'App/components/shared/SessionItem/SessionItem'; 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); + const { dashboardStore, metricStore } = useStore(); + const { issueId } = props; + const filter = useObserver(() => dashboardStore.drillDownFilter); + const widget = useObserver(() => metricStore.instance); + const [loading, setLoading] = useState(false); + const [funnelIssue, setFunnelIssue] = useState(null); + const [sessions, setSessions] = useState([]); useEffect(() => { - if (!funnel || !funnel.exists()) { - // funnelStore.fetchFunnel(props.funnelId); - funnelStore.fetchFunnel('143'); - } - - funnelStore.fetchIssue(funnelId, issueId); + setLoading(true); + widget.fetchIssue(widget.metricId, issueId, filter).then((resp: any) => { + setFunnelIssue(resp.issue); + setSessions(resp.sessions); + }).finally(() => { + setLoading(false); + }); }, []); return ( @@ -33,7 +35,7 @@ function FunnelIssueDetails(props: Props) { />}
- {funnelIssue && funnelIssue.sessions.map(session => ( + {sessions.map((session: any) => ( ))}
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueModal/FunnelIssueModal.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueModal/FunnelIssueModal.tsx index d33cf2dc8..bf9b6acf8 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueModal/FunnelIssueModal.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueModal/FunnelIssueModal.tsx @@ -2,11 +2,13 @@ import React from 'react'; import { withRouter } from 'react-router-dom'; import { useStore } from 'App/mstore'; import { useModal } from 'App/components/Modal'; +import FunnelIssueDetails from '../FunnelIssueDetails'; interface Props { - + issueId: string; } function FunnelIssueModal(props: Props) { + const { issueId } = props; const { hideModal } = useModal(); return (
@@ -14,6 +16,7 @@ function FunnelIssueModal(props: Props) { className="border-r shadow p-4 h-screen" style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%' }} > +
); diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesListItem/FunnelIssuesListItem.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesListItem/FunnelIssuesListItem.tsx index 999c01103..5779ec541 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesListItem/FunnelIssuesListItem.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesListItem/FunnelIssuesListItem.tsx @@ -13,7 +13,7 @@ function FunnelIssuesListItem(props) { const { issue, inDetails = false } = props; const { showModal } = useModal(); const onClick = () => { - showModal(, { right: true }); + showModal(, { right: true }); } return (
null}> @@ -30,49 +30,49 @@ function FunnelIssuesListItem(props) {
{inDetails && ( -
-
{issue.title}
-
- +
+
{issue.title}
+
+ +
-
)} {!inDetails && ( -
-
{issue.title}
-
- +
+
{issue.title}
+
+ +
-
)}
-
{issue.affectedUsers}
-
Affected Users
+
{issue.affectedUsers}
+
Affected Users
-
{issue.conversionImpact}%
-
Conversion Impact
+
{issue.conversionImpact}%
+
Conversion Impact
-
{issue.lostConversions}
-
Lost Conversions
+
{issue.lostConversions}
+
Lost Conversions
{inDetails && (
- -
- - - -
+ +
+ + + +
)} -
+ ); } diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index a78b7f35f..782c46150 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -225,4 +225,17 @@ export default class Widget implements IWidget { }) }) } + + fetchIssue(funnelId: any, issueId: any, params: any): Promise { + return new Promise((resolve, reject) => { + metricService.fetchIssue(funnelId, issueId, params).then((response: any) => { + resolve({ + issue: new Funnelissue().fromJSON(response.issue), + sessions: response.sessions.map((s: any) => new Session().fromJson(s)), + }) + }).catch((error: any) => { + reject(error) + }) + }) + } } \ No newline at end of file diff --git a/frontend/app/services/MetricService.ts b/frontend/app/services/MetricService.ts index f30dbd32d..26b47aefb 100644 --- a/frontend/app/services/MetricService.ts +++ b/frontend/app/services/MetricService.ts @@ -108,4 +108,10 @@ export default class MetricService implements IMetricService { .then((response: { json: () => any; }) => response.json()) .then((response: { data: any; }) => response.data || {}); } + + fetchIssue(funnelId: string, issueId: string, params: any): Promise { + return this.client.post(`/funnels/${funnelId}/issues/${issueId}/sessions`, params) + .then((response: { json: () => any; }) => response.json()) + .then((response: { data: any; }) => response.data || {}); + } } \ No newline at end of file