Show how many extensions are in the list.

Author: holly-cummins

src/components/extensions-list.js

@@ -21,6 +21,19 @@ const Extensions = styled.ol`
   width: 100%;
 `
 
+const RightColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+`
+
+const ExtensionCount = styled.div`
+  margin-top: 1.25rem;
+  margin-left: 3.25rem;
+  width: 100%;
+`
+
 const ExtensionsList = ({ extensions, categories }) => {
   // Do some pre-filtering for content we will never want, like superseded extensions
   const allExtensions = extensions.filter(extension => !extension.isSuperseded)
@@ -29,27 +42,41 @@ const ExtensionsList = ({ extensions, categories }) => {
 
   // TODO why is this guard necessary?
   if (allExtensions) {
+    // Exclude unlisted extensions from the count, even though we sometimes show them if there's a direct search for it
+    const extensionCount = allExtensions.filter(
+      extension => !extension.metadata.unlisted
+    ).length
+
     // Sort alphabetically, in the absence of a better idea (for now)
     filteredExtensions.sort((a, b) =>
       a.sortableName > b.sortableName ? 1 : -1
     )
 
+    const countMessage =
+      extensionCount === filteredExtensions.length
+        ? `Showing ${extensionCount} extensions.`
+        : `Showing ${filteredExtensions.length} of ${extensionCount} extensions.`
+
     return (
       <FilterableList className="extensions-list">
         <Filters
           extensions={allExtensions}
           categories={categories}
           filterAction={setExtensions}
         />
-        <Extensions>
-          {filteredExtensions.map(extension => {
-            return (
-              <li key={extension.id}>
-                <ExtensionCard extension={extension} />
-              </li>
-            )
-          })}
-        </Extensions>
+        <RightColumn>
+          {" "}
+          <ExtensionCount>{countMessage}</ExtensionCount>
+          <Extensions>
+            {filteredExtensions.map(extension => {
+              return (
+                <li key={extension.id}>
+                  <ExtensionCard extension={extension} />
+                </li>
+              )
+            })}
+          </Extensions>{" "}
+        </RightColumn>
       </FilterableList>
     )
   } else {

src/components/extensions-list.test.js

@@ -85,6 +85,12 @@ describe("extension list", () => {
     expect(screen.queryByText(maybeObsolete.name)).toBeInTheDocument()
   })
 
+  it("displays a brief message about how many extensions there are", async () => {
+    // The superceded extension should not be counted
+    const num = extensions.length - 1
+    expect(screen.getByText(`Showing ${num} extensions.`)).toBeTruthy()
+  })
+
   describe("searching and filtering", () => {
     describe("searching", () => {
       it("filters out extensions which do not match the search filter", async () => {
@@ -126,6 +132,15 @@ describe("extension list", () => {
 
         expect(screen.queryByText(molluscs.name)).toBeFalsy()
       })
+
+      it("displays a longer message about how many extensions are still shown", async () => {
+        fireEvent.click(screen.getByText(displayCategory))
+
+        const total = extensions.length - 1
+        expect(
+          screen.getByText(`Showing 2 of ${total} extensions.`)
+        ).toBeTruthy()
+      })
     })
 
     describe("platform filter", () => {

src/components/filters/filters.js

@@ -8,7 +8,7 @@ import StatusFilter from "./status-filter"
 
 const FilterBar = styled.aside`
   width: 224px;
-  padding-top: 31px; // TODO can we do better than this rather specific hardcoding to align with the cards?
+  margin-top: 1.25rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;