Added possibility to toggle the sound/alarm

Added a button to toggle the sound via state. Added logic for storing the state between runs.
Small warning fixes and adjustments

.gitignore

@@ -10,6 +10,8 @@ lerna-debug.log*
 node_modules
 dist
 .tmp
+bin
+.storage
 dist-ssr
 *.local
 

neutralino.config.json

@@ -14,18 +14,17 @@
 	"nativeAllowList": [
 		"filesystem.*",
 		"window.*",
+		"storage.*",
 		"app.exit"
 	],
 	"globalVariables": {
 		"TEST1": "Hello"
 	},
 	"modes": {
 		"window": {
-			"title": "time-traq-nag",
-			"width": 470,
-			"height": 250,
-			"__minWidth__": 400,
-			"__minHeight__": 200,
+			"title": "TimeTraq Nag",
+			"width": 430,
+			"height": 210,
 			"fullScreen": false,
 			"alwaysOnTop": false,
 			"icon": "/public/neutralino.png",
@@ -39,7 +38,7 @@
 		}
 	},
 	"cli": {
-		"binaryName": "neutralinojs",
+		"binaryName": "time-traq-nag",
 		"resourcesPath": "/dist/",
 		"extensionsPath": "/extensions/",
 		"binaryVersion": "5.1.0",

src/components/App.jsx

@@ -1,14 +1,16 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useState } from 'react';
-import reactLogo from '/react.svg';
-import neutralinoLogo from '/neutralino-logo.gif';
-import { filesystem } from '@neutralinojs/lib';
+import volume from '/src/images/volume.svg';
+import volumeMute from '/src/images/volume-mute.svg';
+import { filesystem, storage } from '@neutralinojs/lib';
 import '../styles/App.css';
 import Timer from './Timer';
 import dayjs from 'dayjs';
 
 filesystem.writeFile('./test.txt', 'random text');
 
+const SETTINGS_NAME = 'settings';
+
 const App = () => {
 	// const [estimate, setEstimate] = useState('');
 	// const [tasks, setTasks] = useState({});
@@ -20,6 +22,19 @@ const App = () => {
 	const seconds = useRef(0);
 	const [initialTasks, setInitialTasks] = useState({});
 
+	const [soundOn, setSoundOn] = useState(true);
+	const volumeUrl = soundOn ? volume : volumeMute;
+	const toggleSound = useCallback(() => {
+		setSoundOn(soundOnParam => {
+			const newValue = !soundOnParam;
+			// update settings file
+			storage
+				.setData(SETTINGS_NAME, `/* {"version":1} */\n{"soundOn":${newValue}}`)
+				.catch((e) => console.error(e));
+			return newValue;
+		});
+	});
+
 	// const onChangeHandler = useCallback((event) => {
 	// 	setEstimate(event.target.value);
 	// },[setEstimate]);
@@ -41,7 +56,17 @@ const App = () => {
 				lines.forEach(l => result[l.split('\t')[0]] = { seconds: +l.split('\t')[1] });
 				setInitialTasks(result);
 				setAllTaskNames(Object.keys(result));
-			} catch (e) { /* dasd */ }
+			} catch (e) { console.error(e); }
+		})();
+
+		(async () => {
+			try {
+				const data = await storage.getData(SETTINGS_NAME);
+				const newLineIndex = data.indexOf('\n');
+				// const metadata = data.substring(0, newLineIndex + 1);
+				const settings = data.substring(newLineIndex + 1);
+				setSoundOn(Boolean(JSON.parse(settings).soundOn));
+			} catch (e) { console.error(e); }
 		})();
 	}, []);
 
@@ -53,7 +78,8 @@ const App = () => {
 		seconds.current = task.seconds;
 
 		const currentTime = dayjs();
-		if (currentTime.second() === 0 && (currentTime.minute() === 25 || currentTime.minute() === 55 )) {
+		// if (soundOn && currentTime.second() % 10 === 0) { // every 10 seconds (for testing)
+		if (soundOn && currentTime.second() === 0 && (currentTime.minute() === 25 || currentTime.minute() === 55 )) {
 			var audio = new Audio('timer-short.mp3');
 			audio.volume = 0.75;
 			audio.play();
@@ -82,7 +108,7 @@ const App = () => {
 				filesystem.writeFile(dayjs().format('YY-MM-DD') + '-stats.txt', lines.join('\n'));
 			})();
 		}
-	}, [currentTask]);
+	}, [currentTask, soundOn]);
 
 	const onEvent = useCallback((event) => {
 		if (event === 'PAUSED' || event === 'RESUMED') {
@@ -108,6 +134,7 @@ const App = () => {
 	return (<div className='flex-column'>
 		{/* <input type='text' name='estimate' placeholder='1w 2d 3h 4m 5s' onChange={onChangeHandler} /> */}
 		{/* {estimate} */}
+		<img src={volumeUrl} onClick={toggleSound} height="40" style={{ position: 'absolute', top: 7, left: 7, cursor: 'pointer' }} />
 
 		<form onSubmit={taskSubmitHandler}>
 			<input type='text' list='tasks' name='task' placeholder='Task' ref={taskInputRef} />

src/components/Timer.jsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import '../styles/Timer.css';
 import usePrevValue from '../utils/usePrevValue.ts';
 
-const Timer = ({ initialSeconds, initialGoingDown, onSecondPassed, currentTask, onEvent, initialTasks }) => {
+const Timer = ({ initialSeconds, initialGoingDown, onSecondPassed, currentTask = '', onEvent, initialTasks = [] }) => {
 	// const [seconds, setSeconds] = useState(initialSeconds);
 	// const [goingDown, setGoingDown] = useState(initialGoingDown);
 	// const [enabled, setEnabled] = useState(true);
@@ -95,11 +95,6 @@ const Timer = ({ initialSeconds, initialGoingDown, onSecondPassed, currentTask,
 	);
 };
 
-Timer.defaultProps = {
-	initialTasks: [],
-	currentTask: ''
-};
-
 Timer.propTypes = {
 	initialSeconds: PropTypes.number.isRequired,
 	initialGoingDown: PropTypes.bool.isRequired,