diff --git a/frontend/app/Router.js b/frontend/app/Router.js index ab41173bd..e3250f892 100644 --- a/frontend/app/Router.js +++ b/frontend/app/Router.js @@ -19,6 +19,7 @@ const DashboardPure = lazy(() => import('Components/Dashboard/NewDashboard')); const ErrorsPure = lazy(() => import('Components/Errors/Errors')); const FunnelDetails = lazy(() => import('Components/Funnels/FunnelDetails')); const FunnelIssueDetails = lazy(() => import('Components/Funnels/FunnelIssueDetails')); +const FunnelPagePure = lazy(() => import('Components/Funnels/FunnelPage')); import WidgetViewPure from 'Components/Dashboard/components/WidgetView'; import Header from 'Components/Header/Header'; // import ResultsModal from 'Shared/Results/ResultsModal'; @@ -41,13 +42,13 @@ import ModalRoot from './components/Modal/ModalRoot'; const BugFinder = withSiteIdUpdater(BugFinderPure); const Dashboard = withSiteIdUpdater(DashboardPure); -const WidgetView = withSiteIdUpdater(WidgetViewPure); const Session = withSiteIdUpdater(SessionPure); const LiveSession = withSiteIdUpdater(LiveSessionPure); const Assist = withSiteIdUpdater(AssistPure); const Client = withSiteIdUpdater(ClientPure); const Onboarding = withSiteIdUpdater(OnboardingPure); const Errors = withSiteIdUpdater(ErrorsPure); +const FunnelPage = withSiteIdUpdater(FunnelPagePure); const Funnels = withSiteIdUpdater(FunnelDetails); const FunnelIssue = withSiteIdUpdater(FunnelIssueDetails); const withSiteId = routes.withSiteId; @@ -66,7 +67,8 @@ const SESSIONS_PATH = routes.sessions(); const ASSIST_PATH = routes.assist(); const ERRORS_PATH = routes.errors(); const ERROR_PATH = routes.error(); -const FUNNEL_PATH = routes.funnel(); +const FUNNEL_PATH = routes.funnels(); +// const FUNNEL_DETAIL_PATH = routes.funnel(); const FUNNEL_ISSUE_PATH = routes.funnelIssue(); const SESSION_PATH = routes.session(); const LIVE_SESSION_PATH = routes.liveSession(); @@ -213,7 +215,8 @@ class Router extends React.Component { - + + {/* */} diff --git a/frontend/app/components/Funnels/FunnelItem/FunnelItem.js b/frontend/app/components/Funnels/FunnelItem/FunnelItem.js__ similarity index 100% rename from frontend/app/components/Funnels/FunnelItem/FunnelItem.js rename to frontend/app/components/Funnels/FunnelItem/FunnelItem.js__ diff --git a/frontend/app/components/Funnels/FunnelItem/FunnelItem.tsx b/frontend/app/components/Funnels/FunnelItem/FunnelItem.tsx new file mode 100644 index 000000000..1125eecbd --- /dev/null +++ b/frontend/app/components/Funnels/FunnelItem/FunnelItem.tsx @@ -0,0 +1,15 @@ +import { IFunnel } from 'App/mstore/types/funnel'; +import React from 'react'; + +interface Props { + funnel: IFunnel +} +function FunnelItem(props: Props) { + return ( +
+ +
+ ); +} + +export default FunnelItem; \ No newline at end of file diff --git a/frontend/app/components/Funnels/FunnelList/FunnelList.js b/frontend/app/components/Funnels/FunnelList/FunnelList.js__ similarity index 100% rename from frontend/app/components/Funnels/FunnelList/FunnelList.js rename to frontend/app/components/Funnels/FunnelList/FunnelList.js__ diff --git a/frontend/app/components/Funnels/FunnelList/FunnelList.tsx b/frontend/app/components/Funnels/FunnelList/FunnelList.tsx new file mode 100644 index 000000000..d14efe93f --- /dev/null +++ b/frontend/app/components/Funnels/FunnelList/FunnelList.tsx @@ -0,0 +1,27 @@ +import { useStore } from 'App/mstore'; +import { useObserver } from 'mobx-react-lite'; +import React, { useEffect } from 'react'; + +function FunnelList(props) { + const { funnelStore } = useStore() + const list = useObserver(() => funnelStore.list) + + useEffect(() => { + if (list.length === 0) { + funnelStore.fetchFunnels() + } + }, []) + + return ( +
+
here
+ {list.map(funnel => ( +
+

{funnel.name}

+
+ ))} +
+ ); +} + +export default FunnelList; \ No newline at end of file diff --git a/frontend/app/components/Funnels/FunnelPage/FunnelPage.tsx b/frontend/app/components/Funnels/FunnelPage/FunnelPage.tsx new file mode 100644 index 000000000..c26c4be08 --- /dev/null +++ b/frontend/app/components/Funnels/FunnelPage/FunnelPage.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Switch, Route } from 'react-router'; +import FunnelList from '../FunnelList'; + +function FunnelPage(props) { + return ( +
+ + + + + +
+ ); +} + +export default FunnelPage; \ No newline at end of file diff --git a/frontend/app/components/Funnels/FunnelPage/index.ts b/frontend/app/components/Funnels/FunnelPage/index.ts new file mode 100644 index 000000000..b194e695f --- /dev/null +++ b/frontend/app/components/Funnels/FunnelPage/index.ts @@ -0,0 +1 @@ +export { default } from './FunnelPage'; \ No newline at end of file diff --git a/frontend/app/components/Header/Header.js b/frontend/app/components/Header/Header.js index 219463499..4982a302e 100644 --- a/frontend/app/components/Header/Header.js +++ b/frontend/app/components/Header/Header.js @@ -7,6 +7,7 @@ import { assist, client, errors, + funnels, dashboard, withSiteId, CLIENT_DEFAULT_TAB, @@ -30,6 +31,7 @@ const DASHBOARD_PATH = dashboard(); const SESSIONS_PATH = sessions(); const ASSIST_PATH = assist(); const ERRORS_PATH = errors(); +const FUNNELS_PATH = funnels(); const CLIENT_PATH = client(CLIENT_DEFAULT_TAB); const AUTOREFRESH_INTERVAL = 30 * 1000; @@ -99,6 +101,13 @@ const Header = (props) => { { 'Errors' } + + { 'Funnels' } + hashed(`/assist/$ export const errors = params => queried('/errors', params); export const error = (id = ':errorId', hash) => hashed(`/errors/${ id }`, hash); +export const funnels = params => queried('/funnels', params) export const funnel = (id = ':funnelId', hash) => hashed(`/funnels/${ id }`, hash); export const funnelIssue = (id = ':funnelId', issueId = ':issueId', hash) => hashed(`/funnels/${ id }/${ issueId}`, hash); @@ -110,7 +111,6 @@ export const metrics = () => `/metrics`; export const metricCreate = () => `/metrics/create`; export const metricDetails = (id = ':metricId', hash) => hashed(`/metrics/${ id }`, hash); - export const RESULTS_QUERY_KEY = 'results'; export const METRICS_QUERY_KEY = 'metrics'; export const SOURCE_QUERY_KEY = 'source'; @@ -134,6 +134,7 @@ const REQUIRED_SITE_ID_ROUTES = [ error(''), errors(), onboarding(''), + funnels(''), funnel(''), funnelIssue(''), ]; @@ -161,6 +162,7 @@ export function isRoute(route, path){ const SITE_CHANGE_AVALIABLE_ROUTES = [ sessions(), + funnels(), assist(), dashboard(), metrics(),