fix #22

MAIF · Feb 9, 2024 · 25555fa · 25555fa
1 parent f03c129
commit 25555fa
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 49 deletions.
diff --git a/cli/Cargo.lock b/cli/Cargo.lock
diff --git a/cli/Cargo.toml b/cli/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "wasmo"
-version = "1.0.4"
+version = "1.0.5-dev"
 edition = "2021"
 authors = ["Zwiterrion <[email protected]>"]
 license = "MIT OR Apache-2.0"

diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "1.0.3",
+  "version": "1.0.5-dev",
   "private": true,
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -17,6 +17,7 @@
     "pako": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.0",
     "react-toastify": "^9.1.1",

diff --git a/ui/src/App.js b/ui/src/App.js
@@ -5,6 +5,7 @@ import Pako from 'pako'
 import * as Service from './services'
 import TabsManager from './TabsManager';
 import { toast } from 'react-toastify';
+import { withRouter } from './withRouter';
 
 class App extends React.Component {
   state = {
@@ -22,25 +23,33 @@ class App extends React.Component {
     this.reloadPlugins().then(() => {
       if (window.location.search) {
         const params = new URLSearchParams(window.location.search);
-        const pluginId = params.get('plugin');
+        const pluginId = params.get('pluginId');
         if (pluginId && pluginId !== "undefined") {
           this.onPluginClick(pluginId);
         }
       }
     })
   }
 
-  componentDidUpdate() {
-    const { selectedPlugin } = this.state;
+  // componentDidUpdate() {
+  //   const { selectedPlugin } = this.state;
+
+  //   const params = new URLSearchParams(window.location.search);
+  //   const pluginId = params.get('plugin');
 
-    const params = new URLSearchParams(window.location.search);
-    const pluginId = params.get('plugin');
+  //   if (selectedPlugin && selectedPlugin.pluginId !== pluginId) {
+  //     window.history.replaceState(null, "", '?plugin=' + selectedPlugin.pluginId);
+  //   } else if (!selectedPlugin) {
+  //     window.history.replaceState(null, null, '/');
+  //   }
+  // }
 
-    // if (selectedPlugin && selectedPlugin.pluginId !== pluginId) {
-    //   window.history.replaceState(null, "", '?plugin=' + selectedPlugin.pluginId);
-    // } else if (!selectedPlugin) {
-    //   window.history.replaceState(null, null, '/');
-    // }
+  updateSelectedPlugin = (newValue, callback) => {
+    console.log(newValue)
+    if (newValue.selectedPlugin)
+      this.props.navigate(`?pluginId=${newValue.selectedPlugin.pluginId}`)
+
+    this.setState(newValue, callback);
   }
 
   reloadPlugins = () => {
@@ -60,7 +69,7 @@ class App extends React.Component {
     const { editorState, selectedPlugin, plugins } = this.state;
 
     if (editorState === 'onNewFile') {
-      this.setState({
+      this.updateSelectedPlugin({
         selectedPlugin: {
           ...selectedPlugin,
           files: selectedPlugin
@@ -123,7 +132,7 @@ class App extends React.Component {
                 })
               }, () => {
                 if (selectedPlugin) {
-                  this.setState({
+                  this.updateSelectedPlugin({
                     selectedPlugin: {
                       ...selectedPlugin,
                       filename: newPlugin.newFilename
@@ -166,7 +175,7 @@ class App extends React.Component {
   }
 
   onNewFile = () => {
-    this.setState({
+    this.updateSelectedPlugin({
       editorState: 'onNewFile',
       selectedPlugin: {
         ...this.state.selectedPlugin,
@@ -186,7 +195,7 @@ class App extends React.Component {
     this.setState({
       plugins: this.state.plugins.filter(p => !p.new)
     }, () => {
-      this.setState({
+      this.updateSelectedPlugin({
         editorState: 'onNewPlugin',
         selectedPlugin: undefined,
         plugins: [
@@ -202,7 +211,7 @@ class App extends React.Component {
   }
 
   onFileChange = (newFilename) => {
-    this.setState({
+    this.updateSelectedPlugin({
       selectedPlugin: {
         ...this.state.selectedPlugin,
         files: this.state.selectedPlugin.files.map(f => {
@@ -241,7 +250,7 @@ class App extends React.Component {
     }, () => {
       const { selectedPlugin } = this.state;
       if (selectedPlugin && selectedPlugin.pluginId === pluginId) {
-        this.setState({
+        this.updateSelectedPlugin({
           selectedPlugin: {
             ...selectedPlugin,
             new: true,
@@ -257,7 +266,7 @@ class App extends React.Component {
     return new Promise(resolve => {
       jsZip.loadAsync(res)
         .then(data => {
-          this.setState({
+          this.updateSelectedPlugin({
             selectedPlugin: {
               ...plugin,
               files: Object.values(data.files)
@@ -297,7 +306,7 @@ class App extends React.Component {
       opa: "package.json"
     };
 
-    this.setState({
+    this.updateSelectedPlugin({
       selectedPlugin: {
         ...selectedPlugin,
         files: selectedPlugin.files.map(file => {
@@ -316,7 +325,7 @@ class App extends React.Component {
   }
 
   onPluginClick = newSelectedPlugin => {
-    this.setState({
+    this.updateSelectedPlugin({
       configFiles: [],
       selectedPlugin: undefined
     }, () => {
@@ -413,7 +422,7 @@ class App extends React.Component {
   handleContent = (filename, newContent) => {
     const { selectedPlugin } = this.state;
 
-    this.setState({
+    this.updateSelectedPlugin({
       selectedPlugin: {
         ...selectedPlugin,
         files: selectedPlugin.files.map(file => {
@@ -509,9 +518,11 @@ class App extends React.Component {
         Service.removePlugin(pluginId)
           .then(res => {
             if (res.status === 204)
-              this.setState({
+              this.updateSelectedPlugin({
                 plugins: this.state.plugins.filter(f => f.pluginId !== pluginId),
                 selectedPlugin: undefined
+              }, () => {
+                this.props.navigate('/')
               })
           })
       }
@@ -520,7 +531,7 @@ class App extends React.Component {
 
   removeFile = filename => {
     if (window.confirm(`Delete the ${filename} file ?`)) {
-      this.setState({
+      this.updateSelectedPlugin({
         selectedPlugin: {
           ...this.state.selectedPlugin,
           files: this.state.selectedPlugin.files.filter(file => file.filename !== filename)
@@ -529,18 +540,14 @@ class App extends React.Component {
     }
   }
 
-  setSelectedPlugin = selectedPlugin => {
-    this.setState({ selectedPlugin });
-  }
-
   createManifest = () => {
     if (!this.state.selectedPlugin.files
       .find(f => f.filename === "wapm.toml")) {
       Service.getWapmManifest()
         .then(r => r.blob())
         .then(file => new File([file], "").text())
         .then(content => {
-          this.setState({
+          this.updateSelectedPlugin({
             selectedPlugin: {
               ...this.state.selectedPlugin,
               files: [
@@ -560,7 +567,7 @@ class App extends React.Component {
   createReadme = () => {
     if (!this.state.selectedPlugin.files
       .find(f => f.filename === "README.md")) {
-      this.setState({
+      this.updateSelectedPlugin({
         selectedPlugin: {
           ...this.state.selectedPlugin,
           files: [
@@ -606,12 +613,16 @@ class App extends React.Component {
         showPlaySettings={this.showPlaySettings}
         removeFile={this.removeFile}
         onLoadConfigurationFile={this.onLoadConfigurationFile}
-        setSelectedPlugin={this.setSelectedPlugin}
+        backToHome={() => {
+          this.setState({ selectedPlugin: undefined }, () => {
+            this.props.navigate('/')
+          })
+        }}
         createManifest={this.createManifest}
         createReadme={this.createReadme}
       />
     </div>
   }
 }
 
-export default App;
+export default withRouter(App);
diff --git a/ui/src/PluginManager.js b/ui/src/PluginManager.js
@@ -18,7 +18,7 @@ class PluginManager extends React.Component {
         {selectedPlugin && <div className='d-flex justify-content-between align-items-center sidebar-header'
           style={{
             cursor: 'pointer'
-          }} onClick={() => props.setSelectedPlugin(undefined)}>
+          }} onClick={() => props.backToHome(undefined)}>
           <div className='d-flex align-items-center'>
             <i className='fa-solid fa-chevron-left me-1' />
             <span className='fw-bold'>Change current plugin</span>

diff --git a/ui/src/TabsManager.js b/ui/src/TabsManager.js
@@ -63,7 +63,7 @@ function TabsManager({ plugins, ...props }) {
             {({ open, ButtonWhenHidden }) => !open ? ButtonWhenHidden() : <>
               <PluginManager
                 plugins={plugins}
-                setSelectedPlugin={props.setSelectedPlugin}
+                backToHome={props.backToHome}
                 selectedPlugin={props.selectedPlugin}
                 reloadPlugins={props.reloadPlugins}
                 onPluginClick={props.onPluginClick}

diff --git a/ui/src/index.js b/ui/src/index.js
@@ -3,23 +3,37 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { ToastContainer } from 'react-toastify';
+import {
+  createBrowserRouter,
+  RouterProvider,
+  Route,
+  Link,
+} from "react-router-dom";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
 import 'react-toastify/dist/ReactToastify.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <>
-    <ToastContainer
-      position="bottom-right"
-      autoClose={4000}
-      newestOnTop={false}
-      closeOnClick
-      pauseOnFocusLoss
-      draggable
-      theme="dark"
-    />
-    <App />
-  </>
-);
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: (
+      <>
+        <ToastContainer
+          position="bottom-right"
+          autoClose={4000}
+          newestOnTop={false}
+          closeOnClick
+          pauseOnFocusLoss
+          draggable
+          theme="dark"
+        />
+        <App />
+      </>
+    ),
+  }
+]);
+
+root.render(<RouterProvider router={router} />);
diff --git a/ui/src/withRouter.js b/ui/src/withRouter.js
@@ -0,0 +1,16 @@
+import { useNavigate } from 'react-router-dom';
+
+export const withRouter = (Component) => {
+    const Wrapper = (props) => {
+        const navigate = useNavigate();
+
+        return (
+            <Component
+                navigate={navigate}
+                {...props}
+            />
+        );
+    };
+
+    return Wrapper;
+};
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1966,6 +1966,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@remix-run/[email protected]":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.0.tgz#461a952c2872dd82c8b2e9b74c4dfaff569123e2"
+  integrity sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -7993,6 +7998,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.0.tgz#177c8bd27146decbb991eafb5df159f7a9f70035"
+  integrity sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==
+  dependencies:
+    "@remix-run/router" "1.15.0"
+    react-router "6.22.0"
+
+[email protected]:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.0.tgz#a22b44851a79dafc6b944cb418db3e80622b9be1"
+  integrity sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==
+  dependencies:
+    "@remix-run/router" "1.15.0"
+
 [email protected]:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"