FIX;Auth selector native types

.gitignore

@@ -15,3 +15,5 @@ tsconfig.tsbuildinfo
 tsconfig.build.tsbuildinfo
 
 typedoc.json
+
+.DS_Store

package.json

@@ -32,7 +32,8 @@
 		"classnames": "2.3.1",
 		"clipboard": "2.0.10",
 		"date-fns": "2.28.0",
-		"postcss": "8.4.12",
+		"postcss": "^8.4.7",
+		"proxy-memoize": "0.3.8",
 		"ramda": "0.28.0",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
@@ -40,7 +41,6 @@
 		"react-router-dom": "6.3.0",
 		"redux": "4.2.0",
 		"redux-thunk": "2.4.1",
-		"typescript": "4.6.3",
 		"yup": "0.32.11"
 	},
 	"devDependencies": {
@@ -83,9 +83,11 @@
 		"postcss-cli": "9.1.0",
 		"prettier": "2.6.2",
 		"react-docgen-typescript-loader": "3.7.2",
+		"tailwindcss": "3.0.23",
 		"ts-jest": "27.1.4",
 		"ts-node": "10.7.0",
 		"tsconfig-paths": "3.14.1",
+		"typescript": "4.6.2",
 		"typescript-json-schema": "0.53.0",
 		"webpack": "5.72.0",
 		"webpack-cli": "4.9.2",

packages/api/src/actions.ts

@@ -1,8 +1,8 @@
 import { Action } from '@treejs/types/redux/actions';
 
-import { ACTIONS, FetchConfig } from './types';
+import { Actions, FetchConfig } from './types';
 
 export const fetchData = <C = unknown>(config: FetchConfig<C>): Action<FetchConfig<C>> => ({
-	type: ACTIONS.FETCH,
+	type: Actions.FETCH,
 	payload: config,
 });

packages/api/src/components/FetchLoader.tsx

@@ -3,22 +3,22 @@ import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 import { getIsFetching } from '../selectors';
-import { FetchShape } from '../types';
+import { FetchShapes } from '../types';
 
 type IProps = {
 	path: string;
 	placeholder?: React.ReactElement;
-	shape: FetchShape;
+	shape: FetchShapes;
 };
 
 const FetchLoader: React.FC<IProps> = (props) => {
 	const { children, path, shape } = props;
 
-	const isFetching = useSelector((state) => getIsFetching(state, path));
+	const isFetching = useSelector((state: any) => getIsFetching([state, path]));
 
 	const placeholder = useMemo(() => {
 		switch (shape) {
-			case FetchShape.input:
+			case FetchShapes.input:
 				return (
 					<>
 						<div className="h-4 bg-gray-200 rounded w-1/4" />

packages/api/src/middleware.tsx

@@ -8,7 +8,7 @@ import { Action } from '@treejs/types/redux/actions';
 import { isJSON, isNilOrEmpty } from '@treejs/utils';
 
 import { onError, onRequest, onSuccess } from './slice';
-import { ACTIONS, FetchConfig } from './types';
+import { Actions, FetchConfig } from './types';
 import { resolveParams } from './utils';
 
 type ISettings<C> = {
@@ -42,9 +42,9 @@ export const apiMiddleware =
 	(store: IStore) =>
 	(next) =>
 	async (action: Action<FetchConfig<C>>) => {
-		if (action.type === ACTIONS.FETCH) {
+		if (action.type === Actions.FETCH) {
 			if (isNilOrEmpty(action.payload.url)) {
-				throw `URL '${action.payload.url}' is not valid, please specify valid URL!`;
+				throw new Error(`URL '${action.payload.url}' is not valid, please specify valid URL!`);
 			}
 
 			if (is(Function, action.payload.onRequest)) {
@@ -56,16 +56,18 @@ export const apiMiddleware =
 			const baseUrl = action.payload.baseUrl || setting.BASE_ENDPOINT_URL;
 			const endpoint = `${baseUrl}${resolveParams(action.payload.url, action.payload.queryParams)}`;
 
-			const tokenValue = getAuthenticateAttribute(
+			const tokenValue = getAuthenticateAttribute([
 				store.getState(),
-				setting?.authorization?.authAttribute || 'accessToken'
-			) as string;
+				{
+					attrName: setting?.authorization?.authAttribute || 'accessToken',
+				},
+			]);
 
 			const authorizationToken = !isNilOrEmpty(tokenValue)
 				? {
 						[setting?.authorization?.header || 'Authorization']: `${
 							setting?.authorization?.schema || 'Bearer'
-						} ${tokenValue}`,
+						} ${tokenValue.toString()}`,
 				  }
 				: {};
 

packages/api/src/selectors.ts

@@ -1,18 +1,13 @@
-import { pathOr, propOr } from 'ramda';
+import memoize from 'proxy-memoize';
 
-import { createSelector } from 'reselect';
-
-import { APIReducer } from '@treejs/api/types';
-import { EMPTY_OBJECT } from '@treejs/constants/empty';
+import { APIReducer, FetchState } from '@treejs/api/types';
 import { ROOT_REDUCER_NAME } from '@treejs/constants/redux';
 
-const root = pathOr(EMPTY_OBJECT, [ROOT_REDUCER_NAME, 'fetch']);
+import { API_REDUCER_NAME } from './constants';
 
-export const getIsFetching = createSelector(
-	root,
-	(state: any, fetchUrl: string) => fetchUrl,
-	(state, url): boolean => {
-		const fetchState: APIReducer = propOr({}, url, state);
-		return propOr(false, 'isFetching', fetchState);
-	}
-);
+export const getIsFetching = memoize<
+	[{ [ROOT_REDUCER_NAME]: { [API_REDUCER_NAME]: APIReducer } }, string],
+	FetchState['isFetching']
+>(([state, fetchUrl]) => {
+	return state[ROOT_REDUCER_NAME][API_REDUCER_NAME][fetchUrl].isFetching;
+});

packages/api/src/types.ts

@@ -6,7 +6,7 @@ export enum FetchMethod {
 	PUT = 'put',
 }
 
-export enum ACTIONS {
+export enum Actions {
 	FETCH = 'API_FETCH/FETCH',
 }
 
@@ -31,7 +31,7 @@ export type FetchState = {
 	isFetching: boolean;
 };
 
-export enum FetchShape {
+export enum FetchShapes {
 	input,
 }
 

packages/auth/package.json

@@ -14,7 +14,8 @@
 		"@treejs/types": "0.12.1"
 	},
 	"peerDependencies": {
-		"@reduxjs/toolkit": "1.8.0",
+		"@reduxjs/toolkit": "^1.8.0",
+		"proxy-memoize": "0.3.8",
 		"redux": "4.0.5"
 	}
 }

packages/auth/src/selectors.ts

@@ -1,4 +1,5 @@
-import { type Selector, createSelector } from '@reduxjs/toolkit';
+import memoize from 'proxy-memoize';
+import { DefaultRootState } from 'react-redux';
 
 import { ROOT_REDUCER_NAME } from '@treejs/constants/redux';
 
@@ -7,12 +8,12 @@ import { IAuthOption } from './types';
 
 const reducer = <P>(state: any): IAuthOption<P> => state[ROOT_REDUCER_NAME][AUTH_REDUCER_NAME];
 
-export const isAuthenticated = createSelector<[Selector<any, IAuthOption<any>>], boolean>(
-	[reducer],
-	(state) => state.authenticated
-);
+export const isAuthenticated = memoize<DefaultRootState, boolean>((state) => {
+	return reducer<Record<string, unknown>>(state).authenticated;
+});
 
-export const getAuthenticateAttribute = createSelector<
-	[Selector<any, IAuthOption<any>>, Selector<{ name: keyof IAuthOption<any> }, string>],
-	keyof IAuthOption<any>
->([reducer, (_, { name }) => name], (state, name) => state[name]);
+export const getAuthenticateAttribute = memoize<[DefaultRootState, { attrName: string }], unknown>(
+	([state, { attrName }]) => {
+		return reducer<Record<string, unknown>>(state)[attrName];
+	}
+);

packages/styles/package.json

@@ -8,13 +8,13 @@
 		"clean": "rm -rf dist/",
 		"ci:publish": "mkdir dist && cp -r src/* package.json dist && cd dist/ && npm publish && rm package.json"
 	},
-	"devDependencies": {
-		"postcss-import": "14.0.2",
-		"postcss-nested": "5.0.6",
-		"tailwindcss": "3.0.23"
+	"dependencies": {
+		"postcss-import": "^14.0.2",
+		"postcss-nested": "^5.0.6"
 	},
 	"peerDependencies": {
-		"classnames": "2.2.6",
-		"postcss": "8.4.7"
+		"classnames": "^2.2.6",
+		"postcss": "^8.4.7",
+		"tailwindcss": "^3.0.23"
 	}
 }

packages/types/src/redux/model.ts

@@ -1,11 +0,0 @@
-import { Action } from './actions';
-
-class ReduxModel {
-	public REDUCER_NAME: string;
-	public initialState: Record<string, unknown>;
-
-	public getReducer: (state: any) => any;
-	public reducer: (state: any, { type, payload }: Action<any>) => any;
-}
-
-export default ReduxModel;

types/store.ts

@@ -1,19 +0,0 @@
-import { APIReducer } from '@treejs/api/types';
-import { AUTH_REDUCER_NAME } from '@treejs/auth/constants';
-import { AuthReducer } from '@treejs/auth/types';
-import { MODAL_REDUCER_NAME } from '@treejs/components/Modal/constants';
-import { ModalReducer } from '@treejs/components/Modal/types';
-import { TOASTER_REDUCER_NAME } from '@treejs/components/Toaster/constants';
-import { ToasterReducer } from '@treejs/components/Toaster/types';
-import { ROOT_REDUCER_NAME } from '@treejs/constants/redux';
-
-export type TreeJSReducer = {
-	[AUTH_REDUCER_NAME]: AuthReducer<any>;
-	[MODAL_REDUCER_NAME]: ModalReducer;
-	[TOASTER_REDUCER_NAME]: ToasterReducer;
-	fetch: APIReducer;
-};
-
-export type Store = {
-	[ROOT_REDUCER_NAME]: TreeJSReducer;
-};