Code Monkey home page Code Monkey logo

react-container-components-lab's Introduction

React Container Components

Overview

In this lab, we will practice building container components. By the end of the lab you will have:

  1. Practiced Building Container Components.
  2. Gained concrete experience combining presentational and container components to separate the data and presentation layers.

Oh, To Be a Critic!

Thumbs Down

Movie critics can be harsh, but it's a blast to read what they write. For this lab, imagine that you've been hired to work on a web application devoted to movie reviews. The app will draw its review content from the New York Times, which has provided a public, queryable API for their content.

For your part, you've been asked to produce two container components that will wrap a single presentation component, <MovieReviews>, which lists a series of movie reviews on the page.

The two container components you've been asked to create will use this single presentational component in different ways. The first, <LatestMovieReviewsContainer>, will fetch a list of the most recent reviews and display them. The second, <SearchableMovieReviewsContainer>, will provide a searchable interface allowing the user to enter a search term and then receive a list of reviews that match the search term(s).

You can tackle these components in whatever order you wish, but it might make sense to start with the more static (and thus simpler) <LatestMovieReviewsContainer>. As with other labs, you can use the tests as a specification for the components, but here are the main points that you should follow as you work:

Note: Your tests will not run properly until you have at least built out the basics of each component and export/import them properly.

<MovieReviews>

  • Your MovieReviews component should be stateless and functional.

  • You are free to lay out each review as you like using the data that the API returns, but make sure that the component outputs a top-level element with the class review-list and that each review is wrapped by an element with class review.

<LatestMovieReviewsContainer> and <SearchableMovieReviewsContainer>

  • Both container components should be class components that maintain state.

  • The LatestMovieReviewsContainer should have a top-level wrapping element with class latest-movie-reviews.

  • Optional: The SearchableMovieReviewsContainer should have a top-level wrapping element with class searchable-movie-reviews.

The New York Times API

In order to fetch data from the New York Times API, you'll need to make calls to the following URLs:

  • For the latest movie reviews: https://api.nytimes.com/svc/movies/v2/reviews/all.json
  • To query the search API: https://api.nytimes.com/svc/movies/v2/reviews/search.json?query=<search-term>

You'll need to create an API key in order to make requests. You can request an API key by:

If you're having trouble, follow the Get Started guide.

Once you have the API key, you can "sign" your requests by attaching the key to the URL like so:

https://api.nytimes.com/svc/movies/v2/reviews/all.json?api-key=<your-api-key>
https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=<your-api-key>&query=<search-term>

For further information about the New York Times Movie Reviews API — including a sandbox where you can view the data that the API returns — please consult their documentation.

Resources

react-container-components-lab's People

Contributors

crwhitesides avatar ezmiller avatar gj avatar ihollander avatar kjleitz avatar lukeghenco avatar maxwellbenton avatar pletcher avatar thomastuts avatar thuyanduong-flatiron avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-container-components-lab's Issues

Errors lack clarity for resolution

Canvas Link

https://learning.flatironschool.com/courses/1883/assignments/125688?module_item_id=259638

Concern

I'm not sure what the issue is. TDD errors imply that reviews should update when state is changed in container components. This works fine in the browser...

✓ should have state ✓ should have a state property "reviews" ✓ should have top-level element with class "latest-movie-reviews" ✓ should fetch data from the New York Times API 1) should render reviews after reviews state updated ✓ should be a stateless functional component ✓ should have a top-level component with class "review-list" 2) should render all the reviews ✓ should have state ✓ should have the state properties "reviews" and "searchTerm" ✓ should fetch data from the New York Times API on form submission 3) should render reviews after reviews state updated

9 passing (78ms)
3 failing

  1. should render reviews after reviews state updated:

    AssertionError: expected 0 to equal 3

    • expected - actual

    -0
    +3

    at Context. (test/LatestMovieReviewsContainer_test.js:52:47)
    at processImmediate (node:internal/timers:464:21)

  2. should render all the reviews:

    AssertionError: expected 0 to equal 3

    • expected - actual

    -0
    +3

    at Context. (test/MovieReviews_test.js:45:47)
    at processImmediate (node:internal/timers:464:21)

  3. should render reviews after reviews state updated:

    AssertionError: expected 0 to equal 3

    • expected - actual

    -0
    +3

    at Context. (test/SearchableMovieReviewsContainer_test.js:61:47)
    at processImmediate (node:internal/timers:464:21)

Additional Context

I'm sorry that I can't provide much further context. The application seems to function correctly in my browser (updating reviews when state changes in either container component). However, the errors that I'm receiving indicate that this isn't the case.

Feel free to check my work Forked Repo

Suggested Changes

N/A

Error with ReactDOM.render in Index.js

I keep getting this error I can't get rid of it to see what I'm doing in the browser. I'm not sure if it's a user error, or if there's a way to improve the code in index.js to get it to go away.

render
node_modules/react-dom/cjs/react-dom.development.js:27596
./src/index.js
src/index.js:7
   4 | import LatestMovieReviewsContainer from './components/LatestMovieReviewsContainer';
   5 | import SearchableMovieReviewsContainer from './components/SearchableMovieReviewsContainer';
   6 | 
>  7 | ReactDOM.render(
   8 |   <div className="app">
   9 |     <SearchableMovieReviewsContainer />
  10 |     <LatestMovieReviewsContainer />

React fragment shorthand is not usable

Even though this lab uses react 16.4.x, React fragments shorthand, available in React 16.2, give an unexpected token error:

Failed to compile.

./src/components/SearchableMovieReviewsContainer.js
Syntax error: Unexpected token (15:7)

  13 |   render() {
  14 |     return (
> 15 |       <>
     |        ^
  16 |         <MovieReviews />
  17 |         <div> Searchable</div>
  18 |       </>

<React.Fragment>...</React.Fragment> works normally...

Rate Limiting on NYTimes API even with API Key

Unable to complete this lab because NYTimes API sends me a 429 error code: "Too many requests. You reached your per minute or per day rate limit.". I'm not sure if the NYTimes API has changed and added this rate limiter since this lab was created, but if it has this lab will now be incompletable by most students.

Incomplete testing?

There are no tests that test if the app is actually fetching from the API, all the tests just assume there are reviews in.

whatwg-fetch vs node-fetch

In the lesson it states that whatwg-fetch is a good api library for using fetch. However the testing doesn't work with fetch. When using import fetch from 'whatwg-fetch' and also the alternative import 'whatwg-fetch' , fetch comes up undefined. As to where the import fetch from 'whatwg-fetch' comes up with a different error(something about a default).

With node-fetch, all you have to do is const fetch = require('node-fetch') and your done. You can use fetch in the file.

Documentation for node-fetch: https://www.npmjs.com/package/node-fetch

Documentation why whatwg-fetch doesn't work here: JakeChampion/fetch#329

screen shot 2016-12-13 at 8 26 33 pm

I wanted to bring this up because I spent over half my day trying to make whatwg-fetch work haha. There may of been a way or something i hadn't been able to do to get it working. I wanted to bring up node-fetch because it's easy to use.

Issue with MovieReviews Test

The last test for MovieReviews it("should render all the reviews") is testing using Enzyme shallow - which as far as I understand will not render children components. Since it is isolated it cannot find ".review" class name.

The lab asks to make this a functional component and not a Class with state. The beforeEach in the test says if the component is stateless to use Enzyme shallow and if not use Enzyme mount. As I stated above shallow wont work for MovieReviews. The other tests work because they have state and use mount.

Here is the reference I used to figure this out: https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/shallow.html

I know the lesson doesn't explicitly ask for a Review component to be made. However, following the prior lesson's usage of separation of concerns by making a Book component and BookList component I want to make sure the test would work if other students followed the prior lesson as well.

My fix for this is to replace line 49 of MovieReviews_test.js, which looks like this:
expect(wrapper.find(".review").length).to.equal(testReviews.length);
To this:
expect(wrapper.find(Review).length).to.equal(testReviews.length);
As well as importing Review into the file:
import Review from "../src/components/Review";

The data IS getting fetched.

The app is working perfectly. The fetch is going through and coming back successfully. But I'm getting this error message:
"

  1. should fetch data from the New York Times API on form submission: Error: An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue.

"
It's the only test I'm unable to pass.

Solution contains error

File: https://github.com/learn-co-curriculum/react-container-components-lab/blob/solution/src/components/SearchableMovieReviewsContainer.js

Issue: missing closing tag for state:

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 }));
}

#Staff

Restrictive Tests

The way the tests are written they do not allow for any nesting of presentational components as described in previous lessons. For example, creating an individual MovieReview component, or a Search component for the search form causes test failures due to using shallow in the tests.

I recommend using mount instead of shallow specifically for the last test in MovieReviews_test.js (should render all the reviews), and the second to last test in SearchableMovieReviewsContainer_test.js (should fetch data from the New York Times API on form submission). Note that mount has to be imported (same import statement as shallow) in MovieReviews_test.js for this to work, but it is already imported into SearchableMovieReviewsContainer_test.js and just requires a wrapper redefinition using mount in the second to last test).

Making these changes allows further breakdown of presentational components if students want to practice using that pattern.

No browser output

Aside from the fact that this lab doesn't actually use the API or fetch calls it refers to, it renders nothing in the browser. It would be nice if the API section was tested in such a way that you actually see data in the browser. As of right now, you just get a bunch of tests to pass, and nothing functions or renders... hardly a strong, realistic example.

NYT API Update

NYT API documentation and links have changed. Please update readme.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.