export default function AllEventsList()

in src/devtools/views/StoreInspector/EventLogger/AllEventsList.js [99:242]
139 lines of code
30 McCabe index (conditional complexity)

export default function AllEventsList({
  events,
  selectedEventID,
  setSelectedEventID,
  checked,
}: Props) {
  const [eventSearch, setEventSearch] = useState('');
  const fetchSearchBarText = useCallback(e => {
    setEventSearch(e.target.value);
  }, []);

  let eventsArrayDisplay = events.map((event, index) => {
    let displayText = '';

    if (!checked['networkEvents'] && !checked['storeEvents']) {
      return null;
    } else if (
      checked['networkEvents'] &&
      !checked['storeEvents'] &&
      event.name.toLowerCase().includes('store')
    ) {
      return null;
    } else if (
      checked['storeEvents'] &&
      !checked['networkEvents'] &&
      (event.name.toLowerCase().includes('network') ||
        event.name.toLowerCase().includes('query'))
    ) {
      return null;
    }

    switch (event.name) {
      case 'store.publish':
        return event.optimistic ? (
          <StoreEventDisplay
            displayText="Store Optimistic Update"
            key={index}
            index={index}
            setSelectedEventID={setSelectedEventID}
            selectedEventID={selectedEventID}
            events={events}
          />
        ) : (
          <StoreEventDisplay
            displayText="Store Publish"
            key={index}
            index={index}
            setSelectedEventID={setSelectedEventID}
            selectedEventID={selectedEventID}
            events={events}
          />
        );
      case 'store.gc':
        displayText = 'Store GC';
        break;
      case 'store.restore':
        displayText = 'Store Restore';
        break;
      case 'store.snapshot':
        displayText = 'Store Snapshot';
        break;
      case 'store.notify.start':
        displayText = 'Notify Start';
        break;
      case 'store.notify.complete':
        displayText = 'Notify Complete';
        break;
      case 'queryresource.fetch':
        displayText = 'QueryResource Fetch';
        break;
      case 'network.start':
        displayText = 'Network Start';
        break;
      case 'network.info':
        displayText = 'Network Info';
        break;
      case 'network.next':
        displayText = 'Network Next';
        break;
      case 'network.complete':
        displayText = 'Network Complete';
        break;
      case 'network.subscribe':
        displayText = 'Network Unsubscribe';
        break;
      case 'network.error':
        displayText = 'Network Error';
        break;
      default:
        return null;
    }
    return (
      <StoreEventDisplay
        displayText={displayText}
        key={index}
        index={index}
        setSelectedEventID={setSelectedEventID}
        selectedEventID={selectedEventID}
        events={events}
      />
    );
  });

  eventsArrayDisplay = useMemo(
    () =>
      eventsArrayDisplay.filter(
        (event, index) =>
          eventSearch === '' ||
          eventSearch
            .trim()
            .split(' ')
            .some(
              search =>
                (event != null &&
                  String(event.props.displayText)
                    .toLowerCase()
                    .includes(search.toLowerCase())) ||
                (events[index] != null &&
                  appearsInObject(search.toLowerCase(), events[index]))
            )
      ),
    [eventsArrayDisplay, eventSearch, events]
  );

  return (
    <div className={styles.AllEventsList}>
      <input
        className={styles.EventsSearchBar}
        type="text"
        onChange={fetchSearchBarText}
        placeholder="Search"
      ></input>
      <div>
        {eventsArrayDisplay.length <= 0 && eventSearch !== '' ? (
          <p className={styles.RecordNotFound}>
            Sorry, no events with the name '{eventSearch}' were found!
          </p>
        ) : (
          eventsArrayDisplay
        )}
      </div>
    </div>
  );
}