feat: add sorter for DomEvents

package.json

@@ -38,6 +38,7 @@
     "postversion": "git push && git push --tags && git checkout master && git merge develop --ff && git push && git checkout -"
   },
   "dependencies": {
+    "@primer/octicons-react": "^10.0.0",
     "@testing-library/dom": "^7.15.0",
     "codemirror": "5.54.0",
     "crx-bridge": "^2.1.0",
@@ -65,6 +66,7 @@
     "@babel/preset-react": "^7.10.1",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.0",
+    "@testing-library/react-hooks": "^3.3.0",
     "@testing-library/user-event": "^11.4.2",
     "@types/fs-extra": "^9.0.1",
     "babel-eslint": "^10.1.0",
@@ -90,6 +92,7 @@
     "postcss-import": "^12.0.1",
     "postcss-modules": "^2.0.0",
     "prettier": "^2.0.5",
+    "react-test-renderer": "^16.13.1",
     "rimraf": "^3.0.2",
     "tailwindcss": "^1.4.6",
     "workbox-build": "^5.1.3"

src/components/DomEvents.js

@@ -1,5 +1,5 @@
 import React, { useRef, useCallback, useState } from 'react';
-
+import { ChevronUpIcon, ChevronDownIcon } from '@primer/octicons-react';
 import Preview from './Preview';
 import MarkupEditor from './MarkupEditor';
 import usePlayground from '../hooks/usePlayground';
@@ -86,7 +86,7 @@ function addLoggingEvents(node, log) {
 }
 
 function EventRecord({ index, style, data }) {
-  const { id, event, target } = data[index];
+  const { id, type, name, element, selector } = data[index];
 
   return (
     <div
@@ -97,31 +97,47 @@ function EventRecord({ index, style, data }) {
     >
       <div className="p-2 flex-none w-16">{id}</div>
 
-      <div className="p-2 flex-none w-32">{event.EventType}</div>
-      <div className="p-2 flex-none w-32">{event.name}</div>
+      <div className="p-2 flex-none w-32">{type}</div>
+      <div className="p-2 flex-none w-32">{name}</div>
 
-      <div className="p-2 flex-none w-40">{target.tagName}</div>
-      <div className="p-2 flex-auto whitespace-no-wrap">
-        {target.toString()}
-      </div>
+      <div className="p-2 flex-none w-40">{element}</div>
+      <div className="p-2 flex-auto whitespace-no-wrap">{selector}</div>
     </div>
   );
 }
 
 const noop = () => {};
 function DomEvents() {
+  const buffer = useRef([]);
+  const previewRef = useRef();
+  const listRef = useRef();
+
+  const sortDirection = useRef('asc');
+  const [appendMode, setAppendMode] = useState('bottom');
   const [{ markup, result }, dispatch] = usePlayground({
     onChange: onStateChange,
     ...initialValues,
   });
 
-  const buffer = useRef([]);
-  const previewRef = useRef();
-  const listRef = useRef();
-
   const [eventCount, setEventCount] = useState(0);
   const [eventListeners, setEventListeners] = useState([]);
 
+  const getSortIcon = () => (
+    <IconButton>
+      {sortDirection.current === 'desc' ? (
+        <ChevronDownIcon />
+      ) : (
+        <ChevronUpIcon />
+      )}
+    </IconButton>
+  );
+  const changeSortDirection = () => {
+    const newDirection = sortDirection.current === 'desc' ? 'asc' : 'desc';
+    buffer.current = buffer.current.reverse();
+    setAppendMode(newDirection === 'desc' ? 'top' : 'bottom');
+    sortDirection.current = newDirection;
+  };
+
   const reset = () => {
     buffer.current = [];
     setEventCount(0);
@@ -143,8 +159,19 @@ function DomEvents() {
     if (node) {
       previewRef.current = node;
       const eventListeners = addLoggingEvents(node, (event) => {
-        event.id = buffer.current.length;
-        buffer.current.push(event);
+        const log = {
+          id: buffer.current.length + 1,
+          type: event.event.EventType,
+          name: event.event.name,
+          element: event.target.tagName,
+          selector: event.target.toString(),
+        };
+        if (sortDirection.current === 'desc') {
+          buffer.current.splice(0, 0, log);
+        } else {
+          buffer.current.push(log);
+        }
+
         setTimeout(flush, 0);
       });
       setEventListeners(eventListeners);
@@ -180,12 +207,17 @@ function DomEvents() {
       <div className="editor md:h-56 flex-auto overflow-hidden">
         <div className="h-56 md:h-full w-full flex flex-col">
           <div className="h-8 flex items-center w-full text-sm font-bold">
-            <div className="p-2 w-16">#</div>
+            <div
+              className="p-2 w-16 cursor-pointer"
+              onClick={changeSortDirection}
+            >
+              # {getSortIcon()}
+            </div>
 
-            <div className="p-2 w-32">type</div>
-            <div className="p-2 w-32">name</div>
+            <div className="p-2 w-32 ">type</div>
+            <div className="p-2 w-32 ">name</div>
 
-            <div className="p-2 w-40">element</div>
+            <div className="p-2 w-40 ">element</div>
             <div className="flex-auto p-2 flex justify-between">
               <span>selector</span>
               <div>
@@ -202,15 +234,15 @@ function DomEvents() {
           </div>
 
           <div className="flex-auto relative overflow-hidden">
-            {eventCount === 0 ? (
+            {buffer.current.length === 0 ? (
               <div className="flex w-full h-full opacity-50 items-end justify-center">
                 <EmptyStreetImg height="80%" />
               </div>
             ) : (
               <AutoSizer>
                 {({ width, height }) => (
                   <StickyList
-                    mode="bottom"
+                    mode={appendMode}
                     ref={listRef}
                     height={height}
                     itemCount={eventCount}

src/components/StickyList.js

@@ -29,7 +29,7 @@ function StickyList(
     } else {
       ref.current.scrollTo(0);
     }
-  }, [itemCount]);
+  }, [itemCount, mode]);
 
   return (
     <List

src/hooks/useSorter.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+function defaultSorter(data, sortBy, direction) {
+  return [...data].sort((row1, row2) => {
+    const sortInt = `${row1[sortBy]}`.localeCompare(
+      `${row2[sortBy]}`,
+      undefined,
+      { numeric: true },
+    );
+    return direction === 'desc' ? -sortInt : sortInt;
+  });
+}
+
+function useSorter({
+  rows = [],
+  sortBy,
+  sortDirection = 'desc',
+  sortByFn = defaultSorter,
+}) {
+  if (!Array.isArray(rows)) {
+    throw TypeError('rows should be an array');
+  }
+
+  if (sortDirection !== 'desc' && sortDirection !== 'asc') {
+    throw Error('sort direction can be desc or asc');
+  }
+
+  const sortedRows = React.useMemo(() => {
+    const sortedRows = sortByFn(rows, sortBy, sortDirection);
+    return sortedRows;
+  }, [JSON.stringify(rows), sortBy, sortByFn, sortDirection]);
+
+  return [sortedRows, rows];
+}
+
+export default useSorter;