From 29b41eafafc2f3b6d7d6fdd99e568aa4cc953af5 Mon Sep 17 00:00:00 2001
From: Daniil Palagin <daniilpalaginjob@gmail.com>
Date: Tue, 5 Nov 2024 19:04:19 +0100
Subject: [PATCH] [#78] Use Layout Router to render layouts for each component.

---
 src/Router.jsx                | 16 +++++++++-------
 src/components/Executions.jsx |  4 ++--
 src/components/Home.jsx       | 20 +++++++++-----------
 src/components/Layout.jsx     |  8 +++++---
 src/components/NoMatch.jsx    |  4 ++--
 src/components/Scripts.jsx    | 16 +++++++---------
 6 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/Router.jsx b/src/Router.jsx
index 259b79a..cdc883d 100644
--- 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
index ec82cd1..1fb5a84 100644
--- 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
index 9559d0a..446f7e1 100644
--- 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
index 63d0d4b..cc2ee15 100644
--- 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
index e1ccda2..6e232ba 100644
--- 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
index 90b5cdf..d48e336 100644
--- 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>
     );
   }
 }