From d3e067c33ca54fdc413dc4141862547e36496518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Garc=C3=ADa=20Laverde?= <ivan@tyba.com.co>
Date: Sat, 12 Aug 2023 14:45:01 -0500
Subject: [PATCH] instructions to run frontend

---
 README.md                                    | 21 +++++++++++++++++-
 frontend/src/features/movies/MovieReview.jsx | 23 ++++++++++----------
 frontend/src/index.css                       | 22 +------------------
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 340b6b9..e915a46 100644
--- a/README.md
+++ b/README.md
@@ -42,4 +42,23 @@ Instructions to run the backend server
 - Test:
     Run the test suite running: ```npm run test```
 
-## Frontend [WIP]
\ No newline at end of file
+## Frontend [WIP]
+
+Tools used to implement the Frontend:
+- React: Create multiple components, and reactive behaviour of them using hooks. 
+- Redux: Handles the global states in the navigation within the app.
+- Yup: Helps to validate forms schemas.
+
+Instructions to run the frontend client
+
+- Enter into the frontend directory: 
+
+        cd frontend
+
+- Deploy on local machine.  
+
+    1. Install the dependencies and devDependencies and to start the client in development environment, run:    
+        
+        npm install 
+        
+        npm run start
\ No newline at end of file
diff --git a/frontend/src/features/movies/MovieReview.jsx b/frontend/src/features/movies/MovieReview.jsx
index bddf9dd..91f44e5 100644
--- a/frontend/src/features/movies/MovieReview.jsx
+++ b/frontend/src/features/movies/MovieReview.jsx
@@ -42,27 +42,28 @@ function MovieReview() {
                 </div>
                 <div className="movie-details">
                     <div className="movie-title">{selectedMovie.title}</div>
-                    <div className="movie-release-date">Release date: {new Date(selectedMovie.releaseDate).toLocaleDateString('en-US')}</div>
+                    <div className="movie-release-date">Release date: {selectedMovie.releaseDate ? new Date(selectedMovie.releaseDate).toLocaleDateString('en-US') : 'NA'}</div>
                     <div className="movie-overview">
                         {selectedMovie.overview}
                     </div>
                     <div className="rating-form">
-                        <h2>Rate the Movie</h2>
+                        <br></br>
+                        <h5>Rate the Movie</h5>
                         <form onSubmit={handleSubmit(onSubmit)}>
                             <label>Rating (1-10):</label>
                             <input type="number" {...register('rating')} id="rating" name="rating" className="rating-input" min="1.0" max="10.0" required></input>
                             <div className="invalid-feedback">{errors.rating?.message}</div>
                             <br></br>
                             <div>
-                            <label htmlFor="commentInput">Add Your Comment:</label>
-                            <textarea
-                                id="commentInput"
-                                rows="4"
-                                cols="50"
-                                value={comment}
-                                onChange={(e) => setComment(e.target.value)}
-                            />
-                        </div>
+                                <label htmlFor="commentInput">Add Your Comment:</label>
+                                <textarea
+                                    id="commentInput"
+                                    rows="4"
+                                    cols="50"
+                                    value={comment}
+                                    onChange={(e) => setComment(e.target.value)}
+                                />
+                            </div>
                             <button disabled={isSubmitting} className="submit-button" type="submit">
                                 {isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
                                 Rate
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8912597..9f09636 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -69,20 +69,7 @@
     font-size: 16px;
     color: #777;
 }
-.star-rating {
-    display: flex;
-    align-items: center;
-}
-.star-icon {
-    font-size: 24px;
-    color: #FFD700;
-    cursor: pointer;
-    margin-right: 5px;
-}
-.star-icon:hover,
-        .star-icon.active {
-            color: #FFD700;
-        }
+
 .submit-button {
     background-color: #007BFF;
     color: #fff;
@@ -91,10 +78,3 @@
     border-radius: 5px;
     cursor: pointer;
 }
-
-.rating-stars {
-    position: relative;
-    cursor: pointer;
-    overflow: hidden;
-    white-space: nowrap;
-}
\ No newline at end of file