Commit a5378316 authored by zarina's avatar zarina 🌊

#1, реализована возможность создания контактов

parent df875e31
import axios from "axios";
const instance = axios.create({
baseURL: "https://homeworks-33ebc.firebaseio.com/"
});
export default instance;
import React from 'react';
import {Button, Form, FormGroup, Label, Input} from 'reactstrap';
const FormToFill = props => {
return (
<Form onSubmit={props.submit}>
<FormGroup>
<Label for="name">Name</Label>
<Input type="text"
name="name"
value={props.name}
onChange={props.inputHandler}
id="name"
placeholder="enter name"/>
</FormGroup>
<FormGroup>
<Label for="phone">Phone</Label>
<Input type="text"
name="phone"
value={props.phone}
onChange={props.inputHandler}
id="phone"
placeholder="enter phone"/>
</FormGroup>
<FormGroup>
<Label for="email">Email</Label>
<Input type="email"
name="email"
value={props.email}
onChange={props.inputHandler}
id="email"
placeholder="enter email"/>
</FormGroup>
<FormGroup>
<Label for="photo">Photo</Label>
<Input type="text"
name="photo"
value={props.photo}
onChange={props.inputHandler}
id="photo"
placeholder="enter url"/>
</FormGroup>
<Button >Submit</Button>
</Form>
);
}
export default FormToFill;
\ No newline at end of file
import React from 'react';
import {Navbar, NavbarBrand, Nav, NavItem,} from 'reactstrap';
import {NavLink} from "react-router-dom";
import Container from "reactstrap/es/Container";
const Header = () => {
return (
<Navbar color="light" light expand="md mb-4">
<Container>
<NavbarBrand tag={NavLink} to="/">Contacts</NavbarBrand>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink className="nav-link" to="/add-contact">Add new contact</NavLink>
</NavItem>
</Nav>
</Container>
</Navbar>
);
}
export default Header;
\ No newline at end of file
import React from "react";
import Header from "../Header/Header";
const Layout = props => {
return (
<>
<Header/>
<main className="Layout_content">
{props.children}
</main>
</>
);
};
export default Layout;
import React, {useState} from "react";
import FormToFill from "../../components/FormToFill/FormToFill";
import {createContact} from "../../store/actions";
import {connect} from "react-redux";
const AddContactForm = props => {
const [contactInfo, setContactInfo] = useState({
name: '',
phone: '',
email: '',
photo: ''
});
const inputHandler = (e) => {
setContactInfo({
...contactInfo,
[e.target.name]: e.target.value
})
};
const addContact = e => {
e.preventDefault();
const contact = {
...contactInfo
};
props.onContactCreated(contact)
};
return (
<>
<div>
<FormToFill
inputHandler={inputHandler}
name={contactInfo.name}
phone={contactInfo.phone}
email={contactInfo.email}
photo={contactInfo.photo}
submit={addContact}
/>
</div>
</>
);
};
const mapDispatchToProps = dispatch => {
return {
onContactCreated: (contact) => dispatch(createContact(contact))
}
};
export default connect(null, mapDispatchToProps)(AddContactForm);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment