Reorganize file locations/directory structure (#270)

Reorganize file locations

src/screens/Organization/OrganizationList/OrganizationList.jsx

@@ -0,0 +1,209 @@
+import React, { Component, Fragment } from 'react';
+import { withRouter } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Card,
+  PageSection,
+  PageSectionVariants,
+} from '@patternfly/react-core';
+
+import PaginatedDataList, {
+  ToolbarDeleteButton,
+  ToolbarAddButton
+} from '../../../components/PaginatedDataList';
+import DataListToolbar from '../../../components/DataListToolbar';
+import OrganizationListItem from './OrganizationListItem';
+import AlertModal from '../../../components/AlertModal';
+import { getQSConfig, parseNamespacedQueryString } from '../../../util/qs';
+import { OrganizationsAPI } from '../../../api';
+
+const QS_CONFIG = getQSConfig('organization', {
+  page: 1,
+  page_size: 5,
+  order_by: 'name',
+});
+
+class OrganizationsList extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      contentLoading: true,
+      contentError: false,
+      deletionError: false,
+      organizations: [],
+      selected: [],
+      itemCount: 0,
+      actions: null,
+    };
+
+    this.handleSelectAll = this.handleSelectAll.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleOrgDelete = this.handleOrgDelete.bind(this);
+    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
+    this.loadOrganizations = this.loadOrganizations.bind(this);
+  }
+
+  componentDidMount () {
+    this.loadOrganizations();
+  }
+
+  componentDidUpdate (prevProps) {
+    const { location } = this.props;
+    if (location !== prevProps.location) {
+      this.loadOrganizations();
+    }
+  }
+
+  handleSelectAll (isSelected) {
+    const { organizations } = this.state;
+
+    const selected = isSelected ? [...organizations] : [];
+    this.setState({ selected });
+  }
+
+  handleSelect (row) {
+    const { selected } = this.state;
+
+    if (selected.some(s => s.id === row.id)) {
+      this.setState({ selected: selected.filter(s => s.id !== row.id) });
+    } else {
+      this.setState({ selected: selected.concat(row) });
+    }
+  }
+
+  handleDeleteErrorClose () {
+    this.setState({ deletionError: false });
+  }
+
+  async handleOrgDelete () {
+    const { selected } = this.state;
+
+    this.setState({ contentLoading: true, deletionError: false });
+    try {
+      await Promise.all(selected.map((org) => OrganizationsAPI.destroy(org.id)));
+    } catch (err) {
+      this.setState({ deletionError: true });
+    } finally {
+      await this.loadOrganizations();
+    }
+  }
+
+  async loadOrganizations () {
+    const { location } = this.props;
+    const { actions: cachedActions } = this.state;
+    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
+
+    let optionsPromise;
+    if (cachedActions) {
+      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
+    } else {
+      optionsPromise = OrganizationsAPI.readOptions();
+    }
+
+    const promises = Promise.all([
+      OrganizationsAPI.read(params),
+      optionsPromise,
+    ]);
+
+    this.setState({ contentError: false, contentLoading: true });
+    try {
+      const [{ data: { count, results } }, { data: { actions } }] = await promises;
+      this.setState({
+        actions,
+        itemCount: count,
+        organizations: results,
+        selected: [],
+      });
+    } catch (err) {
+      this.setState(({ contentError: true }));
+    } finally {
+      this.setState({ contentLoading: false });
+    }
+  }
+
+  render () {
+    const {
+      medium,
+    } = PageSectionVariants;
+    const {
+      actions,
+      itemCount,
+      contentError,
+      contentLoading,
+      deletionError,
+      selected,
+      organizations,
+    } = this.state;
+    const { match, i18n } = this.props;
+
+    const canAdd = actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+    const isAllSelected = selected.length === organizations.length;
+
+    return (
+      <Fragment>
+        <PageSection variant={medium}>
+          <Card>
+            <PaginatedDataList
+              contentError={contentError}
+              contentLoading={contentLoading}
+              items={organizations}
+              itemCount={itemCount}
+              itemName="organization"
+              qsConfig={QS_CONFIG}
+              toolbarColumns={[
+                { name: i18n._(t`Name`), key: 'name', isSortable: true },
+                { name: i18n._(t`Modified`), key: 'modified', isSortable: true, isNumeric: true },
+                { name: i18n._(t`Created`), key: 'created', isSortable: true, isNumeric: true },
+              ]}
+              renderToolbar={(props) => (
+                <DataListToolbar
+                  {...props}
+                  showSelectAll
+                  isAllSelected={isAllSelected}
+                  onSelectAll={this.handleSelectAll}
+                  additionalControls={[
+                    <ToolbarDeleteButton
+                      key="delete"
+                      onDelete={this.handleOrgDelete}
+                      itemsToDelete={selected}
+                      itemName="Organization"
+                    />,
+                    canAdd
+                      ? <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                      : null,
+                  ]}
+                />
+              )}
+              renderItem={(o) => (
+                <OrganizationListItem
+                  key={o.id}
+                  organization={o}
+                  detailUrl={`${match.url}/${o.id}`}
+                  isSelected={selected.some(row => row.id === o.id)}
+                  onSelect={() => this.handleSelect(o)}
+                />
+              )}
+              emptyStateControls={
+                canAdd ? <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                  : null
+              }
+            />
+          </Card>
+        </PageSection>
+        <AlertModal
+          isOpen={deletionError}
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          onClose={this.handleDeleteErrorClose}
+        >
+          {i18n._(t`Failed to delete one or more organizations.`)}
+        </AlertModal>
+      </Fragment>
+    );
+  }
+}
+
+export { OrganizationsList as _OrganizationsList };
+export default withI18n()(withRouter(OrganizationsList));