Permalink
Browse files

Step 12: Add actions and reducer for GifsModal

  • Loading branch information...
samanthamichele7 committed May 31, 2017
1 parent eee1479 commit c88656bea5a5693bef02e0e1181bd379eb314e87
Showing with 51 additions and 3 deletions.
  1. +15 −0 src/actions/index.js
  2. +8 −2 src/containers/App.js
  3. +3 −1 src/reducers/index.js
  4. +25 −0 src/reducers/modal.js
@@ -1,5 +1,7 @@
import request from 'superagent';

export const OPEN_MODAL = 'OPEN_MODAL';
export const CLOSE_MODAL = 'CLOSE_MODAL';
export const REQUEST_GIFS = 'REQUEST_GIFS';

const API_URL = 'http://api.giphy.com/v1/gifs/search?q=';
@@ -13,3 +15,16 @@ export function requestGifs(term = null) {
payload: data
}
}

export function openModal(gif) {
return {
type: OPEN_MODAL,
gif
}
}

export function closeModal() {
return {
type: CLOSE_MODAL
}
}
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import GifList from '../components/GifList';
import GifModal from '../components/GifModal';
import SearchBar from '../components/SearchBar';
import '../styles/app.css';

@@ -11,15 +12,20 @@ class App extends React.Component {
return (
<div>
<SearchBar onTermChange={this.props.actions.requestGifs} />
<GifList gifs={ this.props.gifs } />
<GifList gifs={ this.props.gifs } onGifSelect={ selectedGif => this.props.actions.openModal({selectedGif}) } />
<GifModal modalIsOpen={ this.props.modalIsOpen }
selectedGif={ this.props.selectedGif }
onRequestClose={ () => this.props.actions.closeModal() } />
</div>
);
}
}

function mapStateToProps(state) {
return {
gifs: state.gifs.data
gifs: state.gifs.data,
modalIsOpen: state.modal.modalIsOpen,
selectedGif: state.modal.selectedGif
};
}

@@ -1,8 +1,10 @@
import { combineReducers } from 'redux';
import GifsReducer from './gifs';
import ModalReducer from './modal';

const rootReducer = combineReducers({
gifs: GifsReducer
gifs: GifsReducer,
modal: ModalReducer
});

export default rootReducer;
@@ -0,0 +1,25 @@
import { OPEN_MODAL, CLOSE_MODAL } from '../actions';

const initialState = {
selectedGif: null,
modalIsOpen: false
};

export default function modal(state = initialState, action) {
switch(action.type) {
case OPEN_MODAL:
return {
...state,
modalIsOpen: true,
selectedGif: action.gif.selectedGif
};
case CLOSE_MODAL:
return {
...state,
modalIsOpen: false,
selectedGif: null
};
default:
return state;
}
}

0 comments on commit c88656b

Please sign in to comment.