forked from JetBrains/kotlin-wrappers
-
Notifications
You must be signed in to change notification settings - Fork 0
/
AxiosSearch.kt
146 lines (131 loc) · 4.04 KB
/
AxiosSearch.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
package example
/**
* An example of using axios to fetch remote data by Scott_Huang@qq.com (Zhiliang.Huang@gmail.com)
*
* This example queries the database of ZIP codes at http://ziptasticapi.com and displays the results.
*/
import kotlinext.js.*
import kotlinx.html.*
import kotlinx.html.js.*
import org.w3c.dom.*
import react.*
import react.dom.*
import kotlin.js.*
// Import the axios library (run "npm install axios --save" to install)
@JsModule("axios")
external fun <T> axios(config: AxiosConfigSettings): Promise<AxiosResponse<T>>
// Type definition
external interface AxiosConfigSettings {
var url: String
var method: String
var baseUrl: String
var timeout: Number
var data: dynamic
var transferRequest: dynamic
var transferResponse: dynamic
var headers: dynamic
var params: dynamic
var withCredentials: Boolean
var adapter: dynamic
var auth: dynamic
var responseType: String
var xsrfCookieName: String
var xsrfHeaderName: String
var onUploadProgress: dynamic
var onDownloadProgress: dynamic
var maxContentLength: Number
var validateStatus: (Number) -> Boolean
var maxRedirects: Number
var httpAgent: dynamic
var httpsAgent: dynamic
var proxy: dynamic
var cancelToken: dynamic
}
external interface AxiosResponse<T> {
val data: T
val status: Number
val statusText: String
val headers: dynamic
val config: AxiosConfigSettings
}
data class ZipResult(val country: String, val state: String, val city: String)
interface AxiosProps : RProps {
}
interface AxiosState : RState {
var zipCode: String
var zipResult: ZipResult
var errorMessage: String
}
external interface ZipData {
val country: String
val state: String
val city: String
}
class AxiosSearch(props: AxiosProps) : RComponent<AxiosProps, AxiosState>(props) {
override fun AxiosState.init(props: AxiosProps) {
zipCode = ""
zipResult = ZipResult("", "", "")
errorMessage = ""
}
private fun remoteSearchZip(zipCode: String) {
val config: AxiosConfigSettings = jsObject {
url = "http://ziptasticapi.com/" + zipCode
timeout = 3000
}
axios<ZipData>(config).then { response ->
setState {
zipResult = ZipResult(response.data.country, response.data.state, response.data.city)
errorMessage = ""
}
console.log(response)
}.catch { error ->
setState {
zipResult = ZipResult("", "", "")
errorMessage = error.message ?: ""
}
console.log(error)
}
}
private fun handleChange(targetValue: String) {
setState {
zipCode = targetValue
zipResult = ZipResult("", "", "")
errorMessage = ""
}
if (targetValue.length == 5) {
remoteSearchZip(targetValue)
}
}
override fun RBuilder.render() {
val infoText = "Enter a valid US ZIP code below"
div {
p { +infoText }
input(type = InputType.text, name = "zipCode") {
key = "zipCode"
attrs {
value = state.zipCode
placeholder = "Enter ZIP code"
title = infoText
onChangeFunction = {
val target = it.target as HTMLInputElement
handleChange(target.value)
}
}
}
br {}
h1 {
+"${state.zipCode} ZIP code belongs to: "
+"${state.zipResult.country} ${state.zipResult.state} ${state.zipResult.city} "
if (!state.errorMessage.isEmpty()) div {
attrs.jsStyle = js {
color = "red"
}
+"Error while searching for ZIP code: "
+state.errorMessage
}
}
}
}
}
fun RBuilder.axiosSearch() = child(AxiosSearch::class) {
}