Feature: Sortable Stats Table

components/_statsTable/PackageStats/PackageStats.module.scss

@@ -8,7 +8,7 @@
   }
 }
 
-.tooltip_icon {
+.icon {
   margin-left: 5px;
   color: $shade-50;
 }

components/_statsTable/PackageStats/index.tsx

@@ -1,5 +1,8 @@
-import dayjs from 'dayjs';
+import dayjs, { ConfigType as DayjsConfigType } from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { Dispatch, useEffect, useReducer } from 'react';
+import _orderBy from 'lodash/orderBy';
+import { compareVersions } from 'compare-versions';
 import IPackage from 'types/IPackage';
 import DetailsPopover from 'components/_components/_popovers/DetailsPopover';
 import PackageLinks from 'components/_components/PackageLinks';
@@ -73,23 +76,109 @@ type Props = {
   packets: IPackage[];
 };
 
+const sortable = ['Name', 'Stars', 'Issues', 'Version', 'Updated', 'Created'] as const;
+type SortOption = typeof sortable[number];
+type Order = 'asc' | 'desc';
+
+const isSortable = (heading: string): heading is SortOption => !!sortable.find((s) => s === heading);
+
+const compareDate = (aDate: DayjsConfigType, bDate: DayjsConfigType) => {
+  if (dayjs(aDate).isBefore(dayjs(bDate))) return 1;
+  if (dayjs(aDate).isSame(dayjs(bDate))) return 0;
+  return -1;
+};
+
+const reducer = (
+  state: {
+    packets: IPackage[];
+    sortBy: SortOption;
+    order: Order;
+  },
+  action: { sortBy: SortOption; packets?: IPackage[] },
+) => {
+  let packets = action.packets || state.packets;
+  let sortBy = action.sortBy;
+  let order = state.order;
+
+  if (!action.packets) {
+    if (sortBy !== state.sortBy) {
+      order = 'asc';
+    } else if (order === 'desc') {
+      sortBy = 'Name';
+      order = 'asc';
+    } else {
+      order = 'desc';
+    }
+  }
+
+  const sortDirection = order === 'desc' ? -1 : 1;
+  switch (sortBy) {
+    case 'Name':
+      packets = _orderBy(packets, ['name'], [order]);
+      break;
+    case 'Stars':
+      packets = _orderBy(packets, (packet: IPackage) => packet.github?.starsCount || 0, [order]);
+      break;
+    case 'Issues':
+      packets = _orderBy(packets, (packet: IPackage) => packet.github?.openIssuesCount || 0, [order]);
+      break;
+    case 'Version':
+      packets = packets.sort((a, b) => compareVersions(a.version, b.version) * sortDirection);
+      break;
+    case 'Updated':
+      packets = packets.sort((a, b) => compareDate(a.versionDate || 0, b.versionDate || 0) * sortDirection);
+      break;
+    case 'Created':
+      packets = packets.sort((a, b) => compareDate(a.createdDate || 0, b.createdDate || 0) * sortDirection);
+  }
+
+  return { packets, sortBy, order };
+};
+
 const PackageStats = ({ packets }: Props) => {
+  const [{ packets: sortedPackets, sortBy, order }, dispatch] = useReducer(reducer, {
+    packets,
+    sortBy: 'Name',
+    order: 'asc',
+  });
+
+  useEffect(() => {
+    dispatch({ sortBy, packets });
+  }, [packets]);
+
   const columnHeadings = () =>
     columns.map((column) => (
       <th key={column.heading.replace(/\s/g, '')}>
-        {!column.hideHeading && column.heading}
+        {!column.hideHeading &&
+          (isSortable(column.heading) ? (
+            <button
+              className="stats-column-heading--button"
+              onClick={() => dispatch({ sortBy: column.heading as SortOption })}
+            >
+              {column.heading}
+              {column.heading === sortBy && (
+                <i
+                  aria-hidden
+                  className={`${styles.icon} icon icon-arrow-alt-circle-down`}
+                  style={order === 'asc' ? { transform: 'rotate(180deg)' } : {}}
+                />
+              )}
+            </button>
+          ) : (
+            column.heading
+          ))}
         {column.tooltip && (
           <Tooltip overlay={column.tooltip}>
-            <i aria-hidden className={`${styles.tooltip_icon} icon icon-question-circle`} />
+            <i aria-hidden className={`${styles.icon} icon icon-question-circle`} />
           </Tooltip>
         )}
       </th>
     ));
 
   const tableRows = () =>
-    packets.map((packet) => <PackageStatsRow key={packet.name} packet={packet} columns={columns} />);
+    sortedPackets.map((packet) => <PackageStatsRow key={packet.name} packet={packet} columns={columns} />);
 
-  if (!packets?.length) return null;
+  if (!sortedPackets?.length) return null;
 
   return (
     <div className="package-stats">

package.json

@@ -14,6 +14,7 @@
     "@types/requestidlecallback": "^0.3.4",
     "chart.js": "2.9.4",
     "classnames": "2.2.5",
+    "compare-versions": "^6.1.0",
     "dayjs": "^1.11.3",
     "hosted-git-info": "^3.0.8",
     "lodash": "^4.17.21",

styles/components/_package_stats.scss

@@ -16,3 +16,8 @@
   height: 20px;
   border-radius: 5px;
 }
+
+.stats-column-heading--button {
+  all: unset;
+  cursor: pointer;
+}

yarn.lock

@@ -379,6 +379,11 @@ commander@^6.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
+compare-versions@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.0.tgz#3f2131e3ae93577df111dba133e6db876ffe127a"
+  integrity sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"