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

kbss-cvut · Nov 12, 2024 · 17a0ffe · 17a0ffe
1 parent 1fccddb
commit 17a0ffe
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 31 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
@@ -27,7 +27,7 @@ class Executions extends React.Component {
       return <h3>Loading</h3>;
     } else {
       return (
-        <Layout>
+        <>
           <h3>Executions</h3>
           <Table striped bordered hover>
             <thead>
@@ -81,7 +81,7 @@ class Executions extends React.Component {
                 })}
             </tbody>
           </Table>
-        </Layout>
+        </>
       );
     }
   }

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -6,17 +6,15 @@ import ScriptsTree from "./treebeard/ScriptsTree";
 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/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
@@ -6,15 +6,13 @@ import ScriptsTree from "./treebeard/ScriptsTree";
 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>
     );
   }
 }