[#84] Move page component to folder pages

src/Router.jsx

@@ -1,23 +1,23 @@
 import React from "react";
 import { Routes, BrowserRouter, Route } from "react-router-dom";
-import Home from "./components/Home.jsx";
-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.jsx";
+import HomePage from "./pages/HomePage.jsx";
+import ExecutionsPage from "./pages/ExecutionsPage.jsx";
+import ScriptsPage from "./pages/ScriptsPage.jsx";
+import DagrePage from "./pages/dagre/DagrePage.jsx";
+import Layout from "./layouts/Layout.jsx";
+import NotFoundPage from "./pages/NotFoundPage.jsx";
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route element={<Layout />}>
-          <Route path="/" element={<Home />} />
-          <Route path="scripts" element={<Scripts />} />
-          <Route path="executions" element={<Executions />} />
-          <Route path="*" element={<NoMatch />} />
+          <Route path="/" element={<HomePage />} />
+          <Route path="scripts" element={<ScriptsPage />} />
+          <Route path="executions" element={<ExecutionsPage />} />
+          <Route path="*" element={<NotFoundPage />} />
         </Route>
-        <Route path="script" element={<Dagre />} />
+        <Route path="script" element={<DagrePage />} />
       </Routes>
     </BrowserRouter>
   );

src/components/ModuleTypesSelection.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Dropdown } from "semantic-ui-react";
 import Rest from "../rest/Rest";
-import { ICONS_MAP } from "./dagre/DagreIcons";
+import { ICONS_MAP } from "../pages/dagre/DagreIcons";
 
 class ModuleTypesSelection extends React.Component {
   constructor(props) {

src/components/Executions.jsx → src/pages/ExecutionsPage.jsx

@@ -1,13 +1,12 @@
 import React from "react";
-import Layout from "./Layout";
 import { ABSOLUTE_PATH, DISPLAY_NAME, EXECUTION_DURATION, TRANSFORMATION } from "../constants/Vocabulary.js";
 import Rest from "../rest/Rest.jsx";
 import { Col, Container, Row, Table } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMugHot, faEdit, faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "react-router-dom";
 
-class Executions extends React.Component {
+class ExecutionsPage extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -87,4 +86,4 @@ class Executions extends React.Component {
   }
 }
 
-export default Executions;
+export default ExecutionsPage;

src/components/Home.jsx → src/pages/HomePage.jsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { Grid } from "semantic-ui-react";
-import Layout from "./Layout";
-import ScriptsTree from "./treebeard/ScriptsTree";
+import ScriptsTree from "../components/treebeard/ScriptsTree.jsx";
 
-class Home extends React.Component {
+class HomePage extends React.Component {
   render() {
     return (
       <Grid stackable columns={2}>
@@ -19,4 +18,4 @@ class Home extends React.Component {
   }
 }
 
-export default Home;
+export default HomePage;

src/components/Scripts.jsx → src/pages/ScriptsPage.jsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { Grid } from "semantic-ui-react";
-import Layout from "./Layout";
-import ScriptsTree from "./treebeard/ScriptsTree";
+import ScriptsTree from "../components/treebeard/ScriptsTree.jsx";
 
-class Scripts extends React.Component {
+class ScriptsPage extends React.Component {
   render() {
     return (
       <Grid stackable columns={2}>
@@ -17,4 +16,4 @@ class Scripts extends React.Component {
   }
 }
 
-export default Scripts;
+export default ScriptsPage;

src/components/dagre/Dagre.jsx → src/pages/dagre/DagrePage.jsx

@@ -7,23 +7,23 @@ import popper from "cytoscape-popper";
 import navigator from "cytoscape-navigator";
 import expandCollapse from "cytoscape-expand-collapse";
 import Rest from "../../rest/Rest.jsx";
-import NavbarMenu from "../NavbarMenu";
-import SFormsModal from "../sform/SFormsModal";
-import ModuleTypesSelection from "../ModuleTypesSelection";
-import ScriptInputOutputModal from "../sform/ScriptInputOutputModal";
+import NavbarMenu from "../../components/NavbarMenu.jsx";
+import SFormsModal from "../../components/sform/SFormsModal.jsx";
+import ModuleTypesSelection from "../../components/ModuleTypesSelection.jsx";
+import ScriptInputOutputModal from "../../components/sform/ScriptInputOutputModal.jsx";
 import { Dropdown } from "semantic-ui-react";
-import { ICONS_MAP } from "./DagreIcons";
-import ScriptFunctionSelection from "../ScriptFunctionSelection";
+import { ICONS_MAP } from "./DagreIcons.jsx";
+import ScriptFunctionSelection from "../../components/ScriptFunctionSelection.jsx";
 import { Button } from "react-bootstrap";
-import ValidationReportModal from "../modal/ValidationReportModal";
-import MoveModuleModal from "../modal/MoveModuleModal";
-import ScriptOntologyModal from "../modal/ScriptOntologyModal";
-import ScriptExecutionModal from "../modal/ScriptExecutionModal";
+import ValidationReportModal from "../../components/modal/ValidationReportModal.jsx";
+import MoveModuleModal from "../../components/modal/MoveModuleModal.jsx";
+import ScriptOntologyModal from "../../components/modal/ScriptOntologyModal.jsx";
+import ScriptExecutionModal from "../../components/modal/ScriptExecutionModal.jsx";
 import "@triply/yasgui/build/yasgui.min.css";
-import SFormsFunctionModal from "../sform/SFormsFunctionModal";
+import SFormsFunctionModal from "../../components/sform/SFormsFunctionModal.jsx";
 import "@kbss-cvut/s-forms/css";
-import Loading from "../Loading";
-import ErrorModal from "../modal/ErrorModal";
+import Loading from "../../components/Loading.jsx";
+import ErrorModal from "../../components/modal/ErrorModal.jsx";
 import { useLocation } from "react-router-dom";
 import {
   TYPE,
@@ -78,7 +78,7 @@ const modalInputs = {
   errorMessage: null,
 };
 
-class DagrePage extends React.Component {
+class Dagre extends React.Component {
   constructor(props) {
     super(props);
 
@@ -726,9 +726,9 @@ class DagrePage extends React.Component {
   }
 }
 
-const Dagre = () => {
+const DagrePage = () => {
   const location = useLocation();
-  return <DagrePage location={location} />;
+  return <Dagre location={location} />;
 };
 
-export default Dagre;
+export default DagrePage;