I'm working on a react-native app that fetches event data from a wordpress endpoint.
Below is the JSON I receive from the wordpress API. How can I restructure it to fit into my calendar component?
Where should I handle this restructuring in my app? Currently, I dispatch an action in my app.js:
eventsFetchData(
"http://wordpress.rguc.co.uk/index.php/wp-json/tribe/events/v1/events"
)
);
export default class App extends Component {
render() {
return (
<Provider store={store}>
<AppNavigation />
</Provider>
);
}
}
My event reducer updates the state on success:
export function events(state = [], action) {
switch (action.type) {
case 'EVENTS_FETCH_DATA_SUCCESS':
return {
...action.events
};
default:
return state;
}
}
In my page component, I use mapStateToProps:
const mapStateToProps = state => {
return {
events: state.events,
};
};
The desired format for the JSON data is as follows (start date and title):
{{
"2012-05-08(startdate)": {
dots: [
{
key: "vacation(title)",
color: "blue",
selectedDotColor: "white"
},
{
key: "massage",
color: "red",
selectedDotColor: "white"
}
],
selected: true
},
"2012-05-09": {
dots: [
{
key: "vacation",
color: "blue",
selectedColor: "red"
},
{
key: "massage",
color: "red",
selectedColor: "blue"
}
],
disabled: true
}
}}
This is the current data structure I have and I need to extract the title and startdate fields into the format mentioned above:
{
"events":[
{
...
},
{
...
},
{
...
}
],
"rest_url":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/events\/?page=1&per_page=10&start_date=2017-12-28 23:59:00&end_date=2019-12-29 14:52:47",
"total":"3",
"total_pages":1
}