All files / app/features/connections/friends FriendList.tsx

100% Statements 12/12
100% Branches 5/5
100% Functions 2/2
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 521x 1x 1x   1x 1x   1x 1x                     4x   4x                                   2x                     4x  
import { Alert } from "@mui/material";
import { useTranslation } from "i18n";
import { CONNECTIONS, GLOBAL } from "i18n/namespaces";
import { LiteUser } from "proto/api_pb";
import { useState } from "react";
import { theme } from "theme";
 
import FriendItem from "./FriendItem";
import FriendTile from "./FriendTile";
 
function FriendList({
  errors,
  friends,
  isLoading,
}: {
  errors: string[];
  friends: LiteUser.AsObject[] | undefined;
  isLoading: boolean;
}) {
  const { t } = useTranslation([GLOBAL, CONNECTIONS]);
 
  const [error, setError] = useState<Error | null>(null);
 
  return (
    <>
      {error && (
        <Alert severity="error" sx={{ marginBottom: theme.spacing(2) }}>
          {error.message}
        </Alert>
      )}
      <FriendTile
        title={t("connections:friend_list_title")}
        errorMessage={errors.length > 0 ? errors.join("\n") : null}
        isLoading={isLoading}
        hasData={!!friends?.length}
        noDataMessage={t("connections:no_friends")}
      >
        {friends &&
          friends.map((friend) => (
            <FriendItem
              friend={friend}
              key={friend.userId}
              onError={setError}
            />
          ))}
      </FriendTile>
    </>
  );
}
 
export default FriendList;