feat: add sorter for DomEvents (#195)

Co-authored-by: Stephan Meijer <[email protected]>

Author: marcosvega91

devtools/src/manifest.json

@@ -19,28 +19,18 @@
       "128": "icons/128-production.png"
     }
   },
-  "web_accessible_resources": [
-    "window/testing-library.js"
-  ],
+  "web_accessible_resources": ["window/testing-library.js"],
   "devtools_page": "devtools/main.html",
   "content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-6UcmjVDygSSU8p+3s7E7Kz8EG/ARhPADPRUm9P90HLM='; object-src 'self'",
   "background": {
-    "scripts": [
-      "background/background.js"
-    ],
+    "scripts": ["background/background.js"],
     "persistent": false
   },
-  "permissions": [
-    "clipboardWrite"
-  ],
+  "permissions": ["clipboardWrite"],
   "content_scripts": [
     {
-      "matches": [
-        "<all_urls>"
-      ],
-      "js": [
-        "content-script/contentScript.js"
-      ],
+      "matches": ["<all_urls>"],
+      "js": ["content-script/contentScript.js"],
       "run_at": "document_start"
     }
   ]

package-lock.json

@@ -67,6 +67,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",
     "@types/fs-extra": "^9.0.1",
     "babel-eslint": "^10.1.0",
     "chrome-launch": "^1.1.4",
@@ -91,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"

package.json

@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, useState } from 'react';
-
 import { eventMap } from '@testing-library/dom/dist/event-map';
+import { ChevronUpIcon, ChevronDownIcon } from '@primer/octicons-react';
 import throttle from 'lodash.throttle';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { TrashcanIcon } from '@primer/octicons-react';
@@ -87,7 +87,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
@@ -98,31 +98,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);
@@ -144,8 +160,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);
@@ -170,7 +197,7 @@ function DomEvents() {
             markup={markup}
             elements={result.elements}
             accessibleRoles={result.accessibleRoles}
-            dispatch={noop}
+            dispatch={dispatch}
             variant="minimal"
           />
         </div>
@@ -181,12 +208,17 @@ function DomEvents() {
       <div className="editor p-4 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 flex justify-between items-center"
+              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>
@@ -203,15 +235,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/DomEvents.js

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

src/components/StickyList.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;