list.js

import React, { forwardRef } from 'react';
import { Link } from 'react-router-dom';
import { isNil, reject } from 'ramda';
import { useTranslation } from 'react-i18next';

import { Avatar, List, ListItemAvatar, ListItemButton, ListItemText, Typography } from '@mui/material';

import BookmarkIcon from '@mui/icons-material/Bookmark';

const CardsList = ({ cardsList }) => {
  const { t } = useTranslation();

  const ListItemLink = (cardId) => {
    const EditCardLink = forwardRef((props, ref) => {
      const { data } = props;
      const location = {
        pathname: `/cards/${data.id}/edit`,
        state: data,
      };

      return <Link ref={ref} to={location} {...props} />
    });

    const description = cardsList[cardId].from_alias
      ? reject(
          isNil,
          [cardsList[cardId].from_alias, cardsList[cardId].action.args]
        ).join(', ')
      : cardsList[cardId].func

    return (
      <ListItemButton
        component={EditCardLink}
        data={{ id: cardId, ...cardsList[cardId] }}
        key={cardId}>
        <ListItemAvatar>
          <Avatar>
            <BookmarkIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText
          primary={cardId}
          secondary={description}
        />
      </ListItemButton>
    );
  }

  return (
    cardsList && Object.keys(cardsList).length > 0
      ? <List sx={{ width: '100%' }}>
          {Object.keys(cardsList).map(ListItemLink)}
        </List>
      : <Typography>{t('cards.list.no-cards-registered')}</Typography>
  );
}

export default React.memo(CardsList);