Challenge First Delivery#67
Conversation
| @@ -0,0 +1,62 @@ | |||
| .app .navbar { | |||
There was a problem hiding this comment.
you shouldn't need this as you'll use styled components. Delete it and create components
There was a problem hiding this comment.
Thank you for you feedback.
| </p> | ||
| </div> | ||
| <Provider store={_store}> | ||
| <div className="app"> |
There was a problem hiding this comment.
styled components to this whole file
There was a problem hiding this comment.
It is already corrected
| import styled from 'styled-components'; | ||
|
|
||
| export const ContentGif = styled.div` | ||
| background-color: ${props => props.favorite ? '#b5c4de' : '#edf0f5'}; |
| "devDependencies": { | ||
| "enzyme": "^3.3.0", | ||
| "enzyme-adapter-react-16": "^1.1.1", | ||
| "jest": "^23.4.0", |
| "private": true, | ||
| "dependencies": { | ||
| "axios": "^0.18.0", | ||
| "jest-cli": "^23.4.0", |
| </Navbar> | ||
| <AppBody> | ||
| <ErrorBoundary> | ||
| <Switch> |
| <Switch> | ||
| <Route path="/Home" component={ComponentHome} /> | ||
| <Route path="/Favorites" component={ComponentFavorites} /> | ||
| <Redirect to={{ pathname: "/Home", }} /> |
There was a problem hiding this comment.
it would be nice to provide context on the redirect to the user
| list-style: none; | ||
| `; | ||
|
|
||
| export const NavbarLink = styled(Link)` |
| this.props.dispatch(updateTextFilter(e.target.value)); | ||
| }} /> | ||
| </ContainerInputText> | ||
| <Fragment> |
| @@ -0,0 +1,5 @@ | |||
| import * as types from '../constants/actionTypes'; | |||
|
|
|||
| export const addGifToFavorites = (gif) => ({ type: types.GIF_FAVORITE_ADD, gif, }); | |||
There was a problem hiding this comment.
The related data of an action should be contained in a payload attribute.
| const favorites = [...newState.favorites]; | ||
| if (!favorites.find(x => x.id == gif.id)) favorites.push(gif); | ||
| newState.favorites = favorites; | ||
| getLocalStorage().setItem('favorites', JSON.stringify(newState.favorites)); |
There was a problem hiding this comment.
Here you are calling localStorage, this is a side effect, something that we should avoid in the reducers. You can achieve this feature using middleware, sagas or a subscription to the store.
| export function* gifsTrending() { | ||
| try { | ||
| const gifs = yield call(fetchGifsTrending); | ||
| yield put({ type: types.GIFS_TRENDING_GET, gifs }); |
First delivery for revision.