refactoring & add hooks

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 (
-        <form className={styles['cities-form']} onSubmit={this.handleSubmit}>
+        <form className={styles['cities-form']} onSubmit={handleSubmit}>
           <h2 className={styles['city-title']}>Adding a city</h2>
             <input
               type="text"
               value={name}
               name="name"
               placeholder="City"
-              onChange={this.handleChange}
+              onChange={handleChange}
               required
             />
           <button type="submit" disabled={!name}>ADD</button>
         </form>
     );
-  }
 }
+
+AddCities.propTypes = {
+  onCitiesSubmit: PropTypes.func.isRequired,
+};
+
+export default AddCities;

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 (
-      <form className={styles["faculties-form"]} onSubmit={this.handleSubmit}>
+      <form className={styles["faculties-form"]} onSubmit={handleSubmit}>
         <h2 className={styles["faculty-title"]}>Adding a faculty</h2>
         <input
           type="text"
           value={name}
           name="name"
           placeholder="Faculty"
-          onChange={this.handleChange}
+          onChange={handleChange}
           required
         />
         <button type="submit" disabled={!name}>
@@ -34,4 +32,9 @@ export default class AddFaculty extends Component {
       </form>
     );
   }
-}
+
+  AddFaculty.propTypes = {
+    onFacultySubmit: PropTypes.func.isRequired,
+  };
+
+  export default AddFaculty;

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

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 (
       <>
-        <form onSubmit={this.handleSubmit}>
+        <form onSubmit={handleSubmit}>
           <h1>Add Tutor</h1>
           <label>
             <span>Surname</span>
@@ -45,7 +45,7 @@ export default class AddTutor extends Component {
               value={surname}
               name="surname"
               placeholder="Surname"
-              onChange={this.handleChange}
+              onChange={handleChange}
               required
             />
           </label>
@@ -56,7 +56,7 @@ export default class AddTutor extends Component {
               value={name}
               name="name"
               placeholder="Name"
-              onChange={this.handleChange}
+              onChange={handleChange}
               required
             />
           </label>
@@ -67,7 +67,7 @@ export default class AddTutor extends Component {
               value={phone}
               name="phone"
               placeholder="Phone number"
-              onChange={this.handleChange}
+              onChange={handleChange}
               required
             />
           </label>
@@ -78,7 +78,7 @@ export default class AddTutor extends Component {
               value={email}
               name="email"
               placeholder="Email"
-              onChange={this.handleChange}
+              onChange={handleChange}
               required
             />
           </label>
@@ -89,7 +89,7 @@ export default class AddTutor extends Component {
               value={city}
               name="city"
               placeholder="City"
-              onChange={this.handleChange}
+              onChange={handleChange}
               required
             />
           </label>
@@ -100,7 +100,7 @@ export default class AddTutor extends Component {
               value={options}
               name="options"
               placeholder="Options"
-              onChange={this.handleChange}
+              onChange={handleChange}
             />
           </label>
           <button
@@ -113,4 +113,9 @@ export default class AddTutor extends Component {
       </>
     );
   }
-}
+
+  AddTutor.propTypes = {
+    onFormSubmit: PropTypes.func.isRequired,
+  }
+
+  export default AddTutor;

src/components/Cities/Cities.jsx

@@ -1,20 +1,13 @@
-import React, { Component } from 'react';
+import { useState, useEffect } from 'react'
 import { Icon } from '../Common/Icon/Icon';
 import AddCities from '../AddCities/AddCities';
 import styles from '../Cities/Cities.module.css';
 
-export default class Cities extends Component {
-  state = {
-    isAddCityVisible: false,
-    cities: [
-      {
-        name: 'Suceava',
-        id: Date.now(),
-      },
-    ],
-  };
+const Cities = () => {
+  const [isAddCityVisible, setIsAddCityVisible] = useState(false);
+  const [cities, setCities] = useState([]);
 
-  renderCities = cities => {
+  const renderCities = cities => {
     if (!cities || cities.length === 0) {
       return <div>There are no cities yet</div>;
     }
@@ -27,35 +20,33 @@ export default class Cities extends Component {
     });
   };
 
-  handleAddCity = city => {
+  const handleAddCity = city => {
     const newId = Date.now();
     const addNewCity = {
       name: city.name,
       id: newId,
     };
 
-    this.setState(prevState => {
-      return {
-        cities: [...prevState.cities, addNewCity],
-        isAddCityVisible: false,
-      };
+    setCities((prevState) => {
+      return [...prevState, addNewCity];
     });
+    setIsAddCityVisible(false);
+
   };
 
-  render() {
-    const { isAddCityVisible, cities } = this.state;
     return (
       <section className={styles['cities-section']}>
         <div className={styles['title-icon']}>
           <Icon variant="pin" label="pin" />
           <h1>Cities</h1>
         </div>
-        <div className={styles['cities-list']}>{this.renderCities(cities)}</div>
-        {isAddCityVisible && <AddCities onCitiesSubmit={this.handleAddCity} />}
-        <button onClick={() => this.setState({ isAddCityVisible: true })}>
+        <div className={styles['cities-list']}>{renderCities(cities)}</div>
+        {isAddCityVisible && <AddCities onCitiesSubmit={handleAddCity} />}
+        <button onClick={() => setIsAddCityVisible(true)}>
           ADD CITY
         </button>
       </section>
     );
-  }
 }
+
+export default Cities;