change(ui) - checking for user login

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx

@@ -1,22 +1,52 @@
 import React from 'react';
 import SessionItem from 'Shared/SessionItem';
+import { Pagination } from 'UI';
 
+const PER_PAGE = 10;
 interface Props {
     data: any
     metric?: any
     isTemplate?: boolean;
+    isEdit?: boolean;
 }
 
 function CustomMetricTableSessions(props: Props) {
-    const { data = { sessions: [] }, metric = {}, isTemplate } = props;
-    console.log('data', data)
+    const { data = { sessions: [], total: 0 }, isEdit = false, metric = {}, isTemplate } = props;
+    const currentPage = 1;
+    
     return (
         <div>
             {data.sessions && data.sessions.map((session: any, index: any) => (
                 <SessionItem session={session} />
             ))}
+            
+            {isEdit && (
+                <div className="my-6 flex items-center justify-center">
+                    <Pagination
+                        page={currentPage}
+                        totalPages={Math.ceil(data.total / PER_PAGE)}
+                        onPageChange={(page: any) => this.props.updateCurrentPage(page)}
+                        limit={PER_PAGE}
+                        debounceRequest={500}
+                    />
+                </div>
+            )}
+
+            {!isEdit && (
+                <ViewMore total={data.total} />
+            )}
         </div>
     );
 }
 
-export default CustomMetricTableSessions;
+export default CustomMetricTableSessions;
+
+const ViewMore = ({ total }: any) => total > PER_PAGE && (
+    <div className="my-4 flex items-center justify-center cursor-pointer w-fit mx-auto">
+        <div className="text-center">
+            <div className="color-teal text-lg">
+                All <span className="font-medium">{total}</span> sessions
+            </div>
+        </div>
+    </div>
+);

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx

@@ -68,7 +68,7 @@ function CustomMetricWidget(props: Props) {
         <div className="flex items-center">
           {isTimeSeries && (
             <>
-              <span className="color-gray-medium mr-2">Visualization</span>
+              <span className="color-gray-medium mr-4">Visualization</span>
               <SegmentSelection
                 name="viewType"
                 className="my-3"

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

@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 import { useStore } from 'App/mstore';
 import cn from 'classnames'
-import { Icon, BackLink, Loader } from 'UI';
+import { Icon, Loader } from 'UI';
 import WidgetForm from '../WidgetForm';
 import WidgetPreview from '../WidgetPreview';
 import WidgetSessions from '../WidgetSessions';
 import { useObserver } from 'mobx-react-lite';
 import WidgetName from '../WidgetName';
 import { withSiteId } from 'App/routes';
-
 import FunnelIssues from '../Funnels/FunnelIssues/FunnelIssues';
 import Breadcrumb from 'Shared/Breadcrumb';
 interface Props {
@@ -81,8 +80,12 @@ function WidgetView(props: Props) {
                 </div>
 
                 <WidgetPreview  className="mt-8" />
-                { (widget.metricType === 'table' || widget.metricType === 'timeseries') && <WidgetSessions className="mt-8" /> }
-                { widget.metricType === 'funnel' && <FunnelIssues /> }
+                { widget.metricOf !== 'SESSIONS' && widget.metricOf !== 'ERRORS' && (
+                    <>
+                        { (widget.metricType === 'table' || widget.metricType === 'timeseries') && <WidgetSessions className="mt-8" /> }
+                        { widget.metricType === 'funnel' && <FunnelIssues /> }
+                    </>
+                )}
             </div>
         </Loader>
     ));

frontend/app/duck/user.js

@@ -41,7 +41,7 @@ const reducer = (state = initialState, action = {}) => {
     case RESET_PASSWORD.SUCCESS:
     case UPDATE_PASSWORD.SUCCESS:
     case LOGIN.SUCCESS:
-      state.set('account', Account({...action.data.user, smtp: action.data.client.smtp }))
+      state.set('account', Account({...action.data.user }))
     case SIGNUP.SUCCESS:
       state.set('account', Account(action.data.user)).set('onboarding', true);
     case REQUEST_RESET_PASSWORD.SUCCESS:

frontend/app/mstore/dashboardStore.ts

@@ -435,7 +435,7 @@ export default class DashboardStore implements IDashboardSotre {
     fetchMetricChartData(metric: IWidget, data: any, isWidget: boolean = false): Promise<any> {
         const period = this.period.toTimestamps()
         return new Promise((resolve, reject) => {
-            return metricService.getMetricChartData(metric, { ...period, ...data, key: metric.predefinedKey }, isWidget)
+            return metricService.getMetricChartData(metric, { ...period, ...data, key: metric.predefinedKey, page: 1, limit: 10 }, isWidget)
                 .then((data: any) => {
                     if (metric.metricType === 'predefined' && metric.viewType === 'overview') {
                         const _data = { ...data, chart: getChartFormatter(this.period)(data.chart) }