metadata fixes, redux start. Lifecycle fixes for regions, etc

electron-ui/src/renderer/App.tsx

@@ -1,19 +1,52 @@
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Provider } from 'react-redux';
 // import 'tailwindcss/tailwind.css';
 import icon from '../../assets/icon.svg';
 import './App.css';
 import ClipList from './components/ClipList';
+import { useAppDispatch } from './hooks';
+import { store } from '../redux/main';
 
 function MainPage() {
-  return <ClipList />;
+  const [collection, setCollection] = useState<string | null>('Uncategorized');
+
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    const fetchMetadata = async () => {
+      try {
+        const response = await fetch('http://localhost:5010/meta');
+        const data = await response.json();
+        // console.log('Fetched collections:', data.collections);
+        dispatch({ type: 'metadata/addNewClips', payload: data });
+      } catch (error) {
+        console.error('Error fetching metadata:', error);
+      }
+    };
+
+    fetchMetadata();
+
+    // 1. Set up the interval
+    const intervalId = setInterval(async () => {
+      fetchMetadata();
+    }, 5000); // 1000 milliseconds delay
+
+    // 2. Return a cleanup function to clear the interval when the component unmounts
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [dispatch]); //
+  return <ClipList collection={collection} />;
 }
 
 export default function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<MainPage />} />
-      </Routes>
-    </Router>
+    <Provider store={store}>
+      <Router>
+        <Routes>
+          <Route path="/" element={<MainPage />} />
+        </Routes>
+      </Router>
+    </Provider>
   );
 }