Create new components for <ManageItemList/> and <PopupItemList/>

Their Redux containers have gotten sufficiently-complex that it was time to
create new React components to encapsulate this stuff.

src/webextension/list/manage/components/manage-item-list.js

@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+
+import ItemList, { ItemListPlaceholder } from "../../components/item-list";
+
+export default function ManageItemList({totalItemCount, ...props}) {
+  if (props.items.length === 0) {
+    return (
+      <Localized id={`all-items-${totalItemCount ? "no-results" :
+                                                   "get-started"}`}>
+        <ItemListPlaceholder>
+          wHEn yOu cREATe an eNTRy...
+        </ItemListPlaceholder>
+      </Localized>
+    );
+  }
+  return (
+    <ItemList {...props}/>
+  );
+}
+
+ManageItemList.propTypes = {
+  totalItemCount: PropTypes.number.isRequired,
+  ...ItemList.propTypes,
+};

src/webextension/list/manage/containers/all-items.js

@@ -2,39 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Localized } from "fluent-react";
-import PropTypes from "prop-types";
-import React from "react";
 import { connect } from "react-redux";
 
+import ManageItemList from "../components/manage-item-list";
 import { requestSelectItem } from "../../actions";
 import { parseFilterString, filterItem } from "../../filter";
 import { NEW_ITEM_ID } from "../../common";
-import ItemList, { ItemListPlaceholder } from "../../components/item-list";
 
 const collator = new Intl.Collator();
 
-function AllItems({totalItemCount, ...props}) {
-  if (props.items.length === 0) {
-    return (
-      <Localized id={`all-items-${totalItemCount ? "no-results" :
-                                                   "get-started"}`}>
-        <ItemListPlaceholder>
-          wHEn yOu cREATe an eNTRy...
-        </ItemListPlaceholder>
-      </Localized>
-    );
-  }
-  return (
-    <ItemList {...props}/>
-  );
-}
-
-AllItems.propTypes = {
-  totalItemCount: PropTypes.number.isRequired,
-  ...ItemList.propTypes,
-};
-
 export default connect(
   (state, ownProps) => {
     const totalItemCount = state.cache.items.length;
@@ -52,4 +28,4 @@ export default connect(
   (dispatch) => ({
     onChange: (id) => dispatch(requestSelectItem(id)),
   }),
-)(AllItems);
+)(ManageItemList);

src/webextension/list/popup/containers/all-items.css → src/webextension/list/popup/components/popup-item-list.css

@@ -2,12 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.all-items-container {
+.item-list-container {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
-.all-items {
+.item-list {
   flex: 1;
 }

src/webextension/list/popup/components/popup-item-list.js

@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+
+import { PanelBanner } from "../../../widgets/panel";
+import ItemList, { ItemListPlaceholder } from "../../components/item-list";
+
+const MAX_VERBOSE_ITEMS = 2;
+
+import styles from "./popup-item-list.css";
+
+export default class PopupItemList extends React.Component {
+  static get propTypes() {
+    return {
+      items: ItemList.propTypes.items,
+      noResultsBanner: PropTypes.bool,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      noResultsBanner: false,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selected: null,
+    };
+  }
+
+  handleChange(selected) {
+    this.setState({selected});
+  }
+
+  render() {
+    const {items, noResultsBanner, ...props} = this.props;
+    if (items.length === 0) {
+      return (
+        <Localized id="all-items-no-results">
+          <ItemListPlaceholder>
+            no rESULTs
+          </ItemListPlaceholder>
+        </Localized>
+      );
+    }
+
+    const {selected} = this.state;
+    const verbose = items.length <= MAX_VERBOSE_ITEMS;
+    return (
+      <div className={styles.itemListContainer}>
+        {noResultsBanner && (
+          <Localized id="no-results-banner">
+            <PanelBanner>no rESULTs</PanelBanner>
+          </Localized>
+        )}
+        <ItemList {...props} items={items} className={styles.itemList}
+                  verbose={verbose} selected={selected}
+                  onChange={(s) => this.handleChange(s)}/>
+      </div>
+    );
+  }
+}

src/webextension/list/popup/containers/all-items.js

@@ -2,76 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Localized } from "fluent-react";
-import PropTypes from "prop-types";
-import React from "react";
 import { connect } from "react-redux";
 
-import { PanelBanner } from "../../../widgets/panel";
+import PopupItemList from "../components/popup-item-list";
 import { selectItem, copiedField } from "../../actions";
 import { parseFilterString, filterItem } from "../../filter";
-import ItemList, { ItemListPlaceholder } from "../../components/item-list";
-
-const MAX_VERBOSE_ITEMS = 2;
 const collator = new Intl.Collator();
 
-import styles from "./all-items.css";
-
-class AllItems extends React.Component {
-  static get propTypes() {
-    return {
-      items: ItemList.propTypes.items,
-      noResultsBanner: PropTypes.bool,
-    };
-  }
-
-  static get defaultProps() {
-    return {
-      noResultsBanner: false,
-    };
-  }
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selected: null,
-    };
-  }
-
-  handleChange(selected) {
-    this.setState({selected});
-  }
-
-  render() {
-    const {items, noResultsBanner, ...props} = this.props;
-    if (items.length === 0) {
-      return (
-        <Localized id="all-items-no-results">
-          <ItemListPlaceholder>
-            no rESULTs
-          </ItemListPlaceholder>
-        </Localized>
-      );
-    }
-
-    const {selected} = this.state;
-    const verbose = items.length <= MAX_VERBOSE_ITEMS;
-    return (
-      <div className={styles.allItemsContainer}>
-        {noResultsBanner && (
-          <Localized id="no-results-banner">
-            <PanelBanner>no rESULTs</PanelBanner>
-          </Localized>
-        )}
-        <ItemList {...props} items={items} className={styles.allItems}
-                  verbose={verbose} selected={selected}
-                  onChange={(s) => this.handleChange(s)}/>
-      </div>
-    );
-  }
-}
-
 export default connect(
   (state) => {
     const filter = parseFilterString(state.list.filter.query);
@@ -89,4 +26,4 @@ export default connect(
     onClick: (id) => { dispatch(selectItem(id)); },
     onCopy: (field) => { dispatch(copiedField(field)); },
   }),
-)(AllItems);
+)(PopupItemList);