+
+ );
+}
+
+export default App;
diff --git a/lab09-client-server-I/solution/client/src/components/FilmForm.jsx b/lab09-client-server-I/solution/client/src/components/FilmForm.jsx
new file mode 100644
index 0000000..7d431f7
--- /dev/null
+++ b/lab09-client-server-I/solution/client/src/components/FilmForm.jsx
@@ -0,0 +1,134 @@
+import dayjs from 'dayjs';
+
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { Form, Button } from 'react-bootstrap';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+
+import Film from '../models/Film';
+
+const FilmForm = (props) => {
+ /*
+ * Creating a state for each parameter of the film.
+ * There are two possible cases:
+ * - if we are creating a new film, the form is initialized with the default values.
+ * - if we are editing a film, the form is pre-filled with the previous values.
+ */
+ const [title, setTitle] = useState(props.film ? props.film.title : '');
+ const [favorite, setFavorite] = useState(props.film ? props.film.favorite : false);
+ const [watchDate, setWatchDate] = useState((props.film && props.film.watchDate) ? props.film.watchDate.format('YYYY-MM-DD') : "");
+ const [rating, setRating] = useState(props.film && props.film.rating ? props.film.rating : 0);
+
+ // useNavigate hook is necessary to change page
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ // if the film is saved (eventually modified) we return to the list of all films,
+ // otherwise, if cancel is pressed, we go back to the previous location (given by the location state)
+ const nextpage = location.state?.nextpage || '/';
+
+ // This state is used to handle error messages
+ const [errors, setErrors] = useState([]);
+
+ const validateForm = () => {
+ const validationErrors = {};
+
+ // Title validation: title should not be empty
+ if (title.trim() === '') {
+ validationErrors.title = 'Title can not be empty!';
+ }
+
+ // Watch date validation: watch date should not be in the future
+ if (dayjs(watchDate).isAfter(dayjs())) {
+ validationErrors.date='Watch date cannot be in the future!';
+ }
+
+ // Rating validation: rating should be between 0 and 5
+ if (rating < 0 || rating > 5) {
+ validationErrors.rating='Rating should be between 0 and 5!';
+ }
+
+ return validationErrors;
+ };
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+
+ const validationErrors = validateForm();
+ // console.log(validationErrors);
+ if (Object.keys(validationErrors).length > 0) {
+ setErrors(validationErrors);
+ return; // The form is not submitted. I.e., the film is not added.
+ }
+
+ setErrors([]); // cleaning error array
+ setTitle(title.trim()); // trim() is used for removing leading and ending whitespaces
+ if(!rating)
+ setRating(null);
+ if(!watchDate)
+ setWatchDate(null);
+ const film = new Film(undefined, title.trim(), favorite, watchDate, rating);
+
+ if(props.film) {
+ film.id = props.film.id;
+ props.editFilm(film);
+ }
+ else
+ props.addFilm(film);
+
+ // To be sure that the user can see the added film, we navigate to the root.
+ navigate('/');
+ }
+
+ return (
+
+ )
+
+}
+
+FilmForm.propTypes = {
+ addFilm: PropTypes.func,
+ editFilm: PropTypes.func,
+ cancel: PropTypes.func,
+ film: PropTypes.object
+};
+
+export default FilmForm;
diff --git a/lab09-client-server-I/solution/client/src/components/FilmList.jsx b/lab09-client-server-I/solution/client/src/components/FilmList.jsx
new file mode 100644
index 0000000..84992b4
--- /dev/null
+++ b/lab09-client-server-I/solution/client/src/components/FilmList.jsx
@@ -0,0 +1,89 @@
+import dayjs from 'dayjs';
+
+import PropTypes from 'prop-types';
+import {Col, Row, ListGroup, ListGroupItem} from 'react-bootstrap/';
+import { Link, useLocation } from "react-router-dom";
+
+
+export default function FilmList(props) {
+
+ return (
+
+ {props.films.map((film) => )}
+
+ );
+}
+
+FilmList.propTypes = {
+ films: PropTypes.array.isRequired,
+ updateFilm: PropTypes.func.isRequired,
+ deleteFilm: PropTypes.func.isRequired
+};
+
+export function FilmInList(props) {
+
+ return (
+
+
+ {props.filmData.title}
+
+
+
+
+
+
+
+ {/* Disabling the checkbox to suppress a warning. It is necessary to implement also the onChange function to properly manage the checkbox. */}
+ props.updateFilm({ ...props.filmData, "favorite": event.target.checked })} />
+
+
+
+
+
+
