feat: Memberships (#1032)

* WIP * feat: Add collection.memberships endpoint * feat: Add ability to filter collection.memberships with query * WIP * Merge stashed work * feat: Add ability to filter memberships by permission * continued refactoring * paginated list component * Collection member management * fix: Incorrect policy data sent down after collection.update * Reduce duplication, add empty state * cleanup * fix: Modal close should be a real button * fix: Allow opening edit from modal * fix: remove unused methods * test: fix * Passing test suite * Refactor * fix: Flow UI errors * test: Add collections.update tests * lint * test: moar tests * fix: Missing scopes, more missing tests * fix: Handle collection privacy change over socket * fix: More membership scopes * fix: view endpoint permissions * fix: respond to privacy change on socket event * policy driven menus * fix: share endpoint policies * chore: Use policies to drive documents UI * alignment * fix: Header height * fix: Correct behavior when collection becomes private * fix: Header height for read-only collection * send id's over socket instead of serialized objects * fix: Remote policy change * fix: reduce collection fetching * More websocket efficiencies * fix: Document collection pinning * fix: Restored ability to edit drafts fix: Removed ability to star drafts * fix: Require write permissions to pin doc to collection * fix: Header title overlaying document actions at small screen sizes * fix: Jank on load caused by previous commit * fix: Double collection fetch post-publish * fix: Hide publish button if draft is in no longer accessible collection * fix: Always allow deleting drafts fix: Improved handling of deleted documents * feat: Show collections in drafts view feat: Show more obvious 'draft' badge on documents * fix: incorrect policies after publish to private collection * fix: Duplicating a draft publishes it
2019-10-05 18:42:03 -07:00
parent 4164fc178c
commit b42e9737b6
72 changed files with 2360 additions and 765 deletions
--- a/app/components/PaginatedList.js
+++ b/app/components/PaginatedList.js
@@ -0,0 +1,95 @@
+// @flow
+import * as React from 'react';
+import { observable, action } from 'mobx';
+import { observer } from 'mobx-react';
+import Waypoint from 'react-waypoint';
+import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
+
+import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
+import { ListPlaceholder } from 'components/LoadingPlaceholder';
+
+type Props = {
+  fetch?: (options: ?Object) => Promise<void>,
+  options?: Object,
+  empty?: React.Node,
+  items: any[],
+  renderItem: any => React.Node,
+};
+
+@observer
+class PaginatedList extends React.Component<Props> {
+  isInitiallyLoaded: boolean = false;
+  @observable isLoaded: boolean = false;
+  @observable isFetchingMore: boolean = false;
+  @observable isFetching: boolean = false;
+  @observable offset: number = 0;
+  @observable allowLoadMore: boolean = true;
+
+  componentDidMount() {
+    this.isInitiallyLoaded = !!this.props.items.length;
+    this.fetchResults();
+  }
+
+  fetchResults = async () => {
+    if (!this.props.fetch) return;
+
+    this.isFetching = true;
+
+    const limit = DEFAULT_PAGINATION_LIMIT;
+    const results = await this.props.fetch({
+      limit,
+      offset: this.offset,
+      ...this.props.options,
+    });
+
+    if (results && (results.length === 0 || results.length < limit)) {
+      this.allowLoadMore = false;
+    } else {
+      this.offset += limit;
+    }
+
+    this.isLoaded = true;
+    this.isFetching = false;
+    this.isFetchingMore = false;
+  };
+
+  @action
+  loadMoreResults = async () => {
+    // Don't paginate if there aren't more results or we’re in the middle of fetching
+    if (!this.allowLoadMore || this.isFetching) return;
+
+    this.isFetchingMore = true;
+    await this.fetchResults();
+  };
+
+  render() {
+    const { items, empty } = this.props;
+
+    const showLoading =
+      this.isFetching && !this.isFetchingMore && !this.isInitiallyLoaded;
+    const showEmpty = !items.length || showLoading;
+    const showList = (this.isLoaded || this.isInitiallyLoaded) && !showLoading;
+
+    return (
+      <React.Fragment>
+        {showEmpty && empty}
+        {showList && (
+          <React.Fragment>
+            <ArrowKeyNavigation
+              mode={ArrowKeyNavigation.mode.VERTICAL}
+              defaultActiveChildIndex={0}
+            >
+              {items.map(this.props.renderItem)}
+            </ArrowKeyNavigation>
+            {this.allowLoadMore && (
+              <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
+            )}
+          </React.Fragment>
+        )}
+        {showLoading && <ListPlaceholder count={5} />}
+      </React.Fragment>
+    );
+  }
+}
+
+export default PaginatedList;