function ListItem()

in dashboard/client/src/GithubIssueList.tsx [203:326]

• 121 lines of code
• 5 McCabe index (conditional complexity)

function ListItem(props: {
  item: GithubIssueListItem;
  changeActionOwner: (actionOwner: string) => void;
  filterByLabel: (label: string) => void;
}) {
  const item = props.item;
  const issueLink = `https://github.com/${item.owner}/${item.repo}/issues/${item.issueNumber}`;
  return (
    <div className="flex flex-row">
      {!item.data.pull_request ? (
        <svg
          className="flex-shrink-0 w-4 h-4 text-green-700 ml-4 mt-3"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
        >
          <path
            fillRule="evenodd"
            d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"
          />
        </svg>
      ) : (
        <svg
          className="flex-shrink-0 w-4 h-4 text-green-700 ml-4 mt-3"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
          fill="currentColor"
        >
          <path
            fillRule="evenodd"
            d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"
          />
        </svg>
      )}

      <div className="flex-auto flex flex-col space-y-1 p-2">
        <div className="flex flex-row space-x-1 space-y-1 flex-wrap">
          <a
            className="text-base font-medium hover:text-blue-github break-all"
            target="_blank"
            href={issueLink}
          >
            {item.data.title}
          </a>
          {item.data.labels.map((label) => (
            <Label
              key={label.id}
              name={label.name}
              colorHex={`#${label.color}`}
              description={label.description}
              onClick={() => props.filterByLabel(label.name)}
            />
          ))}
        </div>
        <div className="flex flex-row text-gray-700 text-sm space-x-4">
          <span>
            <a
              href={issueLink}
              target="_blank"
              className="hover:text-blue-github"
            >{`#${item.issueNumber}`}</a>
            {" opened "}
            {dateDistance(new Date(item.data.created_at), new Date())}
            {" by "}
            <a
              target="_blank"
              href={userLink(item.data.user.login)}
              className="hover:text-blue-github"
            >
              {item.data.user.login}
            </a>
            {item.data.updated_at != item.data.created_at && (
              <span>
                {", updated "}
                {dateDistance(new Date(item.data.updated_at), new Date())}
              </span>
            )}
          </span>
        </div>
      </div>
      <div className="flex flex-shrink-0 w-4/12 flex-row space-x-2">
        <div className="flex-1 mt-4">
          <div className="flex flex-row -space-x-4 hover:space-x-1 justify-center">
            {item.data.assignees.map((assignee) => (
              <a
                key={assignee.login}
                title={`Assigned to ${assignee.login}`}
                className="transition-all"
                href={userLink(assignee.login)}
                target="_blank"
              >
                <img
                  className="inline object-cover w-6 h-6 rounded-full"
                  src={assignee.avatar_url}
                  alt={`@${assignee.login}`}
                />
              </a>
            ))}
          </div>
        </div>

        <div className="flex-1 flex flex-row mt-4 justify-center">
          {item.actionOwner && (
            <a
              className="cursor-pointer hover:font-bold"
              onClick={() => props.changeActionOwner(item.actionOwner!)}
            >
              {item.actionOwner}
            </a>
          )}
        </div>

        <div className="flex-1 flex flex-col mt-4 items-center">
          {item.expectedRespondAt && (
            <SLOStatus
              expectedRespondAt={item.expectedRespondAt}
              updatedAt={item.data.updated_at}
            />
          )}
        </div>
      </div>
    </div>
  );
}