From 1b2d091d8d47dec74cef2d5d4d3e4afc36539803 Mon Sep 17 00:00:00 2001
From: Joeycho <joeyadamcho@gmail.com>
Date: Wed, 16 Jun 2021 17:37:35 +0200
Subject: [PATCH] Done.

---
 src/components/LatestMovieReviewsContainer.js | 36 ++++++++++-
 src/components/MovieReviews.js                | 10 +++-
 .../SearchableMovieReviewsContainer.js        | 59 ++++++++++++++++++-
 3 files changed, 102 insertions(+), 3 deletions(-)

diff --git a/src/components/LatestMovieReviewsContainer.js b/src/components/LatestMovieReviewsContainer.js
index 5af4e3fe..a10cda4e 100644
--- a/src/components/LatestMovieReviewsContainer.js
+++ b/src/components/LatestMovieReviewsContainer.js
@@ -2,8 +2,42 @@ import React, { Component } from 'react';
 import 'isomorphic-fetch';
 import MovieReviews from './MovieReviews'
 
-const NYT_API_KEY = 'your-key-here';
+const NYT_API_KEY = 'ewgHi1jG7YBIauDd0vTG47G1qSLAL1N4';
 const URL = 'https://api.nytimes.com/svc/movies/v2/reviews/all.json?'
             + `api-key=${NYT_API_KEY}`;
 
 // Code LatestMovieReviewsContainer Here
+class LatestMovieReviewsContainer extends React.Component {
+    constructor(props) {
+      super(props);
+   
+      // Initial state here...
+      this.state = {
+          reviews: []
+      };
+    }
+   
+    componentDidMount() {
+        fetch(URL)
+          .then(response => response.json())
+          .then(reviewData => this.setState({ reviews: reviewData.results }))
+      }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this.state.reviews === nextState.reviews) {
+          return false
+        }
+        return true
+      }
+    
+
+    render() {
+      // Return JSX that renders into HTML
+      return(
+        <div className="latest-movie-reviews">
+          <MovieReviews reviews={this.state.reviews}/>
+          </div>)
+    }
+  }
+
+  export default LatestMovieReviewsContainer
diff --git a/src/components/MovieReviews.js b/src/components/MovieReviews.js
index 06bbf194..1d3d8f8d 100644
--- a/src/components/MovieReviews.js
+++ b/src/components/MovieReviews.js
@@ -1 +1,9 @@
-// Code MovieReviews Here
+import React from 'react';
+ 
+const MovieReviews = ({ reviews }) => (
+  <div className="review-list">
+    { reviews.map(review => <p className="review"> Review {review.display_title} </p>) }
+  </div>
+)
+ 
+export default MovieReviews;
\ No newline at end of file
diff --git a/src/components/SearchableMovieReviewsContainer.js b/src/components/SearchableMovieReviewsContainer.js
index 39992ba6..e324915b 100644
--- a/src/components/SearchableMovieReviewsContainer.js
+++ b/src/components/SearchableMovieReviewsContainer.js
@@ -2,8 +2,65 @@ import React, { Component } from 'react';
 import 'isomorphic-fetch';
 import MovieReviews from './MovieReviews'
 
-const NYT_API_KEY = 'your-key-here';
+const NYT_API_KEY = 'ewgHi1jG7YBIauDd0vTG47G1qSLAL1N4';
 const URL = 'https://api.nytimes.com/svc/movies/v2/reviews/search.json?'
             + `api-key=${NYT_API_KEY}`;
 
 // Code SearchableMovieReviewsContainer Here
+class SearchableMovieReviewsContainer extends React.Component {
+    constructor(props) {
+      super(props);
+   
+      // Initial state here...
+      this.state = {
+          searchTerm: "car",
+          reviews: []
+      };
+    }
+
+    handleSubmit(searchTerm) {
+        fetch(URL+`&query=${searchTerm}`)
+          .then(response => response.json())
+          .then(reviewData => this.setState({ reviews: reviewData.results }))
+      }
+   
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this.state.reviews === nextState.reviews) {
+          return false
+        }
+        return true
+      }
+    
+    handleChange = (event)=>{
+        this.setState(
+            {
+                ...this.state.reviews,
+                searchTerm: e.target.value
+            }   
+        )
+    }
+   
+    
+
+    render() {
+      // Return JSX that renders into HTML
+      return(
+    <div className="searchable-movie-reviews">
+        <form onSubmit={()=> this.handleSubmit(this.state.searchTerm)}>
+        <div>
+          <label>
+            Search
+            <input id="username" name="username" onChange={e => this.handleChange(e)} type="text" value={this.state.searchTerm} />
+          </label>
+        </div>
+        <div>
+          <button type="submit">Search</button>
+        </div>
+      </form>
+        <MovieReviews reviews={this.state.reviews}/>
+    </div>
+      )
+    }
+  }
+
+  export default SearchableMovieReviewsContainer
\ No newline at end of file