refactor!: remove router inside boards

BREAKING CHANGE: remove router inside boards BREAKING CHANGE: change addBoard api BREAKING CHANGE: change addBoardView api BREAKING CHANGE: update Board type Refs: SHELL-204 (#434)
zextras · Jun 25, 2024 · 1f3d125 · 1f3d125
1 parent 367dcb4
commit 1f3d125
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 75 deletions.
diff --git a/api-extractor/carbonio-shell-ui.api.md b/api-extractor/carbonio-shell-ui.api.md
@@ -270,7 +270,7 @@ type AppDependantFunctions = {
 type AppDependantSetters = {
     setAppContext: ReturnType<AppActions['setAppContext']>;
     addRoute: (data: Partial<AppRouteDescriptor>) => ReturnType<AppActions['addRoute']>;
-    addBoardView: (data: Partial<BoardView>) => ReturnType<AppActions['addBoardView']>;
+    addBoardView: (data: Omit<BoardView, 'app'>) => ReturnType<AppActions['addBoardView']>;
     addSettingsView: (data: Partial<SettingsView>) => ReturnType<AppActions['addSettingsView']>;
     addSearchView: (data: Partial<SearchView>) => ReturnType<AppActions['addSearchView']>;
     addUtilityView: (data: Partial<UtilityView>) => ReturnType<AppActions['addUtilityView']>;
@@ -378,7 +378,7 @@ export type BatchRequest<T extends Exactify<Record<`${string}Request`, unknown>,
 // @public (undocumented)
 export type Board<T = unknown> = {
     id: string;
-    url: string;
+    boardViewId: string;
     app: string;
     icon: string;
     title: string;
@@ -423,12 +423,10 @@ type BoardState = {
 // Warning: (ae-forgotten-export) The symbol "CarbonioView" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-type BoardView = CarbonioView<BoardViewComponentProps>;
+type BoardView = Omit<CarbonioView<BoardViewComponentProps>, 'route'>;
 
 // @public (undocumented)
-export type BoardViewComponentProps = {
-    windowHistory: History;
-};
+export type BoardViewComponentProps = {};
 
 // @public (undocumented)
 export type BooleanString = 'TRUE' | 'FALSE';
@@ -1691,7 +1689,7 @@ interface ZimletProp {
 // lib/types/account/index.d.ts:131:5 - (ae-forgotten-export) The symbol "AccountRightTargetEmail" needs to be exported by the entry point lib.d.ts
 // lib/types/account/index.d.ts:136:9 - (ae-forgotten-export) The symbol "AccountRightName" needs to be exported by the entry point lib.d.ts
 // lib/types/account/index.d.ts:137:9 - (ae-forgotten-export) The symbol "AccountRightTarget" needs to be exported by the entry point lib.d.ts
-// lib/types/apps/index.d.ts:68:5 - (ae-forgotten-export) The symbol "PanelMode" needs to be exported by the entry point lib.d.ts
+// lib/types/apps/index.d.ts:66:5 - (ae-forgotten-export) The symbol "PanelMode" needs to be exported by the entry point lib.d.ts
 // lib/types/misc/index.d.ts:85:9 - (ae-forgotten-export) The symbol "SoapPolicy" needs to be exported by the entry point lib.d.ts
 // lib/types/misc/index.d.ts:104:5 - (ae-forgotten-export) The symbol "FolderView" needs to be exported by the entry point lib.d.ts
 // lib/types/misc/index.d.ts:120:5 - (ae-forgotten-export) The symbol "Meta" needs to be exported by the entry point lib.d.ts

diff --git a/src/boot/app/app-loader-setters.ts b/src/boot/app/app-loader-setters.ts
@@ -32,7 +32,7 @@ import type {
 export type AppDependantSetters = {
 	setAppContext: ReturnType<StoreAppSetters['setAppContext']>;
 	addRoute: (data: Partial<AppRouteDescriptor>) => ReturnType<StoreAppSetters['addRoute']>;
-	addBoardView: (data: Partial<BoardView>) => ReturnType<StoreAppSetters['addBoardView']>;
+	addBoardView: (data: Omit<BoardView, 'app'>) => ReturnType<StoreAppSetters['addBoardView']>;
 	addSettingsView: (data: Partial<SettingsView>) => ReturnType<StoreAppSetters['addSettingsView']>;
 	addSearchView: (data: Partial<SearchView>) => ReturnType<StoreAppSetters['addSearchView']>;
 	addUtilityView: (data: Partial<UtilityView>) => ReturnType<StoreAppSetters['addUtilityView']>;
@@ -52,7 +52,7 @@ export const getAppDependantSetters = (pkg: CarbonioModule): AppDependantSetters
 	return {
 		setAppContext: appStore.setAppContext(pkg.name),
 		addRoute: (route: Partial<AppRouteDescriptor>) => appStore.addRoute(normalizeRoute(route, pkg)),
-		addBoardView: (data: Partial<BoardView>) =>
+		addBoardView: (data: Omit<BoardView, 'app'>) =>
 			appStore.addBoardView(normalizeBoardView(data, pkg)),
 		addSettingsView: (data: Partial<SettingsView>) =>
 			appStore.addSettingsView(normalizeSettingsView(data, pkg)),

diff --git a/src/shell/boards/board-container.test.tsx b/src/shell/boards/board-container.test.tsx
@@ -50,7 +50,7 @@ describe('Board container', () => {
 				const boardId = `board-${index + 1}`;
 				accumulator[boardId] = {
 					id: boardId,
-					url: '/url',
+					boardViewId: '/url',
 					app: mockedApps[0].name,
 					title: `title${index + 1}`,
 					icon: 'CubeOutline'
@@ -923,9 +923,8 @@ describe('Board container', () => {
 		const boardObj = sample(mockedBoardState) as Board;
 		setupBoardStore(boardObj.id, { [boardObj.id]: boardObj });
 		const boardView: BoardView = {
-			id: boardObj.id,
+			id: boardObj.boardViewId,
 			app: boardObj.app,
-			route: boardObj.url,
 			component: (): React.JSX.Element => <Input label={'Board input'} />
 		};
 		useAppStore.getState().addBoardView(boardView);

diff --git a/src/shell/boards/board.tsx b/src/shell/boards/board.tsx
@@ -4,16 +4,16 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
-import { createMemoryHistory } from 'history';
-import { find, startsWith } from 'lodash';
-import { Route, Router, useHistory } from 'react-router-dom';
+import { Container } from '@zextras/carbonio-design-system';
+import { find } from 'lodash';
 import styled from 'styled-components';
 
 import AppContextProvider from '../../boot/app/app-context-provider';
 import { useAppStore } from '../../store/app';
-import { BoardProvider, updateBoard, useBoardStore } from '../../store/boards';
+import { BoardProvider, useBoardStore } from '../../store/boards';
+import type { BoardView } from '../../types/apps';
 import type { Board } from '../../types/boards';
 
 const BoardContainer = styled.div<{ show: boolean }>`
@@ -35,47 +35,37 @@ const BoardContainer = styled.div<{ show: boolean }>`
 	}
 `;
 
+const BoardViewComponent = ({
+	view,
+	boardId
+}: {
+	view: BoardView;
+	boardId: string;
+}): React.JSX.Element => (
+	<AppContextProvider pkg={view.app}>
+		<BoardProvider id={boardId}>
+			<view.component />
+		</BoardProvider>
+	</AppContextProvider>
+);
+
 export const AppBoard = ({ board }: { board: Board }): React.JSX.Element => {
 	const current = useBoardStore((s) => s.current);
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const history = useMemo(() => createMemoryHistory({ initialEntries: [board.url] }), []);
 	const boardViews = useAppStore((s) => s.views.board);
-	const windowHistory = useHistory();
-	const route = useMemo(() => {
-		const view = find(boardViews, (v) => v.id === board.url || startsWith(board.url, v.route));
-		if (view)
-			return (
-				<Route key={view.id} path={view.route}>
-					<AppContextProvider key={view.id} pkg={view.app}>
-						<BoardProvider id={board.id}>
-							<view.component windowHistory={windowHistory} />
-						</BoardProvider>
-					</AppContextProvider>
-				</Route>
-			);
-		return null;
-	}, [board.id, board.url, boardViews, windowHistory]);
-	useEffect(() => {
-		const unlisten = history.listen(({ location }) => {
-			if (`${location.pathname}${location.search}${location.hash}` !== board.url) {
-				updateBoard(board.id, { url: `${location.pathname}${location.search}${location.hash}` });
-			}
-		});
-		return () => {
-			unlisten();
-		};
-	}, [board.url, board.id, history]);
-
-	useEffect(() => {
-		const l = history.location;
-		if (`${l.pathname}${l.search}${l.hash}` !== board.url) {
-			history.push(board.url);
-		}
-	}, [board.url, history]);
+	const boardView = useMemo(
+		() => find(boardViews, (v) => v.id === board.boardViewId),
+		[board.boardViewId, boardViews]
+	);
 
 	return (
 		<BoardContainer show={current === board.id}>
-			<Router history={history}>{route}</Router>
+			{boardView ? (
+				<BoardViewComponent view={boardView} boardId={board.id} />
+			) : (
+				<Container orientation={'row'} mainAlignment={'center'}>
+					<p>Missing Board View</p>
+				</Container>
+			)}
 		</BoardContainer>
 	);
 };
diff --git a/src/shell/shell-view.test.tsx b/src/shell/shell-view.test.tsx
@@ -41,7 +41,7 @@ beforeEach(() => {
 	const boards: Record<string, Board> = {
 		'board-1': {
 			id: 'board-1',
-			url: '/url',
+			boardViewId: '/url',
 			app: mockedApps[0].name,
 			title: 'title1',
 			icon: 'CubeOutline'
@@ -164,7 +164,7 @@ describe('Shell view', () => {
 		const boards2: Record<string, Board> = {
 			'board-2': {
 				id: 'board-2',
-				url: '/url',
+				boardViewId: '/url',
 				app: mockedApps[0].name,
 				title: 'title2',
 				icon: 'CubeOutline'
@@ -226,7 +226,7 @@ describe('Shell view', () => {
 		const boards2: Record<string, Board> = {
 			'board-2': {
 				id: 'board-2',
-				url: '/url',
+				boardViewId: '/url',
 				app: mockedApps[0].name,
 				title: 'title2',
 				icon: 'CubeOutline'

diff --git a/src/store/app/utils.tsx b/src/store/app/utils.tsx
@@ -132,12 +132,11 @@ export const normalizeSecondaryAccessoryView = (
 	component: data?.component ?? FallbackView
 });
 
-export const normalizeBoardView = (data: Partial<BoardView>, app: CarbonioModule): BoardView => {
-	const route = trim(data.route ?? app.name, '/');
-	return {
-		app: app.name,
-		route,
-		id: data?.id ?? route,
-		component: data?.component ?? FallbackView
-	};
-};
+export const normalizeBoardView = (
+	data: Omit<BoardView, 'app'>,
+	app: CarbonioModule
+): BoardView => ({
+	app: app.name,
+	id: data.id,
+	component: data.component
+});
diff --git a/src/store/boards/store.ts b/src/store/boards/store.ts
@@ -5,7 +5,7 @@
  */
 
 import { produce } from 'immer';
-import { forEach, trimStart, uniqueId } from 'lodash';
+import { forEach, uniqueId } from 'lodash';
 import { create } from 'zustand';
 
 import type { Board } from '../../types/boards';
@@ -40,8 +40,7 @@ export const addBoard =
 					...board,
 					app,
 					id,
-					icon: board.icon ?? getApp(app)()?.icon ?? 'CubeOutline',
-					url: trimStart(board.url, '/')
+					icon: board.icon ?? getApp(app)()?.icon ?? 'CubeOutline'
 				} as Board;
 				state.current = id;
 				state.minimized = false;

diff --git a/src/tests/test-board-utils.ts b/src/tests/test-board-utils.ts
@@ -22,21 +22,21 @@ export type InitialSizeAndPosition = SizeAndPosition & {
 export const mockedBoardState: Record<string, Board> = {
 	'board-1': {
 		id: 'board-1',
-		url: '/url',
+		boardViewId: '/url',
 		app: mockedApps[0].name,
 		title: 'title1',
 		icon: 'CubeOutline'
 	},
 	'board-2': {
 		id: 'board-2',
-		url: '/url',
+		boardViewId: '/url',
 		app: mockedApps[0].name,
 		title: 'title2',
 		icon: 'CubeOutline'
 	},
 	'board-3': {
 		id: 'board-3',
-		url: '/url',
+		boardViewId: '/url',
 		app: mockedApps[0].name,
 		title: 'title3',
 		icon: 'CubeOutline'

diff --git a/src/types/apps/index.ts b/src/types/apps/index.ts
@@ -58,9 +58,7 @@ export type CarbonioAccessoryView<P> = {
 export type PrimaryBarComponentProps = { active: boolean };
 export type SecondaryBarComponentProps = { expanded: boolean };
 export type AppViewComponentProps = {};
-export type BoardViewComponentProps = {
-	windowHistory: History;
-};
+export type BoardViewComponentProps = {};
 export type SettingsViewProps = {};
 export type SearchViewProps = {
 	useQuery: () => [QueryChip[], Function];
@@ -84,7 +82,7 @@ export type SecondaryBarView = CarbonioView<SecondaryBarComponentProps>;
 
 export type AppView = CarbonioView<AppViewComponentProps>;
 
-export type BoardView = CarbonioView<BoardViewComponentProps>;
+export type BoardView = Omit<CarbonioView<BoardViewComponentProps>, 'route'>;
 
 export type UtilityView = CarbonioAccessoryView<UtilityBarComponentProps> & {
 	button: string | ComponentType<UtilityBarComponentProps>;

diff --git a/src/types/boards/index.ts b/src/types/boards/index.ts
@@ -5,7 +5,7 @@
  */
 export type Board<T = unknown> = {
 	id: string;
-	url: string;
+	boardViewId: string;
 	app: string;
 	icon: string;
 	title: string;