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 ( -
+

Adding a city

); - } } + +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 ( -
+

Adding a faculty

); - } } + +export default Cities; \ No newline at end of file diff --git a/src/components/Faculties/Faculties.jsx b/src/components/Faculties/Faculties.jsx index d0d31ba..3c94732 100644 --- a/src/components/Faculties/Faculties.jsx +++ b/src/components/Faculties/Faculties.jsx @@ -1,63 +1,53 @@ -import React, { Component } from 'react'; +import { useState, useEffect } from 'react'; import { Icon } from '../../components/Common/Icon/Icon'; -import styles from '../Faculties/Faculties.module.css'; import AddFaculty from '../AddFaculty/AddFaculty'; +import styles from '../Faculties/Faculties.module.css'; -export default class Faculties extends Component { - state = { - isAddFacultyVisible: false, - faculties: [ - { - name: 'USV', - id: Date.now(), - }, - ], - }; +const Faculties = () => { + const [faculties, setFaculties] = useState([]); + const [isAddFacultyVisible, setIsAddFacultyVisible] = useState(false); - renderFaculties = faculties => { + const renderFaculties = faculties => { if(!faculties || faculties.length === 0) { return
There are no faculties yet
; } return faculties.map(faculty => { return ( -
- {faculty.name} +
+ {faculty.name}
); }); }; - handleAddFaculty = faculty => { + const handleAddFaculty = faculty => { const newId = Date.now(); const addNewFaculty = { name: faculty.name, id: newId, }; - this.setState(prevState => { - return { - faculties: [...prevState.faculties, addNewFaculty], - isAddFacultyVisible: false, - }; + setFaculties((prevState) => { + return [...prevState, addNewFaculty]; }); + setIsAddFacultyVisible(false); }; - render() { - const {isAddFacultyVisible, faculties } = this.state; return (

Faculties

-
{this.renderFaculties(faculties)}
- {isAddFacultyVisible && } -
); - } } + +export default Faculties; \ No newline at end of file diff --git a/src/components/Faculties/Faculties.module.css b/src/components/Faculties/Faculties.module.css index ed5210d..2f489f3 100644 --- a/src/components/Faculties/Faculties.module.css +++ b/src/components/Faculties/Faculties.module.css @@ -6,4 +6,56 @@ .faculties-section { display: block; +} + +.faculties-list { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + gap: 16px; +} + +.faculty-name { + background-color: white; + min-width: 370px; + padding: 19px 24px; +} + +.faculties-section h1 { + font-size: 14px; + font-weight: 700; + line-height: 24px; + letter-spacing: 1.25px; + text-align: left; +} + +.faculties-section input { + padding: 10px; +} + +.faculties-section button { + background-color: #ff6b0a; + text-transform: uppercase; + padding: 8px 16px 8px 16px; + margin: 32px 0px; + font-size: 14px; + font-weight: 700; + line-height: 24px; + letter-spacing: 1.25px; + text-align: center; + color: white; + border-style: none; + transition: background-color 0.3 ease, transform 0.3 ease; +} + +.faculties-section button:disabled { + background-color: #ffe0b2; +} + +.faculties-section button:disabled:hover { + transform: none; +} + +.faculties-section button:hover { + transform: scale(1.03); } \ No newline at end of file diff --git a/src/components/Tutors/Tutors.jsx b/src/components/Tutors/Tutors.jsx index e1c0e2a..7f2f9b2 100644 --- a/src/components/Tutors/Tutors.jsx +++ b/src/components/Tutors/Tutors.jsx @@ -1,50 +1,30 @@ -import PropTypes from 'prop-types'; -import { Component } from 'react'; -import styles from './Tutors.module.css'; -import AddTutor from '../AddTutor/AddTutor'; +import styles from "./Tutors.module.css"; +import AddTutor from "../AddTutor/AddTutor"; import { Icon } from "../Common/Icon/Icon"; -const TUTORS_KEY = 'tutors'; +import { useEffect, useState } from "react"; +const TUTORS_KEY = "tutors"; -class Tutors extends Component { - componentDidMount() { +const Tutors = () => { + const [isAddFormVisible, setIsAddFormVisible] = useState(false); + const [list, setList] = useState([]); + + useEffect(() => { const data = localStorage.getItem(TUTORS_KEY); try { - if(data) { - this.setState({ - list: JSON.parse(data), - }) + if (data && data !== "[]") { + setList(JSON.parse(data)); } - } catch( error ) { - console.log(error) + } catch (error) { + console.log("Error parsing localStorage data:", error); } - } - - componentDidUpdate(prevProps, prevState) { - if(prevState?.list.length !== this.state.list.length) - localStorage.setItem(TUTORS_KEY, JSON.stringify(this.state.list)) - } + }, []); - componentWillUnmount() { - console.log('Tutors Unmounting...'); - } - - state = { - isAddFormVisible: false, - list: [ - { - id: 0, - firstName: 'Antonio', - lastName: 'GarcĂ­a', - phone: '+34 456 890 302', - email: 'antonio.garcia@goit.global', - city: 'Madrid', - options: 'Group creation, editing teacher profiles', - }, - ], - }; + useEffect(() => { + localStorage.setItem(TUTORS_KEY, JSON.stringify(list)); + }, [list]); - renderList = items => { - return items.map(el => { + const renderList = (items) => { + return items.map((el) => { return (
@@ -61,8 +41,9 @@ class Tutors extends Component { ); }); }; - handleTutor = data => { - const newId = this.state.list.length > 0 ? this.state.list.length : 0; + + const handleTutor = (data) => { + const newId = list.length > 0 ? list.length : 0; const addNewTutor = { id: newId, firstName: data.surname, @@ -72,34 +53,23 @@ class Tutors extends Component { city: data.city, options: data.options, }; - this.setState(prevState => { - return { - list: [...prevState.list, addNewTutor], - isAddFormVisible: false, - }; + setList((prevState) => { + return [...prevState, addNewTutor]; }); + setIsAddFormVisible(false); }; - render() { - const { isAddFormVisible, list } = this.state; - return ( -
-
- -

Tutors

-
-
{this.renderList(list)}
- {isAddFormVisible && } - -
- ); - } -} - -Tutors.propTypes = { - list: PropTypes.array, + return ( +
+
+ +

Tutors

+
+
{renderList(list)}
+ {isAddFormVisible && } + +
+ ); }; export default Tutors;