indicator focus screen flexbox solved, click sounds improved

app/appstoreshowcase.md

@@ -0,0 +1,19 @@
+# App Store Showcase Screenshots Lines
+
+## The simplest and powerfull metronome to power your music, practice, studio records
+
+## A simple user interface for you to easily jump in
+
+## Adjustable BPM
+
+## Change the beats
+
+## Select your preferred sound preset
+
+## Tap your beat and have it converted to bpm for you
+
+## Use keyboard shortcuts to easily control
+
+## Access to focus mode to have the minimal user interface for practising
+
+## Want more features, contact us or you can send a pull request yourself, it's OPEN SOURCE

electron/windows/MainWindow.js

@@ -91,11 +91,17 @@ class MainWindow extends BrowserWindow {
       },
     ];
 
-    if (process.platform === "darwin") {
-      mainMenuTemplate.unshift({
-        label: app.name,
-      });
-    }
+    const appNamedMenu = {
+      label: app.name,
+      submenu: [
+        {
+          label: "Reset App",
+          click: () => {
+            this.webContents.send("app:reset");
+          },
+        },
+      ],
+    };
 
     if (isDev) {
       mainMenuTemplate.push({
@@ -113,7 +119,10 @@ class MainWindow extends BrowserWindow {
       });
     }
 
-    const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
+    const mainMenu = Menu.buildFromTemplate([
+      appNamedMenu,
+      ...mainMenuTemplate,
+    ]);
     Menu.setApplicationMenu(mainMenu);
   };
 

package.json

@@ -22,6 +22,7 @@
     "react-scripts": "3.4.1",
     "react-transition-group": "^4.4.1",
     "redux": "^4.0.5",
+    "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
     "typescript": "~3.7.2"
   },
@@ -33,6 +34,7 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.9",
     "@types/react-transition-group": "^4.4.0",
+    "@types/redux-persist": "^4.3.1",
     "asar": "^3.0.3",
     "concurrently": "^5.2.0",
     "electron": "^8.2.5",

src/App.tsx

@@ -1,8 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { useDispatch } from "react-redux";
 import Metronome from "./components/Metronome";
 import "./sass/App.scss";
 
 function App() {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const resetHandler = () => dispatch({ type: "RESET", payload: undefined });
+    window.ipcRenderer.on("app:reset", resetHandler);
+    return () => {
+      window.ipcRenderer.removeListener("app:reset", resetHandler);
+    };
+  }, [dispatch]);
   return <Metronome />;
 }
 

src/components/Metronome/Indicator.tsx

@@ -34,7 +34,7 @@ function Indicator(): ReactElement {
   }`;
 
   return (
-    <TransitionGroup>
+    <TransitionGroup style={{ width: "100%" }}>
       <ul
         className={`indicator-container metronome-child-container ${
           focusMode ? "indicator-container-focused" : ""

src/components/Metronome/TapBpmScreen.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement } from "react";
 import "../../sass/Metronome/TabBpmScreen.scss";
 
 import { useDispatch, useSelector } from "react-redux";

src/index.tsx

@@ -3,7 +3,8 @@ import ReactDOM from "react-dom";
 import App from "./App";
 
 import { Provider } from "react-redux";
-import store from "./store/store";
+import { PersistGate } from "redux-persist/integration/react";
+import { store, persistor } from "./store/store";
 
 if (!window.ipcRenderer) {
   window.ipcRenderer = {
@@ -17,7 +18,9 @@ if (!window.ipcRenderer) {
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <PersistGate persistor={persistor}>
+        <App />
+      </PersistGate>
     </Provider>
   </React.StrictMode>,
   document.getElementById("root")

src/sass/Metronome/Indicator.scss

@@ -26,6 +26,7 @@
 }
 
 .indicator-container-focused {
+  width: 100%;
   background-color: transparent;
   &:hover {
     background-color: $light-gray;

src/store/actions/metronome.ts

@@ -73,7 +73,7 @@ export const clearBeatTimeout = () => ({
 export let beats = beatLoader(1);
 
 export const setPreset = (preset: number) => {
-  const limit = 10;
+  const limit = 11;
   const _preset = preset > limit ? 1 : preset < 1 ? 1 : preset;
   beats = beatLoader(_preset);
   return {

src/store/reducers/app.ts

@@ -17,6 +17,8 @@ export default (
   switch (type) {
     case ACTION.TOGGLE_FOCUS_MODE:
       return { ...state, focusMode: !state.focusMode };
+    case "RESET":
+      return initialState;
     default:
       return state;
   }

src/store/reducers/metronome.ts

@@ -58,6 +58,8 @@ export default (
         ...state,
         tapBpm: { ...state.tapBpm, ...payload },
       };
+    case "RESET":
+      return initialState;
     default:
       return state;
   }

src/store/store.ts

@@ -1,5 +1,7 @@
 import { createStore, combineReducers, applyMiddleware, compose } from "redux";
 import thunk from "redux-thunk";
+import { persistStore, persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
 import MetronomeReducer from "./reducers/metronome";
 import AppReducer from "./reducers/app";
 import { ReduxState } from "../types/redux";
@@ -9,13 +11,22 @@ const reducers = combineReducers<ReduxState>({
   app: AppReducer,
 });
 
+const persistConfig = {
+  key: "root",
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, reducers);
+
 const store = createStore(
-  reducers,
+  persistedReducer,
   compose(
     applyMiddleware(thunk)
     // (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
     //   (window as any).__REDUX_DEVTOOLS_EXTENSION__()
   )
 );
 
-export default store;
+const persistor = persistStore(store);
+
+export { store, persistor };