reload random by returning to paramc

src/App.tsx

@@ -6,7 +6,7 @@ import { BtnColor, Status, Tone } from './types';
 import { strings } from './strings';
 import { useStateContext } from './store';
 import { Params } from './params';
-import { ToggleType } from './reducer';
+import { ActionType, ToggleType } from './reducer';
 import { ButtonSet } from './buttons';
 
 function App() {
@@ -18,6 +18,10 @@ function App() {
   const [ playlist, setPlaylist ] = useState( [] as HTMLAudioElement[] )
 
   useEffect( () => {
+    if (status===Status.params) {
+      console.log('effect for params')
+      dispatch({ type: ActionType.refresh })
+    }
     if (status===Status.prepare) {
       console.log('effect for preparing')
       preparePlayList(state.randomTones!)

src/reducer.ts

@@ -4,7 +4,7 @@ import { SylPart, Syllable, Tone } from "./types";
 import { GetSyllablesByInitAndFin, getRandomArray, toggle } from "./utils";
 
 export enum ActionType {
-    toggleOne, toggleAll, refreshPlayList, setPause, setCount, setStatus, playing
+    toggleOne, toggleAll, refresh, setPause, setCount, setStatus, playing
 }
 
 export enum ToggleType { init, fin }
@@ -82,14 +82,12 @@ export const reducer = (state:IState, action:Action):IState => {
     case ActionType.setCount: return { ...state,
                                        sylCount: action.payload as number,
                                        randomTones: getRandomArray(state.foundTones, action.payload as number) }
-//    case ActionType.setStatus: return { ...state, status: action.payload as Status}
-
+    case ActionType.refresh: return { ...state, randomTones: getRandomArray(state.foundTones, state.sylCount)}
     case ActionType.toggleAll:  {
       if (action.payload as ToggleType === ToggleType.init) return { ...state, ...ProceedAllInitials(state) }
       if (action.payload as ToggleType === ToggleType.fin)  return { ...state, ...ProceedAllFinales(state) }
       return state
     }
-
     case ActionType.toggleOne:  {
       if ( (action.payload as TogglePayload).type === ToggleType.init)
         return {  ...state, ...ProceedInitiale(state, (action.payload as TogglePayload).part )  }
@@ -97,7 +95,6 @@ export const reducer = (state:IState, action:Action):IState => {
         return {  ...state, ...ProceedFinale(state, (action.payload as TogglePayload).part )  }
       return state
     }
-
     default: return state
   }
 }