Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-20 01:54:01 +00:00
Code Issues Projects Releases Wiki Activity

Use react-redux hooks in Time

Browse source
This commit is contained in:
Jordan Eldredge 2019-08-20 07:42:54 -07:00
parent f51e51eea2
commit 81b5bcfdfd
2 changed files with 14 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

43
js/components/MainWindow/Time.tsx
View file

@ -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;

5
js/selectors.ts
View file

@ -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;
}