From fd68f7b576f2f3f6ebe5a5ea2f12e6d0e8444667 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 13 May 2022 13:07:35 +0200 Subject: [PATCH] feat(ui) - funnels - path changes --- .../FunnelIssues/FunnelIssues.tsx | 0 .../FunnelIssueDetails/FunnelIssueDetails.tsx | 32 +++++++++++++++++++ .../components/FunnelIssueDetails/index.ts | 1 + .../FunnelIssueGraph/FunnelIssueGraph.tsx | 0 .../components/FunnelIssueGraph/index.ts | 0 .../FunnelIssuesList/FunnelIssuesList.tsx | 0 .../components/FunnelIssuesList/index.ts | 0 .../FunnelIssuesListItem.tsx | 0 .../components/FunnelIssuesListItem/index.ts | 0 .../{ => Funnels}/FunnelIssues/index.ts | 0 .../FunnelIssuesDropdown.tsx | 0 .../FunnelIssuesDropdown/index.ts | 0 .../FunnelIssuesSelectedFilters.tsx | 0 .../FunnelIssuesSelectedFilters/index.ts | 0 .../FunnelIssuesSort/FunnelIssuesSort.tsx | 0 .../{ => Funnels}/FunnelIssuesSort/index.ts | 0 .../WidgetSubDetailsView.tsx | 7 ++++ .../components/WidgetView/WidgetView.tsx | 2 +- frontend/app/mstore/funnelStore.ts | 18 +++++++++++ frontend/app/mstore/types/funnel.ts | 5 +++ 20 files changed, 64 insertions(+), 1 deletion(-) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssues/FunnelIssues.tsx (100%) create mode 100644 frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/FunnelIssueDetails.tsx create mode 100644 frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/index.ts rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssues/components/FunnelIssueGraph/FunnelIssueGraph.tsx (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssues/components/FunnelIssueGraph/index.ts (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssues/components/FunnelIssuesList/index.ts (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssues/components/FunnelIssuesListItem/index.ts (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssues/index.ts (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssuesDropdown/index.ts (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssuesSelectedFilters/index.ts (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssuesSort/FunnelIssuesSort.tsx (100%) rename frontend/app/components/Dashboard/components/{ => Funnels}/FunnelIssuesSort/index.ts (100%) diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/FunnelIssues.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssues/FunnelIssues.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/FunnelIssueDetails.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/FunnelIssueDetails.tsx new file mode 100644 index 000000000..06c845da9 --- /dev/null +++ b/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 ( + + + + ); +} + +export default FunnelIssueDetails; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/index.ts new file mode 100644 index 000000000..486b120d5 --- /dev/null +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/index.ts @@ -0,0 +1 @@ +export { default } from './FunnelIssueDetails'; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssueGraph/FunnelIssueGraph.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueGraph/FunnelIssueGraph.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssueGraph/FunnelIssueGraph.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueGraph/FunnelIssueGraph.tsx diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssueGraph/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueGraph/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssueGraph/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueGraph/index.ts diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesList/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesList/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesList/index.ts diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesListItem/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssues/components/FunnelIssuesListItem/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesListItem/index.ts diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssues/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssues/index.ts diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesDropdown/FunnelIssuesDropdown.tsx diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesDropdown/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesDropdown/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssuesDropdown/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesDropdown/index.ts diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesSelectedFilters/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSelectedFilters/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssuesSelectedFilters/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSelectedFilters/index.ts diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/FunnelIssuesSort.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/FunnelIssuesSort.tsx diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesSort/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/FunnelIssuesSort/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/index.ts diff --git a/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx index 12e7d821b..da772e747 100644 --- a/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx +++ b/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' } ]} /> + + + {/* {isFunnel && } */} + ); } diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx index 789c7d895..e6c29f4af 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx +++ b/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; diff --git a/frontend/app/mstore/funnelStore.ts b/frontend/app/mstore/funnelStore.ts index ad1020a1a..181305661 100644 --- a/frontend/app/mstore/funnelStore.ts +++ b/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 { + 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 + }) + }) + } } diff --git a/frontend/app/mstore/types/funnel.ts b/frontend/app/mstore/types/funnel.ts index 95c95e5c4..ffe7037ef 100644 --- a/frontend/app/mstore/types/funnel.ts +++ b/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 !== '' + } } \ No newline at end of file