diff --git a/src/components/AddCities/AddCities.jsx b/src/components/AddCities/AddCities.jsx index a79c0c6..38f1d7f 100644 --- a/src/components/AddCities/AddCities.jsx +++ b/src/components/AddCities/AddCities.jsx @@ -1,36 +1,38 @@ -import React, { Component } from 'react'; +import { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; import styles from '../AddCities/AddCities.module.css'; -export default class AddCities extends Component { - state = { - name: '', - }; +const AddCities = ({ onCitiesSubmit }) => { + const [name, setName] = useState(''); - handleSubmit = e => { + const handleSubmit = e => { e.preventDefault(); - this.props.onCitiesSubmit(this.state); + onCitiesSubmit({ name }); }; - handleChange = e => { - const { name, value } = e.target; - this.setState({ [name]: value }); + const handleChange = e => { + const { value } = e.target; + setName(value); }; - render() { - const { name } = this.state; return ( -
); - } } + +AddCities.propTypes = { + onCitiesSubmit: PropTypes.func.isRequired, +}; + +export default AddCities; \ No newline at end of file diff --git a/src/components/AddFaculty/AddFaculty.jsx b/src/components/AddFaculty/AddFaculty.jsx index 6f1e7cd..a56bbc3 100644 --- a/src/components/AddFaculty/AddFaculty.jsx +++ b/src/components/AddFaculty/AddFaculty.jsx @@ -1,31 +1,29 @@ -import React, { Component } from 'react'; +import { useState, useEffect } from 'react'; +import PropTypes from "prop-types"; import styles from '../AddFaculty/AddFaculty.module.css' -export default class AddFaculty extends Component { - state = { - name: '', - } +const AddFaculty = ({ onFacultySubmit }) => { + const [name, setName] = useState(''); - handleSubmit = e => { + const handleSubmit = e => { e.preventDefault(); - this.props.onAddFaculty(this.state); + onFacultySubmit({ name }); }; - handleChange = e => { - const { name, value } = e.target; - this.setState({ name: value}); + const handleChange = e => { + const { value } = e.target; + setName(value); } - render() { - const { name } = this.state; + return ( - ); } -} + + AddFaculty.propTypes = { + onFacultySubmit: PropTypes.func.isRequired, + }; + + export default AddFaculty; \ No newline at end of file diff --git a/src/components/AddFaculty/AddFaculty.module.css b/src/components/AddFaculty/AddFaculty.module.css index e69de29..533843c 100644 --- a/src/components/AddFaculty/AddFaculty.module.css +++ b/src/components/AddFaculty/AddFaculty.module.css @@ -0,0 +1,15 @@ +.faculties-form { + display: flex; + flex-direction: column; + align-items: flex-start; + background-color: white; + padding-left: 24px; + margin-top: 32px; +} + +.faculties-form input { + border: 1px solid #757575; + min-width: 480px; +} + + diff --git a/src/components/AddTutor/AddTutor.jsx b/src/components/AddTutor/AddTutor.jsx index bf18a31..42a7dd2 100644 --- a/src/components/AddTutor/AddTutor.jsx +++ b/src/components/AddTutor/AddTutor.jsx @@ -1,42 +1,42 @@ -import React, { Component } from 'react'; +import { useEffect, useState } from "react"; +import PropTypes from 'prop-types'; -export default class AddTutor extends Component { - componentDidMount() { - console.log('AddTutors Mounting...'); - } - - componentDidUpdate() { - console.log('AddTutors Updating...'); - } - - componentWillUnmount() { - console.log('AddTutors Unmounting...'); - } - - state = { - surname: '', - name: '', - phone: '', - city: '', - email: '', - options: '', - }; - - handleSubmit = e => { +const AddTutor = ({ onFormSubmit }) => { + const [surname, setSurname] = useState(''); + const [name, setName] = useState(''); + const [phone, setPhone] = useState(''); + const [city, setCity] = useState(''); + const [email, setEmail] = useState(''); + const [options, setOptions] = useState(''); + + const handleSubmit = e => { e.preventDefault(); - this.props.onFormSubmit(this.state); + onFormSubmit({ surname, name, phone, city, email, options }); }; - handleChange = e => { + const handleChange = e => { const { name, value } = e.target; - this.setState({ [name]: value }); + switch (name) { + case "surname": + return setSurname(value); + case "name": + return setName(value); + case "phone": + return setPhone( value ); + case "city": + return setCity(value); + case "email": + return setEmail( value); + case "options": + return setOptions( value ); + default: return; + } + }; - render() { - const { surname, name, phone, email, city, options } = this.state; return ( <> -