create-chayns-app 1.2.0-beta.0 → 1.2.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-chayns-app",
-    "version": "1.2.0-beta.0",
+    "version": "1.2.0-beta.2",
     "private": false,
     "description": "Create a new chayns® development project in one command.",
     "keywords": [
@@ -16,7 +16,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/TobitSoftware/create-chayns-app.git"
+        "url": "git+https://github.com/TobitSoftware/create-chayns-app.git"
     },
     "license": "MIT",
     "author": {

package/templates/api-v5/internal/js/src/redux-modules/index.js

@@ -0,0 +1,17 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { counterReducer } from './counter/slice';
+import { loggerMiddleware } from './loggerMiddleware';
+
+const rootReducer = combineReducers({
+    counter: counterReducer,
+});
+
+export const createStore = (preloadedState) => configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(loggerMiddleware),
+    preloadedState,
+});
+
+const store = createStore();
+
+export default store;

package/templates/api-v5/internal/js/src/redux-modules/loggerMiddleware.js

@@ -0,0 +1,31 @@
+import logger from "../utils/logger";
+
+export const loggerMiddleware = () => (next) => (action) => {
+    try {
+        const metaAction = action;
+        if (metaAction.meta.requestStatus === 'rejected') {
+            if (metaAction.meta.aborted || metaAction.meta.condition) {
+                return next(action);
+            }
+            if (process.env.NODE_ENV === 'development') {
+                // eslint-disable-next-line no-console
+                console.log('redux action error', action);
+            }
+            logger.error({
+                message: 'redux action error',
+                customText: metaAction.type,
+                data: { arg: metaAction.meta.arg },
+                section: 'redux-modules/loggerMiddleware',
+            }, metaAction.error);
+        }
+        return next(action);
+    } catch (ex) {
+        logger.error({
+            message: 'error in store',
+            data: {
+                action,
+            }
+        }, ex);
+    }
+    return undefined;
+};

package/templates/api-v5/internal/js/src/utils/logger.js

@@ -0,0 +1,31 @@
+import { getCurrentPage, getSite, getUser } from 'chayns-api';
+import { ChaynsLogger } from 'chayns-logger';
+
+const logger = new ChaynsLogger({
+    // TODO: create and insert your applicationUid
+    applicationUid: '<applicationUid>',
+    overrideOnError: true,
+    overrideConsoleError: process.env.NODE_ENV !== 'development',
+    useDevServer: process.env.NODE_ENV === 'development' || ['qa', 'development'].includes(process.env.BUILD_ENV),
+    version: process.env.BUILD_VERSION,
+    throttleTime: 1000,
+    middleware: (payload) => {
+        try {
+            const currentPage = getCurrentPage();
+            // eslint-disable-next-line no-param-reassign
+            payload.siteId ??= currentPage.siteId;
+            // eslint-disable-next-line no-param-reassign
+            payload.customNumber ??= currentPage.id;
+            // eslint-disable-next-line no-param-reassign
+            payload.personId ??= getUser()?.personId;
+            // eslint-disable-next-line no-param-reassign
+            payload.locationId ??= getSite().locationId;
+        } catch {
+            //
+        }
+
+        return true;
+    },
+});
+
+export default logger;

package/templates/api-v5/internal/ts/src/redux-modules/index.ts

@@ -0,0 +1,20 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { counterReducer } from './counter/slice';
+import { loggerMiddleware } from './loggerMiddleware';
+
+const rootReducer = combineReducers({
+    counter: counterReducer,
+});
+
+export const createStore = (preloadedState?: RootState) => configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(loggerMiddleware),
+    preloadedState,
+});
+
+const store = createStore();
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppDispatch = ReturnType<typeof createStore>["dispatch"];
+
+export default store;

package/templates/api-v5/internal/ts/src/redux-modules/loggerMiddleware.ts

@@ -0,0 +1,45 @@
+import { Middleware } from "@reduxjs/toolkit";
+import logger from "../utils/logger";
+
+type MetaAction = {
+    type: string;
+    payload: unknown;
+    meta: {
+        arg: unknown;
+        requestId: string;
+        requestStatus: 'pending' | 'rejected' | 'fulfilled';
+        aborted?: boolean;
+        condition?: boolean;
+    },
+    error?: Error;
+}
+
+export const loggerMiddleware: Middleware = () => (next) => (action) => {
+    try {
+        const metaAction = action as MetaAction;
+        if (metaAction.meta.requestStatus === 'rejected') {
+            if (metaAction.meta.aborted || metaAction.meta.condition) {
+                return next(action);
+            }
+            if (process.env.NODE_ENV === 'development') {
+                // eslint-disable-next-line no-console
+                console.log('redux action error', action);
+            }
+            logger.error({
+                message: 'redux action error',
+                customText: metaAction.type,
+                data: { arg: metaAction.meta.arg },
+                section: 'redux-modules/loggerMiddleware',
+            }, metaAction.error);
+        }
+        return next(action);
+    } catch (ex) {
+        logger.error({
+            message: 'error in store',
+            data: {
+                action,
+            }
+        }, ex as Error);
+    }
+    return undefined;
+};

package/templates/api-v5/internal/ts/src/utils/logger.ts

@@ -0,0 +1,31 @@
+import { getCurrentPage, getSite, getUser } from 'chayns-api';
+import { ChaynsLogger } from 'chayns-logger';
+
+const logger = new ChaynsLogger({
+    // TODO: create and insert your applicationUid
+    applicationUid: '<applicationUid>',
+    overrideOnError: true,
+    overrideConsoleError: process.env.NODE_ENV !== 'development',
+    useDevServer: process.env.NODE_ENV === 'development' || ['qa', 'development'].includes(process.env.BUILD_ENV),
+    version: process.env.BUILD_VERSION,
+    throttleTime: 1000,
+    middleware: (payload) => {
+        try {
+            const currentPage = getCurrentPage();
+            // eslint-disable-next-line no-param-reassign
+            payload.siteId ??= currentPage.siteId;
+            // eslint-disable-next-line no-param-reassign
+            payload.customNumber ??= currentPage.id;
+            // eslint-disable-next-line no-param-reassign
+            payload.personId ??= getUser()?.personId;
+            // eslint-disable-next-line no-param-reassign
+            payload.locationId ??= getSite().locationId;
+        } catch {
+            //
+        }
+
+        return true;
+    },
+});
+
+export default logger;

package/templates/api-v5/page/src/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import AppWrapper from './components/AppWrapper';
-
+{{ logger-import }}
 try {
     const root = createRoot(document.querySelector('#root'));
     root.render(<AppWrapper />);

package/templates/api-v5/page-module-redux/src/components/App.jsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import { WaitUntil } from 'chayns-api';
 import { SmallWaitCursor } from '@chayns-components/core';
 import { useSelector } from 'react-redux';
-import { selectCount } from '../redux-modules/counter/counterSelectors';
+import { selectCounterValue } from '../redux-modules/counter/slice';
 import './app.scss';
 
 const App = () => {
-    const counter = useSelector(selectCount);
+    const counter = useSelector(selectCounterValue);
 
     const [taskList] = useState(() => [
         // first level tasks are executed one after the other

package/templates/api-v5/page-redux/src/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import AppWrapper from './components/AppWrapper';
-
+{{ logger-import }}
 try {
     const root = createRoot(document.querySelector('#root'));
     root.render(<AppWrapper />);

package/templates/api-v5/page-ts/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import AppWrapper from './components/AppWrapper';
-
+{{ logger-import }}
 try {
     const root = createRoot(document.querySelector('#root') as Element);
     root.render(<AppWrapper />);

package/templates/api-v5/page-ts-module/src/components/AppWrapper.tsx

@@ -1,9 +1,9 @@
-import React, { FC, ComponentProps } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import { ChaynsProvider, withCompatMode } from 'chayns-api';
 import { PageProvider } from '@chayns-components/core';
 import App from './App';
 
-const AppWrapper: FC<ComponentProps<typeof ChaynsProvider>> = (props) => (
+const AppWrapper = (props: ComponentPropsWithoutRef<typeof ChaynsProvider>) => (
     <div className="{{ package-name-underscore }}">
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <ChaynsProvider {...props}>

package/templates/api-v5/page-ts-module-redux/src/components/App.tsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import { WaitUntil } from 'chayns-api';
 import { SmallWaitCursor } from '@chayns-components/core';
 import { useSelector } from 'react-redux';
-import { selectCount } from '../redux-modules/counter/counterSelectors';
+import { selectCounterValue } from '../redux-modules/counter/slice';
 import './app.scss';
 
 const App = () => {
-    const counter = useSelector(selectCount);
+    const counter = useSelector(selectCounterValue);
 
     const [taskList] = useState(() => [
         // first level tasks are executed one after the other

package/templates/api-v5/page-ts-module-redux/src/components/AppWrapper.tsx

@@ -1,11 +1,11 @@
-import React, { FC, ComponentProps } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import { Provider } from 'react-redux';
 import { ChaynsProvider, withCompatMode } from 'chayns-api';
 import { PageProvider } from '@chayns-components/core';
 import App from './App';
 import store from '../redux-modules';
 
-const AppWrapper: FC<ComponentProps<typeof ChaynsProvider>> = (props) => (
+const AppWrapper = (props: ComponentPropsWithoutRef<typeof ChaynsProvider>) => (
     <div className="{{ package-name-underscore }}">
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <ChaynsProvider {...props}>

package/templates/api-v5/page-ts-redux/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import AppWrapper from './components/AppWrapper';
-
+{{ logger-import }}
 try {
     const root = createRoot(document.querySelector('#root') as Element);
     root.render(<AppWrapper />);

package/templates/api-v5/shared/js/src/redux-modules/counter/slice.js

@@ -16,8 +16,13 @@ const slice = createSlice({
             state.value += payload;
         },
     },
+    selectors: {
+        selectCounterState: (state) => state,
+        selectCounterValue: (state) => state.value,
+    },
 });
 
 export const { increment, decrement, incrementByAmount } = slice.actions;
+export const { selectCounterState, selectCounterValue } = slice.selectors;
 export const counterReducer = slice.reducer;
 export const counterSliceName = slice.name;

package/templates/api-v5/shared/js/src/redux-modules/index.js

@@ -5,7 +5,11 @@ const rootReducer = combineReducers({
     counter: counterReducer,
 });
 
-const Store = configureStore({
+export const createStore = (preloadedState) => configureStore({
     reducer: rootReducer,
+    preloadedState,
 });
-export default Store;
+
+const store = createStore();
+
+export default store;

package/templates/api-v5/shared/ts/src/hooks/redux.ts

@@ -0,0 +1,5 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from '../redux-modules';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

package/templates/api-v5/shared/ts/src/redux-modules/counter/slice.ts

@@ -16,8 +16,13 @@ const counterSlice = createSlice({
             state.value += payload;
         },
     },
+    selectors: {
+        selectCounterState: (state) => state,
+        selectCounterValue: (state) => state.value,
+    },
 });
 
 export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+export const { selectCounterState, selectCounterValue } = counterSlice.selectors;
 export const counterReducer = counterSlice.reducer;
 export const counterSliceName = counterSlice.name;

package/templates/api-v5/shared/ts/src/redux-modules/index.ts

@@ -5,10 +5,14 @@ const rootReducer = combineReducers({
     counter: counterReducer,
 });
 
-const Store = configureStore({
+export const createStore = (preloadedState?: RootState) => configureStore({
     reducer: rootReducer,
+    preloadedState,
 });
 
+const store = createStore();
+
 export type RootState = ReturnType<typeof rootReducer>;
-export type AppDispatch = typeof Store.dispatch;
-export default Store;
+export type AppDispatch = ReturnType<typeof createStore>["dispatch"];
+
+export default store;

package/templates/api-v5/shared/js/src/redux-modules/counter/selectors.js

@@ -1,5 +0,0 @@
-import { counterSliceName } from './slice';
-
-export const selectCounterState = (state) => state[counterSliceName];
-
-export const selectCounterValue = (state) => selectCounterState(state).value;

package/templates/api-v5/shared/ts/src/redux-modules/counter/selectors.ts

@@ -1,6 +0,0 @@
-import { counterSliceName } from './slice';
-import { RootState } from '../index';
-
-export const selectCounterState = (state: RootState) => state[counterSliceName];
-
-export const selectCounterValue = (state: RootState) => selectCounterState(state).value;