diff options
| -rw-r--r-- | src/client/views/collections/collectionGrid/CollectionGridView.tsx | 20 |
1 files changed, 14 insertions, 6 deletions
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index e127ab95c..465ff15f1 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -35,14 +35,15 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { if (!oldValue) { + // on page's initial load return; } - console.log(`Reaction fired! ${oldValue.length} => ${newValue.length}`); const gridLayouts = DocListCast(this.props.Document.gridLayouts); const previousLength = oldValue.length; const currentLength = newValue.length; if (currentLength > previousLength) { + // for each document that was added, add a corresponding grid layout document newValue.forEach(({ layout }) => { const targetId = layout[Id]; if (!gridLayouts.find((gridLayout: Doc) => StrCast(gridLayout.i) === targetId)) { @@ -56,6 +57,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }); } else { + // for each document that was removed, remove its corresponding grid layout document oldValue.forEach(({ layout }) => { if (!newValue.find(({ layout: preserved }) => preserved[Id] === layout[Id])) { const gridLayoutDoc = gridLayouts.find((gridLayout: Doc) => StrCast(gridLayout.i) === layout[Id]); @@ -133,6 +135,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ @undoBatch setLayout(layouts: Layout[]) { + // for every child in the collection, check to see if there's a corresponding grid layout document and + // updated layout object. If both exist, which they should, update the grid layout document from the updated object this.childLayoutPairs.forEach(({ layout: doc }) => { let update: Opt<Layout>; const targetId = doc[Id]; @@ -193,14 +197,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { })); } + /** + * DocListCast only includes *resolved* documents, i.e. filters out promises. So even if we have a nonzero + * number of documents in either of these Dash lists on the document, the DocListCast version may evaluate to empty + * if the corresponding documents are all promises, waiting to be fetched from the server. If we don't return early + * in the event that promises are encountered, we might feed inaccurate data to the grid since the corresponding gridLayout + * documents are unresolved (or the grid may misinterpret an empty array) which has the unfortunate byproduct of triggering + * the setLayout event, which makes these unintended changes permanent by writing them to the likely now resolved documents. + */ render() { const layoutDocList: Doc[] = DocListCast(this.props.Document.gridLayouts); const childDocumentViews: JSX.Element[] = this.contents; - if (!(childDocumentViews.length && layoutDocList.length)) { - return null; - } - - return ( + return !(childDocumentViews.length && layoutDocList.length) ? null : ( <div className="collectionGridView_contents" style={{ marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin), |