From a49a4e76466fb3c44cf6b8e1c68d0009e304a254 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 22 Jun 2018 14:24:27 -0700
Subject: [PATCH] Refactor ManualRefresh interface to be consistent with
 withRouter

Clarifies relationship between HOCs and how to define DashboardPage
props by extending from the props it will receive from its HOCs.

Co-authored-by: Delmer Reed <delmer814+1@gmail.com>
---
 ui/src/dashboards/containers/DashboardPage.tsx | 14 ++++++--------
 ui/src/shared/components/ManualRefresh.tsx     | 11 ++++++-----
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/ui/src/dashboards/containers/DashboardPage.tsx b/ui/src/dashboards/containers/DashboardPage.tsx
index 001d6ac333..58c396842c 100644
--- a/ui/src/dashboards/containers/DashboardPage.tsx
+++ b/ui/src/dashboards/containers/DashboardPage.tsx
@@ -87,7 +87,7 @@ interface DashboardActions {
   setZoomedTimeRangeAsync: DashboardActions.SetZoomedTimeRangeDispatcher
 }
 
-interface ContainerProps {
+interface Props extends ManualRefreshProps, WithRouterProps {
   source: Source
   sources: Source[]
   params: {
@@ -135,13 +135,11 @@ interface State {
   dashboardsNames: DashboardName[]
 }
 
-type ComposedProps = ContainerProps & ManualRefreshProps & WithRouterProps
-
 @ErrorHandling
-class DashboardPage extends Component<ComposedProps, State> {
+class DashboardPage extends Component<Props, State> {
   private intervalID: number
 
-  public constructor(props: ComposedProps) {
+  public constructor(props: Props) {
     super(props)
 
     this.state = {
@@ -188,7 +186,7 @@ class DashboardPage extends Component<ComposedProps, State> {
     this.getDashboardsNames()
   }
 
-  public componentWillReceiveProps(nextProps: ContainerProps) {
+  public componentWillReceiveProps(nextProps: Props) {
     const {source, getAnnotationsAsync, timeRange} = this.props
     if (this.props.autoRefresh !== nextProps.autoRefresh) {
       clearInterval(this.intervalID)
@@ -201,7 +199,7 @@ class DashboardPage extends Component<ComposedProps, State> {
     }
   }
 
-  public componentDidUpdate(prevProps: ContainerProps) {
+  public componentDidUpdate(prevProps: Props) {
     const prevPath = getDeep(prevProps.location, 'pathname', null)
     const thisPath = getDeep(this.props.location, 'pathname', null)
 
@@ -621,5 +619,5 @@ const mdtp = {
 }
 
 export default connect(mstp, mdtp)(
-  ManualRefresh<ComposedProps>(withRouter<ComposedProps>(DashboardPage))
+  ManualRefresh<Props>(withRouter<Props>(DashboardPage))
 )
diff --git a/ui/src/shared/components/ManualRefresh.tsx b/ui/src/shared/components/ManualRefresh.tsx
index 43df154935..9cc83b9918 100644
--- a/ui/src/shared/components/ManualRefresh.tsx
+++ b/ui/src/shared/components/ManualRefresh.tsx
@@ -9,11 +9,11 @@ interface ManualRefreshState {
   manualRefresh: number
 }
 
-const ManualRefresh = <P extends ManualRefreshProps>(
-  WrappedComponent: ComponentClass<P>
-): ComponentClass<P> =>
-  class extends Component<P, ManualRefreshState> {
-    public constructor(props: P) {
+function ManualRefresh<P>(
+  WrappedComponent: ComponentClass<P & ManualRefreshProps>
+): ComponentClass<P> {
+  return class extends Component<P & ManualRefreshProps, ManualRefreshState> {
+    public constructor(props: P & ManualRefreshProps) {
       super(props)
       this.state = {
         manualRefresh: Date.now(),
@@ -36,5 +36,6 @@ const ManualRefresh = <P extends ManualRefreshProps>(
       })
     }
   }
+}
 
 export default ManualRefresh