chore: use isMaster selector

gmus/src/components/app/index.tsx

@@ -5,6 +5,7 @@ import { DispatchContext, StateContext } from '../../context/state';
 import { useMaster } from '../../hooks/master';
 import { useKeepalive } from '../../hooks/socket';
 import { GlobalState } from '../../reducer/types';
+import { isMaster } from '../../selectors';
 import { getSongUrl } from '../../utils/url';
 import { Player } from '../player';
 import { uiProviders } from '../ui';
@@ -21,7 +22,7 @@ const UI = uiProviders[uiProvider];
 
 export const App: React.FC<Props> = ({ socket, state, dispatch }) => {
   useKeepalive(socket);
-  const isMaster = useMaster(dispatch, state.player.master, state.myClientName);
+  useMaster(state, dispatch);
 
   const onTimeUpdate = useCallback(
     (currentTime: number): void => {
@@ -32,7 +33,7 @@ export const App: React.FC<Props> = ({ socket, state, dispatch }) => {
 
   return (
     <>
-      {isMaster && !!state.player.songId && (
+      {isMaster(state) && !!state.player.songId && (
         <Player
           src={getSongUrl(state.player.songId)}
           playing={state.player.playing}
@@ -43,7 +44,7 @@ export const App: React.FC<Props> = ({ socket, state, dispatch }) => {
       )}
       <StateContext.Provider value={state}>
         <DispatchContext.Provider value={dispatch}>
-          <UI isMaster={isMaster} />
+          <UI isMaster={isMaster(state)} />
         </DispatchContext.Provider>
       </StateContext.Provider>
     </>

gmus/src/hooks/master.spec.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { stateSet } from '../actions';
 import { masterStateUpdateTimeout } from '../constants/system';
+import { initialState } from '../reducer';
 
 import { useMaster } from './master';
 
@@ -13,7 +14,7 @@ describe(useMaster.name, () => {
     master,
     myClientName,
   }) => {
-    useMaster(dispatch, master, myClientName);
+    useMaster({ player: { ...initialState.player, master }, myClientName }, dispatch);
     return null;
   };
 

gmus/src/hooks/master.ts

@@ -2,17 +2,18 @@ import { Dispatch, useEffect, useRef } from 'react';
 
 import { LocalAction, stateSet } from '../actions';
 import { masterStateUpdateTimeout } from '../constants/system';
+import { GlobalState } from '../reducer';
+import { isMaster } from '../selectors';
 
 export function useMaster(
+  state: Pick<GlobalState, 'player' | 'myClientName'>,
   dispatch: Dispatch<LocalAction>,
-  master: string,
-  myClientName: string,
-): boolean {
-  const isMaster = master === myClientName;
+): void {
+  const clientIsMaster = isMaster(state);
 
   const masterUpdateTimer = useRef<number>(0);
   useEffect(() => {
-    if (isMaster) {
+    if (clientIsMaster) {
       masterUpdateTimer.current = window.setInterval(() => {
         dispatch(stateSet());
       }, masterStateUpdateTimeout);
@@ -21,14 +22,12 @@ export function useMaster(
     return (): void => {
       window.clearInterval(masterUpdateTimer.current);
     };
-  }, [dispatch, isMaster]);
+  }, [dispatch, clientIsMaster]);
 
-  const noMaster = !master;
+  const noMaster = !state.player.master;
   useEffect(() => {
     if (noMaster) {
-      dispatch(stateSet({ master: myClientName }));
+      dispatch(stateSet({ master: state.myClientName }));
     }
-  }, [dispatch, noMaster, myClientName]);
-
-  return isMaster;
+  }, [dispatch, noMaster, state.myClientName]);
 }