Support of slug

README.md

@@ -18,13 +18,16 @@ Example configuration:
   "schemas": [
     {
       "name": "Petstore",
+      "slug": "petstore",
       "url": "https://petstore.swagger.io/v2/swagger.json"
     },
     {
+      "slug": "amazon-api-gateway",
       "name": "Amazon Api Gateway",
       "url": "https://api.apis.guru/v2/specs/amazonaws.com/apigateway/2015-07-09/openapi.json"
     },
     {
+      "slug": "amazon-appconfig",
       "name": "Amazon AppConfig",
       "url": "https://api.apis.guru/v2/specs/amazonaws.com/appconfig/2019-10-09/openapi.json"
     }

config.json

@@ -2,13 +2,16 @@
   "schemas": [
     {
       "name": "Petstore",
+      "slug": "petstore",
       "url": "https://petstore.swagger.io/v2/swagger.json"
     },
     {
+      "slug": "amazon-api-gateway",
       "name": "Amazon Api Gateway",
       "url": "https://api.apis.guru/v2/specs/amazonaws.com/apigateway/2015-07-09/openapi.json"
     },
     {
+      "slug": "amazon-appconfig",
       "name": "Amazon AppConfig",
       "url": "https://api.apis.guru/v2/specs/amazonaws.com/appconfig/2019-10-09/openapi.json"
     }

package.json

@@ -21,7 +21,7 @@
     "@babel/preset-react": "^7.12.13",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^1.0.1",
-    "copy-webpack-plugin": "^7.0.0",
+    "copy-webpack-plugin": "^10.2.0",
     "css-loader": "^6.5.1",
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
@@ -30,7 +30,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
@@ -39,7 +39,7 @@
     "swagger-ui": "^4.1.3",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.7.2",
     "yaml-loader": "^0.5.0"
   }
 }

src/components/Layout.jsx

@@ -3,6 +3,7 @@ import SchemaSelector from './SchemaSelector';
 import SwaggerUI from 'swagger-ui'
 import 'swagger-ui/dist/swagger-ui.css';
 import { connect } from 'react-redux';
+import { useParams } from "react-router-dom";
 
 const initSwaggerUi = function(url) {
     let ui = SwaggerUI({
@@ -12,15 +13,51 @@ const initSwaggerUi = function(url) {
 };
 
 const mapStateToProps = (state) => {
+    // find current schema config
+    let currentSwaggerSchema = null;
+    if (state && state.schemas && state.schemas.length > 0 && state.currentSchemaSlug) {
+        for (let i = 0; i < state.schemas.length; i++) {
+            if (state.schemas[i].slug === state.currentSchemaSlug) {
+                currentSwaggerSchema = state.schemas[i];
+                break;
+            }
+        }
+
+    }
+
+    return {
+        currentSwaggerSchema: currentSwaggerSchema
+    }
+};
+
+const mapDispatchToProps = dispatch => {
     return {
-        currentSwaggerSchemaUrl: state && state.currentSwaggerSchemaUrl
+        /**
+         * @param {string} schemaSlug
+         */
+        changeSwaggerSchema: (schemaSlug) => {
+            dispatch(
+                {
+                    type: 'SWAGGER_SCHEMA_CHANGED',
+                    schemaSlug
+                }
+            );
+        }
     }
 };
 
 function Layout(props) {
+    // build swagger ui
+    if (props.currentSwaggerSchema) {
+        initSwaggerUi(props.currentSwaggerSchema.url);
+    }
+
+    // read schema slug from uri
+    let params = useParams();
+
     useEffect(() => {
-        if (props.currentSwaggerSchemaUrl) {
-            initSwaggerUi(props.currentSwaggerSchemaUrl)
+        if (params.schemaSlug) {
+            props.changeSwaggerSchema(params.schemaSlug);
         }
     });
 
@@ -32,4 +69,4 @@ function Layout(props) {
     );
 }
 
-export default connect(mapStateToProps, null)(Layout);
+export default connect(mapStateToProps, mapDispatchToProps)(Layout);

src/components/SchemaSelector.jsx

@@ -1,21 +1,11 @@
 import React, {useEffect} from 'react';
 import { connect } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
 const mapStateToProps = (state) => {
-    let schemas = [];
-    let currentSwaggerSchemaUrl = null;
-
-    if (state && state.schemas && state.schemas.length > 0) {
-        schemas = state.schemas;
-
-        if (!state.currentSwaggerSchemaUrl) {
-            currentSwaggerSchemaUrl = state.currentSwaggerSchemaUrl;
-        }
-    }
-
     return {
-        schemas,
-        currentSwaggerSchemaUrl
+        schemas: state && state.schemas,
+        currentSchemaSlug: state && state.currentSchemaSlug
     }
 };
 
@@ -27,31 +17,46 @@ const styles = {
 
 const mapDispatchToProps = dispatch => {
     return {
-        changeSwaggerSchemaUrl: (swaggerSchemaUrl) => {
+        /**
+         * @param {string} schemaSlug
+         */
+        changeSwaggerSchema: (schemaSlug) => {
             dispatch(
                 {
                     type: 'SWAGGER_SCHEMA_CHANGED',
-                    swaggerSchemaUrl
+                    schemaSlug
                 }
             );
         }
     }
 };
 
 function SchemaSelector(props) {
+    const navigate = useNavigate();
+
+    if (!props.currentSchemaSlug && props.schemas) {
+        navigate("/schemas/" + props.schemas[0].slug);
+    }
+
     const handleSchemaChange = function(e) {
-        const schemaUrl = e.target.value;
-        props.changeSwaggerSchemaUrl(schemaUrl);
+        const schemaSlug = e.target.value;
+
+        // change address
+        navigate("/schemas/" + schemaSlug);
     };
 
     let selector = null;
     if (props.schemas && props.schemas.length > 0) {
         selector = (
             <div>
-                <select onChange={handleSchemaChange} style={styles.select}>
+                <select onChange={handleSchemaChange} style={styles.select} value={props.currentSchemaSlug}>
                     {
                         props.schemas.map(
-                            schema => (<option value={schema.url} key={schema.url}>{schema.name} ({schema.url})</option>)
+                            schema => (
+                                <option value={schema.slug} key={schema.slug}>
+                                    {schema.name} ({schema.url})
+                                </option>
+                            )
                         )
                     }
                 </select>

src/entrypoint.js

@@ -5,11 +5,12 @@ import { Provider } from 'react-redux'
 import { createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk'
 import { composeWithDevTools } from 'redux-devtools-extension';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 // store
 let initialState = {
     schemas: null,
-    currentSwaggerSchemaUrl: null
+    currentSchemaSlug: null
 };
 
 let store = createStore(
@@ -18,13 +19,12 @@ let store = createStore(
             case 'CONFIG_LOADED':
                 return {
                     ...state,
-                    schemas: action.config.schemas,
-                    currentSwaggerSchemaUrl: action.config.schemas[0].url
+                    schemas: action.config.schemas
                 };
             case 'SWAGGER_SCHEMA_CHANGED':
                 return {
                     ...state,
-                    currentSwaggerSchemaUrl: action.swaggerSchemaUrl
+                    currentSchemaSlug: action.schemaSlug
                 }
         }
     },
@@ -38,7 +38,14 @@ let store = createStore(
 // render layout
 ReactDOM.render(
     <Provider store={store}>
-        <Layout/>
+        <BrowserRouter>
+            <Routes>
+                <Route path="*" element={<Layout/>} />
+                <Route path="/schemas" element={<Layout/>}>
+                    <Route path=":schemaSlug" element={<Layout/>} />
+                </Route>
+            </Routes>
+        </BrowserRouter>
     </Provider>,
     document.getElementById('app')
 );

webpack.config.js

@@ -26,6 +26,9 @@ module.exports = {
     devtool: mode === "development"
         ? 'cheap-module-source-map'
         : false,
+    devServer: {
+        historyApiFallback: true,
+    },
     module: {
         rules: [
             {
@@ -75,7 +78,7 @@ module.exports = {
             {
                 test: /\.css$/,
                 use: [
-                    mode === "development" ? "style-loader" : MiniCssExtractPlugin.loader,
+                    MiniCssExtractPlugin.loader, // mode === "development" ? "style-loader" : MiniCssExtractPlugin.loader,
                     "css-loader"
                 ]
             }
@@ -100,7 +103,8 @@ module.exports = {
             ]
         }),
         new HtmlWebpackPlugin({
-            template: "assets/index.html"
+            template: "assets/index.html",
+            publicPath: "/"
         })
     ],
     output: {