REACT SERIES CHALLENGE - Fist Delivery#60
Conversation
|
|
||
| if (!filtered) { | ||
| return ( | ||
| <div>{favoritesArr.map(key => <Item key={key} item={items[key]} />)}</div> |
There was a problem hiding this comment.
Remember you can avoid unnecessary wrapping elements in React16
| import Favorites from "./Pages/Favorites"; | ||
|
|
||
| const Routes = () => ( | ||
| <Switch> |
| <Switch> | ||
| <Route path="/favorites" component={Favorites} /> | ||
| <Route path="/" component={Home} /> | ||
| </Switch> |
There was a problem hiding this comment.
It is a nice to have to catch all unknown routes and redirect them either to a not found route or to the index with a message for the user.
| @@ -0,0 +1,4 @@ | |||
| const HOST = "https://api.giphy.com/"; | |||
| const API_KEY = "Zx5PYfLyHZFhzV4bFwtohSoObgCckVUU"; | |||
There was a problem hiding this comment.
Use .env variables to save your api keys and do not expose them versioning them. You can provide an .env.example file expressing its usage.
giovas94
changed the title
| `; | ||
|
|
||
| NavLinkStyled.defaultProps = { | ||
| activeClassName: "active" |
| <Switch> | ||
| <Route exact path="/" component={Home} /> | ||
| <Route path="/favorites" component={Favorites} /> | ||
| <Redirect from="/favorite" to="/favorites" /> |
| import NoMatch from "./Pages/NoMatch"; | ||
|
|
||
| const Routes = () => ( | ||
| <Switch> |
| import Favorites from "./Pages/Favorites"; | ||
| import NoMatch from "./Pages/NoMatch"; | ||
|
|
||
| const Routes = () => ( |
There was a problem hiding this comment.
In this specific exercise you may not see the value but you are declaring the routes in a semi static way on a separate file. Remember that one of the key takeaways of react router 4 is integrating the routes through the component views dynamically, as your application grows and become more complex maintaining this static definition of routes may not be the best approach
| @@ -0,0 +1,4 @@ | |||
| const HOST = process.env.REACT_APP_GIPHY_HOST; | |||
| const API_KEY = process.env.REACT_APP_GIPHY_API_KEY; | |||
| <NavbarStyled> | ||
| <LogoContainer /> | ||
| <NavStyled> | ||
| <NavLinkStyled exact to="/"> |
| <Provider store={store}> | ||
| <PersistGate loading={null} persistor={persistor}> | ||
| <Router> | ||
| <React.Fragment> |
| 6. Styling | ||
| - Use styled components | ||
|
|
||
| 1. :white_check_mark: Use Giphy API |
|
|
||
| export default connect( | ||
| mapStateToProps, | ||
| null |
There was a problem hiding this comment.
If you are not using the mapDispatchToProps, you can just omit the parameter, no need to use null 👍
| const mapDispatchToProps = dispatch => { | ||
| return { | ||
| onToggleFavorite: item => | ||
| dispatch({ type: "FAVORITE_TOGGLE", payload: { item } }) |
There was a problem hiding this comment.
You can use bindActionCreators or the object notation to avoid having to wrap the dispatch manually around the creators.
| } = this.props; | ||
|
|
||
| if ( | ||
| keyCode === 13 || |
There was a problem hiding this comment.
As a tip, always use const for these kind of cases:
const ENTER_KEY_CODE = 13;
| const rootReducer = combineReducers({ | ||
| trendGifs, | ||
| searchGifs, | ||
| favorites: persistReducer(favoritesPersistConfig, favorites), |
| const SEARCH_INPUT = "SEARCH_INPUT"; | ||
| const SEARCH_FAVORITE = "SEARCH_FAVORITE"; | ||
|
|
||
| const setSearchInput = (query = "") => ({ type: SEARCH_INPUT, query }); |
There was a problem hiding this comment.
Remember that the related data of an action should be contained in a payload attribute.
| const { data } = response.data; | ||
|
|
||
| // dispatch a success action to the store with the new data | ||
| yield put({ type: "API_CALL_SEARCH_SUCCESS", data }); |
There was a problem hiding this comment.
Always try to use action creators.
| const API_CALL_SUCCESS = "API_CALL_SUCCESS"; | ||
| const API_CALL_FAILURE = "API_CALL_FAILURE"; | ||
|
|
||
| export default { |
4 participants
Fist commit for challenge