Done

.tool-versions

@@ -0,0 +1 @@
+ruby 2.7.1

src/components/LatestMovieReviewsContainer.js

@@ -2,8 +2,24 @@ import React, { Component } from 'react';
 import 'isomorphic-fetch';
 import MovieReviews from './MovieReviews'
 
-const NYT_API_KEY = 'your-key-here';
+const NYT_API_KEY = 'IET2OiHptrZvHtKPNsvSf4myfAYkeMTF';
 const URL = 'https://api.nytimes.com/svc/movies/v2/reviews/all.json?'
             + `api-key=${NYT_API_KEY}`;
 
-// Code LatestMovieReviewsContainer Here
+class LatestMovieReviewsContainer extends Component {
+  state = {
+    reviews: []
+  }
+
+  componentDidMount() {
+    fetch(URL)
+      .then(resp => resp.json())
+      .then(reviewData => this.setState({reviews: reviewData.results}))
+  }
+
+  render() {
+    return <div className="latest-movie-reviews"><MovieReviews reviews={this.state.reviews} /></div>
+  }
+}
+
+export default LatestMovieReviewsContainer

src/components/MovieReviews.js

@@ -1 +1,44 @@
-// Code MovieReviews Here
+import React from "react";
+
+const MovieReviews = ({reviews}) => {
+  return (
+    <div className="review-list">
+      { reviews.map(Review) }
+    </div>
+  )
+}
+
+const Review = ({link, headline, byline, publication_date, summary_short, idx}) => {
+  return (
+    <div key={idx} className="review">
+      <a href={link.url} target="_blank" rel="noopener noreferrer"><h1>{headline}</h1></a>
+      <p>Author: {byline}, Published: {publication_date}</p>
+      <p>{summary_short}</p><br />
+    </div>
+  )
+}
+
+export default MovieReviews
+
+
+// import React from "react";
+
+// const MovieReviews = ({reviews}) => {
+//   return (
+//     <div className="review-list">
+//       { reviews.map((review, idx) => <Review review={review} key={idx} />) }
+//     </div>
+//   )
+// }
+
+// const Review = ({review, idx}) => {
+//   return (
+//     <div key={idx} className="review">
+//       <a href={review.link.url} target="_blank" rel="noopener noreferrer"><h1>{review.headline}</h1></a>
+//       <p>Author: {review.byline}, Published: {review.publication_date}</p>
+//       <p>{review.summary_short}</p><br />
+//     </div>
+//   )
+// }
+
+// export default MovieReviews

src/components/SearchableMovieReviewsContainer.js

@@ -2,8 +2,55 @@ import React, { Component } from 'react';
 import 'isomorphic-fetch';
 import MovieReviews from './MovieReviews'
 
-const NYT_API_KEY = 'your-key-here';
+const NYT_API_KEY = 'IET2OiHptrZvHtKPNsvSf4myfAYkeMTF';
 const URL = 'https://api.nytimes.com/svc/movies/v2/reviews/search.json?'
             + `api-key=${NYT_API_KEY}`;
 
-// Code SearchableMovieReviewsContainer Here
+class SearchableMovieReviewsContainer extends Component {
+  state = {
+    searchTerm: "",
+    reviews: []
+  }
+
+  handleChange = e => {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+  }
+
+  handleSubmit = e => {
+    e.preventDefault();
+    fetch(URL + `&query=${this.state.searchTerm}`)
+      .then(resp => resp.json())
+      .then(reviewData => this.searchResults(reviewData))
+  }
+
+  searchResults = (reviewData) => {
+    if (!reviewData.results) {
+      alert("Please try another term")
+    } else {
+      this.setState({reviews: reviewData.results})
+    }
+  }
+
+  searchForm = () => {
+    return (
+      <form className="search-form" onSubmit={this.handleSubmit}>
+        <label>Enter a search term:</label><br />
+        <input type="text" name="searchTerm" onChange={this.handleChange} value={this.state.searchTerm} /><br />
+        <button type="submit">Search</button>
+      </form>
+    )
+  }
+
+  render() {
+    return (
+      <>
+        {this.searchForm()}
+        <div className="searchable-movie-reviews"><MovieReviews reviews={this.state.reviews} /></div>
+      </>
+    )
+  }
+}
+
+export default SearchableMovieReviewsContainer