Fix event listener init

src/Router.tsx

@@ -4,11 +4,9 @@ import { Home } from "./features/Home/Home";
 import { ManualTrack } from "./features/ManualTrack";
 import { Settings } from "./features/Settings";
 import { useCheckIfReminderTime } from "./hooks/useCheckIfReminderTime";
-import { useListenForNewTrackEvent } from "./hooks/useListenForNewTrackEvent";
 
 export const Router = () => {
   useCheckIfReminderTime();
-  useListenForNewTrackEvent();
 
   return (
     <Routes>

src/hooks/useCheckIfReminderTime.ts

@@ -11,15 +11,19 @@ import { useSnapshot } from "valtio";
 import { isReminderTime } from "../lib/utils";
 import { state } from "../state/state";
 import { useGetPopupPosition } from "./useGetPopupPosition";
+import { useSetListenerForNewTrackEvent } from "./useSetListenerForNewTrackEvent";
 
 let reminderInterval: NodeJS.Timer;
 
 export const useCheckIfReminderTime = () => {
   const { settings } = useSnapshot(state);
   const getPopupPosition = useGetPopupPosition();
+  const setListenerForNewTrackEvent = useSetListenerForNewTrackEvent();
 
   useEffect(() => {
     reminderInterval = setInterval(async () => {
+      setListenerForNewTrackEvent();
+
       // const prMonitor = await primaryMonitor();
       // const allMonitors = await availableMonitors();
       // const monitor = await currentMonitor();

src/hooks/useSetListenerForNewTrackEvent.ts

@@ -0,0 +1,23 @@
+import { UnlistenFn, listen } from "@tauri-apps/api/event";
+import { useCallback, useEffect } from "react";
+import { addTrack } from "../state/actions";
+import { Frequency } from "../state/types";
+
+let listener: UnlistenFn | undefined = undefined;
+
+export type EventAddTrackPlayload = {
+  track: string;
+  frequency: Frequency;
+};
+
+export const useSetListenerForNewTrackEvent = () => {
+  return useCallback(async () => {
+    if (listener) {
+      return;
+    }
+
+    listener = await listen<EventAddTrackPlayload>("addTrack", (event) => {
+      addTrack(event.payload.track, event.payload.frequency);
+    });
+  }, []);
+};

src/state/actions.ts

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
 import { state } from "./state";
-import { Frequency, Settings, Track } from "./types";
+import { Frequency, Settings, type Track } from "./types";
 
 export const addTrack = (track: string, duration: Frequency, startTime = new Date()) => {
   state.trackings.push({