Add hook and HOC for our history implementation

1 files changed, 18 insertions, 0 deletions

diff --git a/gui/src/renderer/lib/history.ts b/gui/src/renderer/lib/history.tsx
index c3a06b98e3..13968e29b9 100644
--- a/gui/src/renderer/lib/history.ts
+++ b/gui/src/renderer/lib/history.tsx
@@ -1,4 +1,6 @@
 import { Location, Action, LocationDescriptor } from 'history';
+import React from 'react';
+import { RouteComponentProps, useHistory as useReactRouterHistory, withRouter } from 'react-router';
 
 export interface ITransitionSpecification {
   name: string;
@@ -178,3 +180,19 @@ export default class History {
     return Math.random().toString(36).substr(8);
   }
 }
+
+export function useHistory(): History {
+  return useReactRouterHistory() as History;
+}
+
+export interface IHistoryProps {
+  history: History;
+}
+
+export function withHistory<P>(BaseComponent: React.ComponentType<P & IHistoryProps>) {
+  return withRouter((props: P & RouteComponentProps) => {
+    const history = props.history as History;
+    const mergedProps = ({ ...props, history } as unknown) as P & IHistoryProps;
+    return <BaseComponent {...mergedProps} />;
+  });
+}