ActiveProfiles Component for Commentor Information Modal (Improved)

ActiveProfilesComponent.js

import React from 'react';

export const ActiveProfiles = ({ profiles, onLaunchProfile }) => {
  const active = profiles.filter(profile => {
    const lastSeenTime = new Date(profile.last_seen_time);
    const withinLast24Hours = lastSeenTime > new Date(Date.now() - 24 * 60 * 60 * 1000);
    return !profile.disabled && withinLast24Hours;
  });

  const filteredActive = active.filter(profile => profile.email !== window.currentUser.email);

  return (
    <div>
      {filteredActive.map(profile => (
        <div key={profile.id} onClick={() => onLaunchProfile(profile.name, profile.email)}>
          {profile.name} - {profile.email}
        </div>
      ))}
    </div>
  );
};

/*
  Suggestions for the code:
- Consider using the `let` keyword to declare the variable `i` in the `for` loop to avoid creating an implicit global variable.
  Update the loop declaration to `for (let i = 0; i < profiles.length; i++)`.
- Instead of directly modifying the `active` array by setting its length to 0 (`active.length = 0;`),
  use the `filter` function to exclude the current user's profile. This makes the intention clearer and avoids mutating the array. For example:
*/
 
 const filteredActive = active.filter(profile => profile.email !== window.currentUser.email);
/* When rendering the list of active profiles, it's recommended to assign a unique `key`
  prop to each element to help React optimize the rendering process. If the profiles have
  a unique identifier like an `id`, you can use it as the key. For example:
*/

  {filteredActive.map(profile => (
    <div key={profile.id} onClick={() => onLaunchProfile(profile.name, profile.email)}>
      {profile.name} - {profile.email}
    </div>
  ))}
  

/* Please note that this code assumes the availability of the `window.currentUser` object
  and that the `profiles` array has appropriate data structures. Make sure to validate
  and adapt it to your specific application context.
*/