displayDate: formatDate()

in src/components/ActiveClients.js [41:152]
88 lines of code
4 McCabe index (conditional complexity)

        displayDate: formatDate(lastActive),
        geo,
        lastActive,
        os
      });
    });

    setDebugTags(normalizedDebugTags);
  };

  const handleSearchUpdate = useCallback(() => {
    if (debugTags.length) {
      const localDebugTags = searchArrayElementPropertiesForSubstring(
        debugTags, // Full list of debug tags to search.
        search.toLowerCase().trim(), // Query trimmed and converted to lowercase.
        ['key', 'os', 'appName', 'geo'] // All debug tag properties to search.
      );

      setFilteredDebugTags(localDebugTags);
    }
  }, [debugTags, search]);

  /// lifecycle ///
  useEffect(() => {
    const unsubscribe = onSnapshot(q, onCollectionUpdate);

    return () => {
      unsubscribe();
    };
  }, []);

  useEffect(() => {
    if (search !== prevSearch) {
      handleSearchUpdate();
    }
  }, [search, prevSearch, handleSearchUpdate]);

  /// render ///
  const displayDebugTags = () => {
    if (search.length) {
      return [...filteredDebugTags];
    } else {
      return [...debugTags];
    }
  };

  return (
    <div>
      <ReturnToTop />
      <div className='container-fluid m-2'>
        <div>
          <p className='mb-2'>
            <strong>You can</strong>
          </p>
          <ul className='mzp-u-list-styled'>
            <li>
              View all debug tags that have a ping from the last{' '}
              <strong>{PING_LIFETIME} days</strong> sorted by <strong></strong>Last Active.
            </li>
            <li>
              <strong>Search</strong> by: Debug id, OS, Application, and Geo.
            </li>
            <li>
              Click on <strong>Pings</strong> to see (up to) the last 100 pings for a Debug Tag.
            </li>
            <li>
              Click on <strong>Event Stream</strong> to see an aggregated timeline for all events in the 
              last 100 pings for a Debug Tag.
            </li>
            <li>
              If pings passed validation, browse this data in <strong>stable</strong> and <strong>live</strong> tables in BigQuery,
              by filtering for your debug tag value in <strong>metadata.header.x_debug_id</strong> field.
            </li>
          </ul>
        </div>
        <h3>Active Debug Tags ({displayDebugTags().length})</h3>
        <SearchBar
          onInput={(input) => setSearch(input)}
          placeholder='Search'
          containerStyles={{ margin: '10px 0' }}
          inputStyles={{ width: '20%' }}
        />
        <table className='mzp-u-data-table'>
          <thead>
            <tr>
              <th>Debug id</th>
              <th>Views</th>
              <th>Last active</th>
              <th>OS</th>
              <th>Application</th>
              <th>Geo</th>
            </tr>
          </thead>
          <tbody>
            {displayDebugTags().map((debugTag) => {
              const { key, debugId, displayDate, os, appName, geo } = debugTag;
              return (
                <tr key={key}>
                  <td>{debugId}</td>
                  <td>
                    <Link
                      className='text-decoration-none'
                      to={`/pings/${debugId}`}
                      data-glean-label='Debug ID Pings'
                      onClick={() => {
                        recordClick("Debug ID Pings");
                      }}
                    >
                      Pings
                    </Link>
                    <br />
                    <Link className='text-decoration-none' to={`/stream/${debugId}`} data-glean-label='Debug ID Event Stream' onClick={() => {