MediaProcessing/apps/ui/web/src/App.tsx
2024-08-06 01:15:01 +02:00

77 lines
2.4 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { Box, CssBaseline } from '@mui/material';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Footer from './app/features/footer';
import LaunchPage from './app/page/LaunchPage';
import { useWsSubscription } from './app/ws/subscriptions';
import { useDispatch } from 'react-redux';
import { useStompClient, useSubscription } from 'react-stomp-hooks';
import { updateItems } from './app/store/composed-slice';
import ExplorePage from './app/page/ExplorePage';
import { ThemeProvider } from '@mui/material';
import theme from './theme';
import { simpleEventsUpdate } from './app/store/kafka-items-flat-slice';
import { EventDataObject, SimpleEventDataObject } from './types';
import EventsChainPage from './app/page/EventsChainPage';
function App() {
const client = useStompClient();
const dispatch = useDispatch();
useWsSubscription<Array<EventDataObject>>("/topic/event/items", (response) => {
dispatch(updateItems(response))
});
useWsSubscription<Array<SimpleEventDataObject>>("/topic/event/flat", (response) => {
dispatch(simpleEventsUpdate(response))
});
useEffect(() => {
// Kjør din funksjon her når komponenten lastes inn for første gang
// Sjekk om cursor er null
// Kjør din funksjon her når cursor er null og client ikke er null
client?.publish({
destination: "/app/items",
body: undefined
})
// Alternativt, du kan dispatche en Redux handling her
// dispatch(fetchDataAction()); // Eksempel på å dispatche en handling
}, [client, dispatch]);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Box sx={{
height: 70,
backgroundColor: theme.palette.action.selected
}}>
</Box>
<Box sx={{
display: "block",
maxHeight: window.screen.height - 70,
height: window.screen.height - 70,
width: "100vw",
maxWidth: "100vw"
}}>
<BrowserRouter>
<Routes>
<Route path='/files' element={<ExplorePage />} />
<Route path='/events' element={<EventsChainPage />} />
<Route path='/' element={<LaunchPage />} />
</Routes>
<Footer />
</BrowserRouter>
</Box>
</ThemeProvider>
);
}
export default App;