airbridge-react-native-sdk/qa/source/pages/TrackingLink.js

Airbridge SDK for React Native

import React, { Component } from 'react'
import { View } from 'react-native'

import { Styles } from '../common/Styles'
import { Colors } from '../common/Colors'
import CustomButton from '../component/CustomButton'
import CustomTextInput from '../component/CustomTextInput'

import { Airbridge, AirbridgeTrackingLinkOption } from 'airbridge-react-native-sdk';

import VerticalPreference from '../component/VerticalPreference';

export default class TrackingLinkPage extends Component {

  constructor(props) {
    super(props);

    this.state = {
      channel: '',
      option: '',
      shortURL: '',
      qrcodeURL: ''
    }
  }

  request = () => {
    var outputChannel = this.state.channel.trim()
    var flatOption = this.state.option.trim()
    outputChannel = outputChannel.length == 0 ? null : outputChannel
    flatOption = flatOption.length == 0 ? '{}' : flatOption

    console.log(`outputChannel: ${outputChannel}`)
    console.log(`flatOption: ${flatOption}`)

    if (outputChannel == null || flatOption == null) {
      return
    }

    var outputOption = null
    try {
      outputOption = JSON.parse(flatOption)
    } catch (error) {
      console.log(`TrackingLinkPage request error : ${error}`)
      return
    }

    if (outputOption == null) {
      return
    }

    Airbridge.createTrackingLink(
      outputChannel,
      outputOption,
      (airbridgeTrackingLink) => {
        console.log(`airbridgeTrackingLink. shortURL: ${airbridgeTrackingLink.shortURL}`)
        this.setState({
          shortURL: airbridgeTrackingLink.shortURL,
          qrcodeURL: airbridgeTrackingLink.qrcodeURL,
        })
      }
    )
  }

  clear = () => {
    this.setState({
      shortURL: '',
      qrcodeURL: '',
    })
  }

  request_tmp1 = () => {
    this.request_template(
      'test',
      {
        [AirbridgeTrackingLinkOption.CAMPAIGN]: 'test_campaign',
        [AirbridgeTrackingLinkOption.AD_GROUP]: 'request_1_group',
      }
    )
  }

  request_tmp2 = () => {
    this.request_template(
      'test',
      {
        [AirbridgeTrackingLinkOption.CAMPAIGN]: 'test_campaign',
        [AirbridgeTrackingLinkOption.AD_GROUP]: 'request_2_group',
      }
    )
  }

  request_template = (channel, option) => {
    Airbridge.createTrackingLink(
      channel,
      option,
      (airbridgeTrackingLink) => {
        console.log(`airbridgeTrackingLink. shortURL: ${airbridgeTrackingLink.shortURL}`)
        this.setState({
          shortURL: airbridgeTrackingLink.shortURL,
          qrcodeURL: airbridgeTrackingLink.qrcodeURL
        })
      }
    )
  }

  render() {
    return (
      <View style={Styles.container}>
          <CustomTextInput
              title={'channel'}
              placeholder={'channel'}
              accessibilityLabel='channel'
              onChangeText={newText => this.setState({ channel: newText })}
              value={this.state.value} />
          <View style={{ margin: 4 }} />
          <CustomTextInput
              title={'option'}
              placeholder={'option'}
              accessibilityLabel='option'
              onChangeText={newText => this.setState({ option: newText })}
              value={this.state.value} />
          <View style={{ margin: 8 }} />
          <CustomButton
              buttonColor={Colors.blue}
              title={'REQUEST'}
              titleColor='white'
              accessibilityLabel={'REQUEST'}
              onPress={() => this.request()} />
          <CustomButton
              buttonColor={Colors.blue}
              title={'clear'}
              titleColor='white'
              accessibilityLabel={'clear'}
              onPress={() => this.clear()} />

          <View style={{ margin: 16 }} />
          <VerticalPreference 
            title={'shortUrl'} 
            text={this.state.shortURL}
            accessibilityLabel={'shortUrl'} />
          <VerticalPreference 
            title={'qrUrl'} 
            text={this.state.qrcodeURL}
            accessibilityLabel={'qrUrl'} />

          <View style={{ margin: 16 }} />
          <CustomButton
              buttonColor={Colors.blue}
              title={'request-tmp1'}
              titleColor='white'
              accessibilityLabel={'request-tmp1'}
              onPress={() => this.request_tmp1()} />
          <CustomButton
              buttonColor={Colors.blue}
              title={'request-tmp2'}
              titleColor='white'
              accessibilityLabel={'request-tmp2'}
              onPress={() => this.request_tmp2()} />

      </View>
    )
  }
}