import React, { useState } from 'react';
import 'react-bulma-components/dist/react-bulma-components.min.css';
import{
    Section,
    Heading,
    Columns
} from 'react-bulma-components';
 
import MemberAdd from "../components/MemberAdd";
import MemberList from "../components/MemberList";
 
 
const MemberPage = (props) => {
 
    /*
        1) Create state (i.e., Single Source of Truth)
    */
    const [members, setMembers] = useState([]);
 
    /*
        2. Create a new function to add a document (e.g. addMember)
        -so that we can pass it to MemberAdd component
    */
    const addMember = (newMember) => {
        setMembers([...members, newMember]);
    }
   
        const sectionStyle = {
            paddingTop: "3em",
            paddingBottom: "3em"
        }
 
        return(
            <Section size="medium" style={ sectionStyle }>
                <Heading>Members</Heading>
                <Columns>
                    <Columns.Column className="is-4">
                        {/*3. Pass the new function as prop to child component */}
                        <MemberAdd addMember={addMember}/>
                        }
                    </Columns.Column>
                    <Columns.Column className="is-8">
                    {/* 6) pass props*/}
                        <MemberList members={members}/>
                    </Columns.Column>
                </Columns>
            </Section>
        )
}
 
export default MemberPage;