feat(ui) - funnels - wip

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 {
             <Route exact strict path={ withSiteId(ASSIST_PATH, siteIdList) } component={ Assist } />
             <Route exact strict path={ withSiteId(ERRORS_PATH, siteIdList) } component={ Errors } />
             <Route exact strict path={ withSiteId(ERROR_PATH, siteIdList) } component={ Errors } />
-            <Route exact strict path={ withSiteId(FUNNEL_PATH, siteIdList) } component={ Funnels } />
+            <Route exact strict path={ withSiteId(FUNNEL_PATH, siteIdList) } component={ FunnelPage } />
+            {/* <Route exact strict path={ withSiteId(FUNNEL_PATH, siteIdList) } component={ Funnels } /> */}
             <Route exact strict path={ withSiteId(FUNNEL_ISSUE_PATH, siteIdList) } component={ FunnelIssue } />
             <Route exact strict path={ withSiteId(SESSIONS_PATH, siteIdList) } component={ BugFinder } />
             <Route exact strict path={ withSiteId(SESSION_PATH, siteIdList) } component={ Session } />

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 (
+        <div>
+            
+        </div>
+    );
+}
+
+export default FunnelItem;

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 (
+        <div>
+            <div>here</div>
+            {list.map(funnel => (
+                <div key={funnel.funnelId}>
+                    <h1>{funnel.name}</h1>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default FunnelList;

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 (
+        <div className="page-margin container-90">
+            <Switch>
+                <Route path="/">
+                    <FunnelList />
+                </Route>
+            </Switch>
+        </div>
+    );
+}
+
+export default FunnelPage;

frontend/app/components/Funnels/FunnelPage/index.ts

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

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) => {
         <ErrorsBadge />
         { 'Errors' }
       </NavLink>
+      <NavLink
+        to={ withSiteId(FUNNELS_PATH, siteId) }
+        className={ styles.nav }
+        activeClassName={ styles.active }
+      >
+        { 'Funnels' }
+      </NavLink>
       <NavLink
         to={ withSiteId(DASHBOARD_PATH, siteId) }
         className={ styles.nav }

frontend/app/mstore/index.tsx

@@ -2,21 +2,25 @@ import React from 'react';
 import DashboardStore, { IDashboardSotre } from './dashboardStore';
 import MetricStore, { IMetricStore } from './metricStore';
 import APIClient from 'App/api_client';
-import { dashboardService, metricService } from 'App/services';
+import { dashboardService, funnelService, metricService } from 'App/services';
+import FunnelStore from './funnelStore';
 
 export class RootStore {
     dashboardStore: IDashboardSotre;
     metricStore: IMetricStore;
+    funnelStore: FunnelStore;
 
     constructor() {
         this.dashboardStore = new DashboardStore();
         this.metricStore = new MetricStore();
+        this.funnelStore = new FunnelStore();
     }
 
     initClient() {
       const client  = new APIClient();
       dashboardService.initClient(client)
       metricService.initClient(client)
+      funnelService.initClient(client)
     }
 }
 

frontend/app/routes.js

@@ -91,6 +91,7 @@ export const liveSession = (sessionId = ':sessionId', hash) => 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(),