{"size": 903, "ext": "js", "max_stars_repo_path": "web/src/components/ContactsList.js", "max_stars_repo_name": "ceberhard/salut-app", "max_stars_repo_stars_event_min_datetime": "2021-09-07T13:00:48.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-07T13:00:48.000Z", "max_issues_repo_path": "web/src/components/ContactsList.js", "max_issues_repo_name": "ceberhard/salut-app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "web/src/components/ContactsList.js", "max_forks_repo_name": "ceberhard/salut-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.1, "max_line_length": 152, "alphanum_fraction": 0.6445182724}
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
    contactAdded,
    selectContactIds
} from '../store/contacts/contacts.slice';
import styles from './Contact.module.css';
import { ContactItem } from './ContactItem';

export default function ContactsList() {
    console.log('In ContactsList...');
    
    // const contacts = useSelector((state) => state.contacts);
    const contactIds = useSelector(selectContactIds);

    console.log('ContactsList data', contactIds);

    const dispatch = useDispatch();

    const ContactItems = contactIds.map((contactId) =>
        <ContactItem key={contactId} id={contactId} />
    );

    return (
        <div>
            <button aria-label="Click Me" onClick={() => dispatch(contactAdded({ id: '2', firstName: 'Sara', lastName: 'Connolly' }))}>Click Me</button>
            {ContactItems}
        </div>
    );
}