Refactoring application to redux (flux pattern)

package.json

@@ -15,6 +15,8 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
     "redux": "^4.0.4",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-thunk": "^2.3.0",
     "styled-components": "^4.4.1"
   },
   "devDependencies": {

src/App.js

@@ -1,21 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import Header from './components/Header';
 import RoutesContainer from './Routes';
-
-import api from './api';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { fetchCards, fetchCardByPokeName } from './redux/actions/fetchCards';
 
 import './app.css';
 
-function App() {
-  const [cards, setCards] = useState([]);
-
+function App({ cards, fetchCards, fetchCardByPokeName }) {
   useEffect(() => {
-    api.get('/cards').then((response) => setCards(response.data.cards));
+    fetchCards();
   }, []);
 
   const doSearchPokemon = (input) => {
-    api.get(`/cards?name=${input}`).then((response) => setCards(response.data.cards));
+    fetchCardByPokeName(input);
   };
 
   return (
@@ -26,4 +25,10 @@ function App() {
   );
 }
 
-export default App;
+const mapStateToProps = (state) => ({
+  cards: state.cards,
+});
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({ fetchCards, fetchCardByPokeName }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/Routes.js

@@ -3,12 +3,12 @@ import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import CardDetails from './components/CardDetails';
-import Cards from './components/CardsList';
+import CardsList from './components/CardsList';
 
 const RoutesContainer = ({ cards }) => (
   <>
     <Switch>
-      <Route exact path="/" render={(props) => <Cards cards={cards} {...props} />} />
+      <Route exact path="/" render={(props) => <CardsList cards={cards} {...props} />} />
       <Route exact path="/cards/:id" component={CardDetails} />
     </Switch>
   </>

src/components/Header/index.js

@@ -29,6 +29,8 @@ const Header = ({ doSearchPokemon, history }) => {
             labelText="Digite o nome do Pokemón"
             name="txtPokemon"
             placeholder="Digite o nome do Pokemón"
+            type="search"
+            autoComplete="off"
           />
           <Button onClick={handleSearch} name="btn">Pesquisar</Button>
         </div>

src/components/TextInput/index.js

@@ -76,15 +76,16 @@ const StyledInput = styled.input`
 `;
 
 const TextInput = ({
-  labelText, name, placeholder, value, onChange,
+  labelText, autoComplete, name, placeholder, type, value, onChange,
 }) => {
   const [active, setActive] = useState(false);
 
   return (
     <StyledContainer className={active || value ? 'isActive' : ''}>
       <label htmlFor={name}>{labelText}</label>
       <StyledInput
-        type="text"
+        autoComplete={autoComplete}
+        type={type}
         name={name}
         placeholder={placeholder}
         value={value}
@@ -98,14 +99,18 @@ const TextInput = ({
 };
 
 TextInput.defaultProps = {
+  autoComplete: 'on',
   placeholder: '',
+  type: 'text',
 };
 
 TextInput.propTypes = {
   labelText: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  type: PropTypes.string,
   value: PropTypes.string.isRequired,
 };
 

src/index.js

@@ -2,10 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import { Provider } from 'react-redux';
+import Store from './redux/store/cards';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-
+ReactDOM.render(
+  <Provider store={Store}>
+    <App />
+  </Provider>,
+  document.getElementById('root'),
+);
 if (module.hot) {
   module.hot.accept();
 }

src/redux/actions/fetchCards.js

@@ -0,0 +1,16 @@
+import { fetchCardsPending, fetchCardsSuccess, fetchCardsFailure } from './index';
+import api from '../../api';
+
+export const fetchCards = () => (dispatch) => {
+  dispatch(fetchCardsPending());
+  api.get('/cards')
+    .then((response) => dispatch(fetchCardsSuccess(response.data.cards)))
+    .catch((error) => dispatch(fetchCardsFailure(error)));
+};
+
+export const fetchCardByPokeName = (input) => (dispatch) => {
+  dispatch(fetchCardsPending());
+  api.get(`/cards?name=${input}`)
+    .then((response) => dispatch(fetchCardsSuccess(response.data.cards)))
+    .catch((error) => dispatch(fetchCardsFailure(error)));
+};

src/redux/actions/index.js

@@ -0,0 +1,17 @@
+import { FETCH_CARDS_PENDING, FETCH_CARDS_SUCCESS, FETCH_CARDS_ERROR } from '../types';
+
+export const test = () => {};
+
+export const fetchCardsPending = () => ({
+  type: FETCH_CARDS_PENDING,
+});
+
+export const fetchCardsSuccess = (payload) => ({
+  type: FETCH_CARDS_SUCCESS,
+  payload,
+});
+
+export const fetchCardsFailure = (payload) => ({
+  type: FETCH_CARDS_ERROR,
+  payload,
+});

src/redux/reducers/cardsReducer.js

@@ -0,0 +1,37 @@
+import { FETCH_CARDS_PENDING, FETCH_CARDS_SUCCESS, FETCH_CARDS_ERROR } from '../types';
+
+const INITAL_STATE = {
+  cards: [],
+  loading: false,
+  error: false,
+};
+
+const cardsReducer = (state = INITAL_STATE, action) => {
+  switch (action.type) {
+  case FETCH_CARDS_PENDING:
+    return {
+      ...state,
+      loading: true,
+      error: false,
+    };
+  case FETCH_CARDS_SUCCESS:
+    return {
+      ...state,
+      cards: state.cards.concat(action.payload),
+      loading: true,
+      error: false,
+    };
+
+  case FETCH_CARDS_ERROR:
+    return {
+      ...state,
+      loading: false,
+      error: true,
+    };
+
+  default:
+    return state;
+  }
+};
+
+export default cardsReducer;

src/redux/store/cards.js

@@ -0,0 +1,15 @@
+import { createStore, applyMiddleware } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import cardsReducer from '../reducers/cardsReducer';
+import thunk from 'redux-thunk';
+
+const middlewares = [thunk];
+
+const store = createStore(
+  cardsReducer,
+  composeWithDevTools(
+    applyMiddleware(...middlewares),
+  ),
+);
+
+export default store;

src/redux/types/index.js

@@ -0,0 +1,5 @@
+export const FETCH_CARDS_PENDING = 'FETCH_CARDS_PENDING';
+export const FETCH_CARDS_SUCCESS = 'FETCH_CARDS_SUCCESS';
+export const FETCH_CARDS_ERROR = 'FETCH_CARDS_ERROR';
+export const UPDATE_CARDS = 'UPDATE_CARDS';
+export const DELETE_CARDS = 'DELETE_CARDS';

yarn.lock

@@ -8820,6 +8820,16 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-devtools-extension@^2.13.8:
+  version "2.13.8"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
+  integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
+
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
 redux@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796"