Refactor using redux-clean-architecture

drama-queen/package.json

@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.6",
+    "@reduxjs/toolkit": "^1.9.5",
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-query-devtools": "^4.33.0",
     "@types/memoizee": "^0.4.8",
@@ -26,6 +27,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
+    "redux-clean-architecture": "^3.7.2",
     "tsafe": "^1.6.4",
     "tss-react": "^4.9.0",
     "zod": "^3.21.4"

drama-queen/src/bootstrap.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { initializeCore } from "core"
+import { createCoreProvider } from "core";
 import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { type RoutingStrategy, createRouter } from "ui/routing/createRouter";
@@ -24,14 +24,15 @@ const { QueenApiProvider } = createQueenApiProvider({
   apiUrl: import.meta.env.VITE_QUEEN_API_URL
 });
 
-const { CoreLoadingFallback } = initializeCore({
+const { CoreProvider } = createCoreProvider({
   "apiUrl": import.meta.env.VITE_API_URL,
   "keycloakParams": {
     "url": import.meta.env.VITE_KEYCLOAK_URL,
     "clientId": import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
     "realm": import.meta.env.VITE_KEYCLOAK_REALM,
     "origin": window.location.origin + import.meta.env.BASE_URL
-  }
+  },
+  "redirectUrl": import.meta.env.VITE_REDIRECT_URL,
 });
 
 const mount = ({
@@ -60,9 +61,9 @@ const mount = ({
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
     */
-    <CoreLoadingFallback fallback={<h1>Loading</h1>} >
+    <CoreProvider fallback={<h1>Loading</h1>} >
       <LoadingData />
-    </CoreLoadingFallback>
+    </CoreProvider>
   );
 
   return () => queueMicrotask(() => root.unmount());

drama-queen/src/core/index.ts

@@ -0,0 +1,19 @@
+/*
+NOTE: Only here do we export the API for a specific framework (here react).
+In the rest of the core directory everything is agnostic to React
+*/
+import { createReactApi } from "redux-clean-architecture/react";
+import { createCore } from "./setup";
+import { usecases } from "./usecases";
+
+export const {
+    createCoreProvider,
+    selectors,
+    useCoreEvts,
+    useCoreExtras,
+    useCoreFunctions,
+    useCoreState
+} = createReactApi({
+    createCore,
+    usecases
+});

drama-queen/src/core/setup.ts

@@ -0,0 +1,50 @@
+
+import { createCoreFromUsecases } from "redux-clean-architecture";
+import type { GenericCreateEvt, GenericThunks } from "redux-clean-architecture";
+import { createApiClient } from "./queenApi/createApiClient";
+import { createKeycloakClient } from "./keycloakClient/createKeycloakClient";
+import { usecases } from "./usecases";
+
+type CoreParams = {
+    apiUrl: string;
+    keycloakParams: {
+        url: string;
+        clientId: string;
+        realm: string;
+        origin?: string;
+    };
+    redirectUrl: string;
+};
+
+export async function createCore(params: CoreParams) {
+
+    const { apiUrl, keycloakParams } = params;
+
+    const oidc = await createKeycloakClient(keycloakParams);
+
+    const queenApi = createApiClient({
+        apiUrl,
+        "getAccessToken": !oidc.isUserLoggedIn ?
+            (() => null) :
+            (() => oidc.getAccessToken())
+    });
+
+    const core = createCoreFromUsecases({
+        "thunksExtraArgument": {
+            "coreParams": params,
+            oidc,
+            queenApi
+        },
+        usecases
+    });
+
+    return core;
+}
+
+type Core = Awaited<ReturnType<typeof createCore>>;
+
+export type State = ReturnType<Core["getState"]>;
+
+export type Thunks = GenericThunks<Core>;
+
+export type CreateEvt = GenericCreateEvt<Core>;

drama-queen/src/core/usecases/index.ts

@@ -0,0 +1,4 @@
+
+import * as loadingData from "./loadingData";
+
+export const usecases = { loadingData };