Merge pull request #175 from OneNoteDev/linswu/addNotebookChildrenLoading

Linswu/add notebook children loading

Author: MADLinsen

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "onenotepicker",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "files": [
     "dist/**/*"
   ],

Diff for: src/components/notebookRenderStrategy.tsx

@@ -12,9 +12,12 @@ import { NotebookOpenedIconSvg } from './icons/notebookOpenedIcon.svg';
 import { NotebookClosedIconSvg } from './icons/notebookClosedIcon.svg';
 import { ChevronSvg } from './icons/chevron.svg';
 import { CreateNewSectionNode } from './createNewSection/createNewSectionNode';
+import { SpinnerIconSvg } from './icons/spinnerIcon.svg';
+import { Strings } from '../strings';
 
 export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
 	onClickBinded = () => {};
+	onExpandBinded = this.onExpand.bind(this);
 
 	constructor(private notebook: Notebook, private globals: InnerGlobals) { }
 
@@ -42,6 +45,23 @@ export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
 	}
 
 	getChildren(childrenLevel: number): JSX.Element[] {
+		if (this.notebook.apiHttpErrorMessage) {
+			const errorString = this.notebook.apiHttpErrorMessage;
+			return [
+				<li role='status' aria-live='polite' aria-label={errorString} className='progress-row'>
+					<div>{errorString}</div>
+				</li>
+			];
+		}
+
+		if (!this.notebook.sections && !this.notebook.sectionGroups) {
+			return [
+				<li className='progress-row'>
+					<SpinnerIconSvg />
+				</li>
+			];
+		}
+
 		const createNewSection = this.globals.callbacks.onSectionCreated || this.globals.shouldShowCreateEntityInputs ?
 			[<CreateNewSectionNode
 				key={this.notebook.id + 'createnewsectionnode'}
@@ -56,6 +76,10 @@ export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
 			</CreateNewSectionNode>] :
 			[];
 
+		if (!this.notebook.sections || !this.notebook.sectionGroups) {
+			return [...createNewSection]
+		}
+
 		const setsize = this.notebook.sections.length + this.notebook.sectionGroups.length;
 
 		const sectionGroupRenderStrategies = this.notebook.sectionGroups.map(sectionGroup => new SectionGroupRenderStrategy(sectionGroup, this.globals));
@@ -65,7 +89,7 @@ export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
 					expanded={renderStrategy.isExpanded()} node={renderStrategy} globals={this.globals}
 					treeViewId={Constants.TreeView.id} key={renderStrategy.getId()}
 					id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} selected={renderStrategy.isSelected()}
-					setsize={setsize} posinset={this.notebook.sections.length + i + 1} /> :
+					setsize={setsize} posinset={this.notebook.sections ? this.notebook.sections.length + i + 1 : undefined} /> :
 				<LeafNode node={renderStrategy} treeViewId={Constants.TreeView.id} key={renderStrategy.getId()} globals={this.globals}
 					id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} />);
 
@@ -121,4 +145,23 @@ export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
 	private onChevronClick() {
 		this.expandNode();
 	}
+
+	private onExpand() {
+		if (!this.notebook.sections && !this.notebook.sectionGroups && this.notebook.apiUrl && this.globals.oneNoteDataProvider) {
+			this.globals.oneNoteDataProvider.getNotebookBySelfUrl(this.notebook.apiUrl, 5).then((notebook) => {
+				this.notebook.sections = notebook.sections
+				this.notebook.sectionGroups = notebook.sectionGroups
+			}).catch((apiError: any) => {
+				try {
+					this.notebook.apiHttpErrorMessage = JSON.parse(apiError.response).error.message
+				} catch (error) {
+					this.notebook.apiHttpErrorMessage = Strings.getError(apiError.statusCode);
+				}
+			}).then(() => {
+				if (this.globals.callbacks.onNotebookInfoReturned) {
+					this.globals.callbacks.onNotebookInfoReturned(this.notebook);
+				}
+			})
+		}
+	}
 }

Diff for: src/components/sharedNotebookRenderStrategy.tsx

@@ -15,7 +15,6 @@ import { NotebookClosedIconSvg } from './icons/notebookClosedIcon.svg';
 import { SpinnerIconSvg } from './icons/spinnerIcon.svg';
 import { ChevronSvg } from './icons/chevron.svg';
 import { CreateNewSectionNode } from './createNewSection/createNewSectionNode';
-import * as OneNoteApi from 'onenoteapi';
 
 export class SharedNotebookRenderStrategy implements ExpandableNodeRenderStrategy {
 	onClickBinded = () => {};
@@ -52,8 +51,8 @@ export class SharedNotebookRenderStrategy implements ExpandableNodeRenderStrateg
 	}
 
 	getChildren(childrenLevel: number): JSX.Element[] {
-		if (typeof (this.notebook.apiHttpErrorCode) === 'number') {
-			const errorString = Strings.getError(this.notebook.apiHttpErrorCode);
+		if (this.notebook.apiHttpErrorMessage) {
+			const errorString = this.notebook.apiHttpErrorMessage;
 			return [
 				<li role='status' aria-live='polite' aria-label={errorString} className='progress-row'>
 					<div>{errorString}</div>
@@ -155,7 +154,7 @@ export class SharedNotebookRenderStrategy implements ExpandableNodeRenderStrateg
 
 			this.globals.oneNoteDataProvider.getSpNotebookProperties(this.notebook, depth, true).then((apiProperties) => {
 				if (!apiProperties) {
-					this.notebook.apiHttpErrorCode = 404;
+					this.notebook.apiHttpErrorMessage = Strings.getError(404);
 					return;
 				}
 
@@ -164,8 +163,12 @@ export class SharedNotebookRenderStrategy implements ExpandableNodeRenderStrateg
 				if (this.globals.notebookListUpdater) {
 					this.globals.notebookListUpdater.updateNotebookList([this.notebook]);
 				}
-			}).catch((apiError: OneNoteApi.RequestError) => {
-				this.notebook.apiHttpErrorCode = apiError.statusCode;
+			}).catch((apiError: any) => {
+				try {
+					this.notebook.apiHttpErrorMessage = JSON.parse(apiError.response).error.message
+				} catch (error) {
+					this.notebook.apiHttpErrorMessage = Strings.getError(apiError.statusCode);
+				}
 			}).then(() => {
 				const { onSharedNotebookInfoReturned } = this.globals.callbacks;
 				if (!!onSharedNotebookInfoReturned) {

Diff for: src/oneNoteDataStructures/notebook.ts

@@ -3,9 +3,12 @@ import { Section } from './section';
 import { SectionGroup } from './sectionGroup';
 
 export interface Notebook extends OneNoteItem {
+	// Properties that need to be loaded-on-demand
+	apiHttpErrorMessage?: string;
+
 	expanded: boolean;
-	sectionGroups: SectionGroup[];
-	sections: Section[];
+	sectionGroups?: SectionGroup[];
+	sections?: Section[];
 	webUrl: string;
 	apiUrl?: string;
 	lastModifiedTime: Date;

Diff for: src/oneNoteDataStructures/notebookListUpdater.ts

@@ -58,7 +58,7 @@ export class NotebookListUpdater {
 	addSection(newSection: Section) {
 		const loneParent = newSection.parent!;
 		const parentInHierarchy = OneNoteItemUtils.find(this.notebooks, item => item.id === loneParent.id) as SectionParent | undefined;
-		if (parentInHierarchy) {
+		if (parentInHierarchy && parentInHierarchy.sections) {
 			// Establish two-way reference
 			parentInHierarchy.sections = [newSection, ...parentInHierarchy.sections];
 			newSection.parent = parentInHierarchy;
@@ -69,6 +69,11 @@ export class NotebookListUpdater {
 		// Preserve properties we want to keep from the original object ...
 		next.expanded = original.expanded;
 
+		if (!original.sections || !original.sectionGroups || 
+			!next.sections || !next.sectionGroups) {
+			return;
+		}
+
 		// ... then recurse through the children
 		for (let newSectionGroup of next.sectionGroups) {
 			const originalSectionGroup = original.sectionGroups.find(sg => sg.id === newSectionGroup.id);
@@ -118,6 +123,10 @@ export class NotebookListUpdater {
 	}
 
 	private getSectionRefFromSectionParent(sectionId: string, sectionParent: SectionParent): Section | undefined {
+		if (!sectionParent.sections || !sectionParent.sectionGroups) {
+			return undefined;
+		}
+		
 		// Search this parent's sections for the matching id ...
 		for (let childSection of sectionParent.sections) {
 			if (childSection.id === sectionId) {

Diff for: src/oneNoteDataStructures/oneNoteApiResponseTransformer.ts

@@ -30,8 +30,8 @@ export class OneNoteApiResponseTransformer {
 			lastModifiedTime: notebook.lastModifiedTime
 		};
 
-		transformed.sectionGroups = notebook.sectionGroups ? notebook.sectionGroups.map(sg => this.transformSectionGroup(sg, transformed)) : [];
-		transformed.sections = notebook.sections ? notebook.sections.map(section => this.transformSection(section, transformed)) : [];
+		transformed.sectionGroups = notebook.sectionGroups ? notebook.sectionGroups.map(sg => this.transformSectionGroup(sg, transformed)) : undefined;
+		transformed.sections = notebook.sections ? notebook.sections.map(section => this.transformSection(section, transformed)) : undefined;
 
 		return transformed;
 	}

Diff for: src/oneNoteDataStructures/oneNoteItemUtils.ts

@@ -29,6 +29,10 @@ export class OneNoteItemUtils {
 				sectionGroups = sectionParentNotebook.apiProperties.spSectionGroups;
 				sections = sectionParentNotebook.apiProperties.spSections;
 			} else {
+				if (!sectionParent.sections || !sectionParent.sectionGroups) {
+					continue;
+				}
+
 				sectionGroups = sectionParent.sectionGroups;
 				sections = sectionParent.sections;
 			}
@@ -93,6 +97,10 @@ export class OneNoteItemUtils {
 	 * one descendent section; false otherwise.
 	 */
 	static prune(root: Notebook | SectionGroup): boolean {
+		if (!root.sections || !root.sectionGroups) {
+			return false
+		}
+
 		root.sectionGroups = root.sectionGroups.filter(OneNoteItemUtils.prune);
 		return root.sectionGroups.length > 0 || root.sections.length > 0;
 	}

Diff for: src/oneNoteDataStructures/sharedNotebook.ts

@@ -9,7 +9,6 @@ import { SectionGroup } from './sectionGroup';
 export interface SharedNotebook extends Notebook {
 	// Properties that need to be loaded-on-demand
 	apiProperties?: SharedNotebookApiProperties;
-	apiHttpErrorCode?: number;
 	startedLoading?: boolean;
 
 	// Properties returned from GetRecentNotebooks

Diff for: src/props/oneNotePickerCallbacks.ts

@@ -22,6 +22,7 @@ export interface OneNotePickerCallbacks {
 	// Shared notebooks have to be loaded on demand, as we only have their URLs and names
 	// to begin with. This is because getting sections for a shared notebook is expensive.
 	onSharedNotebookInfoReturned?: (sharedNotebook: SharedNotebook) => void;
+	onNotebookInfoReturned?: (notebook: Notebook) => void;
 
 	// Selection callbacks
 	onNotebookSelected?: (notebook: Notebook, breadcrumbs: OneNoteItem[]) => void;

Diff for: src/providers/oneNoteApiDataProvider.ts

@@ -47,6 +47,12 @@ export class OneNoteApiDataProvider implements OneNoteDataProvider {
 		});
 	}
 
+	getNotebookBySelfUrl(selfUrl: string, expands?: number): Promise<Notebook> {
+		return this.api.getNotebookBySelfUrl(selfUrl, expands).then((response) => {
+			return this.responseTransformer.transformNotebook(response.parsedResponse);
+		});
+	}
+
 	getPages(section: Section): Promise<Page[]> {
 		// tslint:disable-next-line:no-any
 		return this.api.getPages({ sectionId: section.id }).then((responsePackage: OneNoteApi.ResponsePackage<any>) => {

Diff for: src/providers/oneNoteDataProvider.ts

@@ -14,6 +14,7 @@ export interface OneNoteDataProvider {
 	createSectionUnderSectionGroup(parent: SectionGroup, name: string): Promise<Section>;
 
 	getNotebooks(expands?: number, excludeReadOnlyNotebooks?: boolean): Promise<Notebook[]>;
+	getNotebookBySelfUrl(selfUrl: string, expands?: number): Promise<Notebook>;
 	getPages(section: Section): Promise<Page[]>;
 
 	getSpNotebooks(): Promise<SharedNotebook[]>;