From 10f623ad6c0fc6aa61c2b64cc6eabc5da86b5ddf Mon Sep 17 00:00:00 2001 From: Daniil Palagin Date: Tue, 5 Nov 2024 19:00:59 +0100 Subject: [PATCH 1/2] [#78] Refactor App component App component is refactored to Router component react-router-dom bump to version 6 --- package-lock.json | 174 ++++------------------- package.json | 11 +- src/Router.jsx | 24 ++++ src/components/App.jsx | 38 ----- src/components/Layout.jsx | 7 +- src/components/dagre/Dagre.jsx | 8 +- src/components/treebeard/ScriptsTree.jsx | 4 +- src/index.jsx | 5 +- 8 files changed, 73 insertions(+), 198 deletions(-) create mode 100644 src/Router.jsx delete mode 100644 src/components/App.jsx diff --git a/package-lock.json b/package-lock.json index a7f5bff..fa1fef5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,9 +34,8 @@ "react-bootstrap": "^1.4.3", "react-cytoscapejs": "^1.2.1", "react-dom": "^18.2.0", - "react-imported-component": "^6.5.4", "react-json-pretty": "^2.2.0", - "react-router-dom": "^5.1.2", + "react-router-dom": "^6.27.0", "react-spring": "^8.0.27", "react-treebeard": "^3.2.4", "semantic-ui-react": "^2.1.5", @@ -1467,6 +1466,14 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@remix-run/router": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", + "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@restart/context": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", @@ -2620,17 +2627,6 @@ "node": ">=10" } }, - "node_modules/crc-32": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", - "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==", - "bin": { - "crc32": "bin/crc32.njs" - }, - "engines": { - "node": ">=0.8" - } - }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -2887,11 +2883,6 @@ "node": ">=6" } }, - "node_modules/detect-node-es": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", - "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" - }, "node_modules/dom-helpers": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", @@ -3444,19 +3435,6 @@ "resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz", "integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==" }, - "node_modules/history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "dependencies": { - "@babel/runtime": "^7.1.2", - "loose-envify": "^1.2.0", - "resolve-pathname": "^3.0.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0", - "value-equal": "^1.0.1" - } - }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -3685,11 +3663,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" - }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -4445,14 +4418,6 @@ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, - "node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "dependencies": { - "isarray": "0.0.1" - } - }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -4786,58 +4751,6 @@ "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, - "node_modules/react-imported-component": { - "version": "6.5.4", - "resolved": "https://registry.npmjs.org/react-imported-component/-/react-imported-component-6.5.4.tgz", - "integrity": "sha512-RrPNo/g4nWtovUka+sSyrPzwxZqFxASmDBzdf92hMhugYe1hOobwBAipfsr1qtDUmICfirIO6J/scMEHtPaIwQ==", - "dependencies": { - "babel-plugin-macros": "^2.6.1", - "crc-32": "^1.2.0", - "detect-node-es": "^1.0.0", - "scan-directory": "^2.0.0", - "tslib": "^2.0.0" - }, - "bin": { - "imported-components": "bin/imported-components" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", - "react": "^16.9.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/react-imported-component/node_modules/babel-plugin-macros": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", - "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", - "dependencies": { - "@babel/runtime": "^7.7.2", - "cosmiconfig": "^6.0.0", - "resolve": "^1.12.0" - } - }, - "node_modules/react-imported-component/node_modules/cosmiconfig": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", - "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", - "dependencies": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.1.0", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.7.2" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/react-intl": { "version": "6.6.8", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.8.tgz", @@ -4960,39 +4873,33 @@ } }, "node_modules/react-router": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", - "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", - "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "hoist-non-react-statics": "^3.1.0", - "loose-envify": "^1.3.1", - "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.2", - "react-is": "^16.6.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", + "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "dependencies": { + "@remix-run/router": "1.20.0" + }, + "engines": { + "node": ">=14.0.0" }, "peerDependencies": { - "react": ">=15" + "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", - "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", + "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.3.4", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.20.0", + "react-router": "6.27.0" + }, + "engines": { + "node": ">=14.0.0" }, "peerDependencies": { - "react": ">=15" + "react": ">=16.8", + "react-dom": ">=16.8" } }, "node_modules/react-select": { @@ -5160,11 +5067,6 @@ "node": ">=4" } }, - "node_modules/resolve-pathname": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", - "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" - }, "node_modules/restore-cursor": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz", @@ -5271,11 +5173,6 @@ } ] }, - "node_modules/scan-directory": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/scan-directory/-/scan-directory-2.0.0.tgz", - "integrity": "sha512-0lsRfL5lKFQEQA//Ud4WatdCGD9krgzaEL9VqAPmddeLLvaKAgHEUvzN87V/0F9E2B813ha78PIiZFAtmLNwjw==" - }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", @@ -5717,16 +5614,6 @@ "optional": true, "peer": true }, - "node_modules/tiny-invariant": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", - "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==" - }, - "node_modules/tiny-warning": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", - "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" - }, "node_modules/tippy.js": { "version": "6.3.7", "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", @@ -5839,11 +5726,6 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, - "node_modules/value-equal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", - "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" - }, "node_modules/velocity-animate": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/velocity-animate/-/velocity-animate-1.5.2.tgz", diff --git a/package.json b/package.json index bc41e55..2c9ab82 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,6 @@ "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", @@ -26,6 +23,7 @@ "@kbss-cvut/s-forms": "^0.7.2-beta-6cfd5af.0", "@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", @@ -43,13 +41,14 @@ "react-bootstrap": "^1.4.3", "react-cytoscapejs": "^1.2.1", "react-dom": "^18.2.0", - "react-imported-component": "^6.5.4", "react-json-pretty": "^2.2.0", - "react-router-dom": "^5.1.2", + "react-router-dom": "^6.27.0", "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", diff --git a/src/Router.jsx b/src/Router.jsx new file mode 100644 index 0000000..259b79a --- /dev/null +++ b/src/Router.jsx @@ -0,0 +1,24 @@ +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 Dagre from "./components/dagre/Dagre.jsx"; + +const Router = () => { + return ( + + + } /> + } /> + } /> + } /> + } /> + + + ); +}; + +export default Router; diff --git a/src/components/App.jsx b/src/components/App.jsx deleted file mode 100644 index 08c7195..0000000 --- a/src/components/App.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { Component } from "react"; -import { Switch, BrowserRouter as Router, Route } from "react-router-dom"; -import importedComponent from "react-imported-component"; -import Home from "./Home"; -import Loading from "./Loading"; - -const Scripts = importedComponent(() => import(/* webpackChunkName:'Scripts' */ "./Scripts"), { - LoadingComponent: Loading, -}); -const Executions = importedComponent(() => import(/* webpackChunkName:'Executions' */ "./Executions"), { - LoadingComponent: Loading, -}); -const AsyncDagre = importedComponent(() => import(/* webpackChunkName:'Dagre' */ "./dagre/Dagre.jsx"), { - LoadingComponent: Loading, -}); -const AsyncNoMatch = importedComponent(() => import(/* webpackChunkName:'NoMatch' */ "./NoMatch"), { - LoadingComponent: Loading, -}); - -class App extends Component { - render() { - return ( - -
- - - - - - - -
- - ); - } -} - -export default App; diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 7c3c1f9..43a107a 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -2,14 +2,15 @@ import React from "react"; import { Container, Icon } from "semantic-ui-react"; import { Navbar } from "react-bootstrap"; import NavbarMenu from "./NavbarMenu"; +import { Outlet } from "react-router-dom"; const Layout = ({ children }) => { return (
- - {children} - + + +
diff --git a/src/components/dagre/Dagre.jsx b/src/components/dagre/Dagre.jsx index 578e7ac..03841e0 100644 --- a/src/components/dagre/Dagre.jsx +++ b/src/components/dagre/Dagre.jsx @@ -24,6 +24,7 @@ import SFormsFunctionModal from "../sform/SFormsFunctionModal"; import "@kbss-cvut/s-forms/css"; import Loading from "../Loading"; import ErrorModal from "../modal/ErrorModal"; +import { useLocation } from "react-router-dom"; import { TYPE, LABEL, @@ -77,7 +78,7 @@ const modalInputs = { errorMessage: null, }; -class Dagre extends React.Component { +class DagrePage extends React.Component { constructor(props) { super(props); @@ -725,4 +726,9 @@ class Dagre extends React.Component { } } +const Dagre = () => { + const location = useLocation(); + return ; +}; + export default Dagre; diff --git a/src/components/treebeard/ScriptsTree.jsx b/src/components/treebeard/ScriptsTree.jsx index 36ea3bb..9266442 100644 --- a/src/components/treebeard/ScriptsTree.jsx +++ b/src/components/treebeard/ScriptsTree.jsx @@ -1,10 +1,10 @@ import React, { Fragment } from "react"; import { includes } from "lodash"; + import styles from "./styles"; import Header from "./Header"; import { Treebeard, decorators } from "react-treebeard"; import Rest from "../rest/Rest"; -import { withRouter } from "react-router-dom"; import ScriptActionsModuleModal from "../modal/ScriptActionsModuleModal"; import Loading from "../Loading"; import ErrorModal from "../modal/ErrorModal"; @@ -126,4 +126,4 @@ class ScriptsTree extends React.Component { } } -export default withRouter(ScriptsTree); +export default ScriptsTree; diff --git a/src/index.jsx b/src/index.jsx index 4076274..a4e19e4 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,8 +1,9 @@ import React from "react"; -import App from "./components/App"; + import "./index.css"; import "bootstrap/dist/css/bootstrap.css"; import { createRoot } from "react-dom/client"; +import Router from "./Router.jsx"; const root = createRoot(document.getElementById("root")); -root.render(); +root.render(); From ca3e1eec09c8d01605430a46cbfdada489b665b2 Mon Sep 17 00:00:00 2001 From: Daniil Palagin Date: Tue, 5 Nov 2024 19:04:19 +0100 Subject: [PATCH 2/2] [#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/NoMatch.jsx | 4 ++-- src/components/Scripts.jsx | 16 +++++++--------- 5 files changed, 29 insertions(+), 31 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 ( - } /> - } /> - } /> - } /> + }> + } /> + } /> + } /> + } /> + } /> diff --git a/src/components/Executions.jsx b/src/components/Executions.jsx index 34f084a..f10041f 100644 --- a/src/components/Executions.jsx +++ b/src/components/Executions.jsx @@ -27,7 +27,7 @@ class Executions extends React.Component { return

Loading

; } else { return ( - + <>

Executions

@@ -81,7 +81,7 @@ class Executions extends React.Component { })}
- + ); } } diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 73e098c..62fce3b 100644 --- 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 ( - - - - -

Welcome to SPipes editor

-

- - - - - + + + +

Welcome to SPipes editor

+

+ + + + ); } } 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 ( - + <> Page not found! - + ); }; diff --git a/src/components/Scripts.jsx b/src/components/Scripts.jsx index 985a03f..352b6ae 100644 --- 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 ( - - - - - - - - - + + + + + + + ); } }