[#78] Use Layout Router to render layouts for each component.

kbss-cvut · Nov 5, 2024 · 29b41ea · 29b41ea
1 parent babf4a9
commit 29b41ea
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 34 deletions.
diff --git a/src/Router.jsx b/src/Router.jsx
@@ -1,20 +1,22 @@
 import React from "react";
 import { Routes, BrowserRouter, Route } from "react-router-dom";
-import Layout from "./components/Layout.jsx";
 import Home from "./components/Home.jsx";
-import Scripts from "./components/Scripts.jsx";
 import Executions from "./components/Executions.jsx";
-import NoMatch from "./components/NoMatch.jsx";
+import Scripts from "./components/Scripts.jsx";
 import Dagre from "./components/dagre/Dagre.jsx";
+import NoMatch from "./components/NoMatch.jsx";
+import Layout from "./components/Layout.jsx";
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="scripts" element={<Scripts />} />
-        <Route path="executions" element={<Executions />} />
-        <Route path="*" element={<NoMatch />} />
+        <Route element={<Layout />}>
+          <Route path="/" element={<Home />} />
+          <Route path="scripts" element={<Scripts />} />
+          <Route path="executions" element={<Executions />} />
+          <Route path="*" element={<NoMatch />} />
+        </Route>
         <Route path="script" element={<Dagre />} />
       </Routes>
     </BrowserRouter>

diff --git a/src/components/Executions.jsx b/src/components/Executions.jsx
@@ -35,7 +35,7 @@ class Executions extends React.Component {
       return <h3>Loading</h3>;
     } else {
       return (
-        <Layout>
+        <>
           <h3>Executions</h3>
           <Table striped bordered hover>
             <thead>
@@ -89,7 +89,7 @@ class Executions extends React.Component {
                 })}
             </tbody>
           </Table>
-        </Layout>
+        </>
       );
     }
   }

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -8,17 +8,15 @@ import { Link } from "react-router-dom";
 class Home extends React.Component {
   render() {
     return (
-      <Layout>
-        <Grid stackable columns={2}>
-          <Grid.Row>
-            <Grid.Column>
-              <h1>Welcome to SPipes editor</h1>
-              <br></br>
-              <ScriptsTree />
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </Layout>
+      <Grid stackable columns={2}>
+        <Grid.Row>
+          <Grid.Column>
+            <h1>Welcome to SPipes editor</h1>
+            <br></br>
+            <ScriptsTree />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
     );
   }
 }

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -4,13 +4,15 @@ import { Container, Icon } from "semantic-ui-react";
 import { Nav, Navbar } from "react-bootstrap";
 import NavbarMenu from "./NavbarMenu";
 
+import { Outlet } from "react-router-dom";
+
 const Layout = ({ children }) => {
   return (
     <div>
       <NavbarMenu />
-
-      <Container>{children}</Container>
-
+      <Container>
+        <Outlet />
+      </Container>
       <div className="fixed-bottom">
         <Navbar color="dark">
           <Container>

diff --git a/src/components/NoMatch.jsx b/src/components/NoMatch.jsx
@@ -5,10 +5,10 @@ import Layout from "./Layout";
 
 const NoMatch = () => {
   return (
-    <Layout>
+    <>
       <Icon name="minus circle" size="big" />
       <strong>Page not found!</strong>
-    </Layout>
+    </>
   );
 };
 

diff --git a/src/components/Scripts.jsx b/src/components/Scripts.jsx
@@ -8,15 +8,13 @@ import { Link } from "react-router-dom";
 class Scripts extends React.Component {
   render() {
     return (
-      <Layout>
-        <Grid stackable columns={2}>
-          <Grid.Row>
-            <Grid.Column>
-              <ScriptsTree />
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </Layout>
+      <Grid stackable columns={2}>
+        <Grid.Row>
+          <Grid.Column>
+            <ScriptsTree />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
     );
   }
 }