learn-co-curriculum / quote-maker-react-lab Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 462.0 1.68 MB

License: Other

HTML 11.67% CSS 0.98% JavaScript 87.35%

quote-maker-react-lab's Introduction

Redux QuoteMaker Lab

Objectives

Use the react-redux library and the redux library to build an application with multiple resources.
Learn how to implement our final CRUD action, update.

Overview

In this lab we will be building an application for making, updating, and deleting quotes. In our App component we will render two components: QuoteForm and Quotes. We will build Action Creators in actions/quotes.js and write our quotes reducer to handle those actions.

Quotes Reducer

If you look in reducers/quotes.js, you will see that the quotes reducer has an initial state of:

[]

But when a Quote is added it should look like this (we will be using the uuid node package for generating ids):

[
  {
    id: '23423424242-42342423424242-fafdb',
    content: 'One Awesome Quote',
    author: 'Luke Ghenco'
  }
]

We will need to extend out the Quotes Reducer to handle removing quotes, upvoting quotes, and downvoting quotes as well. Check out the test specs for how to build these.

HINT: In order to handle upvoting and downvoting quotes, you will need to update the quote object in state. Think about how this would be done. When a user clicks the "Upvote" or "Downvote" button, you will dispatch the appropriate action to the reducer. Inside the reducer, instead of filtering as we would for a delete action, you might consider mapping — i.e., all quotes will be returned, but if a quote's id matches the id passed as the action's payload, the quote will be returned with an updated vote count.

Quotes Actions

Create Action Creators as specified in the tests for adding, removing, upvoting and downvoting quotes.

QuoteForm Component

QuoteForm is already set up with a textarea for a quote's content and an input for its author. We will be using component state to control the inputs so make sure to have your QuoteForm's component state structured as follows: { content: '', author: '' }. When the form is submitted, an addQuote() action will be dispatched to the reducer; addQuote should take a quote object as an argument.

Quotes Component

The Quotes container component will render a list of individual QuoteCard components. It needs to be connected to the Redux state so that it can render the quotes. Also make sure to attach the remove, upvote, and downvote actions from the actions/quotes.js file to pass down as callback props to the QuoteCard component.

QuoteCard Component

Make sure to connect the callback action props to the the Upvote, Downvote and Delete buttons.

Example App

Here is an image of what the completed app will look like:

quote-maker-react-lab's People

Contributors

Watchers

Forkers

beejluig bwatson78 kwebster2 morgvanny jimhotchkiss assansav chrisbaptiste83 bonjourannie munroe1786 ericiscoding chriskay25 madeline-stark adamadolfo melindadiaz07 alexstephane jinastrickland stefclaus joshua-flatiron jmlovitsch kylefarmer85 mikesap noble-webb barbarakuofie i-am-lain zackcarlson014 j2b2590 brynknowles giuliacajati jrwatson94 anthonymjimenez see-bet-code jomariepolanco mkoenke arielvgrubbs warrenniu jetechny alexriosdev nnhk23 jdc1492 marisayou tolentinoel gamil91 stephenvincentibanez kgrowkgrow billyott alecgrey bjf-flatiron denaweiss5 marcia-free chippychoppy jacobkagon raaynaldo rakitzis45 ggebre dmg5th smassarsky spenser6131 evanrpavone madelinemc ar00gula jessenreynolds mjones1818 turpp miodice3 mimirandi21 danajackson2 racross1 dwisecar lsuman83 emmafewer joshraiborde patrick-rush bebofofum antromo741 pete3249 alelv dakotalmartinez rumikoacopa dmitriymalayev may-arden andrudog7 jomapormentilla jreyes8631 florapetersen nicklevenson tvee24537 aschonely83 shilcof rebecca-lindsey jsapp21 thenanobay angelastephens abbiecoghlan nrymarz cassymarie mpthor86 jratana1 hellobontempo jbrasko2 brownjer3

quote-maker-react-lab's Issues

Lesson Placement

I think this lesson should come after the Redux Delete lessons, since deleting a component with Redux (which is required in this lab) hasn't been covered up to this point in the curriculum.

Tests do not pass as cloned or on solution branch

When I clone and run learn on master or solution branch:

/home/brianh/code/labs/cooking-with-redux-v-000/src/store.js:18
  return (0, _redux.createStore)(_index2['default'], window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
                                                     ^

ReferenceError: window is not defined
    at configureStore (/home/brianh/code/labs/cooking-with-redux-v-000/src/store.js:5:35)
    at Object.<anonymous> (/home/brianh/code/labs/cooking-with-redux-v-000/src/store.js:8:22)
    at Module._compile (module.js:570:32)
    at loader (/home/brianh/code/labs/cooking-with-redux-v-000/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/brianh/code/labs/cooking-with-redux-v-000/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/brianh/code/labs/cooking-with-redux-v-000/test/addIngredients-test.js:5:1)
    at Module._compile (module.js:570:32)
    at loader (/home/brianh/code/labs/cooking-with-redux-v-000/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/brianh/code/labs/cooking-with-redux-v-000/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at /home/brianh/code/labs/cooking-with-redux-v-000/node_modules/mocha/lib/mocha.js:230:27
    at Array.forEach (native)
    at Mocha.loadFiles (/home/brianh/code/labs/cooking-with-redux-v-000/node_modules/mocha/lib/mocha.js:227:14)
    at Mocha.run (/home/brianh/code/labs/cooking-with-redux-v-000/node_modules/mocha/lib/mocha.js:495:10)
    at Object.<anonymous> (/home/brianh/code/labs/cooking-with-redux-v-000/node_modules/mocha/bin/_mocha:469:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
/home/brianh/.rvm/gems/ruby-2.3.1/gems/learn-test-2.4.0/lib/learn_test/strategies/mocha.rb:49:in `results': undefined method `[]' for nil:NilClass (NoMethodError)
	from /home/brianh/.rvm/gems/ruby-2.3.1/gems/learn-test-2.4.0/lib/learn_test/runner.rb:68:in `push_results'
	from /home/brianh/.rvm/gems/ruby-2.3.1/gems/learn-test-2.4.0/lib/learn_test/runner.rb:19:in `run'
	from /home/brianh/.rvm/gems/ruby-2.3.1/gems/learn-test-2.4.0/bin/learn-test:60:in `<top (required)>'
	from /home/brianh/.rvm/gems/ruby-2.3.1/bin/learn-test:23:in `load'
	from /home/brianh/.rvm/gems/ruby-2.3.1/bin/learn-test:23:in `<main>'
	from /home/brianh/.rvm/gems/ruby-2.3.1/bin/ruby_executable_hooks:15:in `eval'
	from /home/brianh/.rvm/gems/ruby-2.3.1/bin/ruby_executable_hooks:15:in `<main>'

Tests a bit wonky

Running learn command doesn't work (neither does mocha).. have to use npm test, which is fine, but seems to hang and have to use ctrl + C to end the test run each time.

Running learn returns '0 tests passing', which actually returns a green light to the lab page, so moving on is no problem.

Reducers in the solution branch are modifying state rather than returning new state

If I'm not mistaken it seems to me like the solution's reducers are modifying state and my understanding is that that is a big nono. If this is in fact the case then the solutions should be refactored to return a new state which is the conventions for modifying state in React/Redux

If you would like me to attempt a fix please let me know and I'll look into it

@rrcobb @maxwellbenton

Usage of concat()

Took me a while to figure out where the state was getting the array of quotes and the first code implementation although valid the return value feels more ambiguous given that action.quote is an object instead of an array.

https://stackoverflow.com/questions/48865710/spread-operator-vs-array-concat

UPDATE:
Leveled up an understanding of concat() behavior: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat#Description

export default (state = [], action) => {
  let index;
  let quote;

  switch (action.type) {

    case 'ADD_QUOTE':
      return state.concat(action.quote);
...

...
  switch (action.type) {
    case 'ADD_QUOTE':
      return [...state, action.quote]
...

'npm start' command won't work

I got it to work by removing and re-installing webpack:

npm remove webpack
npm install [email protected]

typo- outdated title

The lab title is cooking with redux, but has nothing to do with cooking. It's called 'quote maker' on github

Lab incorrectly placed in V6?

There are a lot of things necessary for this lab that are covered in the two codealongs at the beginning of the next section.

Alternate solutions?

Canvas Link

https://learning.flatironschool.com/courses/1883/assignments/125712?module_item_id=259672

Concern

I've worked this lab for too long, and I can't get the tests to pass. The application works as described in my browser and I have one test failing:

1) QuoteCard (Revisited)
       calls upvoteQuote action creator and updates the quote's vote count in the Redux store:
     AssertionError: expected 1 to be one of [ 1000, '1000' ]
      at Context.<anonymous> (test/reducers/quotesReducerTests.js:162:52)
      at processImmediate (node:internal/timers:464:21)

The test language is inscrutable, so I'm led to believe that there is a specific syntactic issue on my part, but I cannot find it for the life of me.

Here's a link to my repo.
https://github.com/drewkeat/quote-maker-react-lab

I would love to understand what I'm missing, so please feel free to let me know.

Additional Context

All app functionality performs as described in specs

Suggested Changes

Provide room in testing for a map-based solution rather than needlessly slicing the array.

Redundant 'export' keywords in app files

In the Github code I cloned for this lab, there were several instances where a class is exported twice. For example, class QuoteForm was exported both where it was defined, as well as with an 'export default' statement afterwards:

export class QuoteForm extends Component {
... code ...
}
export default connect(null, {})(QuoteForm);

This created a lot of problems for me (and even a coach helping me). I think most students will assume this initially-provided code is bug-free and will be reluctant to remove code unless told in the instructions. I suggest either correct these 'double exports' or mention in the instructions that students will need to remove/change export statements.

No tests regarding QuoteCards

I was coding based on tests and test results and passed all of them. But then when I ran npm start to see what this app works like, it wasn't displaying the quotes I added. And then I noticed that I never coded the QuoteCard part of the lab. I later discovered it written in the lab README, but maybe it should also be included in the tests.

This lab would deeply benefit from a video walkthrough

Just of how it's supposed to look. The tests and description give very little valuable information about where the AddIngredients component should display. I assume on the add recipe form but...it's pretty confusing.

Rewrite these sentences

Rewrite these:
"But when a Quote is added it should look like. (We will be using the uuid node package for generating ids)"

As follows:
"But when a Quote is added it should look like this (we will be using the uuid node package for generating ids):

Thank you.