From 5a9776c3369fcfe0b5277e0deeedb53c312b60b4 Mon Sep 17 00:00:00 2001
From: parisdolfman <parisdolfman@gmail.com>
Date: Tue, 8 Jun 2021 14:28:29 -0400
Subject: [PATCH] Done.

---
 package.json                                  |  2 +-
 src/components/LatestMovieReviewsContainer.js | 28 +++++++++++
 src/components/MovieReviews.js                | 38 +++++++++++++++
 .../SearchableMovieReviewsContainer.js        | 48 ++++++++++++++++++-
 4 files changed, 114 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 13270880..c022293b 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "enzyme-adapter-react-16": "^1.0.1",
     "fetch-mock": "^6.5.2",
     "isomorphic-fetch": "^2.2.1",
-    "mocha-multi": "^1.0.1",
+    "mocha-multi": "^1.1.3",
     "node-fetch": "^2.2.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
diff --git a/src/components/LatestMovieReviewsContainer.js b/src/components/LatestMovieReviewsContainer.js
index 43894662..5e0a34ba 100644
--- a/src/components/LatestMovieReviewsContainer.js
+++ b/src/components/LatestMovieReviewsContainer.js
@@ -7,3 +7,31 @@ const URL = 'https://api.nytimes.com/svc/movies/v2/reviews/all.json?'
             + `api-key=${NYT_API_KEY}`;
 
 // Code LatestMovieReviewsContainer Here
+
+class LatestMovieReviewsContainer extends Component {
+    constructor() {
+      super();
+  
+      this.state = {
+        reviews: []
+      };
+    }
+  
+    componentWillMount() {
+      fetch(URL)
+        .then(res => res.json())
+        .then(response => this.setState({ reviews: response.results }));
+    }
+  
+    render() {
+      return (
+        <div className="latest-movie-reviews">
+          <h2>The Latest Reviews:</h2>
+          <MovieReviews reviews={this.state.reviews} />
+        </div>
+      );
+    }
+  }
+  
+  
+  export default LatestMovieReviewsContainer;
\ No newline at end of file
diff --git a/src/components/MovieReviews.js b/src/components/MovieReviews.js
index 06bbf194..5416d200 100644
--- a/src/components/MovieReviews.js
+++ b/src/components/MovieReviews.js
@@ -1 +1,39 @@
 // Code MovieReviews Here
+
+import React from 'react';
+
+const Review = ({
+  headline,
+  byline,
+  link,
+  summary_short
+}) => {
+  return (
+
+    <div
+      key={headline}
+      className="review"
+    >
+      <header>
+        <a
+          className="review-link"
+
+          href={link.url}
+        >
+          {headline}
+        </a>
+        <br/>
+        <span className="author">{byline}</span>
+      </header>
+      <blockquote>{summary_short}</blockquote>
+    </div>
+  );
+};
+
+const MovieReviews = ({ reviews }) => <div className="review-list">{reviews.map(Review)}</div>;
+
+MovieReviews.defaultProps = {
+  reviews: []
+};
+
+export default MovieReviews;
\ No newline at end of file
diff --git a/src/components/SearchableMovieReviewsContainer.js b/src/components/SearchableMovieReviewsContainer.js
index 8c131501..12663ba1 100644
--- a/src/components/SearchableMovieReviewsContainer.js
+++ b/src/components/SearchableMovieReviewsContainer.js
@@ -3,7 +3,53 @@ import 'isomorphic-fetch';
 import MovieReviews from './MovieReviews'
 
 const NYT_API_KEY = 'dGpQ5OmGP2SgfvZimlpCUoF4iOag9qzZ';
-const URL = 'https://api.nytimes.com/svc/movies/v2/reviews/search.json?'
+const BASE_URL = 'https://api.nytimes.com/svc/movies/v2/reviews/search.json?'
             + `api-key=${NYT_API_KEY}`;
 
 // Code SearchableMovieReviewsContainer Here
+
+
+class SearchableMovieReviewsContainer extends Component {
+
+    constructor() {
+      super();
+  
+      this.state = {
+        searchTerm: '',
+        reviews: []
+      };
+    }
+  
+    handleSearchInputChange = event => this.setState({ searchTerm: event.target.value });
+  
+    handleSubmit = event => {
+      event.preventDefault();
+  
+      fetch(BASE_URL.concat(this.state.searchTerm))
+        .then(res => res.json())
+        .then(res => this.setState({ reviews: res.results }));
+    }
+  
+    render() {
+      return (
+        <div className="searchable-movie-reviews">
+          <form onSubmit={this.handleSubmit}>
+            <label htmlFor='search-input'>Search Movie Reviews</label>
+  
+            <input
+              id='search-input'
+              type="text"
+              style={{width: 300}}
+  
+              onChange={this.handleSearchInputChange} />
+            <button type="submit">Submit</button>
+          </form>
+          {this.state.reviews.length > 0 && <h2>Movie Review By Search:</h2>}
+          <MovieReviews reviews={this.state.reviews} />
+        </div>
+      );
+    }
+  }
+  
+  
+  export default SearchableMovieReviewsContainer;
\ No newline at end of file