replace function to retrive name and type options and change onClear …

…name behaviour (#171)

src/components/DomEvents.js

@@ -121,22 +121,18 @@ function DomEvents() {
     }
   }, []);
 
-  const typeOptions = Object.values(buffer.current).reduce(
-    (acc, { event }) =>
-      acc.findIndex((evtIncluded) => evtIncluded.value === event.EventType) ===
-      -1
-        ? [...acc, { label: event.EventType, value: event.EventType }]
-        : acc,
-    [],
-  );
-
-  const nameOptions = Object.values(buffer.current).reduce(
-    (acc, { event }) =>
-      acc.findIndex((evtIncluded) => evtIncluded.value === event.name) === -1
-        ? [...acc, { label: event.name, value: event.name }]
-        : acc,
-    [],
-  );
+  const bufferValues = Object.values(buffer.current);
+  const getUniqueEventsByProperty = (property) => [
+    ...new Set(bufferValues.map(({ event }) => event[property])),
+  ];
+  const getOptionsByProperty = (property) =>
+    getUniqueEventsByProperty(property).map((eventProperty) => ({
+      label: eventProperty,
+      value: eventProperty,
+    }));
+
+  const typeOptions = getOptionsByProperty('EventType');
+  const nameOptions = getOptionsByProperty('name');
 
   return (
     <div className="flex flex-col h-auto md:h-full w-full">

src/components/DomEventsTable.js

@@ -98,16 +98,12 @@ const DomEventsTable = ({
   const listRef = useRef();
   const [selectedTypes, setSelectedTypes] = useState(typeOptions);
   const [selectedNames, setSelectedNames] = useState(defaultNamesOptions);
-  const onChangeHandler = (fieldName) => (selectedOptions, { action }) => {
+  const onChangeHandler = (fieldName) => (selectedOptions) => {
     if (fieldName === 'type') {
       setSelectedTypes(selectedOptions);
     }
     if (fieldName === 'name') {
-      if (action === 'clear') {
-        setSelectedNames(defaultNamesOptions);
-      } else {
-        setSelectedNames(selectedOptions);
-      }
+      setSelectedNames(selectedOptions);
     }
   };