{"size": 1374, "ext": "js", "max_stars_repo_path": "src/components/layout/Profile/Profile.js", "max_stars_repo_name": "Wiiktor22/MoneyTracker", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/layout/Profile/Profile.js", "max_issues_repo_name": "Wiiktor22/MoneyTracker", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/layout/Profile/Profile.js", "max_forks_repo_name": "Wiiktor22/MoneyTracker", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 36.1578947368, "max_line_length": 95, "alphanum_fraction": 0.500727802}
import React, { useState } from 'react';
import Navbar from '../Navbar';
import styles from './Profile.module.scss';
import { connect } from 'react-redux';
import CurrencyForm from './CurrencyForm/CurrencyForm';

const Profile = ({ info, email }) => {
    const [showForm, setShowForm] = useState(false);
    return ( 
        <div className={styles.margin}>
            <Navbar />
            <div className={styles.wrapper}>
                <p className={styles.hello}>Check information about your profile!</p>
                <div className={styles.info}>
                    <div>  
                        <ul>
                            <li>First name: <span>{info.firstName}</span></li>
                            <li>Last name: <span>{info.lastName}</span></li>
                            <li>e-mail: <span>{email}</span></li>
                            <li>Currency: <span>{info.currencies}</span></li>
                        </ul>
                        <button onClick={() => setShowForm(!showForm)}>Change currency</button>
                    </div>  
                    {showForm && <CurrencyForm />}
                </div>
            </div>
        </div>
    );
}

const mapStateToProps = state => {
    return {
        info: state.firebase.profile,
        email: state.firebase.auth.email
    }
}

export default connect(mapStateToProps)(Profile);