added rtx query to redux

react-ui/.gitignore

@@ -9,7 +9,7 @@
 /coverage
 
 # api
-/src/api
+/src/api/**
 
 # production
 /build

react-ui/package.json

@@ -23,7 +23,8 @@
         "start": "vite",
         "build": "tsc && vite build",
         "test": "react-scripts test",
-        "build::api": "./scripts/build-api.sh",
+        "build::api_old": "./scripts/build-api.sh",
+        "build::api": "npx @rtk-query/codegen-openapi ./scripts/openapi-config.json",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "lint::fix": "eslint src --ext .js,.jsx,.ts,.tsx  --fix"
     },
@@ -48,6 +49,7 @@
     "proxy": "http://localhost:55055",
     "devDependencies": {
         "@babel/runtime": "^7.21.5",
+        "@rtk-query/codegen-openapi": "^1.2.0",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
         "@typescript-eslint/eslint-plugin": "^7.2.0",

react-ui/scripts/build-api.sh

@@ -7,4 +7,4 @@ API_PATH=/api/openapiv2
 OUTPUT=${PROJECT_NAME}/src/api
 
 docker run -i --rm \
-    -v ${PROJECT_ROOT}:/local openapitools/openapi-generator-cli generate -i /local${API_PATH}/gosdn_northbound.swagger.json -g typescript -o /local/${OUTPUT}
\ No newline at end of file
+    -v ${PROJECT_ROOT}:/local openapitools/openapi-generator-cli generate -i /local${API_PATH}/gosdn_northbound.swagger.json -g typescript-redux-query -o /local/${OUTPUT}
\ No newline at end of file

react-ui/scripts/openapi-config.json

+{
+  "schemaFile": "../../api/openapiv2/gosdn_northbound.swagger.json",
+  "apiFile": "../src/stores/api.store.ts",
+  "apiImport": "emptySplitApi",
+  "outputFile": "../src/api/api.ts",
+  "exportName": "api",
+  "hooks": true
+}
\ No newline at end of file

react-ui/scripts/openapitools.json

-{
-    "$schema": "../node_modules/@openapitools/openapi-generator-cli/config.schema.json",
-    "spaces": 2,
-    "generator-cli": {
-      "version": "4.3.1",
-      "storageDir": "~/my/custom/storage/dir", // optional
-      "generators": { // optional
-        "v2.0": { // any name you like (just printed to the console log or reference it using --generator-key) 
-          "generatorName": "typescript-angular",
-          "output": "#{cwd}/output/v2.0/#{ext}/#{name}",
-          "glob": "examples/v2.0/{json,yaml}/*.{json,yaml}",
-          "additionalProperties": {
-            "ngVersion": "6.1.7",
-            "npmName": "restClient",
-            "supportsES6": "true",
-            "npmVersion": "6.9.0",
-            "withInterfaces": true
-          }
-        },
-        "v3.0": { // any name you like (just printed to the console log or reference it using --generator-key) 
-          "generatorName": "typescript-fetch",
-          "output": "#{cwd}/output/v3.0/#{ext}/#{name}",
-          "glob": "examples/v3.0/petstore.{json,yaml}"
-        }
-      }
-    }
-  }
\ No newline at end of file

react-ui/src/index.tsx

@@ -10,13 +10,12 @@ import {
 import './index.scss'
 import Landingpage from './pages/landingpage/landingpage'
 import LoginPage from './pages/login/login'
-import initStore from './stores/api.store'
 
 import './i18n/config'
 import { I18nextProvider } from 'react-i18next'
 import i18next from 'i18next'
-
-initStore()
+import { Provider } from 'react-redux'
+import { store } from './stores'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as Container)
 
@@ -34,8 +33,10 @@ const router = createBrowserRouter(
 
 root.render(
     <React.StrictMode>
-        <I18nextProvider i18n={i18next}>
-            <RouterProvider router={router} />
-        </I18nextProvider>
+        <Provider store={store}>
+            <I18nextProvider i18n={i18next}>
+                <RouterProvider router={router} />
+            </I18nextProvider>
+        </Provider>
     </React.StrictMode>
 )

react-ui/src/pages/login/login.tsx

@@ -2,43 +2,42 @@ import { Button, Col, Container, Form, Image, Row } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import './login.scss'
 
-import { AuthServiceApiAuthServiceLoginRequest } from '@api/types/ObjectParamAPI'
 import logo from '@assets/logo.svg'
 import React, { useRef } from 'react'
-import { AuthServiceApi, RbacLoginRequest, RbacLoginResponse, createConfiguration } from '@api/index'
+import { AuthServiceLoginApiArg, useAuthServiceLoginMutation } from '@api/api'
 
 const LoginPage = () => {
     const { t } = useTranslation('common')
     const usernameRef = useRef<HTMLInputElement>(null)
     const passwordRef = useRef<HTMLInputElement>(null)
 
-    const getAuthPayload = (): RbacLoginRequest => {
+    const getAuthPayload = (): AuthServiceLoginApiArg => {
         const username = usernameRef.current?.value
         const password = passwordRef.current?.value
 
         // TODO check values
-        const payload: RbacLoginRequest = {
-            username: username,
-            pwd: password,
-            timestamp: new Date().toString(),
+        const payload: AuthServiceLoginApiArg = {
+            rbacLoginRequest: {
+                username: username,
+                pwd: password,
+                timestamp: new Date().getTime().toString(),
+            }
         }
 
         return payload;
     }
 
+    const [
+        sendLogin,
+      ] = useAuthServiceLoginMutation()
+
     const login = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
-        const configuration = createConfiguration();
-        const apiInstance = new AuthServiceApi(configuration);
-
         const payload = getAuthPayload();
-
-        
-        apiInstance.authServiceLogin(payload).then((response:RbacLoginResponse) => {
-          console.log('API called successfully. Returned data: ' + response);
-        }).catch((error:any) => console.error(error));
-
+        sendLogin(payload).unwrap()
+        .then((payload) => console.log('fulfilled', payload))
+        .catch((error) => console.error('rejected', error));
     }
 
     return (

react-ui/src/setupProxy.js

-const { createProxyMiddleware } = require('http-proxy-middleware');
-
-module.exports = function(app) {
-  app.use(
-    '/api',
-    createProxyMiddleware({
-      target: 'http://127.0.0.1:8089',
-      changeOrigin: true,
-    })
-  );
-};
\ No newline at end of file

react-ui/src/stores/api.store.ts

-import { combineReducers } from 'redux'
-import userReducer from './slices/user.reducer'
-import { configureStore } from '@reduxjs/toolkit'
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
-const getReducers = () => {
-    return combineReducers({
-        userReducer,
-    })
-}
-
-const initStore = () => {
-    return configureStore({
-        reducer: getReducers(),
-    })
-}
-
-//export type RootState = ReturnType<typeof store.getState>
-export default initStore
+// initialize an empty api service that we'll inject endpoints into later as needed
+export const emptySplitApi = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
+  endpoints: () => ({}),
+})
\ No newline at end of file

react-ui/src/stores/index.ts

+import { combineReducers } from 'redux'
+import userReducer from './slices/user.reducer'
+import { configureStore } from '@reduxjs/toolkit'
+import { emptySplitApi } from './api.store'
+import { setupListeners } from '@reduxjs/toolkit/query'
+
+const getReducers = () => {
+    return combineReducers({
+        userReducer,
+        [emptySplitApi.reducerPath]: emptySplitApi.reducer
+    })
+}
+
+
+export const store = configureStore({ 
+        reducer: getReducers(),
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware().concat(emptySplitApi.middleware),
+})
+
+setupListeners(store.dispatch)
+
+//export type RootState = ReturnType<typeof store.getState>
\ No newline at end of file

react-ui/tsconfig.json

@@ -29,7 +29,7 @@
     "include": [
       "src/**/*.d.ts",
       "src/**/*.ts",
-      "src/**/*.tsx",
+      "src/**/*.tsx", "src/stores/api.store.ts", "scripts/test.ts",
     ],
     //"references": [{ "path": "./tsconfig.node.json" }]
 }
\ No newline at end of file

react-ui/tsconfig.node.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "skipLibCheck": true,
-    "module": "ESNext",
+    "module": "ES2020",
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "strict": true

react-ui/vite.config.mjs

@@ -8,10 +8,10 @@ export default defineConfig({
     port: 3000,
     proxy: {
       '/api': {
-        target: 'https://localhost:8089',
+        target: 'http://127.0.0.1:8080',
         changeOrigin: true,
-        secure: false,      
-        ws: true,
+        secure: false,   
+        rewrite: (path) => path.replace(/^\/api/, ''),
         configure: (proxy, _options) => {
           proxy.on('error', (err, _req, _res) => {
             console.log('proxy error', err);