Merge pull request #88 from kbss-cvut/84-refactor-pages

Refactor 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 Layout from "./layouts/Layout.jsx";
+import NotFoundPage from "./pages/NotFoundPage.jsx";
+import ScriptPage from "./pages/ScriptPage.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={<ScriptPage />} />
       </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 "../constants/dagreIcons.js";
 
 class ModuleTypesSelection extends React.Component {
   constructor(props) {

src/components/ScriptFunctionSelection.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Dropdown } from "semantic-ui-react";
-import { FUNCTION_URI, FUNCTION_NAME } from "../constants/Vocabulary.js";
+import { FUNCTION_URI, FUNCTION_NAME } from "../constants/vocabulary.js";
 import Rest from "../rest/Rest.jsx";
 
 class ScriptFunctionSelection extends React.Component {

src/components/modal/MoveModuleModal.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Alert, Button, Col, Container, Modal, Row } from "react-bootstrap";
-import { ONTOLOGY_URI, SCRIPT_PATH } from "../../constants/Vocabulary.js";
+import { ONTOLOGY_URI, SCRIPT_PATH } from "../../constants/vocabulary.js";
 import Rest from "../../rest/Rest.jsx";
 
 class MoveModuleModal extends React.Component {

src/components/modal/ScriptExecutionModal.jsx

@@ -9,7 +9,7 @@ import {
   MODULE_VARIABLES,
   MODULE_VARIABLE_NAME,
   MODULE_VARIABLE_VALUE,
-} from "../../constants/Vocabulary.js";
+} from "../../constants/vocabulary.js";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 

src/components/modal/ValidationReportModal.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Alert, Button, Col, Container, Modal, Row } from "react-bootstrap";
-import { ERROR_MESSAGE, MODULE_URI, RULE_COMMENT } from "../../constants/Vocabulary.js";
+import { ERROR_MESSAGE, MODULE_URI, RULE_COMMENT } from "../../constants/vocabulary.js";
 
 class FunctionExecutionModal extends React.Component {
   constructor(props) {

src/components/Layout.jsx → src/layouts/Layout.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Container, Icon } from "semantic-ui-react";
 import { Navbar } from "react-bootstrap";
-import NavbarMenu from "./NavbarMenu";
+import NavbarMenu from "../components/NavbarMenu.jsx";
 import { Outlet } from "react-router-dom";
 
 const Layout = ({ children }) => {

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 { 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/pages/NotFoundPage.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const NotFoundPage = () => {
+  const navigate = useNavigate();
+
+  const handleGoHome = () => {
+    navigate("/");
+  };
+
+  return (
+    <div
+      className=" text-center position-fixed"
+      style={{ top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}
+    >
+      <h1 className="display-4">Oops! Page Not Found</h1>
+      <p className="lead">The page you are looking for does not exist.</p>
+      <button className="btn btn-primary mt-3" onClick={handleGoHome}>
+        Go to Home
+      </button>
+    </div>
+  );
+};
+
+export default NotFoundPage;

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

@@ -6,24 +6,24 @@ import cxtmenu from "cytoscape-cxtmenu";
 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 Rest from "../rest/Rest.jsx";
+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 "../constants/dagreIcons.js";
+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,
@@ -43,7 +43,7 @@ import {
   MODULE_VARIABLE_VALUE,
   MODULE_VARIABLES,
   SCRIPT_PATH,
-} from "../../constants/Vocabulary.js";
+} from "../constants/vocabulary.js";
 
 const rankDirOptions = [
   // preset
@@ -78,7 +78,7 @@ const modalInputs = {
   errorMessage: null,
 };
 
-class DagrePage extends React.Component {
+class Script extends React.Component {
   constructor(props) {
     super(props);
 
@@ -726,9 +726,9 @@ class DagrePage extends React.Component {
   }
 }
 
-const Dagre = () => {
+const ScriptPage = () => {
   const location = useLocation();
-  return <DagrePage location={location} />;
+  return <Script location={location} />;
 };
 
-export default Dagre;
+export default ScriptPage;

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/rest/Rest.jsx

@@ -1,5 +1,5 @@
 import URLs from "./apiUrls.js";
-import * as Vocabulary from "../constants/Vocabulary.js";
+import * as Vocabulary from "../constants/vocabulary.js";
 import { getFetcher, postFetcher } from "./fetchers";
 
 export const Rest = {