License: Other

Shell 2.89% HTML 5.74% JavaScript 91.37%

react-props-and-state-lab's Introduction

React Props and State Lab

Overview

You'll build a small React application where you'll update state in response to a fetch payload and pass props among components to handle updates.

Animal Shelter

Time to put all of our hard-earned knowledge to the test! This lab is fairly big, and will require you to use everything you've learned up to this point. Don't be intimidated, there are plenty of tests to guide you along the way! In this lab, we'll be working on a front-end for an animal shelter. Sadly, there still are way too many cute pets without any owners. Let's help them out by creating a UI in React!

We strongly recommend completing this lab using Behavior Driven Development (BDD)––test the functionality in the browser before running the tests. You'll have a much better time seeing the results in the browser.

Call npm i && npm start to run this project in your browser

Deliverables

A user should be able to change the Animal Type filter/drop down to specify the type of animal they want to adopt.
A user should be able to click on the 'Find pets' button, and they will see all of pets only for the type they specified in the drop down (you'll be fetching to a mock API to get this data).
A user can click on 'Adopt' to adopt that pet. They cannot un-adopt it. No backsies!

Don't worry about persistence. We will not be saving this data to a real API. So if a pet is adopted, on refresh of the page, they will be available for adoption again. We are only going to focus on building the front end UI.

Instructions

On a high level, you will be working on several components that form the UI of the animal shelter adoption application. There are several components that need your attention. All of these components can be found in the components/ folder. Starting from the top-level and working our way down through all its descendants:

`App`

The app's initial state is already defined. App has two children: the <Filters /> and <PetBrowser /> components.
App should pass a callback prop, onChangeType, to <Filters />. This callback needs to update <App />'s state.filters.type
<Filters /> needs a callback prop, onFindPetsClick. When the <Filters /> component calls onFindPetsClick, <App /> should fetch a list of pets using fetch().

Assuming your app is up and running, you can make a fetch to this exact URL: /api/pets with an optional query parameter to get your data.
Use App's state.filters to control/update this parameter
If the type is 'all', send a request to /api/pets
If the type is 'cat', send a request to /api/pets?type=cat. Do the same thing for dog and micropig.
The pet data received will include information on individual pets and their adoption status.

Set <App/>'s state.pets with the results of your fetch request so you can pass the pet data down as props to <PetBrowser />

Even though we're using fetch here, its responses have been mocked in order to make the tests work properly. That means it's important to use the exact URLs as described above, or your tests will fail!

Finally, App should pass a callback prop, onAdoptPet, to <PetBrowser />. This callback should take in an id for a pet, find the matching pet in state.pets and set the isAdopted property to true.

`Filters`

Should receive an onChangeType callback prop. This callback prop gets called whenever the value of the <select> element changes with the value of the <select>
Should receive an onFindPetsClick callback prop. This callback prop gets called when the users clicks the 'Find pets' button.

`PetBrowser`

Should receive a pets prop. This is an array of pets that the component uses to render <Pet /> components. App should determine which pets to pass down as props. App should be responsible for filtering this list based on the types of pets the user wants to see.
Should receive an onAdoptPet prop. This callback prop gets passed to its <Pet /> children components.

`Pet`

Should receive a pet prop. Use the attributes in this data to render the pet card correctly. It should show the pet's name, type, age and weight. Based on the pet's gender, the component also needs to contain either a male (♂) or female (♀) symbol.
Each pet may or may not have an isAdopted property set to true. Using this property, render the correct button in the pet's card; if the pet is adopted, show the disabled button. Otherwise, show the primary button to adopt the pet.
Should receive an onAdoptPet callback prop. This callback prop gets called with the pet's id when the user clicks the adopt pet button — not when they click the disabled button!

Resources

react-props-and-state-lab's People

Contributors

Stargazers

Watchers

Forkers

emilycroft danielseehausen kwebster2 rslim87 itzsaga alexgriff ghoagland-flatiron dbushey matt-mcalister jgrantbrown teasacura yberdysh xiupan jeff-gosselin jarrianm jonbiro rexman17 flashgooden salsa-dude bamsarker marufbinawal varvarababkova lizbur10 kat-star mzakzook adamlarosa urfan196 emileypalmquist danhjoo7 cseiasp petersampson010 florepo clarkj99 alekvuka tishchungoora gawaxx geewey mustafa-al-shaheri bogomilam alexshom gnardinosaur pwerner1995 rubenv-dev almsq keenan-alves jerryjcchang jallenmesser lughjw rixong maylenepoulsen mattjagiello dane-dawson matthew-britt aaidenplays jp1200 codetombomb franco-canedo assansav andresmanco munroe1786 chrisbaptiste83 bonjourannie iquery-001 robkebab j-fisk87 jelenastj daphinora chriskay25 latinawhocodes agautherin jlangley3 mertoz41 joshbeglan agdsarge marshall405 noahshafer iambryanhaney abel2-code sotirm franciscosierra1915 mcgillshakore yandjoumbi bradcart rhinehardtc niketajen brennank14 haleyvferro simon51584 stefclaus timrinkerman sohyunc1990 aks2258 christorres392 allene-norton r-tomas-gonzalez btdunn rmsanchez93 kevjsdevelopment jinastrickland conradbuys11

react-props-and-state-lab's Issues

Failed to compile

Not sure exactly when but somewhere into the lab I started getting an error while 'npm start' was running

`Failed to compile.

./node_modules/fsevents/node_modules/node-pre-gyp/lib/info.js
Module not found: Can't resolve 'aws-sdk' in '/home/igor/dev/flatiron/labs/react-props-and-state-lab/node_modules/fsevents/node_modules/node-pre-gyp/lib'
`

Overall a little cumbersome and unclear what the goal really is

I think a lot of us felt that if more description, maybe even a little video like in jquery ttt was put into the Readme, and LESS starter code in the lab (maybe none at all) it would be more helpful and probably easier to grasp the goal of the lab.

Mainly the order of the Readme and tests could be improved, as @itzsaga says in the other issue. It feels like this is a good opportunity to do some ground-up work, so I also feel less starter code combined with more Readme descriptiveness and direction could make this lab go from confusing to a great mid-term review type of thing.

clarify instructions and switch to mock json-server

difficult to debug/develop without being able to run dev server

This lab can only be completed by running npm test and trying to decipher error messages that don't always give a lot of info.

Would be very helpful to provide a dev server students can run in order to debug as they build out the application.

@AnnJohn

Order of Tests & ReadMe

While this might just be a personal preference it might be something worth changing. Since:

Props are given to the component by its parent. You can think of props as an external influence that the component has no control over

I think it's easier to logically define the props first, then move on to the component that will utilize those props. I found working back towards the source of the props in App.js hard to follow. As I was coding the App.js it all came together and I could follow the flow of data much better. It might help us as we learn to structure this lab to "follow the data" as it flows from component to component.

missing devDependencies

package.json missing

"fetch-mock": "5.9.4",
"sinon": "1.17.7"

Could not run npm run bundle or npm test until these were added to package.json

BDD recommendation

Recommending that we build out the project using BDD, and not worry about passing the tests then actually worry about passing the tests when your deliverables weren't precise enough for our code to match the tests is resulting in a working website failing all but 2 of the tests. This is transforming this lab from something focused on learning to focused on debugging why the specific hooks that you have defined into our code are not working. While that is beneficial to an extent, it is beyond frustrating to be told not to worry about the tests, develop our code out and then fail almost all of the tests right out of the box.

Either give better deliverables that point out the properties and method names that we need to define or loosen up on the tests so that we can focus on learning instead.

Readme is misleading for how to render button

The readme states to pass an isAdopted prop to the Pet component and, "Using this prop, render the correct button in the pet's card; if the pet is adopted, show the disabled button. Otherwise, show the primary button to adopt the pet."

However, the test for this passes the prop like so: <Pet pet={{ ...FEMALE_CAT, isAdopted: true }} />

If you render the button based on the isAdopted prop, the test will not work, since it expects you to use the pet prop.

Completely lost in this lab

...

Missing npm dependencies

When trying to run learn on master, getting errors that sinon and fetch-mock

Lab is Unclear

This lab is very unclear doesn't provide guidance.

The solution provided shows functional components as opposed to class components and there is no explanation in the teaching for this.
Pets gets passed a prop isAdopted and someone we're supposed to assume and know that this prop is to be a part of the pet array.
Neat lab with great concepts but no consideration to guide or help students.

Pets and pet browser are not class components

The syntax used in the soln to pet and pet browser components does not use the class components. We haven't learned the techniques to solve it with the solution you've provided. It's confusing and unhelpful. THis was a very challenging lab so I think the solution should be refactored to be more appropriate to what has been taught up to this point.

solution branch missing dependencies

fetch-mock and sinon were not in package.json dependencies. had to manually install and --save-dev in order to bundle.

Running NPM install does not install 'fetch-mock'

The test fails because running npm install does not install 'fetch-mock'. See the error message below.

npm install --save fetch-mock will allow the test to run.

[email protected] test /Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116
mocha -R mocha-multi --require test/root.js --reporter-options nyan=-,json=.results.json

module.js:440
throw err;
^

Error: Cannot find module 'fetch-mock'
at Function.Module._resolveFilename (module.js:438:15)
at Function.Module._load (module.js:386:25)
at Module.require (module.js:466:17)
at require (internal/module.js:20:19)
at Object. (/Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116/fetch-setup.js:2:19)
at Module._compile (module.js:541:32)
at loader (/Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:456:32)
at tryModuleLoad (module.js:415:12)
at Function.Module._load (module.js:407:3)
at Module.require (module.js:466:17)
at require (internal/module.js:20:19)
at Object. (/Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116/test/App-test.js:5:19)
npm ERR! Test failed. See above for more details.

Test wording unclear

The ReadMe says:
"Once a pet is adopted, they cannot un-adopt it."

The test description says "should toggle a pet's adopted status," which implies changing isAdopted to false if true, and to true if false.

Suggest rewriting line 78 in the test verbiage to reflect "should change isAdopted to true"

Thank you.

Missing package

fetch-mock is missing from package.json.

Tests are not compatible with async/await syntax

Tests give ReferenceError: regeneratorRuntime is not defined if async/await is used, but pass if promises are used in onFindPetsClick tests

learn-co-curriculum / react-props-and-state-lab Goto Github PK