[#62] Refactor Layout

Refactor navbar, footer into separate folders and replace styles with the mui library

package.json

@@ -16,16 +16,16 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "vite-plugin-env-compatible": "^2.0.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.4.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@frogcat/ttl2jsonld": "^0.0.6",
     "@kbss-cvut/s-forms": "^0.7.2-beta-6cfd5af.0",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/material": "^6.1.5",
     "@tippyjs/react": "^4.2.5",
     "@triply/yasgui": "^4.2.14",
+    "@vitejs/plugin-react": "^4.3.1",
     "bootstrap": "^4.5.3",
     "cytoscape": "^3.30.2",
     "cytoscape-compound-drag-and-drop": "^1.1.0",
@@ -48,7 +48,9 @@
     "react-spring": "^8.0.27",
     "react-treebeard": "^3.2.4",
     "semantic-ui-react": "^2.1.5",
-    "superagent": "^6.1.0"
+    "superagent": "^6.1.0",
+    "vite": "^5.4.2",
+    "vite-plugin-env-compatible": "^2.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^9.7.6",

src/Router.jsx

@@ -5,7 +5,7 @@ import Executions from "./components/Executions.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/Layout.jsx";
+import Layout from "./layouts/Layout.jsx";
 
 const Router = () => {
   return (

src/components/DynamicPage.jsx

@@ -1,14 +1,12 @@
 import React from "react";
 import { Header } from "semantic-ui-react";
 
-import Layout from "./Layout";
-
 const DynamicPage = () => {
   return (
-    <Layout>
+    <>
       <Header as="h2">Dynamic Page</Header>
       <p>This page was loaded asynchronously!!!</p>
-    </Layout>
+    </>
   );
 };
 

src/components/Executions.jsx

@@ -1,6 +1,4 @@
 import React, { Fragment } from "react";
-
-import Layout from "./Layout";
 import {
   ABSOLUTE_PATH,
   DISPLAY_NAME,

src/components/Footer/Footer.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { AppBar, Toolbar, Container, Typography } from "@mui/material";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+
+const Footer = () => {
+  return (
+    <AppBar position="fixed" sx={{ backgroundColor: "white", color: "black", top: "auto", bottom: 0 }} elevation={0}>
+      <Toolbar>
+        <Container sx={{ display: "flex", justifyContent: "flex-end" }}>
+          <Typography variant="body1" sx={{ color: "black" }}>
+            Made with <FavoriteIcon sx={{ color: "red", verticalAlign: "middle" }} />
+          </Typography>
+        </Container>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Footer;

src/components/Home.jsx

@@ -1,9 +1,6 @@
 import React from "react";
 import { Grid } from "semantic-ui-react";
-
-import Layout from "./Layout";
 import ScriptsTree from "./treebeard/ScriptsTree";
-import { Link } from "react-router-dom";
 
 class Home extends React.Component {
   render() {

src/components/Navbar/NavbarMenu.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { AppBar, Toolbar, Typography, Button, Box } from "@mui/material";
+import { Link } from "react-router-dom";
+import { APP_TITLE } from "@config/env.js";
+
+const NavbarMenu = () => {
+  return (
+    <AppBar
+      position="static"
+      elevation={1}
+      sx={{ backgroundColor: "white", color: "black", zIndex: 100, marginBottom: 3 }}
+    >
+      <Toolbar>
+        <Typography variant="h6" component="div" sx={{ mr: 2 }}>
+          <Link to="/" style={{ textDecoration: "none", color: "black" }}>
+            {APP_TITLE}
+          </Link>
+        </Typography>
+
+        <Box sx={{ display: "flex", gap: 2 }}>
+          <Button color="inherit" component={Link} to="/scripts">
+            Scripts
+          </Button>
+          <Button color="inherit" component={Link} to="/executions">
+            Executions
+          </Button>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default NavbarMenu;

src/components/NoMatch.jsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { Icon } from "semantic-ui-react";
 
-import Layout from "./Layout";
-
 const NoMatch = () => {
   return (
     <>

src/components/Scripts.jsx

@@ -1,9 +1,6 @@
 import React from "react";
 import { Grid } from "semantic-ui-react";
-
-import Layout from "./Layout";
 import ScriptsTree from "./treebeard/ScriptsTree";
-import { Link } from "react-router-dom";
 
 class Scripts extends React.Component {
   render() {

src/components/dagre/Dagre.jsx

@@ -14,7 +14,7 @@ import {
   Rest,
   SCRIPT_PATH,
 } from "../rest/Rest";
-import NavbarMenu from "../NavbarMenu";
+
 import SFormsModal from "../sform/SFormsModal";
 import ModuleTypesSelection from "../ModuleTypesSelection";
 import ScriptInputOutputModal from "../sform/ScriptInputOutputModal";
@@ -599,7 +599,6 @@ class Dagre extends React.Component {
         {this.state.isLoaded === false && (
           <Loading size={"large"} style={{ margin: "auto", position: "absolute", inset: "0px", zIndex: 9000 }} />
         )}
-        <NavbarMenu />
         <div>
           <div key={"cyKey"} style={cyStyle} id="cy" />
         </div>

src/components/modal/MoveModuleModal.jsx

@@ -15,10 +15,6 @@ import {
   START_DATE_UNIX,
   TRANSFORMATION,
 } from "../rest/Rest";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit, faMugHot, faPlayCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "react-router-dom";
-import Layout from "../Layout";
 
 class MoveModuleModal extends React.Component {
   constructor(props) {

src/components/modal/ScriptActionsModuleModal.jsx

@@ -15,10 +15,6 @@ import {
   START_DATE_UNIX,
   TRANSFORMATION,
 } from "../rest/Rest";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit, faMugHot, faPlayCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "react-router-dom";
-import Layout from "../Layout";
 
 class ScriptActionsModuleModal extends React.Component {
   constructor(props) {

src/components/modal/ScriptOntologyModal.jsx

@@ -15,10 +15,6 @@ import {
   START_DATE_UNIX,
   TRANSFORMATION,
 } from "../rest/Rest";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit, faMugHot, faPlayCircle, faPlusCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "react-router-dom";
-import Layout from "../Layout";
 
 class ScriptOntologyModal extends React.Component {
   constructor(props) {

src/layouts/Layout.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Container } from "@mui/material";
+import NavbarMenu from "../components/Navbar/NavbarMenu.jsx";
+import { Outlet } from "react-router-dom";
+import Footer from "../components/Footer/Footer.jsx";
+
+const Layout = () => {
+  return (
+    <div>
+      <NavbarMenu />
+      <Container maxWidth="lg">
+        <Outlet />
+      </Container>
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;