Store token in session state

app/actions/actionTypes.js

 export const NAVIGATE = 'NAVIGATE';
 export const BACK = 'BACK';
-export const LOGININIT = 'LOGININIT';
 export const LOGINPROGRESS = 'LOGINPROGRESS';
 export const LOGINSUCCESS = 'LOGINSUCCESS';
 export const LOGINFAILURE = 'LOGINFAILURE';

app/actions/calendar.js

-import { AsyncStorage } from 'react-native';
 import * as types from './actionTypes';
 
-const TOKENKEY = '@MyStore:token';
 export function calendarRetrieved(eventList) {
   return {
     type: types.CALENDARRETREIVED,
@@ -15,32 +13,27 @@ export function calendarNotRetrieved() {
   };
 }
 
-export function retrieveCalendar() {
+export function retrieveCalendar(token) {
   return (dispatch) => {
-    AsyncStorage.getItem(TOKENKEY)
+    const start = new Date().toISOString().substring(0, 10);
+    let end = new Date();
+    end.setMonth(end.getMonth() + 6);
+    end = end.toISOString().substring(0, 10);
+    const data = {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Token ${token}`,
+      },
+    };
+    return fetch(`http://localhost:8000/api/events/eventlist/?start=${start}&end=${end}`, data)
       .then(
-        (token) => {
-          const start = new Date().toISOString().substring(0, 10);
-          let end = new Date();
-          end.setMonth(end.getMonth() + 6);
-          end = end.toISOString().substring(0, 10);
-          const data = {
-            method: 'GET',
-            headers: {
-              Accept: 'application/json',
-              'Content-Type': 'application/json',
-              Authorization: `Token ${token}`,
-            },
-          };
-          return fetch(`http://localhost:8000/api/events/eventlist/?start=${start}&end=${end}`, data)
-            .then(
-              response => response.json())
-            .then(
-              responseJson => dispatch(calendarRetrieved(responseJson)))
-            .catch(() => {
-              dispatch(calendarNotRetrieved());
-            });
-        },
-      );
+        response => response.json())
+      .then(
+        responseJson => dispatch(calendarRetrieved(responseJson)))
+      .catch(() => {
+        dispatch(calendarNotRetrieved());
+      });
   };
 }

app/actions/events.js

-import { AsyncStorage } from 'react-native';
 import * as types from './actionTypes';
 import { navigate } from './navigation';
 
-const TOKENKEY = '@MyStore:token';
-
 export function success(data) {
   return {
     type: types.LOADEVENTSUCCESS,
@@ -17,40 +14,31 @@ export function fail() {
   };
 }
 
-export function loadEvent(id) {
+export function loadEvent(id, token) {
   return (dispatch) => {
-    AsyncStorage.getItem(TOKENKEY)
+    const data = {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Token ${token}`,
+      },
+    };
+    return fetch(`http://localhost:8000/api/events/data/?event_id=${id}`, data)
+      .then(
+        response => response.json(),
+      )
       .then(
-        (token) => {
-          const data = {
-            method: 'GET',
-            headers: {
-              Accept: 'application/json',
-              'Content-Type': 'application/json',
-              Authorization: `Token ${token}`,
-            },
-          };
-          return fetch(`http://localhost:8000/api/events/data/?event_id=${id}`, data)
-            .then(
-              response => response.json(),
-            )
-            .then(
-              (response) => {
-                dispatch(success(response));
-              },
-            )
-            .catch(
-              () => {
-                dispatch(fail());
-              },
-            );
+        (response) => {
+          dispatch(success(response));
+          dispatch(navigate('event'));
         },
       )
       .catch(
         () => {
           dispatch(fail());
+          dispatch(navigate('event'));
         },
       );
-    dispatch(navigate('event'));
   };
 }

app/actions/login.js

@@ -58,14 +58,6 @@ export function login(username, password) {
   };
 }
 
-export function initLogin(username, token) {
-  return {
-    type: types.LOGININIT,
-    username,
-    token,
-  };
-}
-
 export function logout() {
   AsyncStorage.multiRemove([USERNAMEKEY, TOKENKEY]);
   return {

app/app.js

@@ -6,7 +6,7 @@ import thunk from 'redux-thunk';
 
 import * as reducers from './reducers';
 import ReduxNavigator from './components/navigator';
-import { initLogin } from './actions/login';
+import { loginSuccess } from './actions/login';
 
 const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
 const reducer = combineReducers(reducers);
@@ -30,7 +30,7 @@ class Main extends Component {
           const token = values[TOKENKEY];
 
           if (username !== null && token !== null) {
-            store.dispatch(initLogin(username, token));
+            store.dispatch(loginSuccess(username, token));
           }
         });
   }

app/components/Calendar.js

@@ -6,7 +6,7 @@ import EventCard from './EventCard';
 
 const Calendar = (props) => {
   if (!props.calendarFetched) {
-    props.retrieveCalendar();
+    props.retrieveCalendar(props.token);
     return (
       <View>
         <Text>
@@ -42,10 +42,16 @@ Calendar.propTypes = {
   })).isRequired,
   calendarFetched: React.PropTypes.bool.isRequired,
   retrieveCalendar: React.PropTypes.func.isRequired,
+  token: React.PropTypes.string.isRequired,
 };
 
-const mapStateToProps = state => state.calendar;
+const mapStateToProps = state => ({
+  ...state.calendar,
+  token: state.session.token,
+});
+
 const mapDispatchToProps = dispatch => ({
-  retrieveCalendar: () => dispatch(actions.retrieveCalendar()),
+  retrieveCalendar: token => dispatch(actions.retrieveCalendar(token)),
 });
+
 export default connect(mapStateToProps, mapDispatchToProps)(Calendar);

app/components/EventCard.js

@@ -9,7 +9,7 @@ const EventCard = props =>
     <Text> {new Date(props.event.start).toISOString().substring(0, 10)}</Text>
     <i>{props.event.description}</i>
     <Text>-----------------------------------------</Text>
-    <Button title="Openen" onPress={() => props.loadEvent(props.event.id)} />
+    <Button title="Openen" onPress={() => props.loadEvent(props.event.id, props.token)} />
   </View>
 ;
 
@@ -23,10 +23,15 @@ EventCard.propTypes = {
     id: React.PropTypes.number,
   }).isRequired,
   loadEvent: React.PropTypes.func.isRequired,
+  token: React.PropTypes.string.isRequired,
 };
 
+const mapStateToProps = state => ({
+  token: state.session.token,
+});
+
 const mapDispatchToProps = dispatch => ({
-  loadEvent: id => dispatch(actions.loadEvent(id)),
+  loadEvent: (id, token) => dispatch(actions.loadEvent(id, token)),
 });
 
-export default connect(() => ({}), mapDispatchToProps)(EventCard);
+export default connect(mapStateToProps, mapDispatchToProps)(EventCard);

app/components/Login.js

@@ -51,7 +51,7 @@ Login.propTypes = {
   login: React.PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => state.login;
+const mapStateToProps = state => state.session;
 const mapDispatchToProps = dispatch => ({
   login: (username, password) => dispatch(actions.login(username, password)),
 });

app/reducers/index.js

-import login from './login';
+import session from './session';
 import navigation from './navigation';
 import events from './events';
 import calendar from './calendar';
 
 export {
-  login,
+  session,
   navigation,
   events,
   calendar,

app/reducers/navigation.js

@@ -52,12 +52,6 @@ export default function navigate(state = initialState, action = {}) {
         drawerOpen: action.drawerOpen,
       };
     }
-    case types.LOGININIT: {
-      return {
-        ...state,
-        loggedIn: true,
-      };
-    }
     case types.LOGOUT: {
       return initialState;
     }

app/reducers/login.js → app/reducers/session.js

@@ -6,7 +6,7 @@ const initialState = {
   username: '',
 };
 
-export default function login(state = initialState, action = {}) {
+export default function session(state = initialState, action = {}) {
   switch (action.type) {
     case types.LOGINSUCCESS:
       return { ...state, loginState: 'success', username: action.username, token: action.token };