Commit d549c73e authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

Added event component

parent 973c4471
......@@ -8,4 +8,5 @@ export const LOGOUT = 'LOGOUT';
export const OPENDRAWER = 'OPENDRAWER';
export const CALENDARRETREIVED = 'CALENDARRETREIVED';
export const CALENDARERROR = 'CALENDARERROR';
export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS';
export const LOADEVENTFAILURE = 'LOADEVENTFAILURE';
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,
data,
};
}
export function fail() {
return {
type: types.LOADEVENTFAILURE,
};
}
export function loadEvent(id) {
return (dispatch) => {
AsyncStorage.getItem(TOKENKEY)
.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());
},
);
},
)
.catch(
() => {
dispatch(fail());
},
);
dispatch(navigate('event'));
};
}
import React from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
const Event = event =>
<View>
<Text> <b>{event.title}</b> </Text>
<Text> {new Date(event.start).toISOString().substring(0, 10)}</Text>
<i>{event.description}</i>
<Text>-----------------------------------------</Text>
</View>
;
const Event = (props) => {
if (props.success) {
return (
<View>
<Text><h1>{props.data.title}</h1></Text>
<Text>{props.data.description}</Text>
<Text>Locatie: {props.data.location}</Text>
<Text>Prijs: {props.data.price}</Text>
<Text>Boete: {props.data.fine}</Text>
</View>
);
}
return (
<Text>Kon het evenement niet laden...</Text>
);
};
export default Event;
Event.propTypes = {
data: React.PropTypes.shape({
title: React.PropTypes.string.isRequired,
description: React.PropTypes.string.isRequired,
start: React.PropTypes.string.isRequired,
end: React.PropTypes.string.isRequired,
organiser: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string,
]).isRequired,
location: React.PropTypes.string.isRequired,
price: React.PropTypes.string.isRequired,
fine: React.PropTypes.string.isRequired,
}).isRequired,
success: React.PropTypes.bool.isRequired,
};
const mapStateToProps = state => ({
data: state.events.data,
success: state.events.success,
});
export default connect(mapStateToProps, () => ({}))(Event);
import React from 'react';
import { View, Text } from 'react-native';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions/events';
const EventCard = props =>
<View>
......@@ -8,6 +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)} />
</View>
;
......@@ -20,6 +22,11 @@ EventCard.propTypes = {
price: React.PropTypes.string,
id: React.PropTypes.number,
}).isRequired,
loadEvent: React.PropTypes.func.isRequired,
};
export default connect(() => ({}), () => ({}))(EventCard);
const mapDispatchToProps = dispatch => ({
loadEvent: id => dispatch(actions.loadEvent(id)),
});
export default connect(() => ({}), mapDispatchToProps)(EventCard);
import React, { Component } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import * as actions from '../actions/login';
......@@ -48,8 +47,8 @@ class Login extends Component {
}
Login.propTypes = {
loginState: PropTypes.string.isRequired,
login: PropTypes.func.isRequired,
loginState: React.PropTypes.string.isRequired,
login: React.PropTypes.func.isRequired,
};
const mapStateToProps = state => state.login;
......
import React from 'react';
import { Text, View } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import styles from '../style';
import * as actions from '../actions/navigation';
......@@ -17,7 +16,7 @@ const Sidebar = props =>
;
Sidebar.propTypes = {
navigate: PropTypes.func.isRequired,
navigate: React.PropTypes.func.isRequired,
};
const mapDispatchToProps = dispatch => ({
......
import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { logout } from '../actions/login';
const Welcome = props =>
......@@ -11,7 +10,7 @@ const Welcome = props =>
</View>;
Welcome.propTypes = {
logout: PropTypes.func.isRequired,
logout: React.PropTypes.func.isRequired,
};
const mapDispatchToProps = dispatch => ({
......
import React from 'react';
import { connect } from 'react-redux';
import Drawer from 'react-native-drawer';
import PropTypes from 'prop-types';
import Login from './Login';
import Welcome from './Welcome';
import Sidebar from './Sidebar';
import Event from './Event';
import Calendar from './Calendar';
import * as actions from '../actions/navigation';
......@@ -23,6 +23,8 @@ const sceneToComponent = (scene) => {
switch (scene) {
case 'welcome':
return <Welcome />;
case 'event':
return <Event />;
case 'eventList':
return <Calendar />;
default:
......@@ -53,10 +55,10 @@ const ReduxNavigator = (props) => {
};
ReduxNavigator.propTypes = {
currentScene: PropTypes.string.isRequired,
loggedIn: PropTypes.bool.isRequired,
drawerOpen: PropTypes.bool.isRequired,
updateDrawer: PropTypes.func.isRequired,
currentScene: React.PropTypes.string.isRequired,
loggedIn: React.PropTypes.bool.isRequired,
drawerOpen: React.PropTypes.bool.isRequired,
updateDrawer: React.PropTypes.func.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(ReduxNavigator);
import * as types from '../actions/actionTypes';
const initialState = {
data: {
title: '',
description: '',
start: '',
end: '',
organiser: '',
location: '',
price: '',
fine: '',
},
success: false,
};
export default function loadEvent(state = initialState, action = {}) {
switch (action.type) {
case types.LOADEVENTSUCCESS:
return {
data: action.data,
success: true,
};
case types.LOADEVENTFAILURE:
return {
...state,
success: false,
};
default:
return state;
}
}
import login from './login';
import navigation from './navigation';
import events from './events';
import calendar from './calendar';
export {
login,
navigation,
events,
calendar,
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment