From 81b5bcfdfd567edea064a8756c34beae5bfad728 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 20 Aug 2019 07:42:54 -0700
Subject: [PATCH] Use react-redux hooks in Time

---
 js/components/MainWindow/Time.tsx | 43 +++++++------------------------
 js/selectors.ts                   |  5 ++++
 2 files changed, 14 insertions(+), 34 deletions(-)

diff --git a/js/components/MainWindow/Time.tsx b/js/components/MainWindow/Time.tsx
index f2a33f76..8030199e 100644
--- a/js/components/MainWindow/Time.tsx
+++ b/js/components/MainWindow/Time.tsx
@@ -1,32 +1,20 @@
 import React from "react";
-import { connect } from "react-redux";
-import { TimeMode, AppState, Dispatch } from "../../types";
-import { getTimeObj } from "../../utils";
+import * as Utils from "../../utils";
 
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
 import { TIME_MODE } from "../../constants";
+import { useActionCreator, useTypedSelector } from "../../hooks";
 
-interface StateProps {
-  timeElapsed: number;
-  duration: number;
-  timeMode: TimeMode;
-}
-
-interface DispatchProps {
-  toggleTimeMode(): void;
-}
-
-const Time = ({
-  timeElapsed,
-  duration,
-  timeMode,
-  toggleTimeMode,
-}: StateProps & DispatchProps) => {
+const Time = React.memo(() => {
+  const toggleTimeMode = useActionCreator(Actions.toggleTimeMode);
+  const timeElapsed = useTypedSelector(Selectors.getTimeElapsed);
+  const duration = useTypedSelector(Selectors.getDuration) || 0;
+  const timeMode = useTypedSelector(Selectors.getTimeMode);
   const seconds =
     timeMode === TIME_MODE.ELAPSED ? timeElapsed : duration - timeElapsed;
 
-  const timeObj = getTimeObj(seconds);
+  const timeObj = Utils.getTimeObj(seconds);
   return (
     <div id="time" onClick={toggleTimeMode} className="countdown">
       {timeMode === TIME_MODE.REMAINING && <div id="minus-sign" />}
@@ -48,19 +36,6 @@ const Time = ({
       />
     </div>
   );
-};
-
-const mapStateToProps = (state: AppState): StateProps => {
-  const timeElapsed = Selectors.getTimeElapsed(state);
-  const duration = Selectors.getDuration(state);
-  const { timeMode } = state.media;
-  return { timeElapsed, duration: duration || 0, timeMode };
-};
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
-  toggleTimeMode: () => dispatch(Actions.toggleTimeMode()),
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Time);
+export default Time;
diff --git a/js/selectors.ts b/js/selectors.ts
index f755c3e3..0b70a4d0 100644
--- a/js/selectors.ts
+++ b/js/selectors.ts
@@ -9,6 +9,7 @@ import {
   PlaylistStyle,
   TransitionType,
   MediaStatus,
+  TimeMode,
 } from "./types";
 import { createSelector, defaultMemoize } from "reselect";
 import * as Utils from "./utils";
@@ -749,3 +750,7 @@ export function getMarqueeStep(state: AppState): number {
 export function getNetworkConnected(state: AppState): boolean {
   return state.network.connected;
 }
+
+export function getTimeMode(state: AppState): TimeMode {
+  return state.media.timeMode;
+}