michal/ClipTrimApp
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

socket in client, new set of icons

Browse Source
This commit is contained in:
michalcourson
2026-02-28 11:17:37 -05:00
parent 69c9d80a82
commit ab57d8ef22
43 changed files with 114 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
electron-ui/src/renderer/App.tsx
View File

@ -7,6 +7,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import io from 'socket.io-client';
// import 'tailwindcss/tailwind.css';
import './App.css';
import ClipList from './components/ClipList';
@ -14,7 +15,7 @@ import { useAppDispatch, useAppSelector } from './hooks';
import { store } from '../redux/main';
import { useNavigate } from 'react-router-dom';
import SettingsPage from './Settings';
import apiFetch from './api';
import { apiFetch, getBaseUrl } from './api';
function MainPage() {
const dispatch = useAppDispatch();
@ -27,20 +28,46 @@ function MainPage() {
const [newCollectionOpen, setNewCollectionOpen] = useState(false);
const [newCollectionName, setNewCollectionName] = useState<string>('');
const navigate = useNavigate();
const [socket, setSocket] = useState<any>(null);
useEffect(() => {}, []);
useEffect(() => {
const fetchMetadata = async () => {
try {
const response = await apiFetch('meta');
const data = await response.json();
dispatch({ type: 'metadata/setAllData', payload: data });
} catch (error) {
console.error('Error fetching metadata:', error);
}
const initializeSocket = async () => {
const baseUrl = await getBaseUrl();
const newSocket = io(baseUrl);
setSocket(newSocket);
newSocket.on('connect', () => {
console.log('Connected to WebSocket server');
});
newSocket.on('full_data', (data: any) => {
console.log('Received full_data from server:', data);
dispatch({
type: 'metadata/setAllData',
payload: { collections: data },
});
});
newSocket.on('new_clip', (data: any) => {
console.log('Received new_clips from server:', data);
dispatch({
type: 'metadata/addNewClip',
payload: { clip: data },
});
});
};
fetchMetadata();
const intervalId = setInterval(fetchMetadata, 5000);
return () => clearInterval(intervalId);
initializeSocket();
// const fetchMetadata = async () => {
// try {
// const response = await apiFetch('meta');
// const data = await response.json();
// dispatch({ type: 'metadata/setAllData', payload: data });
// } catch (error) {
// console.error('Error fetching metadata:', error);
// }
// };
// fetchMetadata();
// const intervalId = setInterval(fetchMetadata, 5000);
// return () => clearInterval(intervalId);
}, [dispatch]);
useEffect(() => {