data fetching with the delay message & Feature Validate AddBooking #53
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -34,24 +34,25 @@ const Bookings = () => { | |
| setNewBooking({ ...newBooking, [fieldName]: updatedValue }); | ||
| }; | ||
|
|
||
| const [isLoading, setLoading] = useState(true); // New state for loading indicator | ||
|
|
||
| useEffect(() => { | ||
| // Fetch data when the component mounts | ||
| const fetchData = async () => { | ||
| try { | ||
| const response = await fetch( | ||
| "https://phrygian-cheddar-antler.glitch.me/delayed" | ||
| ); | ||
| const data = await response.json(); | ||
| setBookings(data); | ||
| setLoading(false); // Set loading to false once data is fetched | ||
| console.log("Fetched bookings data:", data); | ||
| } catch (error) { | ||
| console.error("Error fetching bookings data:", error); | ||
| setLoading(false); // Set loading to false in case of an error | ||
| } | ||
| }; | ||
| fetchData(); | ||
| // Log text when the component first renders | ||
| console.log("Component has rendered!"); | ||
| }, []); // Empty dependency array means this effect runs only once on mount | ||
|
|
@@ -63,31 +64,71 @@ const Bookings = () => { | |
| ) | ||
| ); | ||
| }; | ||
| //error handling for the form inputs | ||
| const [error, setError] = useState(null); | ||
|
|
||
| // Function to check the email format | ||
| const isValidEmail = (email) => { | ||
| const emailParts = email.split("@"); | ||
| if (emailParts.length !== 2) { | ||
| return false; | ||
| } | ||
|
|
||
| const [localPart, domainPart] = emailParts; | ||
| if (localPart.length === 0 || domainPart.length === 0) { | ||
| return false; | ||
| } | ||
|
|
||
| const domainParts = domainPart.split("."); | ||
| if (domainParts.length < 2) { | ||
| return false; | ||
| } | ||
|
|
||
| return true; | ||
| }; | ||
|
|
||
| const bookingSubmit = (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| // Check for empty values in all fields | ||
| for (const field in newBooking) { | ||
| if (!newBooking[field]) { | ||
| setError("All fields must be filled in."); | ||
| return; | ||
| } | ||
| } | ||
| // Check if the room ID is already booked | ||
| const isRoomAlreadyBooked = bookings.some( | ||
| (booking) => booking.roomId === newBooking.roomId | ||
| ); | ||
|
|
||
| if (isRoomAlreadyBooked) { | ||
| setError("This room is already booked. Please choose another room."); | ||
| return; // Prevent further execution if the room is already booked | ||
| } | ||
|
|
||
| // Validation for first name, last name, email, and room ID | ||
| if ( | ||
|
There was a problem hiding this comment. Same here. Input element have attribute There was a problem hiding this comment. That because it's only works on the HTML on react I'm trying to check if any of the fields are empty, that's what I understood when I was testing the validation function. It would make an extra line if I added the required attribute on the input fields |
||
| !newBooking.firstName || | ||
| !newBooking.surname || | ||
| !isValidEmail(newBooking.email) || | ||
| !newBooking.roomId.match(/^\d+$/) | ||
| ) { | ||
| setError( | ||
| "Invalid input. Please check your entries, and ensure the email format is valid." | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| // Additional validation for room ID range | ||
| const roomId = parseInt(newBooking.roomId, 10); | ||
| if (roomId < 0 || roomId > 100) { | ||
| setError("Room ID must be a number between 0 and 100."); | ||
| return; | ||
| } | ||
|
|
||
| // Clear any existing error message | ||
| setError(null); | ||
| // Generate a unique id for the new booking | ||
| const newId = Math.max(...bookings.map((booking) => booking.id), 0) + 1; | ||
|
|
||
|
|
@@ -115,7 +156,11 @@ const Bookings = () => { | |
| <main className="bookings"> | ||
| <Search search={search} /> | ||
| <section className="content"> | ||
| {isLoading ? ( | ||
| <p>Loading data, please wait...</p> | ||
| ) : ( | ||
| <SearchResults results={bookings} /> | ||
| )} | ||
| </section> | ||
| <button className="open-modal-button" onClick={openModal}> | ||
| Book new costumer | ||
|
|
@@ -200,8 +245,13 @@ const Bookings = () => { | |
| <button className="submit_button" type="submit"> | ||
| Confirm booking | ||
| </button> | ||
| {error && <div className="error">{error}</div>} | ||
| </form> | ||
| <img | ||
| className="form_img" | ||
| src="/src/assets/spa-logo.png" | ||
| alt="SPA Logo" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,97 @@ | ||
| // Bookings.scss | ||
|
|
||
| .bookings { | ||
|
There was a problem hiding this comment. The styles looks good. |
||
| padding: 20px; | ||
| } | ||
| .container { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| grid-gap: 5px 35px; | ||
| } | ||
| .add_customer { | ||
| position: relative; | ||
| bottom: 260px; | ||
| right: -175px; | ||
| } | ||
|
|
||
| form { | ||
| grid-gap: 5px 35px; | ||
| max-width: 500px; | ||
| position: relative; | ||
| } | ||
| label { | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| input { | ||
| padding: 8px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| button { | ||
| padding: 10px; | ||
| background-color: #007bff; | ||
| color: #fff; | ||
| cursor: pointer; | ||
| border: none; | ||
| border-radius: 4px; | ||
| font-size: 16px; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: #0056b3; | ||
| } | ||
| .submit_button { | ||
| margin-left: 30px; | ||
| text-align: center; | ||
| width: 15rem; | ||
| } | ||
|
|
||
| .modal-overlay { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: rgba(0, 0, 0, 0.5); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .modal-content { | ||
| background: #5f74eb; | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | ||
| max-width: 600px; | ||
| width: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| .close-modal-button { | ||
| position: relative; | ||
| bottom: 260px; | ||
| left: -50px; | ||
| background: none; | ||
| border: none; | ||
| cursor: pointer; | ||
| font-size: 25px; | ||
| color: #ff0000; | ||
| transition: transform 0.3s ease-in-out; | ||
| outline: none; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| transform: scale(1.75); | ||
| background: none; | ||
| outline: none; | ||
| } | ||
| } | ||
|
|
||
| .error { | ||
| color: #ff0000; | ||
| font-size: clamp(0.5rem, 0.85vw, 1.5rem); | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why didn't you use the pattern attribute to add validation on email input indead of creating a new funtion? Like here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email