App after first backend integrations

App.js

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import StopWatch from './StopWatch';
import Car from './Car';
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import { createParking, updateParking } from './src/graphql/mutations';

// Configure your API
import config from './aws-exports'
API.configure(config)

const initialParkingAction = {
  licensePlate: "X-999-XX",
  userID: 101010,
  latitude: 52.1278555,
  longitude: 5.0499408,
  createdAt: new Date().toLocaleString(),
  stoppedAt: "-",
  state: "START"
};

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      parkingActionStarted: false,
      licenseplate: "X-999-XX"
    };

    this.parkingAction = { ...initialParkingAction };

    this.handleParkingActionChange = this.handleParkingActionChange.bind(this);
  }

  handleParkingActionChange(isStartParkingAction) {
    this.setState({parkingActionStarted: isStartParkingAction});
    
    if (isStartParkingAction) {
      this.createParking();
    } else {
      this.stopParking();
    }
  }

  createParking = async () => {
    this.parkingAction = { ...initialParkingAction };
    this.parkingAction.createdAt = new Date().toLocaleString();
    const createParkingInput = {
      input: this.parkingAction
    };
    
    const newParking = await API.graphql(graphqlOperation(createParking, createParkingInput));
    this.parkingAction.id = newParking.data.createParking.id;
    
    // For debugging purposes. You will able to see the result 
    // of your operations
    console.log(JSON.stringify(newParking));
  };

  stopParking = async () => {
    this.parkingAction.stoppedAt = new Date().toLocaleString();
    this.parkingAction.state = "STOP";
    const updateParkingInput = {
      input: this.parkingAction
    };
  
    const updatedParking = await API.graphql(graphqlOperation(updateParking, updateParkingInput));

    // For debugging purposes. You will able to see the result 
    // of your operations
    console.log(JSON.stringify(updatedParking));
  };

  render() {
    const startedParkingAction = this.state.parkingActionStarted;
    
    return (
      <View style={styles.container}>
        <View style={styles.licenceplateContainer}>
            <Text style={styles.licenseplate}>{this.state.licenseplate}</Text>
        </View>
        <Car
          startedParking={startedParkingAction}/>
        <View style={styles.bottom}>
          
          <StopWatch
            onParkingActionChange={this.handleParkingActionChange}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  licenceplateContainer: {
    marginTop: 50,
    alignItems: 'center',
    padding: 15,
    backgroundColor: '#FAA421',
    borderRadius: 5,
  },
  licenseplate: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#000'
  },
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  bottom: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 36,
  }
});