refactor: bind active page and selected overview item together

src/component/page-list/page-list-container.tsx

@@ -1,47 +1,31 @@
-import * as MobX from 'mobx';
+import Layout from '../../lsg/patterns/layout';
 import { observer } from 'mobx-react';
-import { PageListComposite } from './page-list-composite';
 import { PageRef } from '../../store/page/page-ref';
-import { Project } from '../../store/project';
+import { PageTileContainer } from './page-tile-container';
 import * as React from 'react';
 import { Store } from '../../store/store';
 
-@observer
-export class PageListContainer extends React.Component {
-	@MobX.observable public focusStates: boolean[] = this.generateInitialFocusList(false);
+export const PageListContainer: React.StatelessComponent = observer((): JSX.Element | null => {
+	const store = Store.getInstance();
+	const project = store.getCurrentProject();
+	const currentPage = store.getCurrentPageRef();
+	const currentPageId = currentPage ? currentPage.getId() : undefined;
 
-	@MobX.action
-	protected generateInitialFocusList(bool: boolean): boolean[] {
-		const pages = this.getPages();
-		const states: boolean[] = [];
-		pages.forEach((page: PageRef) => {
-			states.push(bool);
-		});
-		return states;
-	}
-	protected getPages(): PageRef[] {
-		const project: Project | undefined = Store.getInstance().getCurrentProject();
-		return project ? project.getPages() : [];
-	}
-
-	@MobX.action
-	protected handleClick(e: React.MouseEvent<HTMLElement>, i: number): void {
-		if (this.focusStates[i]) {
-			return;
-		}
-		this.focusStates.forEach((state, index) => {
-			this.focusStates[index] = false;
-		});
-		this.focusStates[i] = !this.focusStates[i];
+	if (!project) {
+		return null;
 	}
 
-	public render(): JSX.Element {
-		return (
-			<PageListComposite
-				focusStates={this.focusStates}
-				pages={this.getPages()}
-				onClick={this.handleClick}
-			/>
-		);
-	}
-}
+	return (
+		<Layout>
+			{project
+				.getPages()
+				.map((pageRef: PageRef, i: number) => (
+					<PageTileContainer
+						focused={pageRef.getId() === currentPageId}
+						key={pageRef.getId()}
+						page={pageRef}
+					/>
+				))}
+		</Layout>
+	);
+});

src/component/page-list/page-tile-container.tsx

@@ -8,7 +8,6 @@ import { Store } from '../../store/store';
 
 export interface PageTileContainerProps {
 	focused: boolean;
-	onClick: React.MouseEventHandler<HTMLElement>;
 	page: PageRef;
 }
 
@@ -41,7 +40,9 @@ export class PageTileContainer extends React.Component<PageTileContainerProps> {
 
 	@MobX.action
 	protected handleClick(e: React.MouseEvent<HTMLElement>): void {
-		this.props.onClick(e);
+		const store = Store.getInstance();
+		store.openPage(this.props.page.getId());
+
 		if (this.props.focused) {
 			this.editable = true;
 		}