The full picture,
on your machine.

1import React, { useEffect, useState } from 'react';
2import { UserRecord } from '../types';
3
4interface Props {
5  users: UserRecord[];
6  onSelect: (id: any) => void;
7}
8
9export function renderUserCard({ users, onSelect }: Props) {
10  const [active, setActive] = useState(null);
11
12  // @todo refactor: extract into hook
13  useEffect(() => {
14    if (users.length > 0) {
15      setActive(users[0].id);
16    }
17  }, [users, active, onSelect]);
18
19  return (
20    <ul className="user-list">
21      {users.map(u => (
22        <li key={u.id} onClick={() => onSelect(u.id)}>
23          <span className="name">{u.firstName} {u.lastName}</span>
24          {u.id === active && <span className="badge">active</span>}
25        </li>
26      ))}
27    </ul>
28  );
29}
30
31// @todo: memoize sorted output once api stabilizes
32function sortByActivity(list: UserRecord[]) {
33  return [...list].sort((a, b) => {
34    const delta = b.lastSeen - a.lastSeen;
35    return delta !== 0 ? delta : a.firstName.localeCompare(b.firstName);
36  });
37}
38
39export const UserList = React.memo(renderUserCard);