fix(ui): fix widget pagination (#570)

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

@@ -8,12 +8,13 @@ import { useStore } from "App/mstore";
 import { overPastString } from "App/dateRange";
 interface Props {
     metric: any;
+    data: any;
     isEdit: any;
     history: any;
     location: any;
 }
-function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
-    const { metric, isEdit = false } = props;
+function CustomMetricTableErrors(props: RouteComponentProps & Props) {
+    const { metric, isEdit = false, data } = props;
     const errorId = new URLSearchParams(props.location.search).get("errorId");
     const { showModal, hideModal } = useModal();
     const { dashboardStore } = useStore();
@@ -46,12 +47,12 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
     return (
         <NoContent
             title={`No errors found ${overPastString(period)}`}
-            show={!metric.data.errors || metric.data.errors.length === 0}
+            show={!data.errors || data.errors.length === 0}
             size="small"
         >
             <div className="pb-4">
-                {metric.data.errors &&
-                    metric.data.errors.map((error: any, index: any) => (
+                {data.errors &&
+                    data.errors.map((error: any, index: any) => (
                         <div key={index} className="border-b last:border-none">
                             <ErrorListItem
                                 error={error}
@@ -65,7 +66,7 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
                         <Pagination
                             page={metric.page}
                             totalPages={Math.ceil(
-                                metric.data.total / metric.limit
+                                data.total / metric.limit
                             )}
                             onPageChange={(page: any) =>
                                 metric.updateKey("page", page)
@@ -77,16 +78,14 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
                 )}
 
                 {!isEdit && (
-                    <ViewMore total={metric.data.total} limit={metric.limit} />
+                    <ViewMore total={data.total} limit={metric.limit} />
                 )}
             </div>
         </NoContent>
     );
 }
 
-export default withRouter(CustomMetricTableErrors) as React.FunctionComponent<
-    RouteComponentProps<Props>
->;
+export default withRouter<Props & RouteComponentProps, React.FunctionComponent>(CustomMetricTableErrors);
 
 const ViewMore = ({ total, limit }: any) =>
     total > limit && (

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

@@ -9,10 +9,11 @@ interface Props {
     metric: any;
     isTemplate?: boolean;
     isEdit?: boolean;
+    data: any;
 }
 
 function CustomMetricTableSessions(props: Props) {
-    const { isEdit = false, metric } = props;
+    const { isEdit = false, metric, data } = props;
     const { dashboardStore } = useStore();
     const period = dashboardStore.period;
 
@@ -20,16 +21,16 @@ function CustomMetricTableSessions(props: Props) {
         <NoContent
             show={
                 !metric ||
-                !metric.data ||
-                !metric.data.sessions ||
-                metric.data.sessions.length === 0
+                !data ||
+                !data.sessions ||
+                data.sessions.length === 0
             }
             size="small"
             title={`No sessions found ${overPastString(period)}`}
         >
             <div className="pb-4">
-                {metric.data.sessions &&
-                    metric.data.sessions.map((session: any, index: any) => (
+                {data.sessions &&
+                    data.sessions.map((session: any, index: any) => (
                         <div
                             className="border-b last:border-none"
                             key={session.sessionId}
@@ -43,19 +44,19 @@ function CustomMetricTableSessions(props: Props) {
                         <Pagination
                             page={metric.page}
                             totalPages={Math.ceil(
-                                metric.data.total / metric.limit
+                                data.total / metric.limit
                             )}
                             onPageChange={(page: any) =>
                                 metric.updateKey("page", page)
                             }
-                            limit={metric.data.total}
+                            limit={data.total}
                             debounceRequest={500}
                         />
                     </div>
                 )}
 
                 {!isEdit && (
-                    <ViewMore total={metric.data.total} limit={metric.limit} />
+                    <ViewMore total={data.total} limit={metric.limit} />
                 )}
             </div>
         </NoContent>

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -94,15 +94,15 @@ function WidgetChart(props: Props) {
 
         const metricWithData = { ...metric, data };
         if (metricType === 'sessions') {
-            return <SessionWidget metric={metricWithData} />
+            return <SessionWidget metric={metric} data={data} />
         }
 
         if (metricType === 'errors') {
-            return <ErrorsWidget metric={metricWithData} />
+            return <ErrorsWidget metric={metric} data={data} />
         }
 
         if (metricType === 'funnel') {
-            return <FunnelWidget metric={metricWithData} isWidget={isWidget || isTemplate} />
+            return <FunnelWidget metric={metric} data={data} isWidget={isWidget || isTemplate} />
         }
 
         if (metricType === 'predefined') {
@@ -137,7 +137,8 @@ function WidgetChart(props: Props) {
             if (metricOf === FilterKey.SESSIONS) {
                 return (
                     <CustomMetricTableSessions
-                        metric={metricWithData}
+                        metric={metric}
+                        data={data}
                         isTemplate={isTemplate}
                         isEdit={!isWidget && !isTemplate}
                     />
@@ -146,7 +147,8 @@ function WidgetChart(props: Props) {
             if (metricOf === FilterKey.ERRORS) {
                 return (
                     <CustomMetricTableErrors
-                        metric={metricWithData}
+                        metric={metric}
+                        data={data}
                         // isTemplate={isTemplate}
                         isEdit={!isWidget && !isTemplate}
                     />

frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx

@@ -9,11 +9,12 @@ import { useModal } from 'App/components/Modal';
 
 interface Props {
     metric: Widget;
-    isWidget?: boolean
+    isWidget?: boolean;
+    data: any;
 }
 function FunnelWidget(props: Props) {
-    const { metric, isWidget = false } = props;
-    const funnel = metric.data.funnel || { stages: [] };
+    const { metric, isWidget = false, data } = props;
+    const funnel = data.funnel || { stages: [] };
     const totalSteps = funnel.stages.length;
     const stages = isWidget ? [...funnel.stages.slice(0, 1), funnel.stages[funnel.stages.length - 1]] : funnel.stages;
     const hasMoreSteps = funnel.stages.length > 2;
@@ -124,4 +125,4 @@ function BarActions({ bar }: any) {
     ))
 }
 
-export default FunnelWidget;
+export default FunnelWidget;