fix!: clean integrations store

* refactor: make Action type externd DropdownItem type
* fix: fix remove functions in useIntegrationsStore
* refactor: improve removeAction implementation to avoid useless new object instances
* refactor!: remove integrated hooks and relative utilities

BREAKING CHANGE: remove registerHooks, removeHooks, getIntegratedHook and useIntegratedHook
refs: SHELL-50  (#207)

src/boot/app/app-loader-functions.ts

@@ -15,8 +15,7 @@ import {
 	getActionsFactory,
 	getActionFactory,
 	getIntegratedComponent,
-	getIntegratedFunction,
-	getIntegratedHook
+	getIntegratedFunction
 } from '../../store/integrations/getters';
 import {
 	getUserAccount,
@@ -39,8 +38,7 @@ import {
 	useActionsFactory,
 	useActionFactory,
 	useIntegratedComponent,
-	useIntegratedFunction,
-	useIntegratedHook
+	useIntegratedFunction
 } from '../../store/integrations/hooks';
 import { CarbonioModule } from '../../../types';
 import {
@@ -110,8 +108,6 @@ export const getAppFunctions = (pkg: CarbonioModule): Record<string, Function> =
 	getApp: getApp(pkg.name),
 
 	// INTEGRATIONS
-	useIntegratedHook,
-	getIntegratedHook,
 	useIntegratedFunction,
 	getIntegratedFunction,
 	useIntegratedComponent,

src/boot/app/app-loader-setters.ts

@@ -77,8 +77,6 @@ export const getAppSetters = (pkg: CarbonioModule): Record<string, Function> =>
 			appSetters.addSecondaryAccessoryView(normalizeSecondaryAccessoryView(data, pkg)),
 		// remove secondaryAccessory
 		removeSecondaryAccessoryView: appSetters.removeSecondaryAccessoryView,
-		registerHooks: integrations.registerHooks,
-		removeHooks: integrations.removeHooks,
 		registerFunctions: integrations.registerFunctions,
 		removeFunctions: integrations.removeFunctions,
 		registerActions: integrations.registerActions,

src/shell/creation-button.tsx

@@ -9,7 +9,7 @@ import { Location } from 'history';
 import { groupBy, noop, reduce } from 'lodash';
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Action, AppRoute } from '../../types';
+import { Action, AppRoute, CarbonioModule } from '../../types';
 import { ACTION_TYPES } from '../constants';
 import { useCurrentRoute } from '../history/hooks';
 import { useAppList } from '../store/app';
@@ -35,15 +35,15 @@ export const CreationButtonComponent: FC<{ activeRoute: AppRoute; location: Loca
 
 	const secondaryActions = [
 		...(byApp[activeRoute?.app ?? ''] ?? []),
-		...reduce(
+		...reduce<CarbonioModule, Array<Action>>(
 			apps,
 			(acc, app, i) => {
 				if (app.name !== activeRoute?.app && byApp[app.name]?.length > 0) {
 					acc.push({ type: 'divider', label: '', id: `divider-${i}` }, ...byApp[app.name]);
 				}
 				return acc;
 			},
-			[] as Array<Action | { type: 'divider'; id: string; label: string }>
+			[]
 		)
 	];
 
@@ -60,7 +60,7 @@ export const CreationButtonComponent: FC<{ activeRoute: AppRoute; location: Loca
 				size="extralarge"
 				background="primary"
 				label={t('new', 'New')}
-				onClick={primaryAction?.click}
+				onClick={primaryAction.onClick || primaryAction.click || noop}
 				items={secondaryActions}
 				disabledPrimary={!primaryAction || primaryAction?.disabled}
 				disabledSecondary={!secondaryActions?.length}

src/store/integrations/getters.tsx

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-/* eslint-disable react-hooks/rules-of-hooks */
 /* THIS FILE CONTAINS HOOKS, BUT ESLINT IS DUMB */
 
 import { compact, map } from 'lodash';
@@ -15,12 +14,6 @@ import { Action, ActionFactory } from '../../../types';
 // @ts-ignore
 import AppContextProvider from '../../boot/app/app-context-provider';
 // eslint-disable-next-line @typescript-eslint/ban-types
-export const getIntegratedHook = (id: string): [Function, boolean] => {
-	const integration = useIntegrationsStore.getState().hooks?.[id];
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	return integration ? [integration, true] : [(): void => {}, false];
-};
-// eslint-disable-next-line @typescript-eslint/ban-types
 export const getIntegratedFunction = (id: string): [Function, boolean] => {
 	const integration = useIntegrationsStore.getState().functions?.[id];
 	// eslint-disable-next-line @typescript-eslint/no-empty-function

src/store/integrations/hooks.tsx

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-/* eslint-disable react-hooks/rules-of-hooks */
 /* THIS FILE CONTAINS HOOKS, BUT ESLINT IS DUMB */
 
 import { compact, map } from 'lodash';
@@ -15,12 +14,6 @@ import { Action, ActionFactory, CombinedActionFactory } from '../../../types';
 // @ts-ignore
 import AppContextProvider from '../../boot/app/app-context-provider';
 // eslint-disable-next-line @typescript-eslint/ban-types
-export const useIntegratedHook = (id: string): [Function, boolean] => {
-	const integration = useIntegrationsStore((s) => s.hooks?.[id]);
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	return integration ? [integration, true] : [(): void => {}, false];
-};
-// eslint-disable-next-line @typescript-eslint/ban-types
 export const useIntegratedFunction = (id: string): [Function, boolean] => {
 	const integration = useIntegrationsStore((s) => s.functions?.[id]);
 	// eslint-disable-next-line @typescript-eslint/no-empty-function

src/store/integrations/store.ts

@@ -6,7 +6,7 @@
 
 import produce from 'immer';
 import create from 'zustand';
-import { forEach, omit, reduce } from 'lodash';
+import { forEach, includes, omit } from 'lodash';
 import { ComponentType } from 'react';
 import type { ActionFactory, AnyFunction, IntegrationsState } from '../../../types';
 import Composer from './composer';
@@ -20,7 +20,6 @@ export const useIntegrationsStore = create<IntegrationsState>((set) => ({
 			app: SHELL_APP_ID
 		}
 	},
-	hooks: {},
 	functions: {},
 	registerActions: <T>(
 		...items: Array<{ id: string; action: ActionFactory<T>; type: string }>
@@ -43,44 +42,34 @@ export const useIntegrationsStore = create<IntegrationsState>((set) => ({
 					});
 				})
 			),
-	registerHooks: (...items: Array<{ id: string; hook: AnyFunction }>): void =>
+	registerFunctions: (...items: Array<{ id: string; fn: AnyFunction }>): void =>
 		set(
 			produce((state) => {
-				forEach(items, ({ id, hook }) => {
-					state.hooks[id] = hook;
+				forEach(items, ({ id, fn }) => {
+					state.functions[id] = fn;
 				});
 			})
 		),
-	registerFunctions: (...items: Array<{ id: string; fn: AnyFunction }>): void =>
+	removeActions: (...ids: Array<string>): void =>
 		set(
 			produce((state) => {
-				forEach(items, ({ id, fn }) => {
-					state.functions[id] = fn;
+				forEach(state.actions, (actionTypeMap, type) => {
+					forEach(actionTypeMap, (actionFactory, actionFactoryId) => {
+						if (includes(ids, actionFactoryId)) {
+							delete state.actions[type][actionFactoryId];
+						}
+					});
 				});
 			})
 		),
-	removeActions: (...ids: Array<string>): void =>
-		set((s) => ({
-			...s,
-			actions: reduce(
-				s.actions,
-				(acc, actions, type) => ({ ...acc, [type]: omit(actions, ids) }),
-				{}
-			)
-		})),
 	removeComponents: (...ids: Array<string>): void =>
 		set((s) => ({
 			...s,
-			actions: omit(s.components, ids)
-		})),
-	removeHooks: (...ids: Array<string>): void =>
-		set((s) => ({
-			...s,
-			actions: omit(s.hooks, ids)
+			components: omit(s.components, ids)
 		})),
 	removeFunctions: (...ids: Array<string>): void =>
 		set((s) => ({
 			...s,
-			actions: omit(s.functions, ids)
+			functions: omit(s.functions, ids)
 		}))
 }));

types/exports/index.d.ts

@@ -59,8 +59,6 @@ declare const BASENAME: string;
 
 declare const IS_STANDALONE: boolean;
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-declare const getIntegratedHook: (id: string) => [Function, boolean];
 // eslint-disable-next-line @typescript-eslint/ban-types
 declare const getIntegratedFunction: (id: string) => [Function, boolean];
 declare const getIntegratedComponent: (id: string) => [ComponentType<unknown>, boolean];
@@ -72,8 +70,6 @@ declare const getActionFactory: <T>(
 	id: string
 ) => [ActionFactory<T> | undefined, boolean];
 // eslint-disable-next-line @typescript-eslint/ban-types
-declare const useIntegratedHook: (id: string) => [Function, boolean];
-// eslint-disable-next-line @typescript-eslint/ban-types
 declare const useIntegratedFunction: (id: string) => [Function, boolean];
 declare const useIntegratedComponent: (id: string) => [ComponentType<unknown>, boolean];
 declare const useActions: <T>(target: T, type: string) => Array<Action>;
@@ -136,8 +132,6 @@ declare const removeComponents: (...ids: Array<string>) => void;
 declare const registerComponents: (
 	...items: Array<{ id: string; component: ComponentType }>
 ) => void;
-declare const removeHooks: (...ids: Array<string>) => void;
-declare const registerHooks: (...items: Array<{ id: string; hook: AnyFunction }>) => void;
 declare const removeFunctions: (...ids: Array<string>) => void;
 declare const registerFunctions: (...items: Array<{ id: string; fn: AnyFunction }>) => void;
 // add route (id route primaryBar secondaryBar app)

types/integrations/index.d.ts

@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { ComponentType, MouseEvent, SyntheticEvent } from 'react';
+import { ComponentType } from 'react';
+import { DropdownItem } from '@zextras/carbonio-design-system';
 
 export type IntegrationsState = {
 	actions: ActionMap;
 	components: ComponentMap;
-	hooks: HookMap;
 	functions: FunctionMap;
 	removeActions: (...ids: Array<string>) => void;
 	registerActions: (
@@ -19,21 +19,13 @@ export type IntegrationsState = {
 	registerComponents: (
 		app: string
 	) => (...items: Array<{ id: string; component: ComponentType }>) => void;
-	removeHooks: (...ids: Array<string>) => void;
-	registerHooks: (...items: Array<{ id: string; hook: AnyFunction }>) => void;
 	removeFunctions: (...ids: Array<string>) => void;
 	registerFunctions: (...items: Array<{ id: string; fn: AnyFunction }>) => void;
 };
 
-export type Action = {
-	id: string;
-	label: string;
-	icon: string;
-	click: (ev: SyntheticEvent<HTMLElement> | KeyboardEvent) => void;
-	type?: 'divider';
+export type Action = DropdownItem & {
 	primary?: boolean;
 	group?: string;
-	disabled?: boolean;
 	[key: string]: unknown;
 };