Upload New File

App.js

+import React, { useState } from 'react';
+
+const TutorRegistrationForm = () => {
+  const [tutorName, setTutorName] = useState('');
+  const [email, setEmail] = useState('');
+  const [contactNumber, setContactNumber] = useState('');
+  const [availability, setAvailability] = useState('');
+  const [experience, setExperience] = useState('');
+  const [teachingGrade, setTeachingGrade] = useState('');
+  const [knowledgeLevel, setKnowledgeLevel] = useState('');
+  const [tutorNameError, setTutorNameError] = useState('');
+  const [emailError, setEmailError] = useState('');
+  const [contactNumberError, setContactNumberError] = useState('');
+  const [experienceError, setExperienceError] = useState('');
+  const [availabilityError, setAvailabilityError] = useState('');
+  const [gradeError, setGradeError] = useState('');
+  const [knowledgeLevelError, setKnowledgeLevelError] = useState('');
+  const [detailsSaved, setDetailsSaved] = useState(false);
+
+  const handleSaveDetails = async () => {
+    try {
+      setTutorNameError('');
+      setEmailError('');
+      setContactNumberError('');
+      setExperienceError('');
+      setGradeError('');
+      setKnowledgeLevelError('');
+      setAvailabilityError('');
+
+      let isValid = true;
+
+      if (tutorName.trim() === '') {
+        setTutorNameError('Tutor Name is required');
+        isValid = false;
+      }
+      if (email.trim() === '' || !isValidEmail(email)) {
+        setEmailError('Invalid Email');
+        isValid = false;
+      }
+      if (contactNumber.trim() === '' || !isValidContactNumber(contactNumber)) {
+        setContactNumberError('Invalid Contact Number');
+        isValid = false;
+      }
+      if (availability.trim() === '') {
+        setAvailabilityError('Availability is required');
+        isValid = false;
+      }
+      if (experience.trim() === '' || isNaN(experience)) {
+        setExperienceError('Invalid Experience (must be a number)');
+        isValid = false;
+      }
+      if (teachingGrade.trim() === '') {
+        setGradeError('Teaching Grade is required');
+        isValid = false;
+      }
+      if (knowledgeLevel.trim() === '') {
+        setKnowledgeLevelError('Knowledge Level is required');
+        isValid = false;
+      }
+
+      if (!isValid) {
+        return;
+      }
+
+      const data = {
+        tutorName,
+        email,
+        contactNumber,
+        availability,
+        experience: parseInt(experience),
+        teachingGrade,
+        knowledgeLevel,
+      };
+
+      const response = await fetch('http://localhost:5000/tutors/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to save details');
+      }
+
+      setDetailsSaved(true);
+      setTimeout(() => {
+        setDetailsSaved(false);
+        window.location.reload();
+      }, 3000);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+  const isValidEmail = email => {
+    const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
+    return emailRegex.test(email);
+  };
+
+  const isValidContactNumber = contactNumber => {
+    const contactNumberRegex = /^[\d-\s]+$/;
+    return contactNumberRegex.test(contactNumber);
+  };
+
+  const styles = {
+    form: {
+      width: '100%',
+      maxWidth: 400,
+      margin: '0 auto',
+      padding: 20,
+      backgroundColor: '#fff',
+      borderRadius: 10,
+      boxShadow: '0px 0px 10px 0px rgba(0,0,0,0.1)',
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+      marginBottom: 20,
+      textAlign: 'center',
+    },
+    input: {
+      height: 40,
+      border: '1px solid #ccc',
+      marginBottom: 12,
+      paddingLeft: 8,
+      borderRadius: 5,
+      width: '100%',
+    },
+    error: {
+      color: 'red',
+      fontSize: 12,
+      marginBottom: 8,
+    },
+    button: {
+      width: '100%',
+      height: 40,
+      backgroundColor: '#0000FF',
+      color: 'white',
+      borderRadius: 5,
+      marginTop: 10,
+      cursor: 'pointer',
+    },
+    select: {
+      height: 40,
+      border: '1px solid #ccc',
+      marginBottom: 12,
+      paddingLeft: 8,
+      borderRadius: 5,
+      width: '100%',
+    },
+  };
+
+  return (
+    <div style={styles.form}>
+      <h2 style={styles.title}>Tutor Registration</h2>
+      <input
+        style={styles.input}
+        placeholder="Tutor Name"
+        value={tutorName}
+        onChange={e => setTutorName(e.target.value)}
+      />
+      <p style={styles.error}>{tutorNameError}</p>
+      <input
+        style={styles.input}
+        placeholder="Email"
+        value={email}
+        onChange={e => setEmail(e.target.value)}
+      />
+      <p style={styles.error}>{emailError}</p>
+      <input
+        style={styles.input}
+        placeholder="Contact Number"
+        value={contactNumber}
+        onChange={e => setContactNumber(e.target.value)}
+      />
+      <p style={styles.error}>{contactNumberError}</p>
+      <input
+        style={styles.input}
+        placeholder="Experience in years"
+        value={experience}
+        onChange={e => setExperience(e.target.value)}
+      />
+      <p style={styles.error}>{experienceError}</p>
+      <select
+        style={styles.select}
+        value={availability}
+        onChange={e => setAvailability(e.target.value)}
+      >
+        <option value="">Select availability</option>
+        <option value="yes">Yes</option>
+        <option value="no">No</option>
+      </select>
+      <p style={styles.error}>{availabilityError}</p>
+      <select
+        style={styles.select}
+        value={teachingGrade}
+        onChange={e => setTeachingGrade(e.target.value)}
+      >
+        <option value="">Select teaching grade</option>
+        <option value="Grade 1">Grade 1</option>
+        <option value="Grade 2">Grade 2</option>
+        <option value="Grade 3">Grade 3</option>
+        <option value="Grade 4">Grade 4</option>
+        <option value="Grade 5">Grade 5</option>
+      </select>
+      <p style={styles.error}>{gradeError}</p>
+      <select
+        style={styles.select}
+        value={knowledgeLevel}
+        onChange={e => setKnowledgeLevel(e.target.value)}
+      >
+        <option value="">Select desired knowledge level</option>
+        <option value="Advanced">Advanced</option>
+        <option value="Medium">Medium</option>
+        <option value="Beginner">Beginner</option>
+      </select>
+      <p style={styles.error}>{knowledgeLevelError}</p>
+      <button style={styles.button} onClick={handleSaveDetails}>
+        Save Details
+      </button>
+      {detailsSaved && <p>Your details saved successfully.</p>}
+    </div>
+  );
+};
+
+export default TutorRegistrationForm;