FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
JavaScript2019/solutions/userDirectory/App.js at master · lindakovacs/JavaScript2019 · GitHub
lindakovacs
/
JavaScript2019
Public
Notifications
You must be signed in to change notification settings
Fork
11
Star
0
Code
Pull requests
0
Actions
Projects
Security and quality
0
Insights
Additional navigation options
Code
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
JavaScript2019
/
solutions
/
userDirectory
/
App.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
114 lines (107 loc) · 2.59 KB
Breadcrumbs
JavaScript2019
/
solutions
/
userDirectory
/
App.js
Copy path
File metadata and controls
114 lines (107 loc) · 2.59 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
import
React
from
'react'
;
import
{
StyleSheet
,
Text
,
View
,
FlatList
,
SafeAreaView
}
from
'react-native'
;
import
{
ListItem
,
SearchBar
}
from
'react-native-elements'
;
import
axios
from
'axios'
;
export
default
class
App
extends
React
.
Component
{
state
=
{
userInput
:
''
,
allUsers
:
[
]
,
users
:
[
]
,
isLoading
:
true
,
hasError
:
false
}
;
componentDidMount
(
)
{
axios
(
'https://randomuser.me/api?results=100&inc=name,email,picture'
)
.
then
(
response
=>
{
this
.
setState
(
{
allUsers
:
response
.
data
.
results
,
isLoading
:
false
,
hasError
:
false
}
)
;
}
)
.
catch
(
(
)
=>
{
this
.
setState
(
{
isLoading
:
false
,
hasError
:
true
}
)
;
}
)
;
}
filter
=
userInput
=>
{
// console.log(userInput);
// this.setState({
// userInput
// });
const
input
=
userInput
.
toLowerCase
(
)
;
this
.
setState
(
{
userInput
,
users
:
this
.
state
.
allUsers
.
filter
(
user
=>
{
const
name
=
`
${
user
.
name
.
first
}
${
user
.
name
.
last
}
`
;
return
name
.
match
(
input
)
;
}
)
}
,
(
)
=>
console
.
log
(
this
.
state
.
users
)
)
;
}
;
renderHeader
=
(
)
=>
{
return
(
<
SearchBar
placeholder
=
"Type Here..."
lightTheme
round
value
=
{
this
.
state
.
userInput
}
onChangeText
=
{
this
.
filter
}
autoCorrect
=
{
false
}
/>
)
;
}
;
renderSeparator
=
(
)
=>
{
return
(
<
View
style
=
{
{
height
:
1
,
width
:
'86%'
,
backgroundColor
:
'#CED0CE'
,
marginLeft
:
'14%'
}
}
/>
)
;
}
;
render
(
)
{
const
{
allUsers
,
isLoading
,
users
}
=
this
.
state
;
return
!
isLoading
?
(
<
SafeAreaView
>
{
this
.
renderHeader
(
)
}
<
FlatList
data
=
{
users
.
length
>
0
?
users
:
allUsers
}
renderItem
=
{
(
{
item
}
,
index
)
=>
{
return
(
<
ListItem
roundAvatar
title
=
{
`
${
item
.
name
.
first
}
${
item
.
name
.
last
}
`
}
subtitle
=
{
item
.
email
}
leftAvatar
=
{
{
source
:
{
uri
:
item
.
picture
.
thumbnail
}
}
}
containerStyle
=
{
{
borderBottomWidth
:
0
}
}
key
=
{
index
}
/>
)
;
}
}
keyExtractor
=
{
item
=>
item
.
email
}
ItemSeparatorComponent
=
{
this
.
renderSeparator
}
/>
</
SafeAreaView
>
)
:
(
<
SafeAreaView
>
<
Text
>
Data
</
Text
>
</
SafeAreaView
>
)
;
}
}
const
styles
=
StyleSheet
.
create
(
{
container
:
{
flex
:
1
,
backgroundColor
:
'#fff'
,
alignItems
:
'center'
,
justifyContent
:
'center'
}
}
)
;
Back
|
FazBrowse Home
|
New Git URL