23 added favourite reducer/actions

frontend/actions/SetPageAction.js → frontend/actions/AddFavourite.js

-export const setPage = (page) => {
+export const addFavourite = (fav) => {
     return (dispatch, getState) => {
-        //console.log("INNI ACTION med page: ", page)
+        console.log("Favourite action")
         dispatch({
-            type: 'SET_PAGE', page
+            type: 'ADD_FAVOURITE', fav
             
         })
     }

frontend/actions/RemoveFavourite.js

+export const addFavourite = () => {
+    return (dispatch, getState) => {
+        console.log("Favourite action remove")
+        dispatch({
+            type: 'REMOVE_FAVOURITE'
+            
+        })
+    }
+};
\ No newline at end of file

frontend/components/Cards/ExploreCard.js

@@ -91,10 +91,16 @@ class Card extends Component {
 const mapStateToProps = (state) => { //give us accsess to the data in store
 
     return {
-      page: state.page.page,
       word: state.filter.searchWord,
       continent: state.filter.continent
     }
   };
 
+  const mapDispatchToProps = (dispatch) => {
+    return {
+      addFavourite: (fav) => dispatch(addFavourite(fav)),
+      removeFavourite: () => dispatch(removeFavourite())
+    }
+  };
+
 export default connect(mapStateToProps)(Card);
\ No newline at end of file

frontend/components/Cards/HomeCard.js

@@ -145,7 +145,6 @@ class Card extends Component {
 const mapStateToProps = (state) => { //give us accsess to the data in store
 
     return {
-      page: state.page.page,
       word: state.filter.searchWord,
       continent: state.filter.continent,
       destinationID: state.destination.destinationID,

frontend/components/TabBar.js

-import React from 'react';
-import { createBottomTabNavigator } from 'react-navigation-tabs';
-import { createAppContainer } from 'react-navigation';
-import { Icon } from 'react-native-elements';
-import HomePage from './pages/HomePage';
-import ExplorePage from './pages/ExplorePage';
-import { createStore, applyMiddleware } from 'redux';
-import rootReducer from './reducers/index'
-import { Provider } from 'react-redux';
-import thunk from 'redux-thunk';
-import { View } from 'react-native'
-import { setPage } from '../frontend/actions/SetPageAction'; 
-import { connect } from 'react-redux';
-
-const store = createStore(rootReducer, applyMiddleware(thunk))
-
-const TabNavigator = createBottomTabNavigator(
-  { Home: { screen: HomePage, 
-          navigationOptions: {
-            tabBarIcon: <Icon name = "home" size = {36} />,
-          }
-  },
-  Explore: { screen: ExplorePage,
-            navigationOptions: {
-              tabBarIcon: <Icon name = "search" size = {36} />
-            },
-             }
-        }, 
-  {tabBarOptions: {
-  activeBackgroundColor : '#3f51b5',
-  inactiveBackgroundColor : 'rgba(63, 81, 181, .5)',
-  showLabel : false,
-}/*, defaultNavigationOptions: ({navigation}) => ({
-  tabBarOnPress: ({ navigation , defaultHandler}) => {
-    console.log('onPress: ', navigation.state.routeName);
-    defaultHandler()  }
-}) */
-
-});
-
-const AppContainer = createAppContainer(TabNavigator)
-import React from 'react';
-import { createBottomTabNavigator } from 'react-navigation-tabs';
-import { createAppContainer } from 'react-navigation';
-import { Icon } from 'react-native-elements';
-import HomePage from './pages/HomePage';
-import ExplorePage from './pages/ExplorePage';
-import { createStore, applyMiddleware } from 'redux';
-import rootReducer from './reducers/index'
-import { Provider } from 'react-redux';
-import thunk from 'redux-thunk';
-import { View } from 'react-native'
-import { setPage } from '../frontend/actions/SetPageAction'; 
-import { connect } from 'react-redux';
-
-const store = createStore(rootReducer, applyMiddleware(thunk))
-
-const TabNavigator = createBottomTabNavigator(
-  { Home: { screen: HomePage, 
-          navigationOptions: {
-            tabBarIcon: <Icon name = "home" size = {36} />,
-          }
-  },
-  Explore: { screen: ExplorePage,
-            navigationOptions: {
-              tabBarIcon: <Icon name = "search" size = {36} />
-            },
-             }
-        }, 
-  {tabBarOptions: {
-  activeBackgroundColor : '#3f51b5',
-  inactiveBackgroundColor : 'rgba(63, 81, 181, .5)',
-  showLabel : false,
-}, defaultNavigationOptions: ({navigation}) => ({
-  tabBarOnPress: ({ navigation , defaultHandler}) => {
-    console.log('onPress: ', navigation.state.routeName);
-    defaultHandler()  }
-})
-
-});
-
-const AppContainer = createAppContainer(TabNavigator)
-
-
-
-export default () => (<View style = {{flex: 1}}><AppContainer style={{margin: 100}}/></View>);
\ No newline at end of file

frontend/pages/ExplorePage.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { StyleSheet, Text, View, FlatList, Item } from 'react-native';
 import SearchBox from '../components/SearchBox';
 import Card from '../components/Cards/ExploreCard'
-import { setPage } from '../actions/SetPageAction';
 import { connect } from 'react-redux';
 import { changeSearchword } from '../actions/SearchAction';
 import 'react-navigation'
@@ -11,17 +10,11 @@ import 'react-navigation'
 class ExplorePage extends Component {
 
     componentDidMount(){
-        this.props.setPage("Explore")
-        console.log(this.props.navigation.state.routeName)
         this.props.changeSearchword("All")
     }
 
 
     render(){
-
-      this.props.setPage("Explore")
-      console.log("EXPLORE: ", this.props.page)
-
         const styles = StyleSheet.create({
             container: { 
                 flexDirection: "column",
@@ -49,7 +42,6 @@ class ExplorePage extends Component {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-      setPage: (page) => dispatch(setPage(page)),
       changeSearchword: (word) => dispatch(changeSearchword(word))
     }
   };

frontend/pages/HomePage.js

@@ -5,7 +5,6 @@ import { createStore, applyMiddleware } from 'redux';
 import rootReducer from '../reducers/';
 import thunk from 'redux-thunk'
 import { connect } from 'react-redux';
-import { setPage } from '../actions/SetPageAction';
 import { MaterialDialog } from '../components/DetailedCard'
 
 
@@ -13,15 +12,7 @@ const store = createStore(rootReducer, applyMiddleware(thunk))
 
 class HomePage extends Component {
 
-    componentWillMount(){
-        this.props.setPage("Home")
-    }
-
     render(){
-
-      
-      this.props.setPage("Home")
-      console.log("HOME: ", this.props.navigation.state.routeName)
         return(
             <View style={{
                 paddingTop: 36,  
@@ -34,20 +25,9 @@ class HomePage extends Component {
                 <Text style={{fontSize: 16, textAlign: "center", padding: 8}}>Below you see the five most popular places</Text>
                 <Card />
             </View>
-           /*
-            
-           <Provider store = {store}>
-               <Test/>
-           </Provider>
-           */
         )
     }
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-      setPage: (page) => dispatch(setPage(page)),
-    }
-  };
 
-export default connect(null, mapDispatchToProps)(HomePage);
\ No newline at end of file
+export default HomePage;
\ No newline at end of file

frontend/reducers/FavouriteReducer.js

+const initState = {
+    favourite: "",
+}
+
+const favouriteReducer = (state = initState, action) => {
+    switch(action.type) {
+        case 'ADD_FAVOURITE':
+            return{ favourite: action.favourite }
+        case 'REMOVE_FAVOURITE':
+            return { favourite: "" }
+        default: return state;
+    };
+}
+
+export default favouriteReducer;
\ No newline at end of file

frontend/reducers/SetPageReducer.js

-const initState = {
-    page: "",
-}
-
-const setPageReducer = (state = initState, action) => {
-    switch(action.type) {
-        case 'SET_PAGE':
-            //console.log("HALLABALA", action.page)
-            return{page: action.page}
-        default: return state;
-    };
-}
-
-export default setPageReducer;
\ No newline at end of file

frontend/reducers/index.js

@@ -3,7 +3,7 @@ import destinationReducer from './DestinationReducer';
 import lengthReducer from './LengthReducer';
 import filterReducer from './FilterReducer';
 import { combineReducers } from 'redux';
-import setPageReducer from './SetPageReducer';
+import favouriteReducer from './FavouriteReducer';
 
 
 const rootReducer = combineReducers({
@@ -11,7 +11,7 @@ const rootReducer = combineReducers({
     sort: sortReducers,
     destination: destinationReducer,
     length: lengthReducer,
-    page: setPageReducer
+    favourite: favouriteReducer
 });
 
 export default rootReducer
\ No newline at end of file