import React , { useState } from "react" ; import { View , Text , Alert } from "react-native" ; import { Form } from "native-base" ; import styled from "styled-components" ; import Input from "./../components/input" ; import { graphql , commitMutation } from "react-relay" ; import Environment from "./../relay/environment" ; import Button from "./../components/button" ; import Icon from "react-native-vector-icons/Ionicons" ; import IconBody from "react-native-vector-icons/Entypo" ; import { NavigationScreenProp } from "react-navigation" ; export const navigationOptionsCreatePlanet = ( { navigation } ) => ( { headerStyle : { backgroundColor : "#3479ff" } , headerTitle : ( < View style = { { flex : 1 } } > < Text style = { { color : "white" , fontWeight : "500" , fontSize : 24 , alignSelf : "center" } } > Create Planet < /Text> < /View>), headerLeft : ( < View style = { { flex : 1 } } > < IconMenuLeft onPress = { ( ) => navigation . goBack ( ) } color = "white" size = { 40 } name = "md-arrow-round-back" / > < /View>), headerRight : < View style = { { flex : 1 } } /> } ) ; const IconMenuLeft = styled ( Icon ) `
  padding-left: 10px;
` ; const Container = styled ( View ) `
  height: 100%;
  background: #463064;
  justify-content: flex-start;
  align-items: center;
` ; const ContainerForm = styled ( Form ) `
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
` ; const ContainerButton = styled ( View ) `
  display: flex;
  margin-top: 40px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
` ; const ButtonRegister = styled ( Button ) `
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 35%;
` ; const IconAddPlanet = styled ( IconBody ) `
  font-size: 150px;
  color: white;
` ; type Props = { navigation : NavigationScreenProp < any , any > ; } ; const CreatePlanet = ( { navigation } ) => { const [ name , setName ] = useState ( "" ) ; const [ description , setDescription ] = useState ( "" ) ; const [ image , setImage ] = useState ( "" ) ; function _inputChange ( name , description , image ) { if ( name ) { setName ( name ) ; } else if ( description ) { setDescription ( description ) ; } else { setImage ( image ) ; } } const mutation = graphql `
    mutation CreatePlanetQuery($input: createPlanetMutationInput!) {
      createPlanetMutation(input: $input) {
        error
        planets {
          id
          name
          description
          img
        }
      }
    }
  ` ; function updater ( store ) { const root = store . getRoot ( ) ; const newPlanets = store . getRootField ( "createPlanetMutation" ) . getLinkedRecords ( "planets" ) ; root . setLinkedRecords ( newPlanets , "planets" ) ; } const createPlanet = ( ) => { commitMutation ( Environment , { mutation , variables : { input : { name , description , img : image } } , updater , onCompleted : async ( response , errors ) => { if ( errors ) { return Alert . alert ( errors . toString ( ) ) ; } if ( ! response . createPlanetMutation . planets ) { return Alert . alert ( response . createPlanetMutation . error . toString ( ) ) ; } return navigation . goBack ( ) ; } , onError : ( err ) => { return Alert . alert ( err . toString ( ) ) ; } } ) ; } ; return ( < Container > < IconAddPlanet name = "add-to-list" / > < ContainerForm > < Input tintColor = "white" nameInput = "Name" value = { name } onChangeText = { ( value ) => _inputChange ( value , null , null ) } /> < Input tintColor = "white" nameInput = "Description" value = { description } onChangeText = { ( value ) => _inputChange ( null , value , null ) } /> < Input nameInput = "Image link" value = { image } onChangeText = { ( value ) => _inputChange ( null , null , value ) } /> < ContainerButton > < ButtonRegister light bordered onPress = { createPlanet } color = "#463064" nameButton = "Create" / > < /ContainerButton> < /ContainerForm> < /Container>); } ; export default CreatePlanet ;