App.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import { useEffect } from 'react'
  2. import { Routes, Route, Navigate } from 'react-router-dom'
  3. import { useAuthStore } from './stores/authStore'
  4. import { wsClient } from './api/client'
  5. import Layout from './components/Layout'
  6. import LoginPage from './pages/LoginPage'
  7. import WorkflowsPage from './pages/WorkflowsPage'
  8. import WorkflowEditorPage from './pages/WorkflowEditorPage'
  9. import ExecutionsPage from './pages/ExecutionsPage'
  10. import ProjectsPage from './pages/ProjectsPage'
  11. import SettingsPage from './pages/SettingsPage'
  12. import NodesPage from './pages/NodesPage'
  13. import DatabasePage from './pages/DatabasePage'
  14. import CredentialsPage from './pages/CredentialsPage'
  15. function PrivateRoute({ children }: { children: React.ReactNode }) {
  16. const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
  17. return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />
  18. }
  19. function App() {
  20. const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
  21. // Connect WebSocket when app loads if already authenticated
  22. useEffect(() => {
  23. if (isAuthenticated) {
  24. wsClient.connect()
  25. }
  26. return () => {
  27. wsClient.disconnect()
  28. }
  29. }, [isAuthenticated])
  30. return (
  31. <Routes>
  32. <Route path="/login" element={<LoginPage />} />
  33. <Route
  34. path="/"
  35. element={
  36. <PrivateRoute>
  37. <Layout />
  38. </PrivateRoute>
  39. }
  40. >
  41. <Route index element={<Navigate to="/workflows" replace />} />
  42. <Route path="workflows" element={<WorkflowsPage />} />
  43. <Route path="workflows/:id" element={<WorkflowEditorPage />} />
  44. <Route path="executions" element={<ExecutionsPage />} />
  45. <Route path="nodes" element={<NodesPage />} />
  46. <Route path="credentials" element={<CredentialsPage />} />
  47. <Route path="database" element={<DatabasePage />} />
  48. <Route path="projects" element={<ProjectsPage />} />
  49. <Route path="settings" element={<SettingsPage />} />
  50. </Route>
  51. </Routes>
  52. )
  53. }
  54. export default App